>> You already have Azure Static Web App
deployed in Azure with an API,
but now you would like to limit the access.
In this video, I want to show you how you could use
multiple different provider to secure your application.
I'm Frank Boucher, and today we're talking Azure Static Web App.
The code is already done.
You have your API, you have your app,
and now you would like to add
some authentication and authorization,
we'll show you how.
Here I am in Visual Studio Code and
the first thing we want to do is add here the library.
Right now, it's in prerelease version,
but maybe when you will see this video,
it will be the full release.
That will give us the library we need to add the authentication.
I already did all the change to avoid typing while I'm recording,
but I will show you in each page what I did changed.
The first, we start with Program.cs and we'll add here,
if I zoom just a little bit.
This section where to the builder
we add the AddStaticWebAppsAuthentication.
That's it and you just need to add obviously
the Microsoft Azure Function Authentication WebAssembly,
a library that we just had previously in the package.
Our next stop will be in the App.razor.
Now what we need to do is here add that
CascadingAuthenticationState and
specify that the AuthorizeRouteView.
This way we'll be able to see only when we allowed people.
Our next stop will be to really change
the visibility of our main layout.
Go to MainLayout.razor page,
and now we'll add here,
instead of just showing the about when we use this scaffolding,
now we'll say, you know what, when it's authorized,
show me my name and
the "Logout" button and if I'm not authorize me,
I'm not logged in yet,
show me a login link so I could open a link page and connect.
Talking about logging in,
I need a page for that so lets add one,
there's multiple providers supported,
will see the complete list in a few seconds, but in this demo,
I will use GitHub,
Twitter, and the Microsoft Active Directory.
Here to support, have the choice, the options,
I'm building that little things and here
why have this strange library just
because I'm using Awesome Font
and like to have the icon and the color and texts,
I needed to have different names.
That's it. But I'm just displaying three different button.
I will go here when you click on that,
send people to the at login and
then the provider value so it will be AAD, Twitter or GitHub.
That's it. Now we have a login.
Let's add some security or authentication to our application.
You know what in fetchdata usually it just get and
fetch data we'll secure that but just by using here,
if you already did some ASP.NET or something like that,
you're familiar with the attribute Authorize.
What that means is now this page,
you only can see it if you're authenticated.
Anybody could use any Twitter, GitHub, Facebook,
whatever account they just need to be
authenticated and they will be able to see that page.
Excellent. But sometimes we want to own and decide who can
see a page so that's when
we need roles and that's supported in the Azure DevOps.
I created another page let's zoom out,
a page that I call secured.
This page is very simple and
what I did is I'm using here the same attribute,
Authorize, but I specified the role admin,
and that's my decision it could have been anything,
I just decided it would be admin.
We need to remember that because later on we'll
need to assign that role to someone.
Here we can see that I'm just
calling a new API that will create in
two seconds and doing
the path API/secured/HelloYou and
I'm still passing the name in the query string.
Now, let's go on the API side and just
create that function so here already did that.
The only difference here is I
had a route with the secure HelloYou,
so I could have different routes to help me manage the security.
That's always very useful and also I added a claim,
so this way I could check if the claim exist and stuff like that.
Obviously right now I'm just looking at
it and logging the information if it's false.
But you could do many more with that. That's it.
That's the only thing I will be returning
SECURED HTTP in the message if it worked.
As a response, just like before,
I will return a message but I specify
that it's a SECURED HTTP function,
just so we know it's our new function.
I already this, it's already pushing GitHub in a different branch,
I could see preview.
If you don't know what I'm talking about,
look that other video where I explain how you can leverage
a CI/CD to preview the changes before going live.
Now what we'll do is go in GitHub.
I have this already open.
That's perfect. I can open it in a different tab, here I have.
I see here in the corner I have my login.
It means it's the new version.
I could now go and counter I've
my button just like before and now if I go and fetch data,
well, not authorized, but that's
exactly what we expect because I'm not logged in, so let's login.
We'll go login and for this
is our login page we create with the three button,
like I told you, let's use Twitter for now, voila.
Now we can see that I'm
logged in as fboucheros, that's my Twitter.
By the way, if you have any questions ping me there.
Now if I go Fetch Data, I see Fetch Data.
But if I click on the Secured,
still not authorized, why?
Because I don't have the role yet,
so let's add that role.
To do that, what we need to do is
go on the portal so portal.azure.com.
Here I am in my Static Web App simpledemo,
I have all the setting and if I look here on the left,
I have role management.
I will click there and here I can create invites and assign
the role I want so let's create a new
one and here we have the complete list that I was talking earlier.
We have Azure Active Directory,
GitHub, Facebook, Twitter, and Google.
That's all the providers that are
supported right now so you know what?
Let's try Azure Active Directory.
We'll use that. I will use
my Microsoft e-mail and here in this section,
that's where I will add my role so remember,
we need the role admin.
Just create admin and with
that you could create any role you want and have any combination.
It will be better to have
a better granularity of your permissions.
It'll generates my link voila so I just
need now to send this invitation and like I see here,
the invitation will be good for one hour.
If I need more time,
I could specify more time,
but it's always good to know that link is not valid forever.
Now I will go open that in another tab since I'm the user voila.
Now I will login using my user.
I will grant consent because now there's
some authentication going and voila.
Now what I need to do is go back to my special branch.
I will log out as Twitter and I will
login using my Azure Active Directory.
Voila, using the same user so now I'm logged in.
We see here that I have
a totally different login and
previously it's not fboucheros anymore,
it's my Microsoft e-mail and now
Fetch data will still work but now if I go in Secure,
it's working. Bonjour Hi,
cloudies, this is the SECURED HTTP trigger.
That's perfect. With that,
you can add security to your app and have the granularity you want
with any role and that's all free supported natively in Azure.
I hope that helps and stay tuned to learn more.
[MUSIC]