►
From YouTube: Building ISV offering for Microsoft Viva with SPFx ACEs and multi-tenant APIs hosted in Azure
Description
In this 21-minute developer-focused demo, Paolo Pialorsi steps through how capabilities in SPFx v1.15 make it easy (as in automate) for your customer to register, manage consent and deploy your SaaS app/ACE in their tenant. Step through configuration for managing a multi-tenant deployment including app registration in Azure AD, hosting multi-tenant aware back-end services on Azure, consent, permissions, etc. Understand architectural challenges and see an ACE on multiple tenants interact with the back-end multi-tenant API. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 3, 2022.
Demo Presenter
• Paolo Pialorsi (PiaSys) | @PaoloPia
Supporting materials
• Sample - Contoso Orders ACE | https://adoption.microsoft.com/sample-solution-gallery/sample/pnp-spfx-reference-scenarios-ace-pnp-contoso-orders/
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
A
With
the
SharePoint
framework
in
Ace
solution
or
general
speaking,
and
a
sharpened
framework
solution
for
isv
willing
to
offer
that
solution
as
a
kind
of
a
software
as
a
service
offering
hosting
their
back-end
code
on
Azure
and
having
the
proper
settings
in
place
to
make
it
happen
for
a
multi-tenant
solution.
So,
first
of
all
let
me
try
to
set
the
context.
A
So
let's
say,
let's
assume
that
you
are
in
isv
and
you
want
to
build
a
solution
and
you
want
to
build
a
solution
which
might
be
an
extension
of
Viva
connection,
so
an
Adaptive
card
extensions
built
with
SharePoint
framework.
But
what
I'm
going
to
talk
about
applies
completely
also
to
a
sharpen
framework
web
part.
A
So
just
to
be
clear
and
let's
say
that
you
want
to
sell
or
provide
Your
solution
as
a
software
as
a
service
model,
you
should
be,
or
you
should
keep
into
account
that
you
will
have
to
do
some
activities
to
register
an
application
in
Azure
directory.
You
will
need
to
do
proper,
hosting
on
Azure
and
stuff,
like
that.
So,
practically
speaking,
there
are
some
architectural
challenges
that
you
need
to
face
when
you
want
to
do
that.
A
First
of
all,
you
need,
or
you
should
at
least
create
a
multi-tenant
application
and
register
and
multi-tenant
application
measure
directory
I
say
you
should,
because
the
other
options
would
be
to
register
manually
register
and
create
an
application
on
every
single
tenant
of
every
customer,
which
means
you
are
not
offering
a
software
as
a
service
solution,
because
you
would
have
to
do
setup
stuff
on
every
single
customer
tenant,
which
is
indeed
not
doable.
So
you
will
have
to
create
a
multi-tenant
solution
and
you
will
have
to
make
your
multi-tenant
solution
available
on
all
of
your
customers.
A
Tenants
and
your
backend
services
will
need
to
be
multi-tenant
aware
in
order
to
being
able
to
do
that,
plus.
The
fact
that
your
application,
most
likely
will
need
to
do
something
with
the
target
tenants
of
your
customers
like
accessing
data
in
SharePoint
online
or
using
Microsoft
graph
and
other
stuff
like
that,
and
as
such,
your
customers
will
need
to
Grant
permissions
to
your
applications
to
do
stuff
on
their
own
tenant.
A
So
there
are
some
requirements
from
a
deployment
point
of
view
which
need
to
be
satisfied
and
that's
why
we
are
covering
this
topic
in
this
demo.
Just
to
give
you
an
idea,
let's
imagine
that
you
are
in
isv
again
and
you
have
your
own
tenant.
You
registered
your
application
in
your
own
tenant
as
a
multi-tenant
application,
and
then
we
will
see
practically
speaking
how
and
where
you
can
do
that
and
that
you
also
configure
your
application
in
order
to
have
a
proper
permissions
to
access
micrograph.
A
Then
you
want
to
host,
for
example,
on
Azure
and
in
an
Azure
function,
app
your
back-end
infrastructure,
so
that
your
SharePoint
framework
solution
will
rely
on
this
back-end
infrastructure
or
posted
on
a
function
app
and
you
configured.
Your
application
is
ready
with
the
client
secret
and
a
client
ID
in
order
to
being
able
to
get
a
token
to
consume
Target
resources
in
the
Target
tenant.
But
now
the
point
is
that
the
target
tenant
is
not
just
one
tenant.
The
target
tenant
will
be
any
tenant
of
any
of
your
customers.
A
Who
will
get
your
solution,
meaning
that
there
will
be
the
need
to
register
your
multi-tenant
application
in
the
Target
tenants?
The
customer
will
have
to
Grant
the
permissions
to
those
application
and
when
it's
done
any
of
the
customer
who
will
have
the
application
registered
and
the
permission
granted
will
be
able
in
your
custom
code,
which
will
be
running
in
SharePoint
or
in
Viva
connections
or
wherever
else
you
like.
A
As
long
as
you
can
run
sharpen
framework
code,
we'll
be
able
to
make
a
request
to
your
backend
infrastructure,
providing
an
access
token,
which
will
be
issued
by
the
Azure
active
directory
of
your
specific
customer
tenant
and
on
your
backend
infrastructure.
You
will
have
to
validate
the
token
and
you
will
be
able
to
get
access
to
the
backhand
infrastructure
of
the
customer
so
of
their
share
point
of
their
Microsoft
65
workloads.
Generally
speaking,
thanks
to
the
grant
of
the
permissions
that
they
admin
in
the
customer
side
did
for
your
application.
A
All
of
these
activities
require
quite
some
work
potentially
and
that's
why
and
thanks
God
that
SharePoint
framework
start
information
1.15
point
something
helps
you
a
lot
in
doing
that.
In
fact,
starting
from
this
version
of
SharePoint
framework,
there
are
some
useful
attributes
that
you
can
configure
in
the
package
solution.json
file
which
allow
us
to
have
an
easy
deployment
of
this
kind
of
solutions.
So
let
me
switch
to
the
demon.
Let
me
show
you
how
it
works
in
action,
so,
first
of
all,
I
want
to
show
you
the
actual
result.
A
This
is
a
demo
that
we
have
already
seen
something
like
one
year
ago
and
which
I
recently
updated
in
order
to
have
support
for
these
new
functionalities.
That
I'm
talking
about
this
is
an
electrical
extension.
Actually,
there
are
two
Aces
which
allow
to
manage
a
fake
list
of
orders
that
you
can
show
and
you
can
insert
additional
orders
using
this
Ace
into
into
this
list
of
orders.
This
is
an
example
that
you
can
find
also
under
the
sample
solution.
A
Gallery
right
here
and
I-
think
I
posted
on
the
chat,
the
link
and,
if
not
I,
will
do
it
right
after
this
demo.
But
here
you
can
find
a
an
easy
access
to
the
source
code.
You
can
either
download
it
or
view
it,
and
you
can
see
how
the
solution
is
built.
Now,
let
me
switch
to
the
actual
code
base
and,
first
of
all,
we
have
in
the
back
end
of
this
adaptive
card
extension
Azure
function
where
we
manage
the
list
of
orders.
This
is
a
really
regular
orders
function.
A
So
an
initial
function
running
on
Azure,
where
we
have
actions
like
get
orders
to
get
the
whole
list
of
orders,
we
can
get
a
single
order.
We
can
add
a
new
order
and
stuff
like
that.
Nothing
really
special
and
under
the
cover
we
work
with
a
memory
structure
for
orders
just
for
the
sake
of
having
a
simple
deployment
without
the
need
to
deploy
databases
and
other
stuff
and
to
let
you
experiment
with
this
sample
without
the
need
to
deploy
a
complex
scenario.
A
This
is
your
function
is
backed
by
an
application
which
I
registered
in
Azure
X
directory,
and
let's
assume
that
I
am
the
isv
selling.
The
solution
here
is
in
my
tenant
in
my
isv10,
and
let
me
go
here:
the
application
registered
in
Azure
active
directory.
This
is
an
application
that
I
registered
simply
going
to
Azure
active
directory
and
going
to
app
registrations
and
creating
a
new
app
registration.
A
So
this
is
the
definition
in
my
isv
tenant
again,
assuming
that
I
am
the
isv
right
now
in
my
sb10
and
of
my
multi-tenant
application
in
Azure
active
directory,
now
I'm
willing
to
use
this
application
as
the
entry
point
for
the
consumer
app,
which
will
be
the
SharePoint
framework
adaptive
card
extensions,
but
before
moving
there.
Let
me
switch
back
a
little
bit
more
on
the
Azure
function.
Just
to
highlight
that,
as
you
can
see
here,
for
example,
in
order
to
add
a
new
order,
I
have
an
attribute
which
is
called
the
function
authorize.
A
This
is
a
custom
attribute
and
you
can
find
the
implementation
in
the
sample
on
GitHub,
which
will
simply
declare
that,
in
order
to
be
able
to
call
this
add
order,
endpoint
of
my
function,
I
will
need
to
have
the
order.fullcontrol
permission
in
the
access
token
that
I
will
get
meaning
I'm
doing
authorization
control.
So
it's
like
as
I
need
the
orders
full
control
to
add
a
new
order.
I
simply
need
the
orders.read
or
eventually
still
find
to
have
the
orders
for
control
to
get
in
order,
so
to
read.
A
I
simply
need
the
basic
permission
to
write.
I
need
an
additional
or
Advanced
permission,
and
this
kind
of
authorization
check
can
be
done
and
should
be
done
on
the
Azure
function
side
at
the
same
time,
in
the
Azure
function,
because
we
have
configured
the
application,
Azure
ID
to
support
multiple
tenants.
We
need
to
be
aware
of
the
tenants
that
we
want
to
support.
A
So
if
we
are
offering
or
selling
our
solution
as
a
software
as
a
service
solution,
we
should
in
the
token
validation
parameters
of
our
function,
we
should
validate
the
Val,
the
issuer
of
the
token
meaning
the
Azure
active
directory
tenant,
which
will
issue
the
access
token
that
will
be
used
to
consume
our
function,
our
backend.
Why?
Because,
as
I
showed
you
in
the
previous
diagram,
we
can
have
multiple
tenants
and
each
and
every
tenant
will
have
its
own
interactive
directory,
which
will
be
the
issue
of
the
tokens.
A
So
in
our
business
logic
we
need
to
validate
if
the
issuer
is
a
tenant
of
a
customer
that
is
basically
paying
for
the
service
or
not,
and
if
not,
we
will
simply
say
sorry,
you
will
not
get
access
to
my
environment.
This
is
a
table
one,
so
I
will
simply
set
any
one,
but
in
your
real
life
you
should
do
proper
validation
and
store,
eventually
a
list
of
allowed
or
registered
or
paying
customer
tenants
in
a
SQL
database
or
in
a
cosmos,
DB
or
wherever
you
like.
So
this
is
the
Azure
function.
A
Now
we
want
to
consume
this
Azure
function
from
SPF
XM
from
our
adaptive
card
extensions.
Let
me
switch
to
the
spfx
solution.
This
is
the
Adaptive
card
extension
that
we
were
having
a
look
before
this
is
the
manage
borders.
I
will
not
dig
into
the
implementation
details
of
the
aces
by
themselves,
because
this
is
not
a
session
about
how
to
implement
cases.
This
is
a
session
about
how
to
manage
the
multi-tenant
deployment,
but
just
for
the
sake
of
clarity
here
in
my
adaptive
card
extension
I
have
in
the
on
init
method.
A
Once
again,
the
creation
of
the
aad
client
instance
through
the
ad
client
Factory
and,
as
you
can
see
here,
I'm
getting
a
client
for
this
specific
URI,
which
is
precisely
the
one
we
used
to
uniquely
identify
our
API
in
the
back
end.
So
through
this
methodical,
we
get
back
in
AED,
HTTP
client
object,
which
will
be
simply
provided
to
a
function,
to
a
service
that
we
have
in
our
solution,
which
will
be
the
order
service
where
we
will
rely
on
it
to
make
the
actual
requests
to
get
read,
update
and
so
on
so
forth.
A
A
This
is
what
we
have
been
doing
for
a
while
now
with
SharePoint
framework,
and
by
doing
that
we
can
build
the
package
and
we
can
deploy
the
package
in
a
Target
payment,
and
let
me
show
you
how
it
works
when
we
do
such
a
thing.
So
let
me
switch
to
a
demo
tenant
that
I
have
and
in
this
tenant
I'm
going
to
add
to
the
app
catalog
the
new
one,
the
sppkg
file
for
my
solution.
As
long
as
I
will
be
able
to
find
the
finder.
A
Okay,
here
it
is
so
this
is
my
sppkg
for
my
solution
and
if
I
will
upload
this
package
into
my
target
tenant,
you
will
see
that
okay,
now
we
have
the
SP
PKG
and
SharePoint
framework
is
smart
enough
to
say.
Okay,
you
need
to
enable
this
application.
If
you
want
on
all
of
the
sites,
because
it's
it
is
a
tenant-wide
solution.
Yes,
please
do
that
and
then
it
will
also
say:
okay
keep
into
account
that
for
this
solution
to
work
properly,
we
also
need
to
Grant
some
permissions,
which
are
the
permissions
for
my
application.
A
A
However,
if
I
will
click
on
approve
and
I'm
going
to
do
that,
it
will
fail.
Let
me
show
you,
you
see,
I,
have
this
error.
Why?
Because,
actually,
the
application
that
I
as
the
isv
registered
in
my
own
isv
tenant
is
not
yet
available
in
the
customer
tenant
and
as
such,
it
will
not
be
possible
to
Grant
the
permission
to
an
application
which
does
not
exist
in
my
tenant.
A
Okay,
so
what
I
should
do
would
be
to
open,
for
example,
a
tab
and
using
a
the
admin
constant
URL
that
Azure
active
directory
provide
us
I
will
be
able
to
register
my
application
onto
my
tenant
and
Grant
the
permissions
to
my
application.
This
admin,
constant
URL,
will
accept
the
ID,
the
unique
ID
of
my
application,
as
well
as
a
redirect
URI,
which
is
one
of
those
configured
in
the
authentication
section
of
my
Azure
ready
application.
A
Let's
do
that
by
doing
that,
okay
I
will
have
to
authenticate
as
a
tenant
admin
and
once
I
will
do
that,
I
will
be
able
to
register
and
Grant
the
permission
on
my
tenant
for
that
specific
application.
By
doing
that,
I
will
be
able
now
to
register
my
application
and
Grant
the
permissions.
If
I
will
go
back
to
the
admin,
Center
and
I
will
refresh
this
page
every
now
and
then
it
takes
a
while.
A
So
there
is
no
guarantee
that
it
will
already
work
right
now,
but
even
if
it
will
not
work
exactly
right
now,
in
a
matter
of
few
seconds
or
minutes
from
now,
it
will
be
possible
to
Grant
the
permissions
and
to
approve
the
permissions
for
this
application,
so
that
I
will
be
able.
Actually,
it
is
already
working.
Wonderful,
so
I
will
be
able
to
use
my
solution
now.
A
As
you
can
see,
this
process
is
quite
complex
from
an
end
user
point
of
view
and
that's
why
Microsoft
updated
the
behavior
of
SharePoint
framework
and
made
it
possible
to
do
something
like
that.
You
can
add
in
the
the
package
solution.json
file
of
your
solution,
the
app
ID
and
the
reply
URL
of
your
solution,
so
that
all
of
the
process
of
doing
the
registration
and
the
constant
of
the
application
will
be
taken
into
account
by
the
SharePoint
framework
infrastructure
rather
than
by
your
customer,
which
is
really
good
in
my
opinion.
A
A
A
So
I
upload
the
packages
like
this
before
as
like
before
I
will
have
to
make
it
tenant
wide
available.
If
I
want
to
do
that,
enable
the
app
I
will
still
see
the
message
that
we
need
to
Grant
some
permissions
to
my
application,
but
when
I
will
click
to
the
go
to
API
access
page
now
in
this
tenant,
which
is
a
fresh
and
clean
new
one,
you
can
notice
it
by
the
different
color
in
the
top
just
kidding
but
yeah.
It
is
a
new
one,
A
different
one.
A
A
We
see
the
wonderful
page
of
M365
PMP
community,
and
by
going
back
right
here,
we
will
soon
see
that
the
application
is
now
registered
and
available
with
the
proper
permissions
configured.
So
it
will
refresh
soon
and
let's
see-
and
we
are
okay
perfect.
So
if
I
will
go,
for
example,
to
the
workbench
of
my
tenant
in
any
site
collection
of
my
choice,
I
can
now
add
the
orders
paste.
The
managed
order
is,
and
you
will
see
that
I
will
be
able
to
use
my
orders.
A
Ace
I
will
have
a
bunch
of
orders
available
and
I
can
play
with
it
in
my
new
Target
tenant
oops.
Let
me
click
on
this
one,
so
it
is
really
really
useful
and
Powerful
to
being
able
to
configure
those
two
settings
inside
the
package
solution.json
file,
rather
than
having
to
provide
additional
documentation
and
guidance
to
the
customer
in
order
to
deploy
the
solution.
A
The
the
request
will
come
from
tenant.sharepoint.com
of
every
different
customer
that
you
have,
so
you
can
either
configure
one
by
one
all
of
the
tenants
of
your
customers
in
the
list
of
course
enabled
in
this
setting
or
eventually
you
can
configure
an
asterisk
to
make
it
possible
to
use
any
consumer
for
your
API
up
to
you.
This
is
really
important
fundamental.
Otherwise
your
API
will
not
work
in
the
beginning
of
a
SharePoint
framework.