►
From YouTube: Exploring the Microsoft Graph Toolkit
Description
The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph that work with any web framework and on all modern browsers.
In this episode, Nikola Metulev comes on to showcase how quickly you can get started.
[01:54] - What is Microsoft Graph and Graph Toolkit?
[03:22] - What backends does the Graph Toolkit work with?
[04:09] - Getting started with the Graph Toolkit
[10:18] - Adding additional components
[16:51] - Building on the web components standards
[18:20] - Integrating the Graph Toolkit components with ASP.NET
Microsoft Graph Toolkit Playground
https://mgt.dev
Microsoft Graph Toolkit on GitHub
https://github.com/microsoftgraph/microsoft-graph-toolkit
Microsoft Graph
https://developer.microsoft.com/graph?WT.mc_id=ondotnet-c9-cephilli
Microsoft Graph Explorer
https://developer.microsoft.com/graph/graph-explorer?WT.mc_id=ondotnet-c9-cephilli
A
B
Course
welcome
to
my
crib
as
they
would
say:
yeah
I'm
a
software
engineer
on
a
team.
We
call
packs
essentially
it's
a
partner
ecosystem
team,
but
specifically
I
work
on
open
source
tools
for
the
Microsoft
graph
and
specifically
the
one
that
we
talked
about
today.
They
called
the
Microsoft
graph
toolkit
is
a
set
of
web
components
to
help
developers
to
leverage
a
lot
of
the
partner
patterns
that
our
partners
want
to
do
with
the
graph.
Now.
B
You
know
what
it's
not,
but
it's
something
fun
that
we
do
and
I'm
not
the
only
one
that
does
this.
Actually,
if,
if
people
know
about
the
Windows
community
tool
kit,
something
I've
actually
talked
about
on
the
show
before
the
sama
lamaa
is
on
there
too,
who
guesses
up
as
a
llama.
So
you
know
our
team
just
likes
to
keep
it
fun.
That's.
B
A
B
Course
so
yeah
Microsoft
graph
is:
is
this
unified
gateway
for
all
the
different
api's
that
exist
to
work
with
Microsoft
365?
Now,
when
we
talk
of
Microsoft
with
65,
think
of
things
like
office,
365,
Windows,
enterprise
mobility,
suite
things
like
Azure,
Active,
Directory
and
Intune,
so
any
API
that
has
to
work
with
the
data
that
exists
in
these
products
exists
through
the
max
or
graph.
So
it's
just
one
single
endpoint
that
you
call
you
do
it's
a
rest
endpoint
and
you
can
get
data.
B
B
B
These
are
common
patterns
that
we
see
a
lot
of
our
community
members
and
our
partners
want
to
leverage
inside
of
their
applications
as
well,
so
the
toolkit
kind
of
packages
these
these
components
that
are
just
one
liners,
you
put
them
in
your
application
and
they
handle
all
the
the
graph
calls
all
the
API
calls
and
how
it
renders
the
data
and
makes
it
look
and
feel
like
as
part
of
the
Microsoft
365
ecosystem.
Now.
A
B
I,
don't
actually
that
the
toolkit
is
is
solely
a
front
and
kind
of
weapon
point
of
library,
so
he
can
work
with
any
back-end.
It
doesn't
have
to
work
with
just
asp.net,
but
we
do
have
some
some
things.
I'll
show.
Actually
that
makes
it
really
easy
to
work
with
a
back-end
like
asp.net.
So
we
can.
We
have
a
sample
that
works
with
both
that
framework
and
dotnet
core
and
shows
you
how
to
leverage
that
power
of
asp.net
very.
B
B
Right
I
mean
I,
know
people
want
to
see
the
giraffe
coding
all
the
time,
but
unfortunately
I'm
gonna
start
sharing
my
screen.
It's
gonna
see
me
as
a
little
tiny
little
giraffe
in
the
corner.
So
let
me
start
doing
that
real
quick.
The
first
thing
is
for
anybody
that
wants
to
learn
about
the
microcell
graph.
Toolkit
is
just
our
github.
We
do
everything
in
the
open
with
the
community
and
that's
what
we
build
a
lot
of
these
components.
B
You
can
learn
a
lot
here
and
it's
just
a
Microsoft
graph,
slash
Microsoft
graph
toolkit
or
if
you
want
a
quick
link
to
this,
you
can
just
go
to
a
kms,
angie
t,
zue
min
and
then
you'll
get
directly
to
our
github,
and
you
can
see
all
the
different
components
that
we
have
in
here
and
all
the
different
things
you
can
do
now.
The
the
way
I
want
to
demo.
B
The
toolkit
first
is
actually
just
a
very
blank
new
HTML
page
and
show
you
how
this
works
with
the
graph
we
were
trying
to
solve
couple
problems
with
the
toolkit.
One
is
making
authentication
really
really
easy
for
developers
and
the
other
one
is
is
making
a
mixture.
It
works
with
any
web
framework,
so
I'm
going
to
create
a
new
folder
here,
and
we
see
you
make
your
own
net.
This.
A
B
So
we
wanted
to
make
this
experience
of
hey
I
just
want
to
get
started
with
the
graph
and
be
able
to
kind
of
do
bunch
of
stuff
with
it
without
having
to
figure
out
how
to
identikit
the
user.
You
know
how
to
do
all
these
complicated
things
and
just
get
started
so
I
created
just
an
index
of
HTML
in
in
vs
code
and
I'm.
Just
gonna
create
a
just
an
empty
page.
Here
we
need
a
webserver
to
do
authentication.
B
Let
me
use
a
different
one
that
one
I'm
gonna
clean
up,
something
here
and
hello
world
here,
just
the
basic
web
page
and
I'm
actually
going
to
use
a
live
server
here,
just
a
basic
web
server
to
host
this
on
a
page.
So
we
can
see
here,
I
put
it
side-by-side
hello
world.
So
the
first
thing
you
to
do
to
add
the
toolkit
is:
you
can
just
grab
our
script
tag.
We
have
both
an
NPM
package
and
a
bundle
that
we
ship
as
part
of
the
toolkit.
B
When
you
do
this
in
production,
you
most
likely
will
using
the
bundle,
because
then
you
can
use
sorry
will
using
NPM,
because
then
you
can
use
your
own
bundler
and
you
can
just
grab
the
stuff
that
you
just
need,
but
for
demo
purposes,
I
think
the
script
is
just
really
easy
to
use,
and
you
can
just
add
it
in
here.
So
now,
when
we've
done
this,
we
can
add
a
component.
So,
for
example,
I
can
add.
Mgt
log
in
here
delete
this
guy
here
and
I.
Go
here.
B
Hallo
world
is
still
showing
and
I
think
my
my
sharing
my
screen
and
the
network
is
still
trying
to
pull
down
unpackage.
It
looks
like
it's
try
still
trying
to
pull
down
Dutch
that
bundle
there.
It
is
so
you
can
see
here.
We
have
a
sign-in
button.
Now
it
doesn't
really
do
anything.
It
doesn't
know
how
to
sign
you
and
we
have
to
tell
it
how
to
sign
you
in
so
I'm.
B
Gonna,
add
what
we
call
a
provider,
I'm
gonna,
add
an
EM
cell
provider
and
this
uses
em
cell
GS
behind
the
scenes
to
attempt
to
get
a
user.
So
we've
taken
all
the
code,
you
have
to
write
for
himself
J
s
and
we've
kind
of
put
it
into
inside
this
easy-to-use
component.
They
can
extract
that
for
you
and
then
you
can
just
attenti
kate.
So
I
need
a
client
ID.
I'm
gonna
go
to
82
portal,
Ezra
comm
I'm,
going
to
go
to
azure
active
directory
and
an
app
registration.
B
I'm
gonna
create
a
new
registration.
Let's
call
it
all
net.
It's
like
anybody
can
sign
in
I'm.
Gonna.
Add
this
redirect
your
a
URL
as
the
big
direct
URL
I'm
gonna,
create
that
client
ID
real,
quick
before
I
can
actually
use
this
I
need
to
enable
implicit
grant.
Basically,
so
I
can
actually
use
this
on
a
SP
a
and,
if
you're,
using
when
you're
using
dotnet.
B
You
don't
actually
have
to
do
this,
but
for
this
demo
I
have
to
do
that
and
then
save
and
then
here
I
could
just
grab
this
client
ID
now-
and
this
is
all
I
need
from
here
and
now
when
I
add
this
client
ID
I
click
Save.
Now
this
enables
my
application
to
sign
in
and
now
I
can
sign
in
I'm
signed
in
and
there
it
is
I
have
a
signed
in
user
with
two
lines
of
code,
and
that's
it
that's
that's
all.
A
Incredible
is
that
now,
when
I'm
with
this,
because
that
that
looks
so
easy
I
saw
you
set
up
the
application,
as
well
as
the
login.
At
the
same
time,
is
that
authentication
available
for
other
tasks
I
might
be
using
in
my
app
or
is
it
designed
to
be
more
couple
specifically
with
the
MS
Graf
request?
Well,.
B
Good,
so
I
can
do
some
things
like
right
now:
I
can
say
mg,
T,
dot
providers,
the
global
provider
and
to
explain
this
a
bit.
This
is
a
way
how
the
components
actually
know
how
to
call
the
graph.
They
can
get
an
instance
of
the
global
provider
and
they
can
call
it,
and
this
can
get
graphic
client
and
now
I
can
make
API
calls
to
this.
So
I
can
say:
hey
I
want
to
make
an
API
call
to
the
me
endpoint,
and
this
will
make
that
call
there.
B
B
B
A
B
Wrong
one
there
this
and
I
can
save
this.
He
won't
do
that
again,
but
anyway,
you
saw
me
as
I
added
the
agenda
component.
Now
it's
saying
hey
now.
This
component
needs
this
permissions
from
your
account.
You
accept
it
so
we
handle
you
know
the
incremental
consent.
So
that
way,
you
can
give
your
consent
to
the
application
to
call
the
API
is
that
the
components
needs.
So
you
don't
have
to
go
figure
out
what
permissions
do
I
need
to
ask
for
the
graph
and
all
that
stuff.
A
B
So,
there's
a
lot
of
components
that
we
ship
with
this
the
best
way
to
learn
about
all
the
different
components
is:
if
you
go
to
mgt
dev.
This
is
our
playground,
let's
zoom
in
a
bit
that
has
all
the
different
components
here
on
the
on
the
left
side,
and
you
can
actually
edit
them
side-by-side
and
see
how
things
are
working.
The
agenda
component,
just
basically
just
a
list
of
my
events,
but
you
can
configure
this.
You
can
say:
hey
I
want
to
group
them
by
date,
then
I
want
to
show
different
different
things
in
this.
B
In
this
agenda,
see
we
have
some
configuration
you
can
do.
You
can
actually
look
at
our
Doc's
and
you
can
look
at
all
the
different
properties
attributes.
You
can
change
on
each
of
these
components
or
in
also
the
CSS
property.
So
you
can
actually
configure
this
to
make
it
look
any
way
you
want
it
to
look
with
all
the
just
CSS
that
give
you
used
to.
B
In
addition,
we
have
you
already
saw
the
lion
component
that
just
allows
you
to
authenticate
with
our
providers.
The
people
component
lists
people,
so
you
can
just
say:
hey
I,
want
to
show
the
people
that
I'm
working
with,
for
example,
or
a
people
picker.
They
switch
to
canvas
to
be
able
to
kind
of
look
up
people
and
organizations,
something
that,
if
you're
working
with
the
graph-
and
let's
say
you
want
to
give
the
ability
to
kind
of
choose
people
that
you
work
with
and
gonna
do
whatever
actually
need
to
do.
B
You
can
use
this
component
to
quickly
quickly
get
the
you
know
in
search
people
in
the
organization.
The
person
component
is
one
of
the
most
useful
components,
because
it's
just
I
can
tell
it.
Hey
I
want
to
query
me
or
on
a
query,
let's
say
Alex
here
and
then
it
will.
It
will
go
and
query
the
graph
for
that
person
or
for
that
email
for
that
ID
and
show
you
and
show
you
that
person
and
I
don't
think
we
have
Alex
or
theirs,
and
it
will
show
Alex
for
you
an
additional
to
this.
B
Something
that's
actually
really
powerful.
Is
the
person
card
which
is
as
I
mentioned
the
beginning
is
this
interactive
card?
What
shows
up
when
you
hover
over
somebody,
something
that
a
lot
of
our
developers
and
partners
want
to
do
inside
their
applications,
then
we've
kind
of
given
this
out
of
the
box.
We
can
actually
message
somebody
on
teams
or
send
them
an
email
or
call
them
directly
for
within
that
experience,
and
all
it
takes
is
just
adding
this
person
card
or
hover
or
click
or
whatever.
B
It
is,
and
then
few
other
ones
that
come
in
the
mail
that
people
kind
of
play
around
with
these
are
the
tasks
component
that
works
with
Microsoft
to
do
and
and
and
the
planner,
and
then
we
also
have
a
channel
picker.
So
if
you
want
to
work
with
Microsoft
teams
channels,
you
want
to
select
the
channel,
we
have
a
channel
picker
that
automatically
grabs
all
the
channels
and
teams
that
you're
a
member
of,
and
allows
you
to
select
that.
So
you
can
create
some
interesting
things
in.
B
We
also
support
there's
a
final
demo,
I'm
gonna
show
here.
We
support
this
notion
of
MGT
get,
which
is
our
catch-all
component,
which
allows
you
to
simply
pass
it,
a
resource
that
you
want
it
to
to
grab
from
the
graph
and
we'll
go
and
handle
that
fetching
for
you,
and
then
you
just
have
to
provide
a
template
or
how
you
want
the
data
to
be
rendered.
So,
for
example,
here
I
have
a
channel
a
team's
Channel
picker,
the
one
you
just
saw
and
I
can
select
a
channel.
B
Let's
say
this
one,
and
then
that
will
use
the
MSHA
to
get
to
go
fetch
all
the
messages
from
that
channel,
and
then
this
is
a
template.
It
will
use
for
each
message
to
render
it
directly
inside
of
my
page
and
the
way
knows
what
how
to
actually
what
we
saw
stood.
Yet
we
set
that
every
time
the
channel
picker
changes
the
channel
we
set
the
resource
on
the
get
the
mg
T
get
to
this
resource
and
then
the
rest
of
it
is
done
by
the
mg.
T
get
handles
that
for
you
automatically.
B
B
B
Say
absolutely
yes,
so
we
test
and
we
build
these
across
well.
First,
we
make
sure
that
these
things
work
on
I,
11,
all
the
way
down
to
I
11
and
be
used
the
web
component
polyfills
to
to
accomplish
that,
and
then
we
also
go
across
different
platforms
as
well.
So
we
support
teams
and
we
support
SharePoint.
A
B
Right
so
yeah,
that's
exactly
right.
They
use
web
standards,
which
are
natively
supported
by
all
modern
major
browsers,
I
think
the
only
one
that
doesn't
support
it
now
is
ie
11,
which
we
do
have
the
polyfills
for
it,
but
all
the
other
browsers
are
supported
natively.
So
you
can
use
this
with
any
framework
that
you
mentioned.
Whatever
framework
comes
out
tomorrow
will
support
web
components,
and
that
was
the
reason
why
we
chose
what
web
components,
because
when
we
talk
to
developers
before
we
started
working
on,
the
toolkit
was
well.
B
So
we
do
everything
in
the
open
and
we
have
our
issues
and
our
projects
completely
up
in
the
open.
You
can
actually
look
at
our
backlog
and
you
can
see
everything
that
we're
working
on
and
who's
working
on.
What
and
if
somebody
wants
to
help
out,
they
can
quickly
jump
in
on
any
of
this
issues
or
if
they
want
to
suggest
a
feature
they're
more
than
happy
to
you
to
do
that,
and
in
fact
some
of
the
most
help
we
would
love
from
is
the
dotnet
community
is
to
kind
of
make
sure
that
we
are.
B
A
B
So
what
I've
done
here
so
I'm
gonna
close
these
things,
because
we
don't
need
them
so
I
have
this
asp.net
core
web
app
here.
This
actually
I
started
from
the.
If
you
just
go
online
and
search
for
asp.net
core
marker,
so
grab
sample
you'll
find
this
sample,
which
shows
you
how
to
use
em
cell
net
to
authenticate
a
user
on
asp.net,
core
and
kind
of
display.
The
information
so
I
took
that
sample
and
I
added
the
toolkit
to
it.
So
a
couple
things
I've
done.
Let
me
go
ahead
and
run
this
real
quick.
B
If
I
go
to
my
index,
page
added
this
MGT
person
here
and
let
this
load
I'm
not
signed
in
right
now,
I'm
gonna,
sign
in
and
for
the
sign-in.
This
uses
emcell
dotnet,
there's
nothing
that
we
do
in
the
toolkit
here.
This
was
just
a
sample
already
handling
authentication
for
me,
but
you
can
see
here.
We
added
this
person
component,
which
is
I,
mean
it's
a
bit
smaller,
which
is
right
here.
So
if
the
user
is
authenticated,
I'm
gonna,
add
this
MGT
person
and
the
interesting
thing
I've
done
here
actually
is.
B
Instead
of
letting
the
MGT
person
component
query
the
graph
on
its
own
I've,
given
it
the
details
to
display
so
I've
already
fetched
the
details
from
the
ground
on
my
backhand
already
fetch
the
image
and
I
just
want
the
component
to
to
vendor
that,
so
our
components
not
only
support,
you
know
handling
all
the
graph
calls
on
its
own.
But
if
you
already
have
the
data
they've
already
fetched
yourself,
you
can
just
tell
the
components
what
data
to
use
and
they'll
act
as
a
kind
of
dummy
web
components.
B
They
can
just
display
the
data
that
you've
kind
of
given
them.
So
that's
one
way
you
can
actually
leverage
these
so
the
same
thing
with
the
agenda.
I
can
go
fetch
the
events
myself
if
I
wanted
to
and
I
can
give
it
to
the
agenda
to
render
so
that
way,
when
the
page
loads
already
has
all
the
data
data
loaded.
The
way
this
sample
is
actually
loading.
These
person
details
if
I
go
here.
Let's
see
home
controller,
you
can
see
here
I'm
using
this.
B
It's
using
this
graph
service
helper
and
in
the
background
it's
using
this
graph
client,
which
is
a
it's
a
good
shout
out
to
the
the
graph
dotnet
SDK
team,
who
built
an
amazing
way
to
call
the
graph
from
your
back-end
in
dotnet,
which
uses
this
fluid
API.
You
can
see
here.
I
can
just
simply
do
graph
client
users
for
that
email
make
a
request.
I
can
get
that
user
really
quickly.
So
it's
a
really
nice
and
fluid
API
to
kind
of
get
information
on
my
back-end.
A
B
That's
how
this
MGT
person
displays
this
information,
but
we
wanted
to
also
enable
the
components
to
be
able
to
fetch
the
data
on
their
own
as
well.
Instead
of
having
to
go,
you
know
having
you
to
populate
the
data
to
the
components.
I
want
the
components
to
be
more,
you
know
active
and
be
able
to
kind
of
fetch
the
data.
So
one
thing
we've
done
here:
we've
created
this
proxy
provider,
and
so,
if
I
go
back
to
my
layout,
so
here's
actually
in
my
layout.
B
This
is
where
I'm
adding
data
that
the
bundle
for
the
MGT
components,
but
here's
where
I'm
actually
initializing
this
proxy
provider,
this
proxy
provider
does
one
thing
which
is,
instead
of
the
components
trying
to
go
and
talk
to
the
graph
endpoint
directly,
the
proxy
pro
I'm
saying
instead
of
going
to
the
graph
directly
from
the
client.
Actually
here
is
an
that
I've
opened
up
on
my
backhand
that
you
can
actually
get
make
the
same
calls.
B
So
I
can
still
reuse
the
same
authentication
that
I'm,
using
on
my
backhand
through
MSL
dotnet,
for
example,
in
this
case,
and
still
make
those
requests
with
the
attenti
get
a
user
without
having
to
make
the
user
authenticate
again
on
their
front
and
through
MCAS,
for
example.
So
we
can
use
this
proxy
provider
to
do
that
and
to
use
this,
you
just
have
to
open
up
an
API
on
your
on
your
SP
dotnet
site.
B
If
I
open
it
here,
let's
see
proxy
controller,
this
proxy
controller
simply
just
takes
the
LD
gets
the
posts
and
everything
I
try
to
do
to
the
graph
and
kind
of
reroute
that
on
its
own
on
the
backend
using
the
graph
client.
So
you
can
see
here
we
make
a
base
request
from
the
graph
clandestine
Kay
and
we
make
that
that
call
on
the
back
end
and
then
we
we
for
the
response
back
to
the
component.
So,
for
example,
here
example
messages.
This
is
another
set
of
components:
I've
added!
B
Let
me
go
find
a
code,
so
you
can
see
it.
This
is
actually
the
same
code
I
showed
in
mg.
T-Type
get
just
paste
it
directly
inside
of
this
messages,
the
Razr
page
you
can
see
here
we
have
the
same
energy
teams,
channel
picker
mg
t
get,
and
these
need
to
know
how
to
call
the
graph,
because
we
have
that
proxy
provider.
Now
they
can
go
back
to
API,
slash
proxy
and
make
the
request
to
get
data
from
the
graph.
B
A
That's
a
amazing,
it
sounds
like
you
have
total
control.
I
can
do
everything
from
dropping
the
component
in
on
the
website.
Let
it
handle
everything
versus
channeling.
It,
like
you,
said
through
this
proxy
and
then
I
have
complete
control
if
I
want
to
intercept
their
filter
or
do
some
other
things
with
the
data.
I've
got
that
available
absolutely.
B
Right
we
we
the
we
approach.
This
is
we
want
to
make
it
really
easy
for
you
to
get
started
so
now
I
have
to
think
about.
You
know
how
do
I
get
the
data,
how
to
authenticate?
How
do
I
render
things
to
hey
I
know
exactly
what
I
want
to
do
and
I
want
to
change.
You
know
how
how
you
authenticate
I,
want
to
change,
how
these
components
look
and
feel
and
how
they
act.
B
B
B
The
biggest
takeaway
I
want
for
people
here
is
to
just
go
on
our
github
or
our
playground,
either
at
akms,
slash
mgt,
which
is
our
github
or
a
playground
at
MGT
dev,
and
stop
playing
with
these
components
and
give
us
feedback.
Our
issues
are
completely
open,
so
people
can
drop
in
and
submit
an
issue
or
if
they
want
to
grab
an
issue
and
work
on
it,
they're.
More
than
welcome
to
do
that
as
well.
That's.
A
Awesome
so
there
you
have
it
advice
from
a
giraffe
that
will
help
you
become
the
hero
for
your
organization,
because,
with
just
a
few
includes
and
a
few
components
that
you
drop
into
your
application,
you
have
a
full
path
to
integrating
the
productivity
that
comes
with
the
office,
365
and
Microsoft
graph
in
the
backend.
Thanks
for
joining
us,
and
we
will
see
you
in
future,
episodes
of
on
dotnet.