►
From YouTube: Using 3rd Party APIs in Viva Connections ACEs
Description
In this 13-minute developer-focused demo, Paolo Pialorsi steps viewers through the setup and consumption of a 3rd party/custom API (Azure Functions, ASP.NET REST APIs) in an ACE. Start with registering the API in AAD as an AAD app, consenting the AAD app in target tenant, granting permissions to the app via SPO Admin UI to consume the API via SPFx context and AadHttpClient. After setup, see the code for calling and rendering stock values acquired via the third-party API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.
Demo Presenter: Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials:
• Documentation - Connect to Azure AD-secured APIs in SharePoint Framework solutions | https://docs.microsoft.com/sharepoint/dev/spfx/use-aadhttpclient
• Documentation - AadHttpClient class | https://docs.microsoft.com/javascript/api/sp-http/aadhttpclient?view=sp-typescript-latest
• Sample - Consuming Third Party APIs secured with Azure Active Directory within SharePoint Framework | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-3rd-party-api
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
We
simply
need
to
register
the
api
as
an
azure
active
directory
application
in
the
target,
azure
ready
tenant,
and
we
need
to
expose
an
api,
and
we
will
see
how
to
do
that
once
you've
done
that,
you
need
to
configure
in
the
package
solution
json
file
of
your
spfx
solution,
because
an
adaptive
card
extension
at
the
very
end
is
just
an
spfx
solution.
You
will
have
to
configure
the
web
api
permission,
request
section
to
declare
what
kind
of
permissions
you
need
to
consume
the
target
api.
A
You
will
eventually
have
to
consent
your
application
in
a
target
tenant.
If
you
are
creating
a
multi-tenant
solution
and
then
you
will
have
to
grant
the
permissions
to
consume
that
api
and
you
will
be
ready
to
use
the
adhdp
client
that
we
have
in
spfx
in
order
to
consume
the
api
and
show
the
output
in
a
car
view
or
in
a
quick
view.
A
So
rather
than
talking,
let
me
show
you
what
I
mean
in
practice,
so
I
will
start
showing
you
an
actual
demo
ace,
which
is
simply
based
on
the
idea
of
showing
a
set
of
stock
values
and
don't
be
scared.
These
are
fake
values,
so
don't
jump
on
your
chair
if
it
is
eiger
or
lower
than
what
is
actually
the
current
value
of
any
of
these
stocks.
This
is
just
based
on
a
fake
list
of
stocks,
so
it
is
close
to
today's
values,
but
not
exactly
the
current
values.
A
This
is
an
adaptive
card
extension
running
right
now
in
the
workbench
and
if
I
click
on
edit,
we
can
see
that
it
has
been
configured
in
order
to
consume
an
external
quote
service,
which
is
a
fake
one
that
I
created
for
the
sake
of
this
demo
and
I'm
providing
right
here
as
a
setting.
They
come
a
separated
list
of
stock
symbols
that
I
want
to
get
through
my
api.
A
So
how
can
we
create
such
an
adaptive
code
extension?
How
can
we
create
the
backend
api
in
order
to
make
it
possible
to
create
such
kind
of
solutions?
So,
first
of
all,
let
me
show
you
the
sharepoint
framework
solution.
So
here
we
are
in
the
adaptive
card
extension,
and
this
is
a
very
simple
adaptive
card
extension
in
which,
in
the
on
init
method,
I
simply
configure
the
state
of
the
acer
and
in
fact,
in
my
state
I
simply
keep
track
of
the
current
symbol.
Current
quote
and
the
trend
up
or
down
for
the
current
quote.
A
Once
I
have
my
client
ad
http
client
instance,
I
can
simply
load
the
quotes
for
my
stocks,
simply
using
a
custom
metal
that
I
defined
the
load
code,
one
which
will
will
execute
asynchronously
to
speed
up
the
initialization
process
of
my
ace
and
as
such
in
half
a
second.
I
will
start
loading
the
quotes.
A
So
what
I
do
right
here,
I
simply
rely
on
some
custom
business
logic.
I
will
not
dig
into
it,
but
I
simply
need
to
go
through
all
of
these
stock
symbols
that
I
configure
so
one
by
one.
I
will
make
a
query,
but
the
interesting
part
of
this
demo
is
how
we
make
the
query
so
using
the
aadhcp
client
that
we
created
before
we
simply
make
a
get
request,
for
example,
because
our
api
accepts
a
get
http
request
and
it
will
provide
back
the
stock
quota
of
this
symbol
that
we
will
request.
A
A
Once
I've
done
that,
I
will
get
back
a
json
response
which
I
can
convert
into
an
actual
json
object
based
on
stockpot
info
type,
which
is
the
actual
type
of
the
result
of
my
custom
api.
In
your
scenario,
it
will
be
your
custom
type
in
my
scenario.
Stock
code
info
is
made
of
few
information
like
the
string
representing
the
symbol,
the
quote,
which
is
number
the
trend
up
or
down,
and
the
user
who
made
the
request.
Why?
A
Because
I
want
to
show
you
in
this
demo
how
we
can
also
get
the
security
context
of
the
user,
invoking
the
backend
api.
In
fact,
whenever
I
make
a
request
to
my
backend
function,
I
also
get
back,
who
is
the
user,
making
the
request
so
that
we
can
see
practically
how
we
can
get
access
to
the
information
about?
Who
is
the
user,
making
the
request
so
back
to
my
load,
quota
function
or
a
method?
A
I
simply
get
back
the
stock
info
object
and
I
use
it
to
configure
the
state
of
my
adaptive
card
extension,
as
we
already
saw
in
some
of
the
other
demos
in
these
sig
calls.
Once
I
have
the
state
configured
in
my
adaptive
code
extension,
I
can
use
it,
for
example,
in
the
rendering
of
a
card
view,
which
is
precisely
what
I'm
doing
right
here.
A
So
that's
the
client
side,
part
of
the
story,
together
with
the
package
solution.json
file,
in
which
I
configured
that
my
application
requires
to
have
access
to
the
stock
quote
function
up
with
the
permission,
scope
called
read.stock
quote,
so
I'm
declaring
that
my
spfx
solution
requires
to
consume
this
api.
With
this
specific
permission,
scope,
I
create
a
package.
I
upload
the
package
in
the
app
catalog,
which
is
something
that
we
can
do
right
now.
A
Actually,
my
solution
is
already
running,
but
I
will
do
it
again,
just
for
the
sake
of
completeness.
So
if
I
drag
and
drop
this
application-
and
I
replace
it
in
the
app
catalog-
we
can
see
that
this
application
is
going
to
consume
an
external
api
and
we
will
need
to
grant
proper
permissions
to
this
application.
A
And
of
course
this
is
the
game
effect.
So
I
don't
see
the
dialog
right
now,
but
at
the
very
end,
in
the
advanced
section,
api
access
of
my
sharepoint
admit
center,
I
will
be
able
to
grant
in
the
list
of
pending
requests
or
to
see
that
I
already
granted
like
I
already
did
in
my
scenario.
The
stock
quote:
function
app
application.
A
I
granted
the
sharpening
framework
to
consume
the
stockpot
function
up
backhand
api
using
the
read.stock
quote:
permission.
How
is
built
the
backend
api?
Well,
it
is
a
nature
function
that
I've
built
using
visual
studio
2019.
As
I
said,
it
is
a
fake
one.
So
I
don't
really
read
the
real
values,
but
I
simply
provide
a
hard-coded
value
for
all
of
the
stocks,
because
it
doesn't
really
matter
how
we
get
this
stock
value.
A
This
is
just
for
the
sake
of
making
an
example,
but
this
is
a
function
in
which
I
first
of
all
use
dependence
injection
to
get
the
claim
principle
of
the
user,
making
the
request,
meaning
that
easily
and
really
in
a
straightforward
way.
I
get
inside
the
azure
function,
the
claim
principle
of
the
user,
making
the
request,
and
when
I
create
my
response,
I
simply
provide
all
of
the
values,
including
the
identity.name,
if
any,
as
you
can
see
of
the
claim
principle
that
I
get
as
an
input
of
the
request.
A
So
how
do
I
get
inside
the
claims
principle,
the
identity
of
the
user?
And
how
can
I
call
this
api?
Well
in
azure
active
directory,
I
registered
an
application
in
my
target
tenant,
and
this
is
the
name
of
the
application
that
I
was
using
in
spfx
in
order
to
declare
the
permission
request.
As
you
can
see,
I
declared
this
application.
I
registered
it
and
I
decided
that
I
wanted
to
expose
an
api.
A
This
is
the
unique
uri
of
my
application
and
again,
this
is
the
value
that
we
use
in
spfx
when
we
create
a
client
through
adhd
client
factory.
So
this
is
the
unique
uri
of
my
exposed
api,
and
this
is
the
permission
that
I'm
requesting
the
grant
for
so
I
registered
the
application
in
azure
id.
Then
I
configured
my
application.
My
azure
function
app
initial
id
in
order
to
work
as
the
front
end
of
my
api,
and
here
we
are
in
azure
in
azure,
and
here
we
are
in
the
azure
function
app
here.
A
The
hub
could
be
configured
either
to
use
the
authentication
provided
out
of
the
box
by
the
azure
function,
which
is
not
the
case
in
my
scenario.
But
if
you
want,
you
can
click
on
the
on
button
here
and
you
can
configure
to
use
azure
active
directory
from
the
ui
of
the
azure
function
or
you
can
rather
want
to
use
at
low
level
in
your
function,
app
the
claims,
principal
information
and
do
your
authorization
and
authentication
logic
in
your
custom
code
right
here.
It
is
completely
up
to
you.
A
Let
me
copy
the
value
of
this
token
and
if
I
will
open,
jwt
or
jot
dot
ms
and
copy
that
value,
we
can
see
that,
under
the
cover
of
this
really
unreadable
value
we
have
inside
this
jot
token.
We
have
the
information
that
we
have
a
open
authorization
token
for
the
api
with
this
audience.
So
this
is
the
unique
uri
of
my
target
api.
I
can
see
that
I
have
the
read
stock
quote
permission
and
I
can
see
the
information
of
the
user
who
is
going
to
consume
the
back-end
api.
A
This
is
the
token
which
will
be
provided
to
my
back-end
api
so
that
inside
the
api,
I
can
have
my
custom
logic
for
authentication
and
authorization.
So
really
simple
and
straightforward.
You
register
an
api
in
azure
directory.
You
configure
the
api
to
be
exposed
as
an
api
with
a
unique
uri
in
the
spfx
solution.
In
the
ace
you
get
a
client
for
that
specific
uri.
A
You
use
the
rest
based
approach,
so
you
make
a
get
a
post
or
whatever
else,
http
method.
You
need
to
use
to
consume
your
target
api
and
you
need
to
remember
to
declare
in
the
web
api
permission
requests
that
you
want
to
have
access
to
that
specific
api
accordingly,
to
the
permission
model
that
you
configure
for
the
api
itself.