►
Description
📺 In this 12-minute Maker/Developer focused demo, Paolo Pialorsi delivers the 3rd installment on this end-to-end retail solution scenario that you can build in Microsoft 365. In this particular demo, the focus is on the back-end .NET API relied upon by both the Teams personal app and a Viva Connections card. See in call in Postman and code in SPFx app for how to consume the API in a secure way by providing a token – easily configured.
This community call demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 27, 2023.
✨ Demo Presenter
• Paolo Pialorsi (PiaSys.com) | @PaoloPia
📖 Supporting materials
• Sample - Contoso Retail Dashboard | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-samples-react-retail-dashboard/
• Documentation - Build your first SharePoint Adaptive Card Extension | https://learn.microsoft.com/sharepoint/dev/spfx/viva/get-started/build-first-sharepoint-adaptive-card-extension
• Demo - Extend SPFx apps across Microsoft 365 - Contoso Retail scenario (2023-06-06) – Paolo Pialorsi (PiaSys) | @PaoloPia
• Demo (June 13) - Exposing Microsoft Teams apps in Microsoft Viva with SPFx cards – Paolo Pialorsi (PiaSys) | @PaoloPia
💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home
Sharing is caring! You are awesome! 🧡
A
B
The
overall
idea
is
to
use
a
SharePoint
framework
as
the
development
framework
for
creating
a
team's
personal
app
and
the
Viva
connection,
Ace
and
potentially
in
the
future,
much
more
stuff
and
using
a
backender
which
is
based
on
a.net
Azure
function,
which
will
provide
hypothetical
data
from
an
hypothetical
backend
storage.
Of
course,
this
is
just
a
demo,
so
data
will
be
still
fake
data,
but
you
will
be
able
to
see
the
whole
journey.
B
So
let's
say
that,
let
me
move
to
the
demo
environment.
Let
me
show
you
step
by
step
what
you
should
do
to
achieve
this
goal.
First
of
all,
this
is
the
demo
I'm
going
to
talk
about.
We
already
have
a
couple
of
other
demos
registered
in
these
section
of
Community
calls
where
you
can
see
how
we
have
built
the
UI
in
teams
and
in
Viva
connections.
Today
we
focus
fully
on
the
back
end
API
implementation.
B
The
solution
is
available
as
an
open
source,
one
on
the
sample
solution,
Gallery
under
adoption
microsoft.com,
and
you
can
find
it
under
solution,
sample
solution
gallery
and
then
you
can
search
for
it.
But
you
will
also
find
a
useful
Link
at
the
end
of
my
presentation-
and
this
is
the
UI
of
the
Viva
connection-
dashboard,
for
example,
where
we
have
a
card
consuming
data
from
an
hypothetical
retail
store
company,
and
here
we
have
the
personal
app
in
teams.
B
Both
the
personal
app
and
the
Viva
connection
card
rely
on
a
back-end
API,
which
has
been
built
with
the
dot
net
on
Azure.
This
is
the
zwanger
page
for
providing
Auto
generated
documentation
and
to
provide
also
support
for
the
open
API
protocol
for
our
apis
and,
for
example,
we
have
these
API.
We
get
customer
satisfaction
and
stats,
which
will
give
us
back
a
set
of
information
about
the
customer
satisfaction
in
order
to
consume
this
API
in
a
secure
way.
B
We
need
to
provide
a
token
and
in
fact
you
can
see
zwagger
we
can
click
on
the
authorize
button
and
we
can
provide
an
access
token,
which
will
allow
us
to
consume
the
API
as
like,
as
it
happens
whenever
we
use
it
from
viva
or
from
teams.
So
let
me
do
that
briefly,
just
to
show
you
what's
going
on
so
here,
I
have
imposed
man
a
pre-configured
request
for
a
token
which
I'm
going
to
use
to
make
an
actual
request
to
my
API,
to
give
you
an
idea
of
what
of
what's
going
on.
B
B
If
I
go
to
the
API
access
page
of
the
SharePoint
online
administrative
section,
I
can
find
that
under
the
approved
permissions
for
SharePoint
framework,
we
have
that
specific
permission.
Now,
where
do
we
find
the
definition
of
that
permission?
Well,
let
me
go
to
my
target
tenant
where
I
registered
my
application
and
in
Azure
active
directory
in
a
Target
tenant
where
I
want
to
publish
the
custom.
B
Api
I
simply
need
to
go
under
up
registrations
in
Azure
active
directory
right
here
and
I
need
to
create
a
new
application
registration,
which
is
something
that
I
already
did
for
my
solution.
If
we
go
under
authentication,
we
can
see
that
this
is
configured
to
be
a
multi-tenant
API,
so
I
will
be
able
to
use
it
from
multiple
tenants
and
I'm.
Exposing
this
application
as
an
API
and
in
fact
here
I
have
the
application
unique
ID,
URI,
API,
pmp.contos,
retail
and
I
have
a
permission
which
is
called
precisely
contoso.
B
Retail.Consume
I'm,
also
exposing
this
API
with
app
only
so
I
can
also
consume
it
without
this
specific
identity
of
a
user
with
the
contoso
retail.consume.org
application
permission.
Why
am
I
telling
you
that?
Because
we
have
this
permission,
which
will
be
you
for
delegated
consumption,
meaning
that
I
will
consume
it
under
the
identity
of
a
specific
user
and
I
will
identify
my
target
API
with
this
unique
URI.
B
In
fact,
if
I
go
back
to
SharePoint
framework,
whenever
I
want
in
my
typescript
code
to
consume,
the
API
I
can
simply
rely
on
the
aad
HTTP
client
Factory
object
that
is
provided
by
the
SharePoint
framework
context
and
I
can
make
a
request
for
a
client
to
consume
that
API
and,
as
you
can
see,
this
is
precisely
the
unique
URI
that
I
configured
in
Azure
active
directory.
So,
basically,
by
doing
that,
and
by
having
in
the
package
solution.json
file,
the
Declaration
of
these
permissions
scope
requirement.
B
I
will
then
be
able
to
get
a
client
object
to
consume
my
API
and
then
in
SharePoint
framework.
Let
me
go
to
the
section
where
I
consume
the
customer.
Satisfaction
stats
that
we
saw
before
I
can
simply
make
an
HTTP
request
through
that
client
that
I've
got
created
with
the
get
client,
Factory
method
and
I
can
Target
the
API.
That
I
showed
you
in
Swagger.
So
that's
what
happens
from
a
registration
point
of
view
and
from
a
SharePoint
framework
consumption
point
of
view,
but
to
make
it
even
more
real.
B
Let
me
show
you
that
when
I
am
in
this
personal,
app
and
I
have
sorry
I
have
the
dev
tools
enabled
we
can
see
that
under
the
cover
in
the
session
storage
of
my
browser,
I
have
the
access
token
that
is
going
to
be
used
to
consume
my
target
API
and
in
fact,
if
I
copy,
this
value
and
I
show
you
in
this
nice
tool
provided
by
Microsoft
job.ms
the
actual
content
of
the
token.
This
is
a
delegated
token,
and
in
this
token
we
can
see
that
we
can
consume
the
API.
B
That
I
showed
you
before
and
Paolo
Pelosi.
So
that's
me,
my
current
user
does
have
the
permission
to
do
the
consumption
of
contoso
retail.
From
an
API
point
of
view,
you
will
find
that
in
the
source
code
of
the
solution
that
we
have
a
dotnet
API
hosted
on
Azure.
So
here
we
are.
This
is
my
backend
API
implemented
as
an
Azure
function
and
in
this
Azure
function,
where
I
have
the
customer.
B
Satisfaction,
stats
and
point
I
have
a
bunch
of
attributes
to
configure
the
open
API
so
that
we
can
see
in
Swagger
and
we
can
use
it
from
whatever
platform
we
like,
including
the
Power
Platform,
and
then
we
have
a
custom
attribute
that
I
defined
called
function,
authorize
in
which
I
declare
that,
in
order
to
being
able
to
consume
this
function,
I
need
a
consumer
to
provide
either
the
contoso
retail.consume
permission,
which
will
be
a
delegated
one
or
the
contoso
retail.com.all,
which
will
be
the
application.
Only
one.
B
This
attribute
will
be
managed
when
we
will
go
to
to
the
pipeline
of
the
request,
because
in
the
program.cs
of
my
isolated
Azure
function,
I
configured
a
middleware
and
credit
to
this
guy
who
created
the
basic
implementation
that
I've
built
and
the
other
solution
on
top
of,
and
here
we
have
a
couple
of
middlewares
one
for
authentication
and
one
for
authorization.
I
will
not
dig
into
each
of
them,
but
basically
in
the
authentication
one.
B
If
that
will
be
okay,
wonderful,
if
not,
we
will
give
back
to
the
user
f401
so
and
not
authorized
Exception
by
doing
that,
and
by
publishing
on
Azure
our
solution
right
here
we
have
the
Azure
function,
that
I
created
and
by
configuring
the
course
to
enable
the
target
SharePoint
online
environment
or
any
environment.
If
you
are
in
a
multi-tenant
scenario,
you
can
then
make
your
Azure
function
available
to
your
SharePoint
framework,
consumers
and
eventually
to
any
other
consumer
in
the
Microsoft
365
ecosystem.
B
A
Excellent
excellent.
We
did
share
the
URL
in
the
chat
as
well,
so
you
can
access
the
sample
from
there
and
thank
you
thank
you,
Paula
a
really
really
cool
stuff,
and
it's
good
to
recap
that
stuff,
because
it's
so
easy
to
use.
It's
so
easy
to
use.
Azure
secured
assets
within
the
Microsoft
365
because
you
are
in
the
same
Identity
or
in
the
same
tenant,
and
thank
you
for
calling
out
also
the
multi-tenant
scenarios,
while
on
there.