►
Description
Creating a new or exposing one of your existing SPFx web applications in a Teams tab and you need to verify user is signed-in? In this 20-minute demo, Wictor Wilén shows tab features in preview version (2.13.0-preview2) of yo Teams that address SSO requirements. This developer demo shows simplified behind-the-scenes configuration and token management necessary to ensure the people viewing your app exposed in a Teams tab are authorized to view it. Look for a release build of yo Teams with tab SSO enablement in mid-April. This demo is extracted from the bi-weekly Microsoft 365 PnP community – General M365 Developer Special Interest Group (SIG) call recorded April 2, 2020.
Presenter: Wictor Wilén (Avanade) | @wictor
Supporting materials:
• PnP Weekly - Ep 77 | https://youtu.be/gq8AgxjnTcE
• Getting Started using yo Teams | https://youtu.be/w0OrFkzNC10
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2
Learn more about the SharePoint developer community at: http://aka.ms/m365pnp.
A
What
we
want
to
do
today
is
use
the
new
feature,
which
is
in
preview
to
create
a
tab
which
uses
the
single
sign-on
features
in
micro
teams.
It's
always
been
sort
of
a
problem
or
or
not
a
problem,
but
but
you
had
to
do
quite
a
lot
of
work
to
get
single
sign-on
to
work,
to
actually
verify
that
the
user
is
signed
in
when
you're
creating
a
team's
tab.
If
you
using
sharp
on
framework,
you
get
all
of
that
for
free,
but
assuming
you're
building
an
external
application.
A
You're
converting
one
of
your
existing
web
applications,
for
instance,
into
the
team's
tab,
or
you
want
to
do
that,
provided
host
way
of
building
applications
both
for
sharepoint
and
teams.
You
you
need
to
set
up
single
sign-on
four
to
four
tabs
and
that's
a
new
feature.
That's
available
in
developer
preview
right
now,
and
it
requires
you
to
do
some
configuration
in
the
natural
ad
in
the
create
an
application.
Then
use
the
yo
team's
generative
scaffold
out
the
project,
and
then
that
will
show
you
all
the
code
that
is
required
for
you.
A
But
it
will
also
discuss
some
of
the
issues
that
Mike
Rice
once
you
start
when
once
you've
done
this
and
want
to
do
more
with
it
essentially,
which
are
someone
on
the
some
of
their
own
limitations
right
now,
some
of
it
are
limitations
in
Azure
ad
and
the
service
itself.
Let's,
let's
get
started
so
I
have
a
team's,
the
talent,
harem
of
teams
and
and
the
creative
team,
and
we
want
to
create
a
simple
tab
here,
but
we
can
verify
that
we
actually
signed
in
so
that
we're
gonna
do
all
that.
A
But
to
do
that,
the
first
thing
we
need
to
do.
We
need
to
host
this
application
somewhere
and,
as
you
know,
the
team's
tab
is
sort
of
an
iframe
to
somewhere
else
and
to
do
this,
I
actually
prepared
I
using
an
grok,
so
I
can
host
it
locally.
Here
we
need
a
public
address
of
all
the
URLs
I'm
using
and
rock
and
I
set
up
a
reserve
in
the
name
here,
for
this
demo
called
tagged,
a
mountain
Rock,
dot
IO.
A
So
this
is
the
URL
I
need
to
have,
and
there's
a
couple
of
this
is
super
important
that
you
decide
this
beforehand.
Of
course
you
can
change
it
later,
but
it
will
affect
some
of
the
decisions
that
you
do.
The
second
thing
you
cannot
use
as
your
websites
I'll
stay
that
say
that
already
here,
I
come
back
to
that's.
Why
it
so
later,
so
don't
use
anything.
My
application,
natashawehbe
size,
dot,
nuts.
You
need
something
else,
but
we'll
come
back
to
that.
One.
That
next
step
you
do.
A
Is
you
go
to
ad
in
a
portal
that
usher
comes?
You
login
to
your
a380
and
you
go
to
client
app
registrations
and
create
a
new
application
there,
let's
see
and
will
let's
create
a
new
one,
so
I
create
click
on
new
registration,
P
and
B
tab
SSL
demo
then
I
choose
that
I
want
to
use
this
for
any
organization
of
directory,
soroban
multi-tenant
solution,
then
I'll
be
don't
have
to
do
anything
more
than
this
I
don't
have
to
specify
the
redirect
URI
here
click
register.
A
Let
me
create
my
application,
the
nernst
a
couple
of
other
things.
We
need
to
do
with
this
one,
which
you
typically,
what
you
done
is
you
used
API
permissions
and
then
and
grab
the
permissions
to
this
one
we'll
do
that
as
well.
But
the
first
thing
we
need
to
do
is
that
we
need
to
expose
an
API
here.
Of
course,
I
need
to
save
the
application
ID.
So
let's
actually
do
that.
So
we
have
it.
Let's
open
up
a
notepad
and
save
it
for
later.
No.
A
Let's
move
that
we
know
over
here
and
save
it
like
that.
I
want
my
hat
by
D.
We
need
this
one
in
a
second
like
that,
then
we
go
to
the
explosion
API
as
mentioned,
and
what
we
need
to
do
here
is
the
first
thing
is
to
define
an
application.
Id
URI,
that's
the
small
thing
you
see
up
here:
I
click
on
set.
What
would
happen
is,
of
course,
after
ad
is
great,
will
suggest,
suggest
a
name
for
us
an
enormous
circumstances.
This
will
work
perfectly
fine.
A
We
can
tweak
it
didn't
have
something
else
here,
but
when
it
comes
to
teams
as
cell
tabs,
when
you
need
to
do
something
differently
in
between
here,
so
let's
zoom
in
here
in
between
API
colon,
slash
slash
in
between
here,
we
need
to
add
our
dns
or
the
URL
of
our
site.
So
what
I'll
do
is
add:
tab,
demo,
egg
rock
dot,
io
/,
let's
zoom
in
again,
and
take
a
look
at
that.
So
what
I
did
here,
I,
let
the
API
starts
BSS
I,
let
the
goo-goo
it
here,
which
is
my
top
ID
BSS.
A
But
what
I
did
is
that
I
actually
add
my
URL
in
here
and
a
stash,
and
that
this
is
super
important,
because
teams
will
actually
use
this
AK
runtime
to
verify
that
the
application
ID
URI
for
the
application
using
and
the
tab.
You
want
to
show
that
those
URLs
are
the
same
for
security
reasons.
So
I'll
take
this
one
click
Save
and
go
back
here
and
paste
it
in
here.
Just
so,
we
have
it
for
later.
So
that's
the
second
step
you
need
to
do
after
register
in
your
half
and
so
a
couple
of
things.
A
A
In
this
case,
you
are
not
allowed
to
use
multiple
application,
ID
URIs
here,
which
might
be
an
issue
if
you
have
a
test
devastating
environment,
which
means
that
you
need
to
setup
multiple
applications
and
you
need
to
have
a
left
in
your
build
pipeline
or
whatever,
when
you,
when
you're,
actually
scheduling
out
your
applications
later,
but
that
is
sort
of
an
extra
addition.
You
can
use
a
Friday
night
and
exercise
on
that.
Next.
A
Up,
we
need
to
do
here
is
to
add
a
scope:
I
need
to
create
a
custom
scope
for
the
AP
I'm
exposing
here,
so
let
and
it
has
to
be
called
access,
as
you,
sir,
so
access
underscore
s
underscore
user,
then
I
need
to
choose
that
consent.
Here,
both
admin
users
should
be
able
to
consent.
This
and
I
need
to
write
some
consent
stuff
here
for
admin
and
just
like
this
lorem
ipsum.
A
This
is,
of
course
you
should
have
pretty
descriptions
in
here,
so
that
I'd
mean
that
the
user
consent
screens
looks
good,
and
why
do
they
need
consent?
This
and,
of
course
it
has
to
be
enabled.
Then
we
click
add
scope.
So
that
means
we.
We
have
we
have
added
the
scope
here,
as
you
can
see,
it's
enabled
for
that
app
ID
your
eye
and
and
if
we
scroll
all
the
way
here,
you
can
see
we
have
that
by
the
your
I,
slash
our
scope.
Name
axis
underscore
s
underscore
user.
A
The
next
thing
I
need
to
do
is
that
I
need
to
authorize
to
client
application
and
the
tooth
to
client
applications
is
the
the
team's
desktop
and
mobile
application
and
the
team's
web
application.
There
are
two
actually
two
different
Asha
radio
applications
so
and
I
have
the
goods
somewhere.
Here,
let's
see
they.
These
are,
of
course,
in
official
documentation,
but
the
first
one
is
this
one
that
you
could.
If
you
quick,
you
can
remember
that
one
until
you
do
this,
but
yes,
it's
in
the
documentation,
it
will
be
in
this
recording.
A
So
that's
what
you
have
in
here
and
I
will
need
to
connect
that,
to
my
scope,
that
I
just
created
so
do
add
application
and,
yes,
there's
no
good
sort
of
your
cup.
So
you
know
what
client
this
is
you
essentially
need
to
look
into.
The
documentation
at
Doc's
are
calm
for
those
two,
and
then
we
have
the
other
one,
which
is
not
a
good
here,
and
this
one
and
I
connected
to
that
scope
as
well
and
click
Add
application.
A
So
that
was
sort
of
the
third
step.
I
need
to
do.
First,
we
created
application.
We
create
generated
up
by
the
your
eye.
We
generated
the
scope,
we
added
the
authorize,
client
applications
and
now
the
final
step
we
need
to
do
is
grant
some
permissions,
and
this
sound
sounds
like
if
you
are
familiar
with
what
you
sort
of
deal
with
when
you
creating
an
ad
normal
ash
radio
application
and
what
not
is
to
go
in
here
and
assign
sort
of
mail
that
read
and
those
kind
of
things.
A
Unfortunately,
you
cannot
do
that
with
teams
tabs
in
SSO.
The
only
thing
you
can
add
and
master
is
that
you
go
click,
add
permission,
click,
marshaled,
graph
and
delegate
the
permissions,
and
you
had
email,
offline
access,
open,
ID
and
profile.
Those
four
included,
including
the
user
doctrine,
is
all
that
you
actually
can
have
for
in
the
tab
that
there's
a
couple
of
the
reasons
we
will
show
that
in
the
demo
later
and
come
back
to
that,
how
we
can
get
access
to
the
other
stuff.
A
But
the
whole
idea
with
the
tabs
SSO
is
actually
very
finding
verifying
that
the
user
is
signed
in
not
granting
access
token
to
other
resources.
But
this
this
was
required
for
for
the
whole
process
to
work
and
of
course
you
can
grant
consent
and
everything
in
here,
so
we
grant
consent
directly
to
my
whole
tenant.
So
we
don't
have
to
worry
about
those
kind
of
things
now.
My
application
is
set
up
and
I
should
jump
over
to
my
team's
generator
and
what
I
have
is
I.
A
Have
the
latest
preview
of
the
young
Monti
steam
generator
so
outside
yo
teams,
I
will
actually
have
pre
canvas,
and
so
we
don't
have
to
wait
for
the
NPM
package.
Just
so
I'd
skip
the
oh,
it's
great,
the
director
for
a
story.
Demo
demo
like
that
perfect,
then
your
team's
and
you
skip
installs.
We
don't
have
to
look
at
the
NPM
package
is
installing
and
let
that
start
what
will
happen
now?
Is
we
go
through
the
wizard?
A
We
looked
at
it
in
and
then
the
weeks
ago
as
well,
but
when
we
will
choose
yes,
when
we're
being
asked
about
the
tab
and
using
the
ssl,
so
this
takes
another
few
minutes.
It's
go
to
start
here
in
the
lake
in
the
afternoon
and
working
too
hard
today,
and
also
we
make
sure
sure
to
share
the
URL
to
the
documentation
where
you
find
those
goods
for
the
web,
client
and
and
the
mobile
client.
Yes
yeah.
So
here
you
see
I'm
using
two
13.0
preview
to
I.
A
Just
will
follow
the
wizard
here
hope
not
to
do
anything
special
use,
the
current
folder
and
title
of
my
project
name
portion.
This
doesn't
really
matter.
Oh,
it
has
to
be
1.5
and
above
of
course,
but
I
mentioned
sort
of
that
this
is
in
Developer
Preview,
but
that
has
nothing
to
do
with
the
manifest
version
rather
than
it
has
to
be
1.5
or
the
preview
choose
that
one
skip
that
one
and
the
only
thing
we're
gonna
add
here,
is
to
add
a
tab.
A
Just
click
enter,
and
here
is
where
I
need
to
type
my
a
URL
that
we
created
the
first
so
tab,
demo,
dot
and
groped
at
I/o
skipped
Esprit
testing
frameworks.
We
skip
up
insides
demo
tab
called
like
that
a
configurable
one
should
be
available,
voting
team
channels
and
group
chats.
Then
we
have
the
magic
kind
of
thing
here
which
says:
do
you
require?
Should
a
do
single
sign-on
support
for
the
tab?
A
And
we
choose
yes
here
and
then
we
actually
get
grant
and
asked
for
the
two
values
that
we
created
in
the
azure
ad
portal,
the
first
one
being
the
the
application
ID.
So
we
pasted
up
one
cat
and
the
second
one
is
application,
heidi
or
I,
and,
as
you
can
see,
since
we
already
inserted
the
URL
up
here
and
we
inserted
app
ID.
We
assume-
and
we
all
know
that
this
is
gonna-
be
the
the
URL,
the
app
ID
URI
you
have
to
do
so.
A
We
skip
the
shepherd
online
integration
here
and
click
enter,
and
this
will
actually
create
all
the
files
that
you
need
for
this
and
I
said
in
order
to
save
some
time.
I've
already
created
the
project,
so
let's
go
into
Taba,
so
demo,
open
operation
steal
your
code
and
the
meanwhile.
That
is
loading
and
we'll
take
a
look
at
that
one.
In
a
second,
let's
start
the
application
in
the
background,
which
means
that
we'll
use
go.
No
I
can't
do
that.
A
Yet
I
need
to
do
one
thing,
since
we
created
a
new
application
just
here,
so
what
we
have
in
the
German
generated
project.
Let
me
zoom
in
here
a
bit
as
well
is
that
we
all
do
these
kind
of
parameters
you
entered.
We
put
them
in
the
dot
n
file
here,
so
I
need
to
copy
the
code.
None
from
the
other
project
into
this
freaking
demo
here
and
the
only
pre
coming
with
this
demo
is
essentially
the
rather
we
already
executed
npm
install.
So
we
don't
have
to
wait
for
those
packages.
A
I
haven't
changed
a
single
line
of
code
in
here,
but
now
we
have
the
the
one
we
created
together
perfect.
Let's
start
the
server.
This
is
actually,
as
I
said,
it's
a
web
application
hosted
on
the
using
Angra
core
host
normal
local
machine
and
exposed
publicly
to
angle
to
do
an
ROC
/
serve.
We
can
skip
limiting
here.
A
It's
a
normal
configurable
tab
with
the
config
file
here,
but
at
the
bottom
of
this
page
we
would
actually
get
something
called
web
application
info,
and
this
would
have
a
reference
to
your
ID
and
the
application
ID
your
eye
and
that
will
during
runtime
or
the
compile
time
actually
replace
with
those
variables
we
had
in
there.
But
this
is
sort
of
the
magic
thing
that
will
make
the
single
sign-on
work
in
our
application.
A
We
have
some
a
client-side
script
for
the
tab,
building
react,
and
this
is
just
the
default
scaffolding
I
haven't
done
anything
about
it,
but
what
it
will
do
once
it's
initialized,
it
will
get
the
context.
And
finally,
would
you
use
a
method
called
get
auth
token
of
the
team's
JavaScript
SDK
and
there's
nothing
you
need
to
pass
in
here
or
configure
in
here
essentially
more
than
three
parameters.
So
the
first
one
is
the
success
callback.
What
will
happen
when
we
get
the
token?
A
The
second
one
is
to
fail
your
callback,
and
that
is
if
an
error
happens,
and
then
you
need
to
pass
resources,
and
this
is
actually
not
documented
if
you
run
it
in
JavaScript.
You
don't
need
this,
but
if
you
you
do
it
using
typescript.
That
is
actually
a
part
of
the
types
you
need
to
have
something
in
there.
A
Our
you
can
essentially
put
whatever
you
want
in
here,
but
my
guest
right
now
haven't
been
yet
verified.
Yet
is
that
you
need
to
use
that
part
by
the
URI
that
you
have?
Hopefully
that's
how
it's
supposed
to
work,
but
I
said:
there's
no
documentation
or
anything
about
that
this
so
far,
but
this
works.
So
it's
a
good
thing
and
what
I
do
here
if
we
get
a
successful
token,
is
I'm
doing
a
simple
job,
the
code
of
the
the
code
of
this
one
and
get
the
username.
A
So,
let's
see
if
our
application
has
started.
Yes,
it's
up
and
running,
let's
go
to
much
two
teams
and
hide
the
tab
and
see
if
it
works.
So
what
I'll
do
here,
if
I
want
to
add
a
new
application?
I'll
click
on
manage
team
choose
apps
and
in
the
lower
right
corner,
do
is
site
loading
and
of
course,
I
can
upload
it
to
my
talent,
but
I
prefer
to
do
it
this
way
and
then
we
should
actually
be.
We
already
have
it
in
here.
A
A
There
we
are
on
the
package,
we
have
tabs
so
demo,
that's
it
and,
as
you
can
see
here,
it
contains
the
tab.
I
can
click
Add
and
it
will
be
uploaded
to
teams
or
the
manifest
will
be
uploaded
and
we
can
go
back
to
our
channels
and
try
to
have
this
application.
We
click
on
class
here
and
we
will
have
tab
as
so
demo,
which
is
my
tab.
As
I
said,
this
is
all
generated
by
default
by
the
generator.
So
there's
no
code
changes
or
anything.
A
The
only
thing
we
did
here
was
sort
of
fixed
at
there
and
those
two
IDs
and
we
can
have
just
a
dummy
value
in
the
configuration
the
tab
will
be
configured
added
in
here,
and
hopefully
you
can
see
here.
This
is
hello
undefined,
but
now
it's
a
cell,
hello
Victor.
So
it's
actually
a
little
bit
the
delay
the
first
time
you
do
this
and
the
code
yeah.
We
have
your
right
for
right
now,
it's
just
on
define
there,
but
you
can
add
whatever
you
want
in
there.
A
So
if
I
don't
know
this
much
faster,
it's
cached,
etc.
The
thing
I
want
to
show
you
is
sort
of.
If
we
do,
let's
see
if
we
can
get
in
here
and
at
the
break
point,
hopefully
the
developer
tools.
Loading
I
want
to
show
you
that
your
token
here
for
some
of
you
who
wants
to
access
the
graph-
and
this
is
where,
where
it
doesn't
really
work,
as
you
expect
so
I
have
a
breakpoint
in
here.
A
So
in
a
bit
essentially
in
that
code
in
the
success
callback
method
is,
if
you
loaded
reload
the
page
and
we're
at
the
tab.
No,
it
didn't.
Stick
just
so
that
yeah
there
it
is
so
yeah
if
we
get
out
this.
Take
this
token
here
and
copy
this
one
and
then
open
that
up
rocketing,
jort
m/s
see
if
you
can
get
it
there.
I
just
got
a
part
of
it.
Sorry
about
that.
Let's
try
to
get
the
flu
on.
A
This
is
how
it
is
when
it's
zoomed
in
there.
It
is,
but
I
want
to
show
you
what
this.
Your
token
is
that
it
doesn't
really
look
like
then
the
normal
once
you
have
yeah.
Oh,
it's
a
normal
you're
talking,
but
not
the
one.
You
expect
when
you
get
from
the
grant
from
the
graph,
so
what's
happened
here.
Is
that
the
audience
is
my
application
ID,
of
course,
but
I
don't
have
any
scope
more
than
the
one
I
type
requested
or
to
create
the
one
I
created.
A
So
I
can't
use
this
one
to
to
get
information
from
the
Microsoft
crop
right
now,
but
the
guidance
from
from
the
team's
team
on
how
to
do
this.
It's
essentially
used
on
behalf
of
hello.
So
what
you
need
to
do
is
essentially
send
this
token
back
to
the
server
side,
then
using
the
server-side
implementation
and,
on
behalf
on
the
on
behalf,
low
get
a
new
access
token,
which
can
access
the
graph
and
then
send
that
back
to
the
client
and
then
the
client
can
use
that
to
go
to
the
graph.
A
Yes,
it's
not
optimal,
but
that's
the
way
it
works.
The
thing
you
need
to
do
that
you
need
to
do,
implement
your
own
pre
concerned
or
the
consent,
dialogue
and
those
kind
of
things
in
that
scenario
as
well,
but
that's
sort
of
that
the
big
caveat
right
now.
The
only
thing
you
can
essentially
do
with
this
as
tab
as
so
is
verify
that
the
user
is
actually
signed
in
and
you
can
get
the
username,
the
preferred
username
and
essentially
that
the
tenant
ID
and
those
kind
of
things.
A
So
this
is
a
data
you
can
work
with.
So
hopefully
we
can
go
back
in
the
future
and
talking
about
how
you
do
that
server-side
on
behalf
of
flow
to
actually
get
to
the
graph
permissions
and
and
or
we
actually
considering,
adding
that
to
the
part
of
the
generator
as
well
switch
scaffolds
out.
Oh
all,
that
code
for
you,
because
there
is
unfortunately
little
bit
of
work
for
you
to
do
thanks.