►
Description
In this 10-minute Developer-focused demo, Amrutha Srinivasan shows viewers how the Electron provider capability secures the authentication necessary (via MSAL, SharePoint, Teams providers) for an app to call Graph APIs from the platform on which you are building with very little coding. The demo shown pulls tasks from Microsoft TO DO and presence from Microsoft Graph and beautifully renders such. Electron authentication will be in the MGT the last week of February. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on February 18, 2021.
Demo Presenter: Amrutha Srinivasan (Microsoft)
Supporting documents:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://docs.microsoft.com/en-us/graph/toolkit/overview
• Sandbox - Microsoft Graph Toolkit Playground | http://mgt.dev/
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
Hi
everyone,
I'm
amrita
and
I'm
a
software
engineer
on
the
microsoft
graph
toolkit
team
and
I'm
super
super
excited
to
be
here
to
talk
to
you
about
our
latest
addition
into
the
toolkit,
which
is
our
electron
provider.
So
before
I
start
talking
about
what
the
provider
is,
let
me
give
you
a
brief
overview
on
the
toolkit
itself,
so
the
microsoft
graph
toolkit
is
a
collection
of
ui
components
and
authentication
providers
that
make
using
the
microsoft
graph
super
super
easy.
A
A
A
So,
for
example,
this
people
picker
here
fetches
data
people,
information
from
the
graph,
so
it's
actually
a
multi-select
drop
down
and
all
you
have
to
do
is
include
this
tag
in
your
html
script
and
you're
good
to
go.
Similarly,
you
have
the
you,
have
agenda
information,
and
so
just
with
one
tag
you
get
all
this
beautifully
rendered
agenda
data
from
the
graph.
So
that's
you
can
play
with
all
the
other
ui
components
here,
but
the
other
side
of
the
toolkit
is
authentication
providers.
A
So
if
you
can
imagine
all
these
components
that
you're
using
in
your
app
they're
all
calling
the
graph
right
and
even
otherwise,
if
you're,
using
the
graph
in
any
way
in
your
app,
you
need
to
be
authenticated.
So
that's
where
our
providers
come
in,
and
so
we
have
different
authentication
providers
that
again
make
it
super
easy
to
get
authenticated
in
your
app
with
microsoft
identity
and
we
have
different
providers
for
each
platform
that
you
may
be
building
on.
So,
for
example,
if
you're
building
a
web
app,
then
you'll
be
using
our
msl
provider.
A
If
you're
building
a
sharepoint
web
part
you'll
be
using
sharepoint
provider
and
if
you're
building
a
teams
tab,
then
you'll
be
using
a
teams,
provider
and
there's
a
quick
example
here.
So
if
you
wanted
to
authenticate
on
using
myself
identity
with
the
graph
on
your
web
app,
then
this
is
pretty
much
all
the
code
you
need.
A
You
just
have
to
say:
provider
start
global
provider,
equals
new
msa
provider
and
provide
the
client
id
of
your
app
registration
and,
what's
great
about
this
provider,
like
I
had
mentioned
before,
is
that
it's
not
only
to
get
authenticated
for
your
mgt
components
to
work,
but
you
can.
This
provides
an
endpoint
through
which
you
can
call
any
graph
api
as
well.
A
So
without
further
ado,
let
me
jump
into
a
simple
electron,
like
boilerplate
code,
that
I
downloaded
it's
pretty
much
blank
and
I
haven't
added
any
code
in
it,
but
I've
just
npm
installed
these
packages
that
we
would
need
and
what
we're
trying
to
achieve
through
this
app
is
to
make
a
very
simple
to-do
application
that
pulls
data
from
your
microsoft.
To
do
so.
Yeah
npm
installed
these
and
for
those
of
you
who
are
new
to
electron
electron,
is
an
open
source
framework.
A
So
you
can
think
of
main
as
the
back
end
and
renderer
is
the
front
end
and
you'll
have
as
many
renderers
as
the
number
of
pages.
So
here
we're
only
looking
at
one
renderer
process,
one
page,
so
I
only
have
one
renderer,
and
this
is
the
I
cloned
this
from
a
git
repository
by
electron.
So
I
haven't
added
any
code
here.
This
is
pretty
much
the
boilerplate
code
that
you
get
so
to
start
authenticating,
that's
the
first
step.
We're
going
to
do
to
get
authenticated
to
be
able
to
use
the
graph
you
have.
A
You
need
to
add
two
things
you
have
to
initialize:
one
is
the
electron
authenticator
and
the
other
is
the
electron
provider.
So
the
electron
authenticator
is
going
to
sit
in
main.ts
and
electron
provider
is
going
to
sit
in
the
renderer,
where
all
your
components
are
going
to
be.
So,
let's
get
started
with
that,
I'm
just
going
to
import
the
authenticator
and
I'll
talk
about
what
they
do
in
just
a
second
import.
The
authenticator
and
here.
A
A
A
Initializing
the
electron
authenticator
by
passing
in
this
config
object.
Now
on
the
renderer
side,
the
renderer
side
is
actually
even
easier.
This
is
where
we're
going
to
be
initializing
the
electron
provider.
I'm
just
going
to
write
these
import
statements
really
quickly,
so
I'm
importing
the
electron
provider,
I'm
also
importing
the
components
that
we're
going
to
be
using
in
our
index.html
and
then
all
I
have
to
do
is
add
this
one
line
of
code
and
we
are
authenticated
and
now
let's
go
to
our
index.html
and
I'm
going
to
add
these
components
here.
A
A
A
It
basically
does
the
same
thing
that
we
saw
earlier,
except
it
has
one
hidden
feature
that
I
really
excited
to
show
you
so
right
now,
megan
is
available
on
teams
right,
she's,
just
doing
her
work
at
her
normal
pace.
She
has
this
beautiful
wallpaper
of
mount
rainier,
and
then
I
don't
know
about
you,
but
during
the
pandemic
I
have
really
hard
time
focusing
and
I
usually
like
go
into
this-
do
not
disturb
mode.
A
When
I'm,
I
don't
want
people
pinging
me
and
I'm
really
trying
to
get
something
done
and
once
I
turn
to
do
not
disturb.
Firstly,
my
app
turns
to
dark
mode-
and
I
did
this
solely
for
the
purpose
of
showing
off
the
fact
that
all
our
mgd
components
have
dark
theme
enabled
just
by
adding
like
a
class
to
each
of
them
called
mgd
dark.
You
can
get
the
dark
theme,
but
also
when
I'm
trying
to
focus
I
like
to
be
reminded
that
I
need
to
be
working,
so
my
wallpaper
changed
to
this
giraffe.
A
After
work
like
I
try
to
appear
away
so
that
again
people
know
I'm
done
with
work,
but
I
have
this
bad
habit
of
like
continuing
to
try
like
when
I'm
supposed
to
be
off
work.
I
still
try
to
like
send
the
last
email
or
I'm
just
not
even
doing
something
productive,
but
I'm
still
on
my
laptop.
So
then
my
wallpaper
changes
again
to
this
little
cat
telling
me
to
work
out.
A
A
So
this
is
the
same
renderer
code
that
we
saw
just
now
where
I'm
initializing
the
electron
provider
and
all
I'm
doing
is
also
calling
the
graph
using
the
endpoint
that
we
saw
that
I
talked
about
earlier.
The
fact
that
it,
the
providers
are
global
provider
exposes
an
endpoint
through
which
you
can
call
any
of
these
graph
apis
and
I'm
also
using
so
I
want.
I
want
to
be
able
to
pull
for
presence
data
every
five
seconds.
A
So
what
I
do
is
I
listen
to
this
event,
so
on
state
changed
is
called
every
time,
there's
a
login
or
a
logout
event.
So
I
call
that
event
and
then
I
check
if
someone
signed
in-
and
I
call
this
check
presence
function
that
basically
every
five
seconds,
because
I've
set
an
interval
here
for
five
seconds
every
five
seconds.
I
call
the
presence
api
and
get
presence
information
and
I'm
also
updating.
So,
as
you
can
see
here
in
the
person
component,
you
can
update
the
presence
so
manually,
so
I
actually
pull
that
from
the
dom.
A
I
pull
that
element
from
the
dom
and
I
pass
this
presence
object
so
that
even
this
is
updated.
Every
time
I
pull
for
presence
data,
so
yeah,
that's
the
end
of
my
demo.
Hopefully
you
enjoyed
that
and
hopefully
it
excited
you
to
use
the
electron
provider.
It's
going
to
be
released,
like
that
said,
I
think,
sometime
next
week,
so
please
stay
tuned
and
let
me
know
if
you
have
any
questions
and
I'm
happy
to
help.
Thank
you.