Blazor WebAssembly and Server: Implementing AAD OAuth 2 Delegated Flow with MSAL for Azure DevOps

Pre-requisites

• Latest version of Visual Studio 2019 with the ASP.NET and web development workload

• .NET 7.0 SDK

• Azure DevOps Organization

• Azure Active Directory Tenant with access to:

  • Create and configure application registrations

  • Capability to grant API permissions to said app registrations

Setting up the Blazor Web Assembly Project

1. Open Visual Studio and create a New Blazor Web Assembly project and provide the name of your project and local file path to save the solution.
2. On the Additional Information screen, select the following options:
   1. Framework: .NET 7
   2. Authentication Type: Microsoft Identity Platform
   3. Check the box for ASP.NET Core Hosted
   4. Hit Create to continue
3. You will now be seeing the Required components window with the dotnet msidentity tool listed. Press next to continue.
4. Follow the guided authentication window to authenticate your identity to your target Azure tenant.
   1. this is so that Visual Studio is able to assume your identity to create the AAD application registrations for the Blazor Web Assembly.
5. Once authenticated, you will see a list of owned applications for the selected tenant. If you have previously configured application registrations, you can select the respective application here. 
   1. For the purposes of this demo, we will create a new application registration for the server.
   2. Once the application is created, select the application you have created.
   3. Hit Next to proceed.
6. In the next prompt we will provide information about the target Azure DevOps service, choose the Add permissions to another API option to let Visual Studio configure the Azure DevOps downstream API.
   1. API URL - Provide your Azure DevOps organization URL (example: https://dev.azure.com/CustomerDemos-JL).
   2. Scopes - set to 499b84ac-1321-427f-aa17-267ca6975798/.default
      1. Note: this value does not change, as it is the unique GUID for Azure DevOps APIs with the default scope.
   3. Hit Next to proceed. 
7. Next, the tool will create a client secret for your newly created app registration. You can choose to save this locally (outside of the project/git scope) or copy it to manage it yourself.
1. Note: if you choose to not save to a local file, the secret will not be accessible again and you will need to regenerate the secret through the AAD app registration portal.
8. Afterwards, review the Summary page and selectively decide which components the tool should modify in case you have your own configuration/code already in place.
   1. For this demo, we will keep all boxes selected.
   2. Hit Finish to let the tool configure your project with the Microsoft Identity Platform!

Test your Blazor Web Assembly Project's Microsoft Identity Platform Connectivity

Now that the Blazor Web Assembly project is provisioned, we will quickly test the authentication capabilities with the out-of-the-box seed application.

1. On the Visual Studio window after provisioning is completed, our solution will now have both the Client and Server projects in place
   1. Ensure your Server is set as your Startup Project
   2. If it isn't, you can do so by right clicking your Server Project on the Solution Explorer.

      

2. Test your OAuth configuration
   1. Run your application locally
   2. On the web application, press the Log in button on the top right corner to log into your Azure DevOps organization
   3. Once logged in, you should see a Hello, <First name> <Last name>! message
   4. Getting to this point verifies that you are able to authenticate to Azure Active Directory, but not necessarily Azure DevOps as we have yet to configure any requests to the Azure DevOps REST APIs.

[Alternative Route] AAD App Registration Configuration

If you chose not to use the template-guided method of provisioning your Blazor application with MS identity, there are some steps you must take to ensure your application registration to function properly.

1. Navigate to your tenant's Active Directory > App registrations
   1. Note the two application registrations - one for the Server, and another for the Client
2. Configuring the Server app registration
   1. In order to allow your application to assume the logged-in identity's access permissions, you must expose the access_as_user API on the application registration.
      1. to do this, select Expose an API on the toolbar and select Add a Scope 
      2. For the Scope Name, ensure you provide access_as_user as well as selecting Admins and users for Who can consent?
      3. Now go to the Authentication blade and select Add a platform to configure your Web platform's API redirect
         1. For when you deploy to your cloud services, the localhost will be replaced by your application's site name but will still have the /signin-oidc path by default for redirects (can be configured within your appsettings.json)
   2. On the same page (Expose an API) select Add a client application around the bottom to add your Client app registration's Application ID to allow for your client to call this API
      1. Save the authorized scopes for your client configuration within your Visual Studios project
3. Configuring the Client app registration 
1. Navigate to the Authentication blade and do the same as in step 2.b but for your client's callback URL
4. Now ensure that both your client and server's appsettings.json in the Web Assembly project mirrors your app registration's configurations
   1. Client app settings can be found within the wwwroot directory by default and should have the following details

       

   2. Server app settings can be found at the base tree and should look like the following