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

by | Oct 20, 2023 | Technology | 0 comments

This article is contributed. See the original author and article here.





Introduction


The healthcare industry is no stranger to complex data management challenges, especially when it comes to securing sensitive information. As technology continues to evolve, healthcare professionals are increasingly turning to modern frameworks like Blazor to streamline operations and improve patient outcomes. However, as with any new technology, there are challenges to overcome. One of the biggest hurdles is implementing delegated OAuth flow, a security measure that allows users to authenticate with delegated permissions. In this blog post, we’ll explore step-by-step how Visual Studio and MSAL tools can accelerate your time to value and abstract away many of the complexities in the OAuth delegated flow for Blazor.





 


Pre-requisites



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.0.png

  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.1.png

  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.2.png



  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. 3.png



  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!4.png




 


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 Project5.png

    2. If it isn’t, you can do so by right clicking your Server Project on the Solution Explorer.

      6.png





  2. Test your OAuth configuration

    1. Run your application locally7.png

    2. On the web application, press the Log in button on the top right corner to log into your Azure DevOps organization8.png

    3. Once logged in, you should see a Hello, ! message9.png

    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 registrations10.png

    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 11.png

      2. For the Scope Name, ensure you provide access_as_user as well as selecting Admins and users for Who can consent?12.png

      3. Now go to the Authentication blade and select Add a platform to configure your Web platform’s API redirect13.png

        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 project14.png





  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 URL15.png


  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 detailsJinL99_0-1697829267063.png

       



    2. Server app settings can be found at the base tree and should look like the followingJinL99_1-1697829343094.png

       






 


 


 


 


 


 


 


 


 


 


 


Brought to you by Dr. Ware, Microsoft Office 365 Silver Partner, Charleston SC.

Submit a Comment