►
Description
In this 16-minute developer focused demo - the second session in Sébastien Levert’s MGT series. This session focuses on the Login Component – to sign-in (leveraging Microsoft Identity platform authentication) and read user profile from Microsoft Graph. Create a basic html page in VSCode and load MGT. Create and register an app in Azure AD. Add msal2 provider to the html page to handle authentication (AAD app) and the login component for user information. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on December 14, 2021.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Sandbox - Microsoft Graph Toolkit Playground | aka.ms/MGT/Dev
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
• First session - 7 December, 2021 - Discover the Microsoft Graph Toolkit – Sébastien Levert (Microsoft) | @sebastienlevert
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos
A
Continuing
on
our
journey
from
our
last
time
that
we
all
met
wanted
to
go
a
little
bit
deeper
into
the
microsoft
graph
toolkit
as
a
promise.
The
last
time
that
we
met,
we
said
that
we
wanted
to
go
within
every
single
component
understanding
how
to
really
leverage
microsoft,
graph
toolkit
in
your
own
solutions.
A
So
today,
what
we're
going
to
do
is
we're
going
to
stop
at
the
login
component,
where
we'll
be
looking
at.
How
can
you
leverage
the
microsoft
graph
toolkit
as
a
way
to
get
authentication
working
inside
your
application
and
how
this
could
deliver
some
value
around
the
login
component?
But
before
we
go
any
further,
I'd
like
to
remind
folks
a
little
bit
of
of
concept
around
the
microsoft
graph
toolkit.
A
So
the
graph
toolkit
is
a
collection
of
reusable
framework,
agnostic
components
and
authentication
providers
that
allows
you
to
access
and
work
with
the
microsoft
graph.
The
components
are
fully
functional.
You
can
customize
them
and
they
work
with
any
web
framework
and
they
work
on
all
modern
browsers.
A
For
today
we
will
be
using
the
microsoft
graph
toolkit
as
a
vanilla,
html
and
javascript
component,
so
we're
really
going
to
use
the
web
component
approach
here.
Nothing,
crazy,
really
kind
of
the
basic
stuff
here
I
don't
want
to
go
into
any
framework
specific
capabilities
just
yet
that's
going
to
be
for
way
later
in
that
series
of
videos.
A
Why
do
you
care
about
the
graph
toolkit?
Well,
first,
if
you're
like
me
and
I'm
I'm
proud
to
say
it,
I'm
a
very
lazy
developer
and
I
love
to
cut
on
death
time.
I
don't
necessarily
like
to
build
ui
components.
I
really
focus
on
the
value
that
I
can
bring
to
my
app
and
and
to
my
business
and
that's
why
we
believe
that
the
graph
toolkit
really
cuts
down
on
development
time.
It's
also
already
beautiful.
A
So
if
you
want
to
build
something
that
seems
like
a
an
m365
component,
just
use
one
of
our
components,
but
if
you
want
to
customize
it,
you
can
fully
customize
the
way
the
microsoft
graph
toolkit
looks
like
and
finally,
it
works
everywhere.
So
it
works
on
any
type
of
browser
on
any
type
of
framework.
It
even
works
in
some
rich
applications
when
you're
using
electron,
for
example.
So
it
really
brings
your
knowledge,
your
skills,
to
a
ton
of
different
platforms.
A
A
A
So
that
way
I
can
have
an
html
file
at
the
root
of
my
app
like
if
I
was
building
a
single
page
application
and
I
will
add
in
there
the
basics
of
my
applications
right.
So
let
me
zoom
in
a
little
bit,
so
you
can
see
a
little
bit
better,
so
here
you're
going
to
have
like
a
regular
html
page
what
it
looks
like
and
that's
it
that's
the
only
thing
that
you
have
to
do
to
get
started.
A
Then
the
next
thing
that
you're
going
to
have
to
do
you're
going
to
have
to
go
in
there
and
add
mgt
to
the
mix
you're
going
to
want
to
add
the
microsoft
graph
toolkit
as
a
dependency
on
this
application.
So
how
do
you
do
that?
Well,
it's
actually
pretty
simple.
As
you're
using
simple
html
there's
no
packages
that
you
need
to
download
or
whatsoever.
You
just
need
to
add
a
script
reference
directly
in
the
head
of
your
application,
like
the
following.
You
just
need
to
add
the
script.
A
A
So
let
me
add
here
a
little
bit
of
a
title,
hello,
m365
developers
and
then
afterwards,
let's
start
so
if
I
want
to
add
components
in
there,
if
I
want
to
add
something
that
is
mgt
here,
I
can
just
that.
Come
here,
add
a
div
and
just
show
you
that
hello,
everybody
just
to
show
you
that
we're
actually
it
is
working.
A
I'm
using
as
part
of
my
vs
code,
an
extension
called
live
server,
so
I
don't
have
to
run
a
server
on
my
machine
or
whatsoever
to
run
that
html
page
I'm
just
going
to
go,
live
here
and
on
port
five,
five:
zero,
zero
or
zero.
I'm
going
to
have
an
html
file,
that's
going
to
get
served
automatically!
So
that's
the
start.
We
don't
have
anything
mgt
in
here.
We
have
empty
loaded,
but
we're
not
doing
anything
specific
with
it.
A
Now,
when
we're
talking
about
connecting
to
microsoft
graph,
there
is
one
aspect
that
is
super
important
and
you're:
gonna
have
to
create
an
application.
You're
gonna
have
to
create
an
application
in
azure
ad
in
microsoft,
identity
platform
to
up
act
as
a
proxy
between
your
app
and
your
security
constructs
that
lives
in
the
microsoft
identity
world.
So
let
me
go
and
create
that
app
for
for
us,
so
you
have
a
good
understanding
of
what
are
the
different
steps
to
get
things
started.
A
A
That's
going
to
be
a
simplified
version
of
the
azure
portal
that
will
just
focus
on
the
azure
active
directory
components.
Let
me
log
in
right
here
and
in
there.
Let
me
zoom
in
a
little
bit,
I'm
going
to
go
to
my
azure
active
directory.
That's
the
azure
active
directory
that
backs
my
office
365
or
microsoft,
365
tenant,
which
is
that
m365
x,
263
blah
blah
blah
tenant
that
I
have
and
I'm
going
to
go
to
the
app
registration
where
I
will
be
creating
a
first
app
registration
with
my
application.
A
So
I'm
gonna
do
a
new
registration,
I'm
gonna
call
it
m365
platform
and
I'm
gonna
decide
do.
I
want
this
to
be
just
for
my
own
organization
or
do
I
want
this
app
to
be
used
by
multiple
organizations
within
their
own
tenant?
So
for
this
case,
I'm
going
to
use
this
second
one,
which
is
what
we
see
a
majority
of
our
partners
doing,
but
both
of
them
are
possible.
If
you
want
to
keep
it
just
for
your
organization,
you
can
create
this
one
as
a
organizational
directory
only
or
you
can
do
it
as
a
multi-tenant.
A
A
Now
my
app
was
created
by
default,
I'm
going
to
get
an
application
id
I'm
going
to
also
get
a
directory
id,
which
is
the
the
id
of
my
tenant,
but
I
won't
need
it
in
that
case,
but
I
can
go
see
in
my
api
permissions
that
by
default
an
app
always
brings
user
dot,
read,
meaning
that
it
can
sign
in
and
read
the
user
profile
of
the
connected
user,
and
in
our
case
for
today,
because
we're
just
talking
about
the
login
component.
That
will
be
enough
in
the
future
sessions.
A
We're
going
to
have
we're
going
to
expand
on
these
scopes,
then
we're
going
to
see
some
of
the
content
later
on.
So
let
me
go
back
to
my
branding
my
branding
my
overview
here.
I'm
just
going
to
keep
it
there,
so
I
can
have
an
easy
access
to
my
application
id.
So
let
me
then
afterwards
go
back
to
my
html
page
and
let
me
bring
in
the
component
of
my
that
I
need
to
start
my
journey
here.
A
The
first
thing
that
I'm
going
to
need,
I'm
going
to
re
like
I'm,
remove
my
hello
everybody,
but
I'm
just
going
to
paste
in
what
is
the
provider
that
I
want
to
use
the
provider
is
what
will
handle
all
of
the
authentication
for
you
you're?
I
am.
We
are
lazy
developers,
so
we
don't
want
to
code
all
of
the
really
really
complex
capabilities
that
come
with
authentication.
A
So
what
we're
doing
here
we're
leveraging
the
msl2
provider
that
mgd
provides
to
really
streamline
your
authentication
you're,
going
to
see
how
great
this
is.
So
I'm
going
to
go
back
here,
I'm
going
to
copy
my
application
id
here,
I'm
going
to
paste
it
as
my
client
id
right
here
so
now
automatically
when
a
component
will
request
access
to
microsoft.
Graph,
it's
going
to
look
at
the
provider
and
ask
the
provider.
Am
I
already
connected?
A
A
They
are
not.
They
are
web
components
so
when
you're
loading
mgt
via
the
loader
here,
this
means
that
automatically
it
also
registers
as
part
of
your
dom
new
elements
that
you
can
use
and
that's
really
what
mgt
is
about.
It
brings
the
mgt
login
component
and
all
the
other
components
that
we're
going
to
use
later
to
be
available
as
simple
html
components
like
any
other
div
span
or
paragraph
tags.
A
A
A
So
these
are
kind
of
the
bare
bones
concepts
that
you're
going
to
get
when
you're
going
to
connect
to
graph
as
a
user
or
as
a
developer,
you
can
decide.
Do
I
want
all
the
users
to
accept
the
content
or
do
I
want
the
admin
to
pre-consent
it?
It's
up
to
you
and
then
here
I
can
just
hit,
accept
and
automatically
I'm
gonna
be
redirected.
A
A
What
is
great
with
this
is
now
because
I
am
logged
in.
I
can
actually
call
graph
with
the
scopes
that
I
have
access
to,
in
that
case,
the
scopes
of
the
current
user
with
user.read,
where
I
can
do
a
little
bit
more
so
here,
yes,
I
have
mgt,
but
mgt
also
provides
me
a
way
to
get
access
to
any
areas
of
microsoft
graph.
So
let
me
show
you
a
quick
example
here.
A
Let
me
do
this,
I'm
going
to
go
to
my
sample
here,
I'm
just
going
to
add
a
very
simple
pre.
So
basically,
that's
going
to
be
like
formatted
a
little
bit
like
if
it
was
code
that
element
here,
we're
going
to
add
the
current
user
information,
the
user
that
is
connected.
So
how
do
we
do
that?
Well,
we
do
this
in
a
very
simple
way.
We
add
we're
gonna,
add
a
script
tag
to
our
code
and
we
will
be
just
at
the
end
of
the
code.
A
We're
gonna
just
do
this,
so
I
have
my
script
tag
where
when
the
provider
will
get
updated
so
basically,
when
we're
going
to
get
logged
in
like
when
we're
ready,
I
want
you
to
load
the
current
user,
and
how
do
we
do
that?
Well,
as
part
of
some
of
the
variables
and
the
content
that
is
available
within
gt,
I
have
the
global
provider,
it's
state.
I
can
get
access
to
the
graph
client
that
was
already
authenticated,
so
I
don't
have
to
re-authenticate
I'm
going
to
graph
I'm
going
to
use
the
graph
plane.
A
I'm
going
to
call
this
slash
me
and
when
I
get
the
results
back,
I'm
just
going
to
display
it
as
my
results
straight
into
my
user
info
pre
tag
here.
So
that
way,
I'm
going
to
see
all
the
user
info
of
my
user.
Let
me
save
that.
Let
me
go
back
here
and
now,
as
you
can
see,
it
automatically
reloaded,
and
it
added
this
in
here.
So
not
only
we
covered
today
the
login
component,
but
we
also
covered
some
of
the
internals
of
the
provider
capabilities
that
are
offered
with
the
microsoft
graph
toolkit.
A
So
let
me
just
quickly
go
back
to
slides
before
we
end
up
today,
a
couple
of
resources.
If
you
want
to
know
more
about
ngt
aka.mf
mgt,
our
docs,
our
playground
and
our
learn.
Modules
are
available
and
all
the
code
that
we
will
be
going
through
in
the
next
couple
of
sessions
together
will
be
available
at
the
aka
that
ms
slash
mgt
sandbox.