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 ?

CodePudding user response：

I think you can register your backend application and configure the redirect_uri to the frontend, I'm not sure tho

CodePudding user response：

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/