Redirect URI of an Azure Active Directory App Registration when backend on other server

0
votes

I'm about to deploy an Angular HTML frontend as an Azure App Service. Within the app settings, there is the option to enable Azure Active Directory authentication. If enabled, when I navigate to https://my-awesome-project.azurewebsites.net, I'm redirected to a MS login screen where I can enter my AAD credentials. However, for this to work I need my app to be registered with AAD.

While following this guide is only three steps, I still have one question:

Since in my scenario the HTML frontend (Azure App Serivce) and the Node.js backend API are on separate servers, the Redirect URI of my app registration should point to an HTTP endpoint of my backend server, right?

Lots of tutorials I have seen say to put your app's web URL into the Redirect URI field. But in this case, how would my HTML/js frontend know what to do with it?

After all, Microsoft says that "We'll return the authentication response to this [Redirect] URL after successfully authenticating the user ..."

Cheers

1
azureazure-active-directoryazure-web-app-service

1 Answers

1
votes

You need to understand how the authentication works.If you are using Azure Active Directory for authentication then any application that you require to get authenticated needs to get registered with AAD (Azure Active Directory). In your case both front and backend needs to be registered with AAD and your backend needs to have trust on the frontend application and that you configure in Azure. https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad

Your frontend needs to control the flow and after authentication you get redirect to frontend and it should receive token from AAD and you will have to use that token in authorization header to access the backend APIs. For this kind of flow you can use AADL (AAD library https://github.com/AzureAD/azure-activedirectory-library-for-js) that can take care of this and generally a better choice which this kind of authentication flow.

Another point why do you need to use Azure App service for Angular/HTML when it's a static front end ? You can look into Azure Static hosting site which would save you heaps of cost. https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

More resources https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v1-angularjs-spa