 Hello, I'm Heather Downing from Okta. I'm here to teach you about Blazor server side, .NET Core 3, and Okta together. Let's get started. Curious what the experience would be like to trade in JavaScript for C-Sharp all the way up to the very front of the DOM? You're about to find out. For many years, JavaScript and their child frameworks have had a complete run of the DOM. About two years ago, all of that changed with the introduction of WebAssembly, which allows compile languages to be interpreted client-side, and is fully supported across all browsers now. Microsoft's answer to this with the creation of Blazor. We're going to do specifically work with Blazor server side, meaning that this is built on top of SignalR, the WebSockets framework. For some time, Blazor has been in preview, but it finally hit general release in October of 2019. In order to build Blazor with .NET 3, you're going to need a few things first. Visual Studio 2019 or Visual Studio Code. For today, we're going to use Visual Studio Code. You'll need the .NET Core 3 SDK installed, and of course an Okta developer account, which you can get at developer.okta.com. Let's get familiar with what a basic website creation would look like. First, you'll need to create a Blazor project. From the parent directory of your code repos, let's execute the following command. .NET new Blazor server-o, and then the name of the project. I'm going to call this Okta Blazor server-side auth. Once it's been run, open up the new project folder in Visual Studio Code. Once it's been run, you might notice that there will be a notification about required assets to build and debug, because they are missing from your project. When it asks to add them, make sure you say yes. Now that everything has been loaded up, return to your terminal and run the project. If you run the project and get this error message, fail to bind to address, that means that perhaps you already launched a previous .NET Core laser site like I did earlier. So you just go to your launch settings.json instead of properties, and you can set the application URL right here. For this use, I'm going to go ahead and set it to 6000 and 1 and 6000. Save that, go back down here, and run again. Launch in the browser of your choice and navigate to that local host. You should see a templated website. When you see the app running initially on HTTPS, you may get a certificate error if you run it locally. This is by design. There's a blog post below that addresses this and talks about how to resolve certificates locally. For user authentication with OAuth, there is an additional layer of information you will use. While much of the handling of authentication is baked into the new .NET Core 3.0 framework, OIDC is not included, so you'll need to add a quick reference to that. I went ahead and got the latest version, which is 3.1.2, and that's installed. Authentication works by directing users to our Okta website, where they will log in with their credentials and then be returned to the site via some sort of URL that you're going to configure in the next section. So let's add the following code to the very top of our app settings.json file. Let's add a comma and add our Okta app settings. The issuer is going to be unique to you. I have a custom URL configured with Okta, but this might look like dev-12345.okta.com, and then it will append OAuth 2 and default as the issuer. You'll find this information in the docs on Okta's website. The client ID and secret will be erased after this presentation, so don't think you can go and grab them. This will be found within your application, which we're going to do next. Now that everything is set up, let's go ahead and .NET Run again to make sure that everything still runs. A quick command click, and it looks like everything still works. So the way that we do this is we log into our account, which you can create free at developer.okta.com, and log in using the administrative URL that you're given in the confirmation email. For me, that would be corollandedokta.com, and I'm going to log in with my admin email. It'll automatically redirect me to my admin console and my dashboard. Click applications, add application, and we're going to start a new Okta application. This is how you register your Blazor app to work within the Okta OIDC flow. Click web and next, and then we're going to name this. This is just for you to keep track of inside the console, but I'm going to go ahead and call it Okta Blazor server-side app, and the base URLs can be whatever you use locally to run. Do you remember when we set this up? I actually changed mine to be 6,001. I also configured HTTPS for both of those ports. Great. Now that that's set up, you're going to add your login redirect URI. Be sure to add the HTTPS version of that, and the logout redirects will not be necessary for this. Scroll down and make sure that authentication code is selected. For now, we'll leave the group assignments to everyone. Click done, and scroll down. You'll notice that here is your client ID and client secret. We're going to go ahead and copy that, and go back to Visual Studio Code and put client ID here. Copy the secret and put it here. Now we've changed our client ID and client secret. This is just for the demo purposes. Of course, you're going to want to store those in a more secure way, perhaps using something like Azure Key Vault, or another way to obfuscate and inject your key value pairs during runtime, and that way it's not checked into your code repository. That's it. That's it for configuring Okta with your Blazor server-side app. Great. Now we're going to get inside our startup class and add some using statements. Open ID Connect, authentication cookies, and the identity model logging reference. Next, you're going to scroll down to the configure services method and add the following code inside of it below. All we're doing is we're setting up the add authentication service and setting our default authentication scheme, sign in scheme, sign out, and challenge the scheme to match OpenID Connect defaults. We're also going to configure the add OpenID Connect service with the options below. Remember when we created our app settings, Okta Object, that's what we're referencing right here. Make sure you pay attention to casing because it is important in order to reference this right here. Set the response type to code. Make sure you save your tokens, and we're going to add a couple of scopes. OpenID is what we're going to need in order to extract the user's name from the token, and Profile also brings along any additional information. Set the validate issuer to false and the claim name type equal to name, which this is coming directly from Okta. Then add cookies and you're all set for this method. Moving on to the configure method in the startup class. Right underneath, use routing. Add authentication to the app by selecting use authentication and authorization. Our last step is to be able to handle the actual login requirements that we're going to create inside of our application by mapping a controller to them. Within the use endpoints object, add map controllers to the app. Now we're going to add a folder to the very top level of our application called controllers. Within that, we're going to create a login controller.cs. Add the following usings for authentication, MVC, and system.threading.tasks. Add the namespace, octablavisherslideauth.controllers so that we can find this controller. Inside of that namespace, we're going to add a public class called logincontroller that extends controller. And the first method we're going to add is an action result that is a get for login. What it's doing here is examining whether or not the identity of the user is authenticated or not. And if it is, then it returns whatever URL you set here. This right here is set just to the root of the application but you certainly could change this to be welcome.razor or welcome.html. If they're not authenticated, then we return a challenge. And the challenge result is what redirects them to octab. Next, we're going to add an asynchronous logout action result. This one also examines whether or not the user is authenticated and awaits the sign out process. After it's signed out, you can also set the URL here, but as you can see I just set it back to the root of the application. Save that. Awesome, the logincontroller contains all the logic you need to do the routing based on the identity model provided by default. Since the logincontroller has been registered by convention with the map controllers method you previously added to the startup file, your Blazor app will know how to reach it. Now it's time to add some visual aspects and user personalization to your Blazor application. Let's go to the shared folder and create a new file called logindisplay.razor. Now we're going to create a razor view that you can inject into other views. Inside of an authorized view you can wrap a state. So the authorized state will display just this HTML while a user who is not the following HTML displayed the login. Congrats, you've just created your first custom razor view and it only took us a few seconds. Let's use it in the existing app now. Let's go to sharedmainlayout.razor and add the login display right before the about section. And that will inject the toggled state based on whether or not the user is authenticated. Using authorized view right here is the easiest way to access authentication data and it's useful when you need to display a user's name. The authorized view component exposes a context variable of type authentication state. It's useful to make the access token returned by the identity provider available to the entire application scope so that way you can decide whether or not you have certain pages you want a certain user to view. In order to add this state to our app you have to run app.razor and wrap the HTML that you see here with the cascading authentication tags at the parent level which would look something like this inside of a cascading value you have a cascading authentication state and then you can wrap the existing values that you see here. Notice that I make the access token variable universally available directly inside of the razor view. Save that and that's it to test it out .NET Run Navigate to your link and lo and behold look what we have right here. A login button which means that currently the identity says that my user is not authenticated. If I would click on it we should get redirected to Okta. But what is this? We have a 400? That's not very cool. If you notice down here at the bottom it says the redirect URL parameter must be an absolute URI that can be right listed in the client app settings. Let's take a look at where that is. Oh do you notice where these are? Look at the login redirect URIs. Did I click on 6000 or 6001? Turns out I clicked on 6001. So this is where if you ever get that message you would edit and you can add additional login redirect URIs. This also works for dev environments and staging environments etc. Save that and now let's see if we can do this again. I'm just going to relive my application and click login. Perfect. Now the redirection from Okta is complete. Because I'm already logged in in this browser it need to log me in with that token. I can also click log out and it forgets it. If you're interested in looking at what it would look like if I wasn't logged in in this browser let's examine this incognito. Let's login. Perfect. Now this has redirected me to the Okta login screen. I completely made all of this custom from the background which matches the background on my computer to some sort of company logo and all of the usernames here are something that I added as an admin. I'm going to login with a different account and now I have a completely different user here who can also log out and login again. Repeating any of these steps you can create a network of tools that your users can access all with the same login. All this and that one line of JavaScript. Now you have a website with a working login and log out and the form automatically helps your users if they forget their password and if you enable it in the dashboard self-registration. The future is looking pretty bright for C-Shark and Blazor. Why don't you give it a try and let us know in the comments below what you built.