Vue.js + Django + Login with Microsoft - vue.js

I have a SaaS application using Vue.JS as frontend and Django Rest Framework as backend. I use JWT tokens for authorizing between frontend and backend.
Now I want to add support for our customers to be able to sign in with their Microsoft accounts. So if the signed in user matches a user in our database, it is logged in to our application.
I've set up Azure B2C and can successfully log in and acquire a token in the Vue.JS application using msal library.
Then I send the token to backend server for verification. I use azure_ad_verify_token to verify the token, but I get an InvalidAuthorizationToken exception.
It seems to be working when the user is added to my organization's AD directory. But I would like to verify the token for any Microsoft user, then match it to users in our database. It would be too much work to manually add our customer's users to our AD directory. If it would be possible to add another organization/domain I guess that would be ok.
There's a lot of documentation regarding this but I always end up in examples for separate applications. Just to clearify flow I try to achieve.
The user clicks on login with microsoft
The user is redirected to Microsofts login page, approves my application for their organization
On requests sent to our backend, the token should be verified against Azure Active Directory using authorization class.
If the user's email exists in our database, the request is successful

Related

Is it possible to authenticate a user using google identity without provider's sign in page

Background
I have a web application "APP1" (front-end: Vue.js & Back end:Azure function) deployed in azure app service. I have implemented client directed sign in (easy auth using this), after that I can authenticate user using provider's sign in page [both AAD & google].
Target
I have another web application "APP2" deployed in on-primes server. I want to redirect to APP1 from "APP2" and automatically sign in without provider's sign in page. I will read credentials from environment variable.
Tried solutions
I have found a similar issue here, however I am unable to use the solution because the DB between AAP1 and AAP2 can't be shared
I have also checked the google identity providers documentation, however I am unable to find how to programmatically sign in without provider's sign in page
Question
Is it possible to programmatically sign in to google identity to get token without provider's sign in page
The whole point of google identity is to prove the identity of the person behind the machine.
OpenID Connect is an open standard that companies use to authenticate (signin) users. IdPs use this so that users can sign in to the IdP, and then access other websites and apps without having to log in or share their sign-in information. (id_token)
OAuth 2.0. This standard provides secure delegated access. This means an application created by a developer, can take actions or access resources from a server on behalf of the user, without them having to share their credentials (login and password). It does this by allowing the identity provider (IdP) to issue tokens to third-party applications with the user’s approval. (access_token, refresh_token)

How can I verify if username and password is correct despite of Multifactor authentication is enabled with Azure AD?

I am wondering if there is anyway to check if the entered username and password is correct despite of enforcing multi factor authentication in Azure Active Directory?
I have set up an app with application permission(with admin consent) as well as delegated permission and is able to test both approach using ConfidentialClient and PublicClient using MSAL library.
I am not able to run my web form app in IIS with the PublicClient approach which is interactive and displays you a popup for the Microsoft login. So, the only approach I see here is to use app-only authentication.(https://learn.microsoft.com/en-us/exchange/client-developer/exchange-web-services/how-to-authenticate-an-ews-application-by-using-oauth )
I can use the confidential client(app only) since I have all the required admin consents granted to get the OAuth token and then impersonate the user to access to EWS managed api.
But the requirement is the user should enter their outlook password in the webform app before loading their emails(from EWS Managed API which needs OAuth token).
At this point I am not sure what to do next. Please help. Also let me know if you need more information.
For more reference why I am no able to use delegated authentication: Why app is throwing error in test environment but working fine in local machine using ASP.NET Web Forms and MSAL?
Per my understanding, you want to check the username and password by Azure AD first and using the confidential client to call APIs on behalf of the user.
This way is something hacking, but I think it works for this scenario. Just try the request below:
POST https://login.microsoftonline.com/<tenant id>/oauth2/v2.0/token
Request Body:
client_id=<confidential client app id>
&Client_secret=<confidential client app sec>
&grant_type=password
&scope=https://graph.microsoft.com/user.read
&username=<username>
&password=<password>
If the user typed the wrong user name and password, the response would be:
If username and password are all right, the response report the MFA related info:

How to create Own Access Token validated by Auth0 in .net core

I have an existing system and want to utilize Auth0(still considering).
Context:
I have my own login screen, which is quite dynamic(white labeled) per client. So I dont want to use Auth0 login screen.
I have my own user and tenant database, so dont want to use Auth0 user database for now.
So the idea is to validate the user credentials after login on my backend and create access token to return to client side.
I want that access token to be validated by Auth0.
Questions:
1) Probably most important question. Should go with Auth0 or just stick with native jwt's
2) Is there a way I can create a valid access token in my backend which can be validated by Auth0.
Stack:
I am using vue.js as my front-end SPA.
I am using .net core as my backend.
Probably most important question. Should go with Auth0 or just stick with native jwt's
That is determined by whether you want to enable the online identity provider's features like Single Sign-On . If not , just keep using the current one since you don't need the Auth0 user database .
Is there a way I can create a valid access token in my backend which can be validated by Auth0.
Since your scenario is collect username and password in front-end application , and pass to backend .net application to validate credential and create token . You can implement the Resource Owner Password Grant in Auth0 to create access token for accessing resource which protected by Auth0, but as document shows :
You should use this flow only if the following apply:
The application is absolutely trusted with the user's credentials. For Single-Page Apps and Native/Mobile Apps, we recommend using web flows instead.
Using a redirect-based flow is not possible. If this is not the case and redirects are possible in your application, you should use the Authorization Code Flow instead.
So that it's not recommended in your scenario . If you need the features like SSO and want to use Auth0 , it is recommended to directly use Auth0 in vue application to manage your users and roles :
https://auth0.com/docs/quickstart/spa/vuejs/01-login
After login with Auth0 , you can map the user to local database user for specific management if needed .
Another way is using Client Credential flow . For this scenario, typical authentication schemes like username + password or social logins don't make sense. Instead, M2M apps use the Client Credentials Flow , your backend app will authenticates and authorizes the app rather than a user. It's not suitable if you want to acquire access token for specific user to access protected resource .

