►
Description
PnP Webcast around how you can call external APIs secured with Azure Active Directory from SharePoint Framework. Webcast details available from http://dev.office.com/blogs
A
Welcome
everybody:
this
is
SharePoint
banners
and
practices
webcast,
and
in
this
webcast
we're
going
to
talk
about
how
you
can.
How
can
you
call
an
external
API
from
a
SharePoint
framework
solution
securely?
Essentially,
how
can
you
in
the
easiest
possible
way
have
an
external
API
as
a
web?
Api
or
I
shall
function
as
an
example
and
as
your
functions
endpoint,
which
you
can
call
in
a
shaker
security,
a
from
a
sharepoint
framework
solution,
typically
from
a
client-side
web
part
from,
but
in
the
future
from
other
types
as
well.
A
B
Hi
everybody,
my
name
is
volley
one
stickers
I
worked
at
red
anchor.
I
am
also
development,
MVP
and
today,
I
am
far
from
being
demo,
god.
I
am
demo
slave
and
actually
hope.
The
demo
gods
will
work
with
us
and
I'll
be
able
to
show
you
how
you
can
really
easily
call
a
secure,
API
and
API
is
secured,
with
a
AED
in
secure
way
from
SPF
X,
without
using
a
dodgy
s.
Yes,.
A
And
that's
really.
The
key
point
was
what
I
was
saying.
So,
yes,
we
do
have
existing
samples
on
the
SharePoint
framework
documentation,
how
to
call
and
Web
API
in
secret
we're
using
a
Dell
TS,
but
there's
a
challenge
to
run
that
one.
Let's
talk
about
actually
that
those
challenges
in
our
in
the
following
slides
as
well.
So
let
me
let
me
go
so
so.
A
What
are
those
challenges
related
on
a
dulces
from
SharePoint
framework
know
it
OTS
requires
an
application
to
be
created,
inertia
ad
and
a
specific
authorization
to
be
completed,
and
what
this
means
is
then
I
say
if
you're
using
data
is
I,
see
a
flow
and
a
model
to
make
these
things
happen.
You
will
need
to
sign
in
explicitly
or
authorize
the
application
when
you're,
actually
starting
the
user
and
from
angel
perspective.
A
That's
not
really
that
optimal,
because
what
it
means
is
that
you
need
to
first
click
the
login
button
in
the
web
part,
even
though
the
web
part
is
hosted
in
SharePoint,
and
then
you
need
to
do
the
authorization
flow
and
then
you're
good
to
go
off,
execute
into
wet
baby.
So
not
a
snow.
Optimal
thing,
yeah.
B
A
Technically,
yes,
because
all
of
those
webparts
our
own
applications
so
and
that
would
actually
then
open
up
an
additional
set
of
challenges
as
well.
Yeah
and
one
of
the
key
challenges
around
to
a
deltas
is
also
the
fact
that
you
will
need
to
know
to
reply
URLs,
because
when
you
fall
back
from
the
$1
when
you're
using
a
delay
s
your
process
being
redirected
to
this
another
URL.
A
Where
you
authorize,
then
the
the
azure
ad
is
throwing
you
back
on
the
URL,
where
you
continue
using
the
original
application
and
that's
works
well
in
the
context
of
let's
say,
a
single
based
application,
which
is
a
isolated
application
hosted
in
national.
But
it
doesn't
work
really
that
well
in
the
context
of
sharepoint,
because
any
sharepoint
to
the
river
scenarios
would
be
a
custom
with
pods
which
are
randomly
here
and
there
in
the
in
your
portal.
A
So
you
would
you
well,
even
though,
technically
you
could
actually
redirect
the
person
pack
on
the
welcome
page
of
the
portal.
But
if
the
same
way
part
is
used
in
multiple
locations,
you
would
that
would
actually
get
super
super
complex
and
there's
a
maximum.
And
ten
reply
URLs
for
each
as
your
80
application,
so
it
would
be
super
complex
to
actually
configure
and
keep
up
with
it
with
the
functionalities
or
keep
up
with
a
instances
of
those
webparts
in
the
inner
SharePoint
portal
site.
So
that's
not
really
optimal
scenario.
That's
not
really
acceptable
scenario.
B
Being
creative
I
can
imagine
that
you
could
come
up
with
a
solution
that
you
would
redirect
back
to
the
home
page
and
you
would
keep
track
of
from
which,
which
basically
Israel
cave
and
then
trace
it
back,
but
that
was
a
really
really
complex
thing
to
to
maintain
to
keep
track
to
do
it
properly.
True
and
actually,
the
best
part
is
there's
a
simpler
way
to
do
all
of
this
without
a
doll
right.
So
we
can.
There
is
another
tool
in
our
box
that
we
can
use.
Yes.
A
Absolutely
and
let's
talk
about
that-
one
as
well
before
we
go
to
the
demo
so
alternative
way
to
secure
as
acrylic
all
ap
is
secured
with
our
ad.
So
how
we're
doing
this
now
is
that
we
essentially
take
advantage
of
the
authentication
which
is
happening
already
in
SharePoint,
so
we're
using
this
iframe,
which
is
pointing
to
the
API
page
within
the
within
the
with
socity
newest
general
location
like
in
the
ad
I,
show
web
application
or
as
you
function
as
well.
A
The
outgoing
web
requests
whenever
you're
calling
from
a
SharePoint
framework
solution
and
those
who
are
outgoing
web
requests,
must
send
credentials
across
the
domain,
which
is
understandable
as
well,
because
if
you
don't
send
the
credentials,
how
could
that
could
be
authenticated?
So,
if
you
send
the
credentials,
then
the
the
external
web
api
or
the
web
api
hosted
inertia.
A
shared
web
application
or
the
asha
function
can
actually
authenticate
the
person
and
then
on
the
other
side
in
Azure
site.
A
In
this
scenario,
and
also
in
the
demo
scenario,
the
API
must
accept
credentials
from
across
the
main
core.
So
you
need
to
do
some
level
of
a
configuration
there
to
make
all
of
this
happens
as
well.
For
and
for
all
of
this,
we
have
a
tutorial
available
and
we
also
have
a
sample
available
which
is
showing
how
to
make
these
things
actually
work.
Anything
about
and
I'm
gonna
add
here
waldek
before
we
go
to
the
demon
yet.
B
A
And
really-
and
that's
absolutely
a
great
point-
and
that's
that's
a
limitation
in
Internet
Explorer,
which
you
need
to
consider
now.
All
of
these
scenarios
which
were
showing
in
this
webcast
are
mainly
for
the
enterprise
development
scenarios
and
when
you
are
doing
an
enterprise
development
scenario,
you
can
easily
use
the
crew
policy
as
an
example
to
make
sure
that
the
the
locking
betas
are
in
the
same
security
zone
as
the
SharePoint
Online.
A
So
that's
not
really
unnecessarily
a
major
deal
or
we
can
solve
the
challenge
for
Internet
Explorer
as
well,
if
you're,
using
ie
and
really
before
we
go
to
the
demo.
One
of
the
key-
let's
say
differences
using
this
approach
with
a
deltas,
is
that
this
will
make
you
or
enable
you
to
call
the
FF
API
in
a
security,
but
it
doesn't
actually
authorize
you,
so
it
doesn't
actually
have
that
same
authorization
scheme
authorization
process
as
with
a
DOJ's
where
the
application
is
requesting
certain
permissions
against
your
identity.
And
then
you
cram
those
permissions.
A
This
model
only
works
essentially
for
all
the
indication
and
what
it
means
is
that
within
the
endpoint
within
the
API
APN
side-
and
you
do
not
have
access
tokens
for
certain
operations
and
which
obviously
is
a
limiting
sector.
But
if
you're
using,
for
example,
VIP
or
app
only
to
access
sharepoint
online,
that's
a
one
option
or
you
can
use
the
identity
of
the
person
to
filter
what's
being
shown
on,
what's
being
actually
performed
in
the
web.
Api
level.
B
And
then
reading,
I
think
that
we
should
name
is
the
fact
that
in
this
approach,
you
don't
need
to
create
an
an
aad
app
for
your
your
web
part.
Yes,
and
with
that,
you
don't
need
to
deal
with
reply,
URLs,
keeping
track
of
where
the
weapon
is
being
used,
worrying
about
the
limit
of
maximum
of
Ted
at
anywhere
else.
You
can
just
add
the
web
power
to
the
page,
and
it
will
work
it
will
just
work.
Yes,.
A
Indeed,
indeed,
and
now,
we're
actually
making
we're
making
kind
of
a
rule
or
some
promises
on
on
the
process
and
the
model
itself.
So
let's
actually
have
a
look
on
this
one
in
practice.
So,
let's
flip
on
a
wild
X
computer
walk
through
the
the
simplistic
scenario.
What
we
have
prepared
for
the
demo,
which
is
super
simplistic,
but
that's
for
a
reason
as
well,
so
we're
concentrating
on
showing
you
how
to
make
this
happen.
Then
it's
up
to
you
on
the
amount
of
innovation.
A
One
actually
build
on
top
of
this,
and
but
I
think
this
scenario
itself
is
super
super
super
important.
This
is
like
the
holy
grail
of
enterprise
development
within
a
sharepoint
favor
and
let's
come
back
on
the
scenarios
and
opportunities
around
this
one
after
the
demo
as
well.
But
let's
flip
on
the
demo
and
come
back
on
the
slides
in
a
second.
B
All
right
so
in
this
demo,
I
like
to
show
you
how
you
can
call
a
API,
an
API
secured
with
a
ad
from
a
sharepoint
framework,
client
side
web
part
without
a
towel.
So
here
we
have
the
web
part
in
word
event
and
that's
the
workbench
oh-o-oh
set
in
SPO,
so
that
I
am
already
low.
Octane
I
have
cookie,
and
all
that
and
I
am
actually
allowed
to
call
the
API.
And
here
you
see
a
greeting
and
this
part
comes
actually
from
the
nd
API.
B
A
B
Actually,
the
best
part
is
that
this
is
a
video,
so
you
can
pause.
You
can
go
fray
by
frame,
make
it
really
long
and
seeing
actually
seeing
that
there
is
a
loading
path.
Yes,
that's
true!
That's
absolutely
true
right,
and
this
is
just
to
give
you
the
proof
that
the
API
that
that
you're
calling
here
is
actually
an
API
secured
with
a
ad.
Let
me
grab
the
URL
open
that
in
a
new
window
in
private
and
when
I
try
to
access
the
API
I
will
get
a
login
page.
B
So
this
is
actually
an
API
secured
with
a
ad
that
I
cannot
access
anonymously
yeah.
So
with
that
prove,
let's
have
a
quick
look
at
the
API.
The
API
that
I
have
is
an
azure
function
that
I
implemented.
Here.
It's
really
simple
right,
because
the
the
whole
idea
here
is
not
to
show
a
fancy
thing
that
the
search
or
perform
some
line
of
business
object.
You
can
implement
that
part
by
yourself.
The
key
is:
how
can
you
enable
a
function
to
be
able
to
be
called
by
by
a
sheriff
framework?
B
Client-Side
web
part
without
a
towel,
so
the
key
part
are
actually
the
headers
right.
So
that's
one.
That's
one
element
that
you
have
to
have
in
place.
The
first
one
that
you
have
to
have
is
this
guy
here,
which
basically
says
that
this
function
is
capable
to
accept
credentials
coming
from
cross-domain
calls
and
that's
important,
because
the
function
is
actually
hosted
on
another
host.
Then
our
internet
right,
because
that
list
lives
in
Azure
or
is
it
the
workbench
that
we
call
it
from
this
in
SPO?
B
You
guys,
so
that's
that
one
another
one
is
for
this
part
to
work.
Another
thing
that
you
have
to
do
enable
its
course,
but
the
trick
here
is
that
you
cannot
use
a
star.
You
cannot
simply
allow
all
external
hosts
to
call
the
API,
yes
at
the
exact
list
of
all
holes
that
are
allowed
to
call
it
right.
So
so
those
also
done.
That's
that
that's
another
thing.
B
Absolutely
and
then
then,
another
part
that
you
have
to
add
are
the
options
that
the
API
accepts
right.
So
the
methods
which
are
they
get
post
and
options
here,
but
it
could
either
be
get
or
post
or
depending
on
what
your
API
does
and
then
also
we
have
the
headers
for
the
or
the
list
of
the
headers
that
we
support
and
the
amount
of
time
for
which
we
cache
the
response
right
or
we
allow
the
response
to
be
cached.
So
so
these
are
the
key
parts
now.
B
Other
things
that
you
have
to
keep
in
mind
for
this
to
work
specifically
to
functions
is
that
first
of
all,
the
function
is
anonymous
right,
because
when
you
build
an
as
your
function,
you
have
an
option
to
make
it
anonymous.
You
have
the
option
to
secure
it
with
a
key
or
an
an
admin
key
right.
So
so
in
that
thing
we
shall
we
set
it
to
anonymous,
and
then
another
thing
is
that
we
secure
the
function
using
as
your
app
service
off
and
that
that's
an
option.
B
Basically,
if
we
go
to
the
function
here,
which
is
the
one
here
the
function
app
here
is
the
the
alt
option,
and
in
here
you
can
see
that
add
that
is,
that
is
enabled
on
it
is
set
to
prompt
for
aad
off
whenever
you
are
anonymous,
and
here
there
is
also
the
ad
and
eyeballed
which
basically
uses
or
points
to
my
AAT
app
used
to
secure
the
function
with
a
ad.
So
that's
a
a
typic,
difficult
thing
that
that
you
have
to
do
for
an
API
right.
A
A
B
A
Want
like
one
more
time
can
we
actually
go
one
step
back,
because
this
is
already
in
that
fans
page.
But
where
did
we
get
to
this?
What
if
we
see
the
if
we
go
to
the
function
itself,
just
making
sure
that
we're
getting
that
one
probably
covered
so
authentication
in
the
configure
features,
and
in
here
this
is
already
associated,
so
we
were
extending
that
basis
already,
showing
the
application
where
it's
being
associated
right.
Yes,.
B
A
B
B
Is
it
OEE,
I
said
really
close
to
the
screen?
So
that's
why
I
am
on
it,
but
nevertheless
I
understand
the
request
there
you
go
so
here
is
the
URL
of
the
function
that
we
have,
and
the
reason
for
us
to
include
it
in
a
frame.
Is
that
whenever
we
include,
let
me
show
you
what
it
does
if
I
paste
the
URL
and
I
go
back
to
the
browser
and
if
I
just
paste
it
in
a
new
tab.
So
now
we
are
already
signed
in
pío.
B
We
can
already
access
our
our
Internet
and
if
I
paste
the
URL,
you
will
see
that
we
are
immediately
signed
into
functions,
whereas,
if
I
open,
the
same
URL
in
private
I
will
be
prompted
to
sign
in
right,
so
because
I
am
signed
in
if
I
enter
that
URL
in
iframe.
That
iframe
will
directly
get
me
cookie
to
this
domain
and
sign
me
in
so
that's
why
it
is
here,
then.
Another
thing
that
we
do
is
we
attach
to
this.
B
I
am
an
event
handler,
and
we
say
whenever
the
iframe
loads
set
a
flag
to
true,
and
this
event
occurs
after
the
page
loads.
All
that
within
the
iframe,
so
in
other
words
after
we
got
cookie
for
that
domain
in
the
iframe
in
our
page
and
with
that
flag,
we
use
that
flag
to
wait
with
our
Ajax
call,
for
which
we
need
to
have
cookie
to
delay
that
only
until
we
got
cookie
right.
So
with
that,
we
can
just
wait
until
we
load
the
page.
B
B
We
wait
right
and
we
can
wait
for
that
for
for
some
songs
of
some
time
right
and
then
once
that
done
the
the
iframe,
oh,
that
we
slip
the
flag
to
true
and
with
that
we
call
the
function
that
we
pass
here
initially.
So
didn't
this
part-
and
this
part
is
nothing
else
than
a
default
age
of
skull
with
the
SharePoint
framework,
HTTP
I
end
and
then
with
a
get,
and
here
in
we
pass
the
URL
of
our
function
with
a
get,
and
the
tricky
part
is
to
include
this
one
so
include
this
part
here.
B
Credentials
include
with
this
flag.
You
actually
make
the
call
include
cookie
and
and
send
that
over
to
this
cross
domain
call.
If
you
skip
this
flag,
the
request
will
break
and
be
actually
be
already
blocked
and
browser.
So
you
will
not
even
be
able
to
see
it
in
fiddler
will
be
already
blocked
in
browser.
So
this
is
exactly
why
that
flag
has
to
be
ready
to
say
that
this
is
a
cross
domain
call
that
requires
you
to
send
over
cookies
to
another
domain
right.
So
that's
why
you
need
this
part
in
there
and
beyond
that.
A
Make
sense
if
it's
a
relatively
simplistic
implementation
on
this
site
and
the
whole
scenario
is
actually
super
simplistic
intended
to
enable
certain
things
to
be
aware,
but
that's
it
so
and
then
on
the.
What?
If
you
do,
what
if
it
would
be
a
VIP
API?
So
in
this
case
we're
calling
a
asha
function,
you
would
have
to
do
some
level
of
a
similar
kind
of
configuration
in
your
web
api
code.
A
A
Absolutely
and
as
part
of
the
documentation
we'll
have
that
one
covered
as
well,
so
people
know
absolutely
how
to
make
how
to
make
that
happen,
because
that's
super
interesting
as
well.
Obviously,
as
your
functions
super
super
awesome
platform
as
well,
but
then
there's
clearly
a
scenarios
where
the
Web
API
is
used
as
well,
so
we
need
to
cover
both
in
our
tutorials
cool
but
I
think
that's
it
for
this
one.
A
Cute
so
now
that
we've
gone
through,
what
does
it
actually
mean
from
a
configuration
perspective?
Lips
slightly
innovate?
What
does
it
actually
mean?
Why
is
this
that
in
quotes
the
holy
crao
of
enterprise
development
in
SharePoint
Online?
Now
we
are
using
the
SharePoint
framework,
which
is
the
the
the
client-side
development
framework
for
SharePoint
Online
nowadays,
at
the
model
is
essentially
following,
so
we
are
hosting
the
JavaScript
files
somewhere
in
see
in
some
CDN
and
when
we're
accessing
those
within
your
processor.
A
You
are
in
the
context
of
SharePoint
Online,
but
the
JavaScript
files
are
hosted
somewhere,
they
could
be
technical,
they
could
be
hosted
in
SharePoint.
You
could
use
office,
365,
CDN
or
associated
on
a
CDN
or
whatever,
but
essentially
javascript
files
are
loaded
in
the
memory
in
the
context
of
sharepoint
online.
Now
using
the
model
with
the
saw
in
the
demo,
you
can
then
call
in
a
secret
way
a
web
api
or
inertia
function.
A
It
really
doesn't
matter,
you
can
call
an
external
endpoint
in
a
security
you're
sending
credentials
and
the
API
is
validating
those
credentials
so
the
pipeline,
and
that
call
is
intact
and
securely
done,
and
this
means
that
the
web
api
cannot
be
called
unless
the
user
is
being
authenticated,
which
is
really
the
key
point
on
the
scenario
in
a
classic
implementation
style,
so
classic
models.
What
we're
seeing
in
the
past
we've
kind
of
a
demonstrated
these
functionalities,
but
we
never
then,
to
the
we
never
really
went
at
the
level
of
okay.
A
How
do
we
secure
that
call?
How
do
we
make
sure
that,
from
a
client
side
and
from
a
krauser
when
I'm
calling
the
Web
API,
that
call
itself
is
secure
and
that's
exactly
what
I
saw
today
and
now?
The
key
points
of
this
one
is
that
this
is
unlocking
than
everything
in
Russia,
because
when
you're
calling
that
Web,
API
or
inertia
function,
then
it's
up
to
you.
Whatever
you
want
to
do.
A
If
it's
a
long-running
operation,
you
can
use
storage
queues,
web
charts,
you
can
do
and
access
all
of
the
services
what
we
have
available
inertia.
It
could
be
a
hybrid
solution.
The
Web
API
is
then
using
service
bus
to
call
an
on-premises
and
then
get
some
of
the
information
from
on-premises
and
calls
back
and
you've
been
able
to
securely
access
resources
from
on-premises
and
show
them
in
SharePoint
Online,
and
that
is
no
doubt
really
really
really
super
valuable
scenario
for
SharePoint
Online
and
one
thing.
What
we
are
saying
is
that
this
is
an
enterprise.
A
So
that's
a
requirement
for
all
of
this
to
make
work,
so
this
does
not
actually
work
in
the
way
that
you
would
have
a
let's
say
and
Web
API,
which
is
configured
to
be
multi
tenant
and
then
that
would
not
actually
be
then
secure
and
that
model
wouldn't
actually
work
that
well,
which
is
a
pity
but
then
again,
I
think
there,
the
enterprise
developers
and
enterprises,
enterprise
customers
are
really
looking
into
these
kind
of
scenarios
to
make,
let's
say
complex
business
processes.
To
happen,
natively
within
a
SharePoint
Online
in
a
secret
way.
B
A
The
function
key
ended,
let's
say
username
password
way
of
securing
on
the
sharepoint
online
clients
on
the
sharepoint
online
sign,
with
the
essentially
mean
that
it
would
be
a
configuration
for
the
web
part
in
sharepoint
online,
so
it
would
be,
for
example,
in
the
properties
of
the
web
part
edit
panel
and
you're
able
to
secure
that
in
a
sharepoint
online
and
again
that
that
is
kind
of
secure.
There's.
However,
the
concern
that
the
cost
SharePoint
solution
webparts
are
being
executed
in
the
browser
context.
What,
if
there's
additional
webparts
on
the
page
so
radically?
A
Those
webparts
can
access
that
information,
because
the
information
is
in
the
same
context
when
we
are
using
sharepoint
framework
we're
not
using
an
iframe
level
and
domain
level
isolation.
The
execution
happens
in
the
same
context
of
the
of
the
other
webparts
as
well,
and
I
think
that's
probably
the
number
one
reason
why
this
is
more
secure.
And
this
way
you
do
not
need
to
explicitly
a
tree
or
to
have
a
quote
of
secret
or
user
ID
and
a
password
which
is
configured
under
sharepoint
online
protocol.
A
I
use
the
same
model
for
calling
Microsoft
crafts.
Well,
yes,
and
no
so
you
could
use
it.
You
could
call
microsoft,
crafts
in
your
custom
web
api
and
using
let's
say
app,
only
access
tokens,
but
to
be
able
to
call
the
microsoft
craft.
You
would
need
to
have
a
permissions
against
Microsoft
graph
as
well,
so
the
execution
would
need
to
have
that
with
those
permissions.
A
So
this
way
you
can
have
access
on
your
own
premises,
services
natively
from
sharepoint
online
in
a
secret
way,
which
is
superb
and
that's
a
holy
grail
of
enterprise
development
for
sharepoint
online,
at
least.
In
my
perspective,
I
don't
know
what
your
thinking
on
that
one
well
like
in
general.
This.
B
Eventually,
I
mean,
if
you
had
a
web
part,
that's
only
being
used
on
on
the
homepage
of
intranet.
That
would
work.
But
that
is
that's
only
one
thing
right,
and
actually
the
great
thing
is
that
Webb
parks
were
actually
meant
to
be
used
as
building
blocks
for
internet
right,
so
to
be
used
across
the
whole
internet
and
not
just
in
what
one
place
and
for
us
in
order
for
us
to
be
able
to
leverage
that
we
have
to
have
the
ability
to
use
them.
B
A
I
know
this
empowers
people
to
do
much
much
much
more
in
SharePoint
Online
than
what
we
were
used
to
do
and
use
to
be
able
to
do
in
the
past
as
well
and
like
mentioned
when
we
started
to
well
during
the
webcast
as
well.
There
is
a
tutorial
available
around
this.
One
essentially
follow
up
these
tips
and
you
can
actually
make
a
custom
web
part
to
happen
which
is
calling
an
external
service
and
we'll
get
up
ay-ay
samples
around
this
one
in
the
future
as
well.
There
are
key
table
creepers,
but
I.