►
Description
Karthig Balendran and Allen Snow from Microsoft share the Microsoft identity platform integration for the Teams Toolkit.
Resources:
Teams Toolkit blog details https://aka.ms/AAaexlb
Teams Toolkit docs https://aka.ms/AAaej2n
This demo is taken from the November Microsoft Teams community call.
To join future calls, please download the series at https://aka.ms/microsoftteamscommunitycall
Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog
A
A
A
So
I
hit
create
a
new
teams
app
and
this
is
going
to
be
a
tab
and,
let's
call
it
my
dev
community
app-
and
this
is
a
personal
tab
and
this
tab
is
going
to
require
single
sign-on,
authentication,
perfect
and,
if
you've
built
an
app
that
does
sso
before
you
already
know
that
you
need
to
go
to
the
azure
portal
and
provision
an
app
registration
and
configure
about
six
pages.
There
are
about
20-ish
steps.
A
I've
already
reserved
this
ngrok
url
if
you're
not
using
ngrok,
it's
a
tunneling
service
that
gives
you
a
domain
name
perfect,
and
now
we
are
just
going
to
go
and
provision
our
aed
app
registration,
as
you
can
see,
we're
getting
back
a
client
id
and
app
by
the
uri
direct
uri
using
the
domain
name
that
I
just
provided
and
a
secret
everything's
going
to
be
flushed
after
the
skull.
So
you
can't
use
any
of
this.
A
I'm
going
to
hit
finish
now,
I'm
just
going
to
now
select
where
this
gets
saved
and
hopefully
ta-da.
There
is
the
project
here
we
go
now.
The
first
thing
I'm
going
to
do
is
start
installing
the
libraries,
because
it
takes
a
little
bit
of
time
and
there
are
actually
two
project
folders
that
get
created
with
an
sso
project.
The
api
server
package,
all
right,
oops
already
done
that
okay
npm
start,
and
there
is
another
project
that
is
contained
in
the
source
folder.
A
So
the
api
server
has
one
project
you
need
to
install
and
the
source
folder
has
another,
and
this
contains
the
source.
Folder
contains
the
the
server
logic
that
serves
your
front
end
and
it
is
a
react,
scripts
app
and
it's
super
super
minimal
and
while
that
loads,
I'm
also
going
to
open
up
a
third
terminal
window
and
run
ngrok,
and
I
think
I
might
have.
A
A
This
is
still
installing
that
is
installed
and
the
server
is
running
at
port
5000
and
before
we
begin
I'm
going
to
do
one
thing:
our
launch.json
script,
which
launches
the
app
when
you're
ready
launches
in
chrome
by
default,
I'm
going
to
change
this
to
edge,
and
I
have
the
edge
debugger
for
visual
studio
code
already
installed
on
my
machine
and
the
reason
I'm
doing
this
is
because
we
have
ite
admin
policies
that
require
us
to
open
teams.
The
web
client
in
edge,
not
chrome
at
microsoft.
So
that's
why
I'm
doing
it.
A
A
A
Okay,
if
you
open
up
your
source
directory
and
then
components
most
of
the
logic
that
you
need
to
pay
attention
to
is
going
to
be
in
this
tab,
dot,
js
file,
I'm
going
to
assume
that
most
people
here
are
already
familiar
with
react.
I'm
not
going
to
use
this
as
an
opportunity
to
go
over
react.
Oh
perfect,
never
mind!
This
is
all
done
sooner
rather
than
later,
and
once
this
project
is
once
this
extensions
update
is
available
for
you
and
you
try
it
you
decide
to
try
it
out.
A
What
I
recommend
is
just
starting
with
the
tab.js
file
and
just
walking
through
the
code
top
to
bottom.
We've
added
a
lot
of
comments
in
here
so
that
you
can
just
walk
through
this
one
file
here
and
it
should
walk
you
through
everything.
You
need
to
know
to
understand
how
tab
sso
works
and
I'm
going
to
start
doing
that
right
now
for
you.
So
the
first
thing
you
want
to
look
at
is
this
component
did
mount
function.
This
is
a
react,
lifecycle
method
that
gets
called
every
time.
A
There
is
a
change
to
the
underlying
data
or
your
the
dom
initially
gets
mounted
and
before
we
render
any
of
the
html
content,
this
function
will
fire
now.
What
we're
doing
here
is
we
are
a
initializing,
the
teams
sdk
and
we're
getting
the
context
for
the
session,
and
once
we
get
the
context
we're
setting
it
to
state
now
the
teams
context
object
contains
some
basic
information.
A
A
A
A
Perfect,
we've
got
the
sso
token,
and
now
we
are
going
to
consent
to
graph,
because
this
app
actually
does
two
things.
It
performs
sso
and
then
exchanges
the
ssl
token
for
graph
access
token,
so
that
this
app
can
retrieve
the
user
profile
photo
and
display
it
in
the
teams
app,
which
is
what
we're
doing
and
that's
not
something
you
can
do
without
calling
graph.
A
So
how
do
we
do
all
this?
Now?
Let's
go
back
to
the
code
and
see
what's
going
on
great
and
I
believe
we
left
off
at
the
sso
login
success
function
and
if
you
recall,
we
had
to
consent
twice
once
we
had
to
consent
to
sso
and
that
happens
immediately
after
we
performed
this
get
off
token
call,
and
you
shouldn't
have
to
do
that
again
until
your
token
expires,
and
afterwards
we
have
to
consent
to
graph,
and
that
happens
afterwards,
so
get
sso,
ssl
login
success.
What
happens
after
ssl
login
success?
A
As
you
can
see,
we
are
calling
this
api
called
get
graph
access
token
and
we're
passing
ssl
token,
and
this
is
something
you're,
just
calling
your
own
back-end
server
and
it's
going
to
have
the
same
url
as
the
app
is
running
from,
and
even
though
the
api
server
is
a
separate
project.
That's
running
in
a
separate
port,
we're
able
to
use
the
exact
same
url,
because
in
this
package.json
we're
specifying
that
localhost
5000
is
going
to
be
a
a
proxy
server.
A
A
A
Okay,
so
this
line
here
is
checking
to
see
if
we
received
an
invalid
grant
error
or
an
interaction
required
error
back
from
the
graph
access
point,
and
this
error
means
either
you.
It
means
you
haven't,
consented
to
the
app
and
you
need
to
consent
to
this
app.
You
need
to
contact
sent
to
this
app
because
either
your
admin
hasn't
pre-consented
to
this
app,
which
is
very,
very
common
or
your.
It
admin
requires
that
you
perform
multi-factor,
authentication
anytime.
You
are
accessing
this
data,
which
is
also
a
very
common
use
case.
A
So
if
we
catch
either
of
these
errors,
we're
going
to
send
back
a
403
with
this
consent
required
error
message
and
the
client
will
handle
that
or
if
everything's
okay
for
the
most
part,
we're
just
going
to
send
the
graph
access
token
back
as
the
data
object,
and
if
there's
an
unknown
error,
we're
just
going
to
throw
a
500..
Now,
let's
get
back
to
the
client
code,
okay,
so
what
you
guys
saw
was
we
returned
a
consent
required
error
back
and
we're
going
to
handle
it.
A
Now,
we're
going
to
check
to
see
if
the
previous
state
did
not
have
a
graph
access
token,
but
we
now
do
and
if
we
do
we're
going
to
say
call
graph
from
the
client.
Okay,
now
we're
going
to
call
graph
from
the
client
and
we're
going
to
use
the
graph
graph
access
token
that
we've
saved
in
state
to
retrieve
our
profile
photo
and
we're
going
to
take
the
blob
data.
A
A
Now
these
are
the
fields
that
get
created
that
are
part
of
your
azure
app
registration.
I'm
going
to
stop
sharing
my
screen
so
that
you
can
okay
there
we
go
okay.
Where
do
you
want
me?
Click
first,
oh!
No!
This
is
perfect.
So,
as
you
can
see,
we
created
this
sso
app
registration
on
the
backend,
and
this
is
powering
the
teams
app
that
you
just
saw
so
all
of
the
client
ids
are
here.
If
you
lose
it,
the
redirect
uris.
A
If
you
see
the
application
id
uri
field
under
in
the
essentials
section
of
this
app
registration,
you
can
see
teamflix.io
if
you
don't
have
a
paid
subscription
to
ngrok
or
if
you're,
just
changing
your
domain
name.
A
lot
you're
gonna
have
to
come
here
and
update
that
field,
as
well
as
the
redirect
uri
every
single
time.
You
update
it.
So
it's
good
to
have
a
fixed
domain
name
that
you
don't
have
to
update
all
the
time.
If
you're
going
to
be
doing
this
alan,
would
you
mind
clicking
on
api
permissions.
A
By
default,
you'll
get
user
dot,
read
we've
already
added
some
here
just
for
fun
at
another
point,
but
if
you
would
like
to
request
more
permissions,
what
you
need
to
do
is
come
to
this
page
hit.
Add
permissions,
hit
microsoft
graph
hit
delegated
permissions,
and
you
can
just
select
the
permissions
that
you'd
like,
but
if
you
notice
on
the
right-hand
column,
where
it
says
admin
consent
required,
none
of
these
require
admin,
consent,
meaning
the
end
user
can
consent
to
the
app
themselves.
A
However,
and
we
find
clicking
on
something
there,
you
go
admin
unit
read
all
if
you
were
to,
for
example,
request
this
permission,
the
end
user,
a
standard
user
will
not
be
able
to
install
the
teams
app
and
actually
use
it.
They
can
install
it,
but
they'll
be
greeted
with
a
message
that
says
your
admin
must
pre-consent
to
this
app
or
your
admin
must
consent
to
this
app.
A
So
if
you're
building
apps
for
the
team
store,
you
may
want
to
avoid
using
these
permissions
unless
you
have
a
way
to
access
those
admins
and
ask
them
to
pre-consent
to
your
app
if
you're,
building
lob
apps.
This
should
not
be
a
problem
because,
generally
admins
will
be
pre-consenting
to
your
app
or
you'll
know
who
they
are,
so
they
can
do
that
if
you're
building,
3p
apps
generally
you'd
want
you
want
to
stick
with
permissions
that
don't
require
admin
consent.
A
So
for
each
of
these
permissions
you
can
just
copy
and
paste
them,
and
I'm
going
to
go
back
to
sharing
my
screen.
Now
you
can
copy
and
paste
those
permissions
into
the
env
file
in
the
api
server
project
and
just
separate
them
with
the
space,
and
that's
how
you
request
more
permissions
and
the
next
time
that
a
user
tries
to
load
up
your
app
they'll,
be
greeted
with
a
consent,
dialogue
again
asking
to
consent
to
those
permissions,
and
that
is
this
feature
in
a
nutshell.