How to use microsoft oauth2 using azure AD with angular + flask

Question

I'm developing a flask + angular web app, and I want to use Microsoft oauth2 to get some data using rest APIs.

So I have a "sign in to Microsoft" button in Angular, but I need to call the APIs from the backend (Flask), so what's the best solution to this kind of situations? shall I register the frontend or the backend as client in azure AD ?

Edit :

I will explain more here:

• So I have an angular app that calls APIs from the backend (Flask)
• The users of my app have to grant me some permissions to access data in their power BI Accounts.
• In my Flask app I need to get an access token to Microsoft power BI to use some rest APIs such as : get reports or dashboards of the user
• Then I have to process the data that I've received from the power bi rest APIs, and send the response to the frontend app (Angular).

So the problem is:

• if I register the backend app, I won't be able to manage sessions since my backend is stateless.
• if I register the frontend app, I have two cases: - Case 1: Calling the power bi rest APIs from the frontend which is not a good case for me because I want to process the data received in the backend. - Case 2: sending the token through a post request to the backend which I think is not secure at all.

I actually can do another solution, which is: registering my angular app --> requesting the apis from angular --> doing some processing in angular and send the result to the backend --> the backend will do the rest of the processing phase without using the access_token, Can I do this?, or there is a better solution

Answer 1

我认为您可以注册您的后端应用程序并将 redirect_uri 配置到前端，我不确定

Answer 2

Client ID can sound confusing. The client id is just a general ID used to identify each app registration not the app type like a client "front end" application.

Also there should be a wizard in azure ad

So you will need to do an app registration for both front end "angular spa" and backend api.

Here is example of registering an api in azure ad. https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-configure-app-expose-web-apis

So first question what type of flow are you trying to use?

Also I would advise using the MSAL library

here is a link with the flows that it supports

https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-authentication-flows

here is an example how to setup angular with azure ad msal https://www.c-sharpcorner.com/article/build-a-secure-angular-app-using-msal-and-azure-active-directory/

You will need to register you client(angular application) along with the api.

Also you will want to look into securing a web api with msal.

You will also need to set things such as scopes

In all what will happen is you will login to Microsoft when you navigate to your angular app which will give you a bearer token which would then be sent in the header in your requests to your api which the api would then validate that token and either deny or send back the response.

Have a look here: https://realpython.com/blog/python/token-based-authentication-with-flask/ Check this too http://flask-jwt-extended.readthedocs.io/en/latest/