Build a website using Azure Static Web Apps and Authenticate with AAD

hey everybody I wanted to show off some new stuff that I have been learning in Azure related to creating websites that are pretty easy to get up and running I don't know if you're like me at all but I have worked in IIT operations a long time and always wanted to make sites that I can host some of my internal it documentation to or four for like my own internal teams or just build out some cool sites that I can host content that is out there and so I have been playing around with a docusource document Library hosted in a Azure static website and I want to show you how easy it is to create your own site using docusource and Azure static websites and then I want to show you how we can control authentication to it using both Azure active directory and then Azure b2c so business to customer sites so that's what I'm going to show you today and I hope you enjoy this and I hope this helps someone else who is in a similar spot of always wanting to host their own site for your own team so let's show you the end result of what we are building here this is a docusaurus website I am currently hosting this live in my Azure environment and you can see it does a really good job of Hosting this content and making all of this available to my internal team I can come in and you know update this content super quick and make all of these things available to whoever I want it to be in my case my employees they can access it via my apps portal so I have this integrated into my Azure active directory environment and so if my you know employees that are going to be doing stuff before me want to launch it and apparently it failed they can launch into here and access the site directly from it you know so mileage may vary on how perfect it is um live demos you know never never can go right but they can continue accessing this as they needed to for employees that are external or maybe it's just an external constituent that you want to give access to we can come in and give them access to it via Azure b2c so I have made this app available in two ways or authentication available in two ways I have this for external customers that wanted to sign up for an account as well as internal employees so that they can access this and this gives you a lot of flexibility when you go to create content for whatever purpose that you need so some use cases that I was thinking through is of course I do a lot of Defender stuff but I really was thinking about this for like an internal sock process or if I'm doing stuff with purview and doing sensitivity labels well I could use this site to host all of our organizations you know sensitive Document Handling sites in a cool location that feels a little bit more formal than maybe just a a SharePoint site or something along that lines and it gives end users kind of that that permanent feel to it so I thought this was kind of cool and so I want to show you how you can get started with it really at the end of the day it is like I said a docusaurus library what's under the hood is this um programming system I guess uh repo that has been pre-made to handle all of this creation of it so I'll walk you through how to create this then finally I'll show you how to host it in Azure and then the storage location for it what's happening under the hood I'll also show you how to create your own GitHub repo with all of this documents so that you can manage this hosted in GitHub do some pipelines so it automatically updates your website and then from there you can just continuously update this document or site and use it for whatever purpose that you can come up with so that being said that's enough intro so let's get into creating the site so where do we get started with this well for me I am using visual studio code to do all the programming and updating of this I am just following along with the docusaurus um library and their directions for it I've installed some of the prerequisites already I have no JS installed um I obviously have Visual Studio code I also have the GitHub extension installed on my environment as well as the Azure site extension installed and you'll need all of that to create and host and manage this site and so just go ahead and follow the you know the quick directions that they have in there on the on the docu source site and you can basically install node.js and get up and running once you have all of those things installed well what we need to do is go to visual studio code and start creating our site so I'm just going to go ahead and do that now and so we'll set up this in a docusaurus library and I'm just going to create a new folder for it and we'll call this YouTube [Music] site and we're going to select that folder as our location yes we trust the author it is us next I'm going to go ahead and open up terminal and we're going to copy and paste from the docusaurus website this code that's going to scaffold our project for us so um I like to change this a little bit to just be www because that just makes sense for me it's my website that's hosting you can keep that it really doesn't matter um but we're going to launch this and it's going to go ahead and go to the docusaurus site and create a classic site for it this uh process takes a little bit to get up and running so I'm going to pause the video and come back once it's done and I'll show you those next steps all right so our our code or our script finished running and it's gone and downloaded everything that we need to run this site locally one great part about having all that node.js component installed is that we can host this site locally on our workstation and just run it and they have some helpful directions here that can help you do it and all we're going to do is we're going to change directory to the the site that we just created and then we're going to launch the site this will turn on in node.js the full site and launch it so you can host it and we'll come back again right after it starts all right it launched in my local terminal and it popped up on my other screen my super cool site right and I am ready to start coding and editing this site and so here you can see the quick walkthrough of it docosaurus does a really good job explaining well the the basics of using this site and I'm not going to really go into detail about how to do it because well they documented it way better than I have but the quick thing is is like you know if I wanted to make some live changes to the site I can just come into this this folders and start putting in you know stuff so if I wanted to do a folder on um Defender for endpoint and then you know put a you know directions on getting started with antivirus I can really quickly do that and and then you know put in a you know some some code so this is I'm now live editing this site and we'll just hit save and put it in here so uh just call this antivirus and we'll save that real quick and as you save it you'll notice this is constantly live updating that well maybe not should be live updating that we created this uh site ah I put a capital there that's not gonna work and there you go you can see it took that time by putting the right uh case to it and the mde antivirus page is live on my local site and so we can quickly grab all this content put it in you can use chat GPT to fill out and put in all the boilerplate that you want in the world and really quickly have a site that's customized with your exact content that you need so that you can have your stuff available to maybe external parties or internal um so at this point this is a local hosting so if we want to store it on the or make it available to external people on the internet we now need to host it and for me the easiest way to host this is on a Azure static web page Azure static web pages are new to me but you know I think are a super cool technology the Azure the Microsoft team that's managing it they seem to have you really awesome they have a lot of great content that they are hosting on this uh Dev blog and it just walks through all of these different capabilities that you can use it for and um you know as someone that did does it operations for forever you know being able to come in here and follow just these quick directions has really been awesome for me on learning how to use this site and really makes me uh excited about the technology so that's what we need to do we need to now get this hosted in an Azure static website and so let's let's go ahead and do that so again to make that happen I am going to use GitHub and we're going to publish this to a local or a GitHub that you know is just connected to my environment I'm going to come in here we're going to upload the www site and we're going to push that into our GitHub location you'll see um uh here we go right and so we can just come into our GitHub repositories and we can start you know coding that content up and so it will upload all of our site you know make sure you do a private site uh unless you you're looking to expose it publicly to you know have other people look at all the code and stuff like that but we're essentially going to be ready to go once it's you know synced to that we would then come into Azure sign into your Azure environment and we can now publish this out to the Internet so uh might take a hot second for it to load my Azure environment because I haven't launched it in a little bit here on get on Visual Studio code once it does we can come in and right click and hit create static web app because the code is already stored in GitHub um I we did that step first so that we don't have to do a lot of other stuff um of putting in all of the code repo stuff so publish first to your GitHub then come in and create the Azure static website what name do we want to do it use a YouTube static website we're going to go to uh you know West us because that's closest to me we're going to use react for this and then we're going to put in the location of the app so in our case you know that www root site of this and build it out so that's going to be the kind of the the site that we use and so that will go in and start publishing it to Azure it's not really doing anything here with your local machine once it gets created what's actually happening on the back end is it's setting up some action in our GitHub repo and these actions are going to be what is responsible for pushing and pulling all our code or are they just pushing our code to our hosting service so once we this um this pipeline or this action runs we should see our Azure static website start showing up in here and it is starting to show up and so we can see here it gave us a a URL that we can use and this URL should be just about ready to go for us to host so let's launch that right now and you can see the site is live right and so it's just waiting for our content and that won't happen until this content gets pushed out and this pipeline has completed excuse me um so once this is completed we should be good to go a couple cool things that you can see in here that we can take advantage of all of this configuration is managed either via code or some of these configuration settings right now I'm doing a free hosting of the solution and they have a standard hosting plan that gets you some really cool features and you might want to take advantage of it but some simple stuff that you could do is just a password protected site right we can come in and just you know hey I just want to put a standard password upgrade to premium and you're good to go and we'll walk through all of this as we go we can of course program in custom domains for hosting all this content and once you kind of get your stuff up in here you might want to come in and say yeah let's um add this item in on and we'll we'll program in this I want XYZ site or I want to use this URL for this hosting site and you can do that program it in and it's real really easy they even handled the SSL certificates for it because I registered that domain and so like that's fantastic so um we're going to give this a couple minutes to update and once it's done oh actually I just finished we'll see if it goes and it's live and so there you go so that didn't take long at all just me stalling a little bit and sneezing um and we our site is now hosted on the web and so anybody that comes in here can access this content and see exactly what's going on with it and so that all together 10 minutes to get your own website hosted in Azure is pretty powerful being able to put your content on the web and customize it and make it available now obviously you might want to do a lot more customizations to this site and you saw in my previous site I did a lot more customizations to make it my own and put this content in here but you know it's really not that hard a couple quick Google searches and you'll you'll discover how to replace the logo how to get rid of the blog how to redirect that home site is it's not impossible to figure out it's just a couple of you know steps that you need to do to do it and so that's awesome right but for me I want this site protected or access to it controlled by Azure active directory so let's go ahead and switch gears and we'll show you how to do that all right so let's set this site up so that authentication is managed by us and to do that we're going to edit the routing components of this site of this site and the Azure static web app makes it super easy to do we're just on this web page and we're going to come down to the routing section and scroll down here and they have basically this code pre-written for you here um where is it ah this one restrict access to the entire application and that's what we're going to do here so essentially we're going to add in some code to our site that says as you get into any routes of the site it's only available to authenticated users when you fail to sign in or can't access it you're going to be redirect it to this URL that is going to control authentication and so let's go ahead and program that in um actually forgot one step we got to create the file that's going to host all this and here you can see that's just static web app.json so we're going to go ahead and put that into our site so let's go back into our code and here in the root site the www we're going to add in our static web app config.json then back to our code for the site we're going to copy what's pre-made here from Microsoft and this is really quick and really simple to get up and running um think of it as a you know like doing firewall routes essentially you can basically say hey all of these things authenticated you can come in and add multiple routes so if there's only one page on the site or once you know set of resources you wanted to force authentication against you can do that you can program that that in with this config file and set it up a couple other really cool things you can do here is that this is azure active directory aad but Azure static sites also have some other options pre-built into it and so if we come down here we can see uh the authentication providers that are pre-baked excuse me and so we can see we can force people to log in with Twitter and we can also force people to log in with GitHub so GitHub has a its own authentication provider that we can do and that is it that will control access to our site so if I go ahead and push this control out we're going to be good to go and so and we'll commit and sync that and you have to again wait a while for our GitHub actions to trigger and it will start updating that site once that code is basically pushed in so I'm going to pause the video here to let this you know publish and then I'll come back and show you uh the results all right our site finished updating and so let's go ahead and launch it and then we can see the results of our docusource like site I actually forgot the URL that I was using before so let's go and copy that and let's launch that in Incognito just so we don't have any other content going in here and just like that ORF asked to authenticate to access it so I put in the Azure active directory sign in option and let's let's go ahead and do that so I'm going to sign in with my standard user account and of course we got to use our password and number match MFA you should always have MFA on all of your accounts and I love the number match option um it's way better for your end users and essentially we're signed in right and this is the pre-made consent once the end user accesses our environment what we will be able to see the app will have access to my email address and my username I'm going to go ahead and Grant that consent and get access to it now that is pretty cool right there but one of the down sides that you'll notice from adding that is that well anybody's Azure active directory can sign in we have no control all we're saying is you simply have to sign in with an off provider either GitHub Azure active directory or um Twitter I think is the Twitter is the last one yeah yeah Twitter um that you can do anybody can sign in with any of those three things and get access to your your site and that's not quite what I want to do so we're going to come down here to the custom auth providers and this is where you can Now set this up to be managed by you and control access using your own auth provider and they have a several pre-made ones that give you options as well as they support openid connect so if you wanted to do your own custom one which I will do at the end with Azure b2c um you can but for us for right now we're going to just use the Azure active directory one and you can see here they have two different versions we're going to use version number two to make that all work for us so I'm going to go ahead and update our code with this information so let's come in here add a comma down below and paste in that code and you can see here it wants me to fill out a couple of things we need a tenant ID we need a client ID and we needed a client secret so let's go ahead and program those into our site and we'll get them directly from our Azure environment so in fact here and we will open up Azure active directory so um we want to start here in app registrations so just needed to load and we'll be able to create that there we go and let's create our our app we'll call this YouTube test site I'm going to make this a single app and that will be for my tenant here we're going to select this redirect URL as uh the URL for our site in this case we're going to copy that program that in and there is a little bit of other detail we need so we're going to come back in here into the auth providers and see what it wants us to be the auth Callback um login that there you go so this is the login auth provider that we want to put in here and then we'll call this Azure active directory aad and we'll register that app I think I did this right we'll see at the end if I got this 100 correct um but we are getting closer so first thing we need to grab is our directory tenant ID and we're going to grab that and put it back into our code so here is this component that we're going to do and we'll save that and we're essentially done at this point we don't need to update this again to this we essentially just program this Indigo here and we're going to push that commit uh to this so and so you might be like me and trying to edit these and program in the client ID and client Secrets but the Azure static website actually doesn't want you to fill all this information in it wants you to do it on uh not to not have these client secrets and client ID stored in your code so they actually don't even let you program that in so we need to go back to our site and we need to add that in as well configuration so I'm going to go ahead and do that right now and once it opens up we should be good to go I probably shouldn't have committed that change while we did this but that's all right here we go and we're going to just copy and paste this from this so uh client ID go back to our registration and you can see here client ID or application ID we're going to copy and paste that in and hit OK and then now we need to get our client secret so we're going to program in that exactly client secret from our you know config file and then go back here and now we need to create that secret so back to client certificates and um we're going to set this up here I'm going to set it to two years add it and then we're going to copy this secret value come back to our site and again save it just like that and don't forget to hit the save button at the top once you fill out the information you do have to do that again um I know from you know testing this a bunch uh I forgot to hit the save several times and recoded everything only to find out I never hit save so don't make that mistake save your button save your stuff all right so now back to our site and now we need to or GitHub and we need to wait for our site to update with the new code we just programmed in so I'll pause this and come back all right so the update finished and let's go ahead and try signing in so we'll launch again a new incognito browser and launch our site again foreign and we'll go ahead and sign in again here we go and I think we are good however one thing to keep in mind that was almost too similar to our other experience with signing in and we should test this with another URL and one of the things you'll find is if you do this with another sorry set of login credentials you're actually not right now working right one of these things uh one of the downsides of this site is because the built-in Azure act directory and the aad connect options of GitHub use the same auth provider well it's really easy to think oh I have completed this successfully in in fact you may not have what you will find if you do lots of testing is that these custom auth providers are behind the paywall of the standard app it only is supported it's not supported in the free app so we need to come in here and set up this into a standard application and upgrade it so that it works with Azure active directory in our custom auth provider so I'm going to do that now and switch it over and then we're going to try again because I forgot to do that part um and there we go so now it's a little different experience it knows I'm supposed to be signing into the Doug S Baker tenant instead of just signing into any active directory tenant so let's go ahead and do that all the mfas oh twice what did I do there I must have done something wrong ah so we're in a authentication Loop so it means I must have done something incorrect when I set up that app so let's go ahead and back out of this and I'm gonna go figure out what I did wrong I think it must be something wrong with my app registration and I think what I did incorrectly here is I originally put in aad and not add in the Callback URLs so I'm going to pause this I'm going to check a couple things and I'll come and get back and tell you exactly where I made my mistake all right I think I figured out where I made a mistake um a couple things I originally told you Dot auth Login aad and what I need to do is add this slash callback because you know when you're trying to just remember stuff you you off the top of your head you don't look at it correctly and I forgot to add that component in the other thing I don't think is well documented here that I think is required is we needed to check this blocks for implicit Grant and hybrid flows ID tokens I think it needs that so I went and saved that and gave it a second to sync and so let's try it again okay still going to the correct tenant well I keep putting my phone away as if I'm not going to be authenticating a ton today I should probably switch to 502 security key someone from Microsoft is probably shaking their head and saying why didn't you do that or use passwordless and I really should and there we go all right so that that worked with that so one key component that was definitely missed is that you need to put that callback and then you need to check that box for that ID tokens and then now we are set up that we can log in uh with another set of you know with our credentials access our site and we're good to go so that's pretty cool pretty easy options if you wanted to push this to you know the the my app sites you can certainly do that you can make this available to you know users and because it's connected to Azure active directory now we can basically use a group to manage this and we can say you know assignment must be required um to access this instead of you know making it available to anybody in organization we can lock it down to only a specific group can access this site and really control it really well that way so I hope hope this video helped someone else out there that wants to take advantage of it if you found this helpful let me know um I was thinking about showing it how to connect it to Azure b2c if you find you're interested in that let me know I'll make a video on how to connect this to Azure b2c um and good luck out there and stay safe

Channel: Doug Does Tech

Views: 8,443

Keywords:

Id: jnwRpEM6GR8

Length: 31min 27sec (1887 seconds)

Published: Mon Apr 10 2023