{"id":77521,"date":"2018-03-09T17:21:55","date_gmt":"2018-03-09T17:21:55","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=77521"},"modified":"2022-05-24T20:05:12","modified_gmt":"2022-05-24T20:05:12","slug":"securing-angular-based-chrome-extensions-using-azure-ad-asp-net-core","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/javascript\/securing-angular-based-chrome-extensions-using-azure-ad-asp-net-core\/","title":{"rendered":"Azure AD Authentication in Angular Chrome Extensions via ASP.NET Core Proxy"},"content":{"rendered":"

The Azure AD reference documentation<\/a> delivers tons of examples describing scenarios in which this authorization service can be used. Those examples help to find the answer for the very first question a developer asks when starting to research Azure AD authentication: which kind of solution should I choose for my project? The use case examples provided there are really helpful if you find one of them matching your project requirements.<\/p>\n

Unfortunately, Chrome extensions do not seem to be on a list of typical scenarios. The extensions are simple web applications built using HTML and JavaScript. Microsoft provides a ADAL.JS library that allows you to authorize web applications using the OAuth protocol. It simply redirects the user to the login page on Azure. After successful authorization the user is redirected back to the web application. That might seem to be a perfect solution for a Chrome extension. However, there is one technical issue that rules out this approach: Chrome extensions do not use the http<\/em>\/https<\/em> protocol! They use the chrome-extension:\/\/<\/em> protocol instead. All attempts of setting up the ADAL.JS configuration using redirect page that doesn\u2019t use http<\/em> or https<\/em> protocol result with an error like that shown in Figure 1.<\/p>\n

<\/p>\n

Figure 1: The login error<\/p>\n

Find a Way Out<\/h2>\n

Let\u2019s think about a way out. What if we delegated the authorization process to a web application hosted using standard the http protocol? Its role would be to obtain an authorization token from Azure AD and pass it to the Chrome extension. The diagram shown in Figure 2 presents the flow of a proposed solution. The code with a working solution<\/a> covered in this article can be found on my GitHub.<\/p>\n

<\/p>\n

Figure 2: Proposed solution workflow<\/p>\n

Getting Started<\/h2>\n

My previous article<\/a> presented how to build Chrome extensions using TypeScript and Angular CLI. I will use the code developed in that article to demonstrate how to implement Azure AD authentication in this case. The goal is to restrict some content for authorized users only.<\/p>\n

Before implementing the authorization solution, register a new application registration in Azure Active Directory module on the Azure portal. More details can be found in the Azure Active Directory documentation. While registering it, you need to provide some details. Here are the settings to use for the test application:<\/p>\n