►
Description
In this webcast, we concentrate on how to use Microsoft Graph from SharePoint Framework the v1.6 release, which is always General Availability release for this capability.
Exact details on covered topics from https://developer.microsoft.com/en-us/sharepoint/blogs/.
Related documentation from SharePoint Developer Docs
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-msgraph
- https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial
A
Welcome
everybody:
this
is
chef,
Mike,
Patterson
practices,
webcast,
and
this
time
we
are
actually
redoing
one
of
our
webcasts,
which
is
around
using
Microsoft
craft
by
and
within
SharePoint
framework.
So
this
is
something
which
we
did
a
webcast
in
February
2018
when
it
was
in
preview
and
now
we're
going
to
do
a
refresh
now
that
the
functionality
is
in
general
availability.
My
name
is
Reuben
I'm
Senior,
Program
Manager
from
Microsoft
and
chef
on
engineering
and
with
me
today
is
waldek
Wallach,
we'll
do
a
quick
intro,
so
small
yeah.
B
A
Indeed,
so
in
February
2018
released
a
preview
and
there
has
been
small
changes
since
the
preview
and
forum
for
impact
at
both
small
adjustments
on
the
functionality
since
the
preview,
but
will
concentrate
what
it
is
actually
in
GA
we're
not
going
to
concentrate
on.
If
you
have
a
solution,
how
you
migrate
that
to
the
TA,
because
you
actually
should
start
pretty
much
from
scratch,
or
at
least
we
approve
of
the
permissions.
What
does
that
mean?
Let's
get
back
on
that
one
in
a
few
slides
now,
let's
actually
start
moving
on
on
Fokker.
A
So,
first
of
all,
and
let's
actually
go
still
back
and
I
do
apologize
and
that's
it.
Let's
quickly
explain
what
is
Microsoft
CrashPlan
before
we
go
to
the.
How
do
we
actually
use
that
so
most
of
our
clients,
in
the
SharePoint
framework
components
gives
you
the
capability
of
accessing
Microsoft
craft
information,
so
information
exposed
by
the
Microsoft
craft
and
using
the
myself
crack
client
in
your
components.
You
don't
have
to
worry
about
the
token
handling.
A
You
don't
have
to
worry
about
the
Scopes,
what
you
actually
have
and
it's
a
super
easy
way
of
heating
the
Microsoft
graph
west
point
in
your
code
as
long
as
the
needed
scopes
for
the
URLs,
which
are
heating,
the
rest,
API
server
healing
have
been
approved,
and
that's
really
the
key
point
here.
What
we're
providing
wish
upon
framework
so
we're
providing
a
centralized
governance
for
tenant
administrator
to
approve
what
is
the
information?
What
are
the
custom
solutions
can
actually
access
show
much
subscribe,
really
really
important
thing
cool
now.
A
The
question
is:
what
does
it
mean
if
I
use
much
of
craft
within
a
sharepoint
framework
and
let's
see
a
live
demo
on
this
one
from
wild
x
screen
in
a
second
now?
How
do
I
actually
use
this?
Obviously,
you
will
need
to
write
some
code,
and
this
is
a
developer
webcast
writing
code.
You
write
a
code
which
is
using
the
myself
clients
to
access
to
myself
graphic
api's,
and
this
is
actually
super
simple
code
piece
of
code.
It's
like
six
lines
roughly,
depending
on
how
many
well.
A
Technically
now,
but
it
is
seriously
super
simple
to
access
to
information
now
to
be
able
to
heat
the
rest
API
and
to
for
the
plumbing
the
work
and
everything
you
need
to
have
the
right
permissions.
So,
first
of
all,
do
you
need
a
developer?
You
need
to
know
what
permissions
and
as
scopes
you
need
to
request
and
in
the
web
in
the
demo
will
actually
show
you
how
to
figure
out
what
other
scopes
are
based
on
the
craft
documentation.
A
Inside
of
the
solution,
you
actually
define
the
taya
solution
requires
the
following
scopes,
so
so
because
it's
hitting
those
certain
specific
rest
ApS
and
you
define
those
in
the
package
solution,
JSON
file.
So
at
this
point,
then,
the
tenant
administrator
goes
and
uploads
test
apk
to
file,
which
is
the
solution
package
to
the
app
catalog
of
the
tenon,
and
at
that
point
we
will
show
a
message
for
the
tenant
administrator,
which
will
say:
hey.
There
are
three:
there
are
requirements
for
following,
and
there
are
requirements
to
approve
permissions
inside
of
the
substrate
PK
table.
A
A
A
Sorry,
but
anyway
so
to
be
able
to
access
the
REST
API
in
craft.
You
need
to
turn
out
that
ministry
I
need
to
approve
those
requests
and
then,
when
you
put
the
components
you're
my
favorite
component,
is
it
an
extension?
Is
it
the
web
part
doesn't
really
matter?
If
you
used
my
MS
craft
client
in
your
code,
it
will,
let's
say
automatically,
do
the
plumbing
of
token
handling
and
everything
else
underneath
the
covers
for
you
now.
A
A
A
Now
consideration
so
a
few
things
to
kind
of
a
consider
before
we
go
to
the
action
on
demo
and
see
this
in
practice,
there
is
no
pre
approved
permission
slopes
for
months
of
craft
lines,
so
by
default
the
administrator
has
the
current
certain
set
of
permissions
before
the
functionality
actually
works.
You
will
need
to
have
a
kind
of
administration
permission
to
approve
additional
scopes.
A
So
not
just
randomly
approve,
whatever
is
being
requested.
Necessarily
granted
permissions
apply
to
all
terms
with
components
running
in
a
tenon.
So,
even
though
you're
requesting
the
permission
in
a
one
solution,
when
your
crampton
permission,
it
is
actually
across
all
of
the
sharepoint
framework
solutions
which
are
running
in
account
really
important
thing
to
realize,
and
this
this
is
obviously,
and
the
many
people
are
always
asking
them
why?
Why
can't
you
actually
approve
scopes
for
individual
solution
level
right
now,
when
we're
doing
recording
this
video
and
that's
not
actually
possible,
do
the
level
of
granularity?
A
What
ad
gives
us
in
the
context
of
share,
so
the
GA
of
current
functionality
means
that
the
grinder
permission
applied
to
all
JavaScript
components,
a
B
in
the
future,
we'll
have
more
kernel
our
permission,
scopes
per
solution,
maybe
we'll
see
once
the
burrata
and
and
this
tape
ability
is
available
across
all
turned
on
starting
from
September
2018.
So
if
you're
running
ship
on
framework,
1.6
or
newer,
this
capability
is
available
in
SharePoint
Online.
Obviously,
a
bunch
of
craft
capabilities
are
not
available
in
missus.
A
B
B
Five,
five
years
back,
you
would
build
a
widget
that
shows
you
the
letter
and
now
you
grant
permissions
to
the
Mike
so
grab
or
an
API
that
you
build
well
that
widget
sprit
coming
from
CDN
could
use
in
theory
the
same
permissions
to
access
graph.
So
basically,
you
enable
you
open
up
an
API
for
any
piece
of
JavaScript
running
on
your
tenant
core
and.
A
B
A
There's
an
information
with
the
the
come
Enterprise:
the
company
doesn't
want
a
random
piece
of
JavaScript
to
be
able
to
access,
and
that's
why
we
have
the
approval
of
scopes
and
that's
why
we
have
had
this
governance
on
top
of
the
mac
crack
line
so
for
the
developers
were
asking
like.
Why
is
it
so
difficult?
Well,
it
is
difficult
because
here
is
one
to
have
security
and
question.
B
Right,
you
mentioned
also
that
why
isn't
there
a
way
to
grant
permission
to
single
solution?
Well,
the
reason
for
that
is
is
that
if
you,
if
you
understand
how
all
it
works,
it's
always
related
to
a
domain
and
in
SharePoint
all
scripts
live
on
the
same
domain,
which
is
your
tenant
and
also
it's
all
scripts.
So
a
script
cannot
hide
a
token
from
anything
because
it
lives
on
the
same
page.
B
So
if
one
script
can
get
a
token
and
the
other
piece
of
script
can
do
the
same
and
any
other
piece
of
script
across
the
whole
tenant
can
request
the
same
token.
So
with
that
in
the
current
setup,
is
just
physically
impossible
to
do
it,
and
for
that
to
work
the
way
you
think
it
should
work
well,
you
would
have
to
think
about
something
that
we
had
with
Eddins,
where
each
Adhan
lives
on
a
sub
domain
and
was
separated
from
everything
else
in
that
way.
B
A
And
I'm
sure
we're
recording
this
and
September
2018
sure
we
are
looking
into
and
announcing
something
preview.
We
talked
about
the
isolated
parts
actually
in
SBC
already
in
2018
spring,
so
we're
potentially
looking
into
they're
heading
to
this
direction.
But
for
now,
when
we're
recording
this
as
a
ga
of
the
Microsoft
cloud
client
usage,
there
is
no
Cronulla
level
of
permissions.
They
are
granted
default
for
the
whole
thing
now,
potentially
in
the
future.
Who
knows
this
might
be
completely
virtual.
It's
only
much
spaces
and
shape
and.
A
It's
actually
interesting
questions,
so
now,
let's
go
through
the
actual
demos,
let's
jump
on
on
the
wall.
The
screen
and
let's
have
a
look
on
how
this
looks
in
practice.
What
do
we
need
to
do?
A
simple
web
part
really
concentrating
on
the
simplicity
of
the
story.
Also
just
advertising
this
as
well.she
about
static.
It
is
them
showing
you
a
slightly
more
complex
stuff
as
well,
but
let's
jump
on
Baltic
screen
and
let's
have
a
look
on
this
one
in
practice
and
then
get
back
on
the
sides
and
webcast.
B
Alright,
so
to
illustrate
how
you
can
use
the
Microsoft
graph
inside
SPF
X,
we
want
to
build
a
simple
web
part
that
will
show
the
latest
few
emails
that
you
received
in
your
inbox
so
and
we
want
to
get
that
from
graph
right.
So
the
the
first
thing
is
to
find
out
which
permissions
we
need
for
a
graph
because
they
might
or
might
not
be
available
already
and
I.
B
Think
it's
a
good
approach
to
have
them
listed
in
your
package,
because
that
way
it
will
be
easier
for
everybody
else
to
track
what
your
package
actually
does.
So
here
we
are
in
the
dots
for
graph
we
go
to
ducks
in
here
we
scroll
down,
because
we
want
to
know
more
about
the
API
that
we
want
to
use.
So
we
scroll
down
to
them.
B
If
you
want
reference
to
email,
because
we
want
to
show
the
latest
emails
here,
we
go
to
messages
and
then
the
operation
is
list
messages,
and
then
here
we
see
that
we
need
at
least
mail
read
operation,
because
we
don't
need
to
write
anything.
We
just
want
to
read.
So
this
is
permission
for
graph
that
we
have
to
include
inside
the
package,
let's
go
to
code
and
we
already
created
all
the
code
because
there
is
no
point
in
you
watching
this
tie.
But
so
this
is
the
code
that
we'll
use
right.
B
So
we
first
start
with
going
to
the
config
package
solution
and
in
here
we
add
new
property
named
Web
API
permission
requests,
and
these
are
permission,
requests
that
your
package
will
request
for
additional
API
secured
with
AAT
and
that
can
be
either
to
Microsoft
graph
or
and
present
a
API
that
your
company
owns.
So
in
our
case,
we
want
to
access
the
mics
and
graph.
B
So
here
we
added
a
resource
made
Microsoft
graph
and
this
part
can
be
either
a
name
or
a
gooood,
but
the
benefit
of
using
a
name
is
obviously
that
it's
easier
to
see
what
it
is,
but
also
if
you
are
an
ISV,
that
name
is
constant
across
tenants
that
good
isn't.
So,
if
you
want
to
build,
if
you
want
to
build
a
package
once
and
reuse
across
different
environments,
using
a
name
allows
you
to
actually
do
that.
B
If
you
would
use
a
good,
you
need
to
repackage
your
solution
for
every
single
tenant
which
isn't
efficient,
really
all
right.
So
we
start
with
naming
the
resource
and
then
permission
scope
that
we
want
to
access.
In
our
case,
it's
only
email,
read
mail.
Read!
Imagine
that
if
you
wanted
to
access
also
the
calendar,
you
will
request
them
both
right.
So
you
would
copy
the
section
the
request
and
then
add
another
one
for
calendar
read.
So
if
you
want
to
to
request
multiple
scopes,
you
don't
add
them
in
single
line
here.
A
B
It
is,
it
is,
oh,
it
works,
and
one
of
the
reason
for
that
I
can
imagine
is
that
some
permissions
might
be
already
available
sure
and
and
if
you
would
separate
them
by
strings
then
when
applying
that
the
string
would
have
to
be
separated
and
split
and
comparator
just
having
one
resource
scope
pair,
it's
easier
to
deal
with
right.
So
this
this
is.
This
is
the
way
it
works.
So,
with
this
in
place,
we
are
ready
now
to
write
our
code
to
actually
use
the
MS
graph
client
to
communicate
with
with
the
microcell
graph.
B
So
we
go
to
the
code,
and
in
here
we
have
a
webpart
build
with
react,
so
we
have
two
pieces.
We
have
the
web
part
code
and
we
have
component
built
in
react
that
actually
retrieves
the
data
and
shows
the
data.
The
way
it
works
is
that
you
first
need
to
get
the
instance
of
the
MS
graph
high-end
in
webpart,
and
one
way
to
do
it.
The
way
that
I
find
most
efficient
is
to
do
it
on
in
it
right
because-
and
that
does
the
part
that
has
changed
between
the
version.
B
B
So
in
the
past
what
you
would
see
is
that
people
would
do
it
inside
react
component,
but
then
you
do
the
promise
it
might
get
confusing
with
how
you
deal
with
that,
whereas
handling
the
events
in
component
and
all
that
so
easier
way
to
do,
it
is
to
do
it
in
web
part
1
in
it,
because
that
already
works
on
a
promise
and
they
just
start
a
reference
to
that.
So
even
if
component
would
refresh
reload
or
you
would
have
more
of
them,
you
can
retrieve
it
once
because
that
reference
doesn't
change.
B
A
Here
we
know
before
you
go
there
to
read
about
quite
often,
actually
we
see
also
the
convex
being
passed
on
the
component.
But,
like
you
saying
this
way,
you
don't
actually
find
us
the
component
and
I
don't
have
to
copy
it
myself
find
factory
in
all
inside
of
the
component,
so
getting
the
factory
you.
B
And
actually
you
don't
talk
about,
but
about
that
there's
also
another
downside
of
of
if
you
pass
the
whole
context
to
react.
Imagine
now
that
you
want
to
build
a
unit
test
for
for
for
the
react
piece
yeah
you
have
to
mock
the
whole
web
art
context,
even
though
you
only
use
one
one,
one,
one
single
piece
of
it
right,
so
that
gives
you
a
lot
of
overhead
to
deal
with
in
your
test.
B
B
Initially,
right
and
in
there
we
say
at
this
stage
when
components
is
available
on
a
page,
we
want
to
communicate
with
the
micelle
graph
and
get
emails
right.
So
we
will
do
that
here
and
in
here
we
retrieve
the
graph
client
from
properties
that
we
passed
in
the
web.
So
in
the
web
part
we
pass
the
instance
of
crack
client
to
react
component,
and
in
here
we
get
it.
We
receive
that
and
basically
this
part
is
using
the
MS
graph.
I
am
to
communicate
with
the
my
so
graph.
B
So
we
call
the
slash
me
slash
messages,
API
version
1.
We
retrieve
the
body
received
a
time
from
subject
web
link
and
we
get
either
the
specified
number
of
emails
or
five
if
none
and
we
ordered
them
descending
on
received
time.
Yes,
so
we
do
we
log
all
that
and
then
we
show
them
then.
Finally,
in
real
component,
so
this
is
it.
This
is
how
it
works.
How
about
we
build
it
and
see
it
in
action
and
see?
B
B
So
I've
already
built
a
project
and
package
I
have
it
here
so
here
we
let
me
switch
first
to
the
app
catalog
to
which
we
will
add
the
package
and
then
also
grab
the
package
itself.
Is
the
SB
pkg
and
let's
just
easily
drag
and
drop
it
here,
drag
and
drop
it
here
again
to
actually
deploy
it,
and
the
important
part
is
here.
B
Let
me
just
enable
this
one
so
that
the
weapon
is
available
on
both
sides.
I,
don't
need
to
think
to
which
side
I
want
to
add
it.
But
the
really
crucial
part
is
this
piece
here,
because
in
our
package
we
include
request
for
an
API
access,
which
is
this
part
here.
So
we
did
this.
We
went
to
pack
a
social
weave
because
we
included
this
part.
We
now
get
a
warning
being
tenant
admin.
The
dispatch
will
request
access
to
some
API
secured
with
a
ad.
This
is
important
part.
B
A
And
that
that's
actually
the
deploy.
This
is
the
moment
when
actually
technically
web
part
is
already
available,
but
it
does
not
yet
work
because
the
Scopes
has
not
yet
necessarily
been
approved,
which
hopefully
is
just
a
moment
or
a
few
minutes,
and
that
won't
cause
any
and
it
problems
to
be
fair
in
the
web.
Our
implementation,
you
should
always
consider
the
fact
that
what,
if
I,
don't
actually
have
two
scopes
available,
so
you
deal
with
exceptions,
graceful
so
yeah.
B
So
now
we
go
to
the
tenant
admin
and
let
me
go
through
that
from
the
start
right,
because
otherwise
you
will
not
know
how
we
arrived
here
and
I've
already
done
a
few
steps.
So
here
we
start
with
the
the
admin
sense
sense
sense,
enter
and
and
to
access
the
API
management.
We
have
to
go
to
the
new
SharePoint
Adams
sentence,
Center,
which
we
can
access
from
here.
A
B
A
B
If,
for
some
reason
you
deploy
the
package,
but
this
guy
isn't
here,
there
is
a
chance
that
there
then
that
an
error
has
occurred,
deploying
the
package-
and
you
just
missed
that
so
always
first
and
sure
that
there
are
no
errors
here,
because
if
it
might
rip
you
a
few
times-
and
it's
not
really
easy
to
see,
because
if
your
screen
is
wide
or
big
or
small,
that
call
my
fault
on
the
screen
and
you
will
not
see
it.
But
you
will
also
not
see
the
requester
right
so
always
check
the
colander.
B
B
So
now
we
click
approve
and
reach
reject,
and
here
we
can
see
requested
by
requested
from
which
package
version
request
a
date
and
we
say
approve,
and
at
this
stage
do
I
refresh
partly
because
it's
still
pending
approval,
it's
already
approved
here
when
we
refresh
this
page,
their
request
is
gone.
Now
is
zero,
and
then
we
see
to
approve
permissions
in
here,
yes
and
adapt
stage.
That
means
that
we
can
now
safely
add
the
weapon
to
the
page,
and
it
should
work.
It
should
be
able
to
call
the
Microsoft
graph.
B
So
in
here
let's
go
to
our
page.
Let's
edit,
the
page,
and
here
we
will
add
a
webpart
named
personal
email,
which
is
the
web
part
that
we
build
personal
email
and
I
see
three
of
them.
Apparently,
my
manifests
are
cached,
and
this
is
a
tenant
that
I
use
for
other
things
as
well,
so
I
see
three
of
them
Leslie
and
one
and
I'm
not
even
sure,
if
they're
all
the
same
or
not
yeah.
B
There
you
go,
it
works
right
so
now
we
can
see
the
five
recently
received
emails
in
my
inbox
and
that
just
works,
so
I
didn't
need
to
do
anything
specific
regarding
all
of
us
setting
up
a
tea.
All
of
that
is
already
done
because
in
here
we
use
the
existing
MS
Graf
client,
which
is
a
part
of
SP
attack
which
is
already
does
all
of
the
heavy
lifting
for
us.
A
This
particular
web
Mart
by
the
way
is
originated
from
the
shipments
targets,
but
I
think
will
provide
the
web
part
to
search
code
as
a
separate
sample
as
well,
because
then
it
is
a
the
most
simplistic
easy
way
to
get
started
on
crafts
as
samples
as
well,
and
if
you're
a
presenter
in
any
conference
distance.
A
trade
demo
web
part
as
well
to
just
really
concentrate
on
what's
happening
here.
Yeah.
A
We
can
so,
but
basically
it's
a
exception.
Handling
right
depends
on
what
happens
on
your
web
parts
correctly,
implement
exception
handling,
which
is
yeah
good
way
to
remember,
to
deal
that
crazily
either.
If
you,
if
your
design
is
that
you
say
a
nice
message,
current
users
that
I
don't
get
hot
permissions,
that's
fine!
Maybe
the
mission
saying
the
baby
I
miss
it
or
not.
On
a
web
page,
which
is
all
debate
saying
sorry,
I
don't
have
permissions
can
get
highly
confusing
pointers.
That
may
be
the.
B
B
Yes,
exactly
yeah,
and-
and
it's
also
important
to
understand
that
at
this
stage
this
permission
API
or
this
API
Commission
is
not
related
to
the
so
we
we
can
remove
it
here
and
the
package
will
work
just
fine.
It
will
be
still
available
in
catalog.
Nothing
has
changed
here
and
you
can
still
add
the
web
part
to
the
page.
So
at
this
point
there
are
decoupled,
but
if
it
doesn't
work
and
probably
now
the
token
is
care,
so
we
have
to
clear
the
token
it's
still
there
and.
A
B
A
B
A
Life
we
went
through
the
code,
we
went
through
the
documentation
where
you
can
see
this
need
a
scope:
much
subscribed
implementation,
oh
shut
up
there
for
Monster
crafting
and
there
making
investments
home.
That's
fine!
Then
we
showed
the
code.
We
showed
that
the
code
in
the
react
way
of
implementing
stuff
tests
as
well
the
the
same
craft
client
works
in
exactly
the
same
way
record
us
are
using
Cree
active
view
angular,
whatever
you're
used
in
the
study,
doesn't
really
the
difference.
Of
that
one
is
different.
A
The
only
only
really
difference
here
was
that
we
used
we
had
component
and
the
property
is
to
bypass
the
craft
quality
and
which
is
a
react
based
implementation
but
I
think
in
general.
That's
it
for
this.
One
I
will
add
links
over
on
this
sample
on
the
on
the
webcast
recording.
So
let's
sleep
on
the
slides
and
close
up
the
webcam
cool,
excellent
good
father,
crate,
demo
and
good
walkthrough
of
things
and,
like
I
said
we
did
it
intentionally.
A
You
didn't
want
to
have
the
wit
part
super
complex.
It
is
relatively
simple
web
part
really
concentrating
on
the
story
of
things,
because
obviously
you
can
create
much
more
complex
solutions
and
the
shape
of
started
it
like
mentioned
a
few
times
already,
is
a
good
example
of
them,
and
but
understanding
what
happens
is
really
the
key
with
the
simplistic
solutions.
Now,
let's
go
to
the
final
slide
and
any
other
conclusions,
other
things
which
we
want
to
repeat
from
this
one
moment,
I
think.
B
Lissa
T
is
their
key
right.
If
you
think
about
it,
how
what
would
you
have
to
do
yourself
if
we
didn't
have
the
clients
that
we
get
from
SV
attacks?
Yeah,
it's
not
trivial.
There
are
quite
a
few
things
like
redirects
pop-ups
iframes,
to
take
into
account
to
implement
almost
implicit
flow
by
yourself.
A
Correct
and
that's
that's
absolutely
the
that's
where
the
idea
always
should
go
more
abstraction,
more
simplification
of
things
making
things
things
simple.
If
things
start
feeling
more
complex
than
these
not
pay
attention
to
be
fair.
If
you
are
once
again,
if
you're
a
classic
shape
on
developer
coming
from
from
solution
moving
the
shape
one
framework,
it
might
feel
slightly
complex
for
a
while.
But
at
this
point
there.
B
A
Exactly
it's
different
than
a
theory:
it's
not
actually
more
complex.
You
can't
beat
the
complexity
of
future
framework
XML.
Yes,
exactly!
There's
no
we're
competing!
That
trust
me
I
know
anyway.
I
think!
That's!
That's
all
we're
gonna
do
in
in
this
webcast.
So
thank
you
for
watching
and
we'll
have
links
on
all
the
things
what
we
mentioned
in
the
in
the
video
notes
or
in
the
Porco's
related
on
the
webcast.
So
thank
you
for
watching
give
us
feedback.