►
Description
Webcast around Calling enterprise applications securely from SharePoint Framework. Starting from SharePoint Framework version 1.4.1 you can call 3rd party APIs secured with Azure AD easily by using AadHttpClient class.
More details on covered topics can be found at http://dev.office.com/blogs.
A
Welcome
everybody
to
the
shipment
Patterson
practices.
The
webcast
and
system
will
be
having
a
look
on
how
to
call
enterprise
applications
securely
from
SharePoint
framework,
and
this
is
something
which
got
slightly
changed
or
evolved
as
far
as
to
SharePoint
framework
version.
On
one
point,
four
point:
one,
and
within
this
webcast
what
kind
of
a
deep
dive
on
on
those
changes
and
how
the
process
will
look
like
in
detail.
A
A
Indeed,
so,
let's
actually
have
a
look
on
directly
on
the
logical
architecture
on
on
what
are
we
looking
into
so
the
whole
point
of
whole
point
of
this
model.
Is
that
the
really
the
key
point
in
this
a
key
challenge
on
the
or
in
the
past
in
the
SharePoint
Online
has
been
that
how
would
I
be
able
to
successfully
or
easily
as
they
currently
call
a
custom,
Web
API
or
an
application
or
an
API,
hosted,
for
example,
in
Microsoft
Azure?
A
Well,
typically
in
Microsoft
assure
and
these
applications
are
your
enterprise
applications,
they
could
be
that
API
could
be
a
route
or
it
could
have
a
route
even
calling
the
own
premises
or
your
lob
systems
within
wherever
they
are
being
hosted,
and
quite
often
you
want
to
present
some
kind
of
data
from
a
lab
based
systems
in
SharePoint
Online
and
this
new
model
which
we
introduced
as
far
as
the
SharePoint
framework.
One
point
four
point:
one
will
make
implementation
of
these
kind
of
designs
much
more
easier.
A
So
what
you
need
to
do
and
to
make
these
things
work,
is
that
as
a
tenant
administrator,
you
basically
need
to
configure
and
control
what
are
the
permissions
for
SharePoint
framework
and
the
SharePoint
framework
implementations
to
actually
have
when
it's
calling
or
what
are
the
API
permissions?
What
the
SharePoint
framework
can
actually
call,
and
this
the
tenant
administrator
could
didn't
administer,
can
figure
this
into
Azure
ad.
So
there
is
a
pre
provisioned,
an
application
which
the
tenant
administrator
is
basically
configuring
with
an
azure
ad
for
every
single
office,
365
tenant.
A
Now,
when
you
then
implement
a
SharePoint
framework
web
board,
which
wants
to
call
that
custom,
web
baby,
I'm
or
enterprise
application,
and
that
client-side
web
part
or
an
extension
so
to
say,
can
then
request
an
access
token
from
the
azure
ad
and
I
shall
Active
Directory,
given
those
permissions
what
the
tenant
administrator
has
given
and
then
with
that
access
token,
the
client-side
web
part
or
SPF
X
can
actually
call
that
custom
web
api,
which
is
hosted
in
usher.
In
this
case,
anything
we
want
to
add
here
actually
directly
Waldeck.
B
A
The
sharepoint
online
client,
which
is
mentioned
in
the
slide-
this
is
pre
provisioned
application
like
mentioned,
and
this
is
the
azure
ad
enterprise
application
which
we
pre
provisioned
for
all
of
the
tenants.
So
whenever
the
client-side
web
part
is
then
planning
the
call,
a
custom,
let's
say
Microsoft
graph
or
a
custom
web
api.
That
sharepoint
online
client
is
the
one
where
we
control
the
permissions,
so
is
to
sharepoint
framework
application
or
sharepoint
favorite
code
capable
of
calling
that
custom
web
api
is
it
permission?
B
A
That
is
correct,
yes,
indeed,
indeed
so,
and
and
there's
basically,
what
happens
here
is
that
the
like,
like
mention
the
tenant
administrator,
is
able
to
control
using
that
application,
which
is
inertia
ad.
What
are
the
permissions
in
general
for
SharePoint
framework
to
call
within
this
particular
tenant,
so
easy,
they're
capable
of
calling
with
scraf
api
is
capable
of
calling
with
third-party
web
api.
A
You
grant
those
permissions
for
the
sharepoint
online
client
and-
and
although
I
will
show
this
one
in
the
in
the
practice
in
the
demo
as
well,
just
this
just
to
clarify
how
the
flow
actually
works.
But
basically,
this
way
the
sharepoint
framework.
Well,
the
tenant
administrator
controls
weeds
are
the
operations.
A
These
currently
permissions
for
api
apply
to
all
customizations
running
in
the
tenant.
So
when
you're
granting
Commission's
for
sharepoint
framework
to
to
pollinate
the
I
it's
not
about
the
sharepoint
framework
solution
itself,
it's
about
all
of
the
solutions
and
customizations
within
a
tenant
so
and
we'll
show
this
one
in
practice
as
well.
But
so
there's
no,
let's
say
isolation
of
these
permissions
per
sharepoint
framework
solution
or
one
favorite
part
or
an
extension
it.
The
permissions
are
same
for
all
of
the
solutions
which
have
been
deployed
in
a
tenant.
A
Also,
if
you're
hosting
the
the
third
party
API
or
your
enterprise
API
in
a
different
Azure
ad
tenant,
then
your
office
365
office
365
tenant.
Then
you
need
to
do
some
additional,
let's
say
configurations
and
settings,
and
this
is
where
you
need
to
have
the
admin
consent,
because
that
API
has
to
be
the
multi
tenant
aware.
A
B
Guess
it
is
important
for
us
to
underline
the
fact
that,
as
you
said
by
default,
even
though
an
API
exists
in
the
same
ad
as
your
your
tenant,
it
is
by
default,
not
exposed.
Why?
Because
you
may
have
more
api's
that
you
want
to
make
available
to
all
scripts
that
run
inside
a
tenant.
So
it's
it's
always
explicit.
Tenant
admin
choice
to
make
an
API
available
to
scripts
that
run
on
pages
right.
So
it's
not!
B
A
Cool-
and
this
was
a
relatively
quick
intro
on
on
on
the
process
and
the
model,
but
I
think
if
you,
if
you
haven't,
actually
read
everything
about
this
one
from
our
official
documentation,
which
is
by
the
way
obviously
referenced
in
the
video
notes
as
well.
Let's
have
a
live
demo
on
this
one
and
clarify
the
steps
and
one
step
at
a
time
which
weren't
true
in
the
logical
architecture,
design
a
diagram
as
well.
A
So
while
that's
going
to
show
you
the
setup
with
a
application,
API
or
third-party,
let's
say
in
quotes
or
third-party
web
api
and
then
how
do
we
call
that?
First,
how
do
we
grant
a
permission
to
be
able
to
call
them
and
also
how
do
we
call
that
from
a
sharepoint
framework
in
a
secure
way?
So
let's
have
this
live
demo
and
come
back
on
the
slides,
interceptive
webcasting.
B
B
Just
children
just
to
see
if
it
works,
I
can
go,
go
to
orders,
the
endpoint
get
URL
copy
it
and
enter
it
in
browser
here
and,
as
you
can
see
here,
I
get
I
get
error,
but
that's
that's
ready
to
the
fact
that
the
browser
cannot
really
show
the
data
in
XML
format.
So
instead
let
me
issue
the
same
call
but
then
get
get
the
data
in
JSON.
So
for
that
the
first
part
that
I
need
to
have
is
a
cookie,
because
that
API
is
not
available
to
anonymous.
B
So
if
I
would
just
call
it,
I
would
have
unauthorized
error
because
I
am
not
logged
in
right
and
here
the
reason
that
I
can
call.
It
is
because
I
am
already
in
browser
because
I
am
already
needy
in
Azure
right.
So
that's
why
I
can
already
call
the
API
and
I
only
show
error,
because
the
browser
cannot
show
the
data
in
XML.
So
first,
let
me
get
cookie
and
I
can
get
that
from
developer
tools.
B
So
now,
if
I
refresh
the
page
here,
I
will
see
dear
in
the
request
to
the
API
and
from
here
I
can
get
cookie,
so
I
can
copy.
All
of
that-
and
here
let
me
grab
that
and
let
me
issue
a
call
envious
code.
So
let
me
just
do
all
that
and
issue
exactly
the
same.
Call
to
the
same
you
around
get
request.
Let
me
issue
it,
and
now
we
can
see
that
I
actually
get
the
data
back,
so
JP
I
works.
So
that's
the
first
part.
B
The
API
is
not
available
to
anonymous
I,
actually
enabled
it
enabled
an
ad
app
to
protect
the
access
to
it,
which
you
would
probably
do
in
your
enterprise
as
well.
So
here,
if
we
go
to
all,
you
can
actually
see
that
a
ad
is
indeed
enabled
for
this
function.
App,
and
here
you
can
get
the
details
about
the
ad
app
that
is
used
to
sort
of
certain
certains
occur
this
endpoint,
and
here
we
only
see
the
ID
of
the
app.
B
But
if
we
go
to
edger
a
ad
in,
there
will
be
able
to
see
also
the
apps
name,
and
these
are
the
important
pieces
that
you
have
to
know
in
order
for
you
to
be
able
to
access
that
API
in
your
SharePoint,
her
friend
friend
friend,
work
web
part,
because,
as
we
said,
these
API
is
even
though
they
live
already
in
Azure.
They
are
not
available
by
default
to
you,
you
cannot
just
access
them.
B
First,
you
have
to
request
access
to
it
and
for
that
you
actually
need
to
know
either
the
ID
or
the
name
of
the
app.
So
if
we
go
back
to
project
here,
we
have
a
file
called
package
solution:
ginge
ism.
Let
me
open
here
and
in
there
to
request
access
to
unto
to
an
API.
You
add
new
section
named
web
api
permission,
requests
and
whatever
you
put
in
here,
that
will
be
surfaced
in
in
tenant
and
then
tenant
admin
will
be
able
to
approve
that
or
not,
and
there
are
two
bits
for
each
entry
right.
B
So
for
for
each
API
that
you
want
to
access,
you
have
to
include
two
pieces
of
info
first
as
done
a
resource,
and
this
can
be
either
the
name
or
ID
of
the
app
personally
I
like
that
name,
because
it's
easier
to
remember
it
it's
clear
now,
but
also
over
a
week
or
a
month.
I
will
always
know
which
ad
app
I
need
to
access
and
then
scope,
usually
in
an
enterprise
API.
That
will
be
just
access
like
here,
but
you
might
have
an
API
that
distinguishes
between
read
and
write
solo.
B
Client
plan
client
and
you
can
load
that
from
the
at
Microsoft,
slash
a
PSP
HTTP
package
right
because
that's
not
available
in
web
part
by
default.
You
have
to
explicitly
import
that
so
when
you
and
you
do
that,
you
create
a
new
instance
of
it
and
each
instance
is
related
to
a
separate
API
that
you
want
to
call.
So
if
you
want
to
go
to
api's,
you
will
have
two
instances
of
a
client,
and
the
reason
for
that
is
that
each
clients
keeps
track
of
the
access
token
every
request
right.
B
So
that
way,
you
cannot
in
victor
change
them
and
in
here,
when
you
create
a
new
instance
of
a
client,
you
you
have
to
pass
two
things
first
is:
is
the
service
scope
which
you
get
from
from
a
web
part
or
extension,
and
then
another
one
is
the
scope
of
your
API
and
that's
an
interesting
part,
because
this
is
not
a
URL.
You
cannot
open
this
thing
in
browser,
I
mean
you
could
try,
but
you
will
get
in
getting
get
error.
This
is
the
scope
related
to
the
aad
app
used
to
protect
the
API.
B
If
we
go
back
to
browser
280
in
here,
if
I
go
back
to
a
sure,
you
can
see
that
the
URL
that
we
have
here,
which
is
my
name
dot
on
microsoft.com,
slash,
P
NPAPI
ad
matches
the
audience
which
I
have
here,
and
these
two
have
to
match.
Otherwise,
the
web
part
or
extension
that
you
built
will
not
be
able
to
obtain
a
token.
B
Damn
idea
with
that
in
place,
you
have
now
an
instance
of
a
client
that
you
can
use
to
call
the
API,
and
in
here
you
can
actually
see
that
this
is
the
URL
of
my
API
that
I
put
that
I'll
call.
This
is
the
function
app
URL,
including
the
endpoint
that
I
want
to
call
in
order
to
get
orders
right.
So
this
is
basically
it
so
with
that
in
place.
B
Let's
deploy
the
web
part
to
SharePoint
and
let's
see
what
the
experience
is
for
a
tenth
admin
who
will
get
this
to
actually
check
whether
he
wants
to
approve
or
or
are
not
there
and
say
request
to
api's,
which
we
have
here
in
package.
So
let's
go
and
build
the
project
and
we
do
that
using
gulp
bundle
ship,
because
we
want
to
have
a
release
version
of
our
project
that
will
run
for
home
and
it
will
build
bundle.
B
It
will
create
a
package
we
are
done
already
so
with
that,
let's
open
our
app
as
long
and
then
also,
let's
open
the
folder
where
we
have
the
package.
So
now,
let's
add
the
package
to
catalog
and
we
will
probably
get
a
prompt
to
to
override
on
how
I
already
removed
it
and
that's
an
interesting
part
here.
B
Please
go
to
the
service
principle
permission
management
page
to
approve
pending
permissions
tenant
admin
will
see
this
warning
every
single
time.
The
package
that
is
added
to
catalog
contains
permission
requests.
So
actually
has
this
piece
in
the
inn
in
here.
Whenever
this
is
added
to
package,
the
admin
will
be
warned
that
there's
a
request
that
he
or
she
should
deal
with
and
and
and
an
interesting
bit
here-
is
that
these
requests
are
only
added
visible
when
you
deploy
the
package.
B
So
if
you
would,
if
you
would
do
a
cancel
here,
you
would
not
see
the
requests
in
there.
So,
let's
deploy
it
first
deployment
should
be
completed
now
and
now
let
us
go
to
the
tenant
admin
page
in
here.
Let's
refresh
the
page,
and
now
we
see
that
we
have
one
pending
approval,
and
this
is
exactly
our
PNP
@api
ad
app
that
we
had
in
our
package
right
and
and
now
10
an
admin
can
can
say
whatever
they
want
to
allow
scripts
to
access
this
API
or
not.
So
in
our
case,
let's
approve
it
and.
A
While
you're
doing
that
just
arrghh
a
reinforce
on
this
one,
you
can
absolutely
do
this
in
PowerShell
as
well
and
then,
depending
on
when
you
are
watching
the
video,
you
can
actually
control
these
permissions
without
having
them
in
the
SPP
kt
file
as
well.
But
in
this
case
once
the
video
was
recorded-
and
this
was
the
process
of
how
to
get
the
permissions
on
the
other
side.
I.
B
Just
realized
that
I
did
not
enable
bold
deployment
to
a
tenant,
so
I
will
need
to
either
edit
to
the
side
or
I
will
have
to
redeploy
redeploy.
Basically,
yeah
I
think
there
was
this
one:
yes
SPFs,
a
ad
API,
yes,
I,
think
so,
let's
give
it
a
try,
so
let
us
redeploy
it
available
to
all
sites
at
once.
B
B
It
has
the
most
obvious
name
that
I
could
pick
and
I
just
didn't
know
it
orders
it
should
be
in
here
there
you
go.
It
is
there
right,
because
you
always
over
complicate
things
and,
as
you
can
see,
it
works,
we
didn't
get
any
errors
and
we
actually
don't
show
the
orders
in
here.
But
if
we
refresh
the
page
and
reload
it
in
here,
we
will
see
a
request
that
we
issue
and
let's
filter
it
down
to
orders.
B
So
in
here
you
can
see
and
actually
I
think
that
we
have
this
webpart
place
twice
in
a
page
great
for
tests,
but
in
here
you
can
see
that
we
actually
retrieve
the
orders
right
and
we
call
them
which
are
actually
our
API.
So
we
have
all
of
this.
We
have
a
token
that
we
add
here.
So
all
of
this
works
and
all
of
this
works.
Why?
B
Because
we
had
a
package
that
stated
that
it
needs
request
or
it
needs
access
to
to
an
API.
Then
we
deployed
the
package
to
the
catalog
and
and
Tenant
admin
approves
the
access
for
the
web
part
to
this
API,
because
if
tenth
admin
Remini
rejected
this
request,
well,
then
we
would
have
an
access
denied
trying
to
call
the
API
in
web
part,
so
the
web
part
by
itself
would
work,
but
then,
in
the
part
where,
where
where
it
tries
to
call
the
API,
that
piece
would
fail.
Why?
B
A
Not
really
yeah
so
there's
quite
a
few,
obviously
advanced
scenarios
and
everything
else
which
we
already
have
created.
That
will
not
talk
about
them
in
this
webcast.
One
will
reference
all
of
our
documentation
in
the
video
notes
and
but
I
think
it's
better
to
go
to
the
back
on
the
slides
and
close
up
the
webcast.
So
thank
you,
lovely.
A
Excellent
Thank
You
violet
one
more
time
for
the
crate
demo
on
that.
One,
like
you
saw,
the
steps
are
not
actually
that
complex.
There
are
certain
nuances
which
you
need
to
understand
and
how
do
you
actually
grant
those
permissions
for
the
for
within
a
tenant
level,
but
in
the
end
and
the
steps
are
relatively
easy
to
follow-
you
just
need
to
be
a
tenant
administrator
to
grant
those
permissions
or
grant
grant
yes
permissions
for
your
SPF
X
to
be
able
to
call
the
Web
API
anything
else.
You
want
to
add
here.
B
A
This
is
like
the
holy
grail
of
sharepoint
online
from
our
husband
from
day
one.
So
how
do
we
actually
call
in
a
separate
way,
actual
enterprise
applications
from
your
sharepoint
online
UIs
and
using
the
the
new
techniques
which
we
went
through
in
this
webcast?
That's
now
possible
and
in
a
security
which
is
a
in
a
relatively
simple
way
as
well,
so
it
doesn't
require
any
additional
rocket
science
or
additional
steps
anymore,
but
I
think
that's
it
for
this
one.