Authenticating AD user automatically and manually - WebAPI 2 server and SPA client

I'm developing an Enterprise/Internet Application with WebAPI 2 RESTful server and SPA web client (Angular2) —So I have two separated projects created using ASP.NET 4.6 Empty template and both use OWIN and are IIS hosted.
The requirement for Authentication is:
Active Directory user which is logged in to the workstation will authenticated automatically once she opens any page from app in the browser if user id/name found in the database, with no need to enter her user/pass. Let name this as auto-login. Else if it's not found in the DB it will redirected to the login page.
Also there should be a logout option which redirects user to the login page after logging she out.
In the login page any AD user can enter her/his AD user&pass and after successful check against database (existed) and AD (valid credential) she/he will logged in to the system (Obviously it may be different than user currently is logged in to the workstation)
In addition to the web client it will have other clients such mobile apps which will connect and be served by the WebAPI back-end. Users will login there using their AD user & pass too. Let name it manual-login.
According to the REST architecture and having both AD enterprise and internet/mobile users together, the authentication should be token based —this is what I found till now but I'm not sure.
I read about OWIN Authentication architecture and Windows Authentication and I checked MixedAuth, Now I think it is the nearest solution for this requirement as it lets app-defined users to authenticate side by side of windows/AD users. But even after dig into it and its SPA sample I didn't found my way yet and confused.
Anyone can help?
What should I actually do on the WebApi server and SPA Client to accomplish those authentication requirements?
Which middlewares should I add and how should config/manipulate them?
UseCookieAuthentication ?
UseExternalSignInCookie ?
UseOAuthBearerTokens ?
Can I rely just on Bearer tokens (using OAuthBearerTokens MW) and get same token for authenticated windows users to unify authentication model based on bearer tokens? If so, how?
How and where should I put my code for checking that AD user exists in the DB and if not so reject the authentication?
Thanks a lot.

How can I share Azure Active Directory authentication between server side and client script?

I currently have an MVC app that's using the Microsoft.Owin.Security.WSFederation package for authentication with Azure's Active Directory. This lets me use the Authorize attribute on my controllers to redirect users to the Microsoft login site.
I now have the requirement to add access to a WebAPI project that will be hosted on a different domain but will use the same AD store.
I've managed to pull together something using the ADAL JS library provided by Azure but this gives the following process:
user visits site and is redirected to Azure login
user logs in and is returned to site
JS code checks for login and redirects to Azure
user is already authenticated so redirects back to site with token
JS picks up token, stores it, and redirects to the original page
So it works, but involves 4 redirects, which seems like a huge overhead.
I thought that there might be some way of pulling a bearer token out of the authorisation credentials returned when the WSFederation succeeds but I can't see anything like that in the data. And, even if I could, I don't know how I'd be able to then refresh the token from the client script. So I strongly suspect I'm doing something fundamentally wrong.
What would be the best process for sharing authentication between the two sites?