How can I set up SSO with Azure AD and our back end strapi? - azure-active-directory

I am wondering if anyone has done this before,
I have an azure Active Directory, and I host the front end of our app in IIS. The back is controlled by pm2. How can I set up SSO with Azure AD and our back end strapi?
Thank you for any help

Strapi supports natively Microsoft SSO.
You must act on three fronts: Azure Portal, Strapi Admin, Frontend App
1 - AZURE Portal: (create application, configure, get params)
1.1 Create application, go to the App registrations site and register an app
1.2 Click New Registration
1.3 Fill the form as show in below ScreenShot
1.3.1 In "Supported account types" set Multitenant option (in strapi, single tenant is not supported by default, if you need to set single tenant you must create a custom provider, but multitenant is ok)
1.3.2 In the Redirect URI field, put "Web" and
/connect/microsoft/callback
(i.e. http://localhost:1337/connect/microsoft/callback or your strapi
production url https://mystrapiexample.com/connect/microsoft/callback)
1.3.3 Register and go to next page
1.4 Go to the "Authentication" page of your registered App (left menu) to enable the implicit grant flow (Access tokens)
1.5 Go to the "Certificate and secrets" page of your registered App (left menu) to create a "New client secret" and annotate the value, You will use it when you configure the provider on strapi.
1.6 Also note the "Application (client) ID" in the Overview page, You will use it when you configure the provider on strapi
2 - STRAPI ADMIN: (create application, configure, get params)
2.1 Go to "Roles and Permission" > Providers > Microsoft
2.2 Set Enable "ON" and your clientId and secret that you get in previous steps (1.5 and 1.6)
2.3 The redirect URI to your front-end app which gets and redirects the microsoft access_code (this step will be clearer later)
3 - FRONTEND APP:
Ready? At this point the flow begins, starts to jump to complete the authentication and obtain a strapi jwt to make the requests as an authenticated user.
3.1 Create a link in your frontend application to strapi microsoft sign-in
/connect/microsoft
(i.e. http://localhost:1337/connect/microsoft or your strapi
production url https://mystrapiexample.com/connect/microsoft)
3.2 Strapi redirects the user to microsoft authentication page, on success the user will be redirected on strapi with a microsoft access_code (this step is transparent for you)
3.3 Strapi redirects the access_code to the frontend url set in 2.3, which must redirect (with access_code) to strapi page auth
/auth/microsoft/callback
(i.e http://localhost:1337/auth/microsoft/callback or your strapi
production url https://mystrapiexample.com/auth/microsoft/callback ).....
3.4 At this point strapi creates its own JWT token which returns to the frontend application, which can store it (in localstorage, session storage...) to make requests to the strapi endpoints.
References
https://github.com/strapi/strapi-examples/blob/master/login-react/doc/microsoft_setup.md
https://learn.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app
https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow

You can easily implement authentication using Azure AD in your strapi CRM web project.
Steps to follow:
Register an application in Azure AD.
Add target API, and grant consent to select permissions.
Choose your Microsoft authentication library ,recommended MSAL
Implement the MSAL library in your project. It is very simple to implement and code sample that can help you is available here.
Please let me know if you still have any issues.

Related

Azure Application Proxy - Single Page Application - CORS issue

Components:
HTML, Bootstrap, AJAX Single Page Application (SPA) --> Deployed on-premise on tomcat 1
Azure Application Proxy 1 fronting SPA with pre-authentication as passthrough
REST API (API) --> Deployed on-premise on tomcat 2
Azure Application Proxy 2 fronting API with pre-authentication as Azure Active Directory
Microsoft MSAL Javascript library: https://github.com/AzureAD/microsoft-authentication-library-for-js
Flow:
User accesses SPA using Application Proxy 1 external URL eg. https://appProxy1.com/spa
The SPA has a sign-in button, when clicked invokes the Microsoft js MSAL library.
The user is presented a pop-up and upon entering credentials, is authenticated against Azure AD and an OAuth token is fetched.
Once authenticated successfully, the user is allowed to perform search on the SPA.
When the user searches, the SPA invokes the REST API using the application proxy 2 url eg. https://appProxy2.com/rest/.search
The REST call is blocked by browser due to CORS. It seems that Application Proxy/Azure AD is not allowing cross origin calls.
Note:
CORS has been enabled in the REST API code and SPA is able to invoke the REST API if Application Proxy 2 pre-authentication mode is set as passthrough.
I have gone through https://learn.microsoft.com/en-us/azure/active-directory/manage-apps/application-proxy-understand-cors-issues. This workaround is possible if HTML application and REST service are deployed on the same application server.
Question:
Is there any option to enable/configure CORS on Application Proxy.
Currently there is no way to configure/enable the CORS on Application Proxy.
There a user voice request for CORS App Proxy. Please feel free to up vote this user voice request.

Migrate from msal angular to azure webapp authentication

I'm working on a web application deployed on an azure webapp authenticated with Azure AD.
It is mostly based on the angular template for ASP.Net Core. The backend hosts the frontend in a ClientApp directory.
For the authentication, the frontend works with the msal-angular plugin which on access redirects to the Azure AD authentication page. After login, the login page redirects back to the frontend, which catch the token, and makes all the calls to the backend with the token in the authorization bearer header.
The .Net Core backend is configured with :
services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
.AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));
Finally, to make all these works, I have in the Azure AD app registration one entry for the backend and another for the frontend.
This works well, but we want to move away from that to use the Authentication directly on the webapp.
This way we could secure even more the application which would not even be downloaded if the user is not authenticated.
How do I manage to do that ?
Do I need to remove all authentication code from the backend and frontend ?
Do I still need 2 entries in the app registration on azure AD or one is now enough ?
How will I know which user is connected ? Actually I use the IHttpContextAccessor to get the UPN Claim.
Thanks for the help

How to configure a WebApp & WebApi with different AAD App IDs?

I currently have two app services
Web App (Asp.net core 2 w/ front end in react)
Web Api (Asp.net core 2)
Note: Both are configured with different Azure active directory app id.
user signs into Web App and retrieves a token for it's own appId/ClientId/ClientSecret stored in tokencache.
from the WebApp, the user wants to talk to a WebAPI but needs to get a token since it's protected with AAD as well but it's a different app id/client id/client secret.
Problem:
When I try to do a AcquireTokenSilentAsync() for the web api, I get an error throwing that I the token is not in the cache?
It also seems that with depending if your using AAD v2.0 or v1.0 will determine if the web app and web api can have different app ids. So it seems like i would have to use AAD v1.0. With Asp.net core 2, it's not clear to me what OpenIdConnect is using or configured to use under the covers.
Question:
It's not clear to me why the acquire token silent async didn't work and failed. Does that only look for the token in the cache; otherwise it fails?
Is it possible to configure the token from web app to have permission to access web api resources. I notice that in the azure portal, you can selected resources like microsoft graph, but I don't know how you would associate a custom API. In my case, I want to get it running on my local machine before I move it all to azure.
If the web app token does not have permission to access the web api, do i need to do another login authentication with the user even thou both are within the same tenant?
Any Advice appreciated,
Derek
Yes, AcquireTokenSilentAsync will look into the cache, and see if it can find tokens. If it does, it will check to see if the access token is still valid and return that back. If the token is expired, it will use the refresh token to fetch a new access token and return that back. When this call fails, it's an indicator you need to perform an AcquireTokenAsync (which will likely show UI in the case silent already failed).
Yes, you can associate a web app to get tokens for your own custom web API. I'd recommend using Azure AD v1.0 (register the app in the Azure portal, ADAL library). You'll need to register the two apps (web app and the api), both will be type web app/api. In the API, you can register an App ID URI which will act as the resource identifier for this API. In your web app, you'll want to go into the Required Permissions, and add the Web API you have registered as a permission. Then in your web app, you'll need to use the ADAL library (alongside an OpenID OWIN middleware) to acquire a token for the resource as specified by the App ID URI field. Here's a code sample that implements the exact scenario you're describing (Web App/API in ASP.NET Core).

Azure AD Apps: Migrating to v2.0

This is my scenario: Client Windows Forms app authenticates with Azure AD and uses the access token to access several web api services. Until now, I was using the endpoint 1 and using the Azure portal to register both apps. It seems like there's a new way now, but I'm a little lost here.
For starters, it seems like both apps (client and server) can be registered in the same app in the new apps portal (https://apps.dev.microsoft.com). I do see a place to add platforms and I have added entries for the native and web api. But where do I go from here? For instance, in the azure portal, I must configure the client app in order for it to call the web api services. How do I that here?
Is there a complete sample for this scenario like the one we have to ADAL (https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-code-samples#native-application-to-web-api)?
Thanks,
Regards,
Luis
Please firstly refer to this document to know what's different about the v2.0 endpoint .When you build applications that integrate with Azure Active Directory, you need to decide whether the v2.0 endpoint and authentication protocols meet your needs. Please see the limitations of azure ad v2.0, such as you can use the v2.0 endpoint to build a Web API that is secured with OAuth 2.0. However, that Web API can receive tokens only from an application that has the same Application ID .
The v2.0 endpoint does not support SAML or WS-Federation; it only supports Open ID Connect and OAuth 2.0 ,To better understand the scope of protocol functionality supported in the v2.0 endpoint, read through OpenID Connect and OAuth 2.0 protocol reference.
You could refer to document how to call a web API from a .NET web app with Azure AD V2.0 (using MSAL to acquire and use access tokens), and here is the code sample on Github . The document includes how to add basic sign-in to a web app or how to properly secure a web API in azure ad v2.0 .

Authenticate from active directory for remote users through SAML or WS-FED using OKTA?

We have an instance based web app on IIS which uses active directory for authentication.
This web app has an external public web address for remote users to work with.
OKTA provides Active directory integration which sync directory and provide SSO for users inside the active direcory domain.
But for remote users as far as i know OKTA can provide SSO through their SWA (secure web application) type of application but which means using a browser plugin from OKTA for remote users.
Is there any other way for us to authenticate from active directory
for remote users through SAML or WS-FED using OKTA?
Okta supports SAML 2.0 for this use case. Please reference the documentation at https://support.okta.com/pkb_Home?q=SAML&l=en_US for details on how to configure this.
Also note that there's a sample app demonstrating SAML integration via the Spring framework (if the app in question is Java-based). http://developer.okta.com/docs/examples/spring_security_saml.html

Resources