How to call Azure AD Secured Azure Functions from ReactJS Application - reactjs

Following this article : https://cuteprogramming.wordpress.com/2019/01/02/authenticate-an-azure-function-with-azure-active-directory/. I have created an Azure AD Secured Azure Function using a an Azure AD Application (defined by a client id, issuer url, client secret, ..)
But I do not have any idea how to call it from my reactjs code
Do I have to perform to 2 successive http calls : one to get the access token and then a second one to reach my azure function as described in the postman example (in the above article) ?
In this case, the details of the Azure AD Application (client id, secret id,...) can be retrieved from the js code using the browser developer tool and can be then used by anyone to access my azure function. Is it really secure or do I miss something ?
How can I call my azure function from my react application in a secure way (I want my azure function to be only accessible by my react application) ?
Thanks

If you want to access Azure function app projected by Azure AD in react application, please refer to the following steps
Integrate Azure AD auth in your react application with Implicit grant flow. After doing that, when users access your application, they need to enter their AD account to get access token
Client exchanges this accessToken for an 'App Service Token'. It does this by making a POST to https://{app}.azurewebsites.net/.auth/login/aad with the content { "access_token" : "{token from Facebook}" }. This will return back an authenticationToken
Use that authenticationToken in a header named x-zumo-auth. Make all requests to your function app using that header.
For more details, please refer to here. Besides, regarding how to integrate Azure AD, please refer to the sample and here

Related

Custom Azure B2C sign up policy - client credential authorisation flow for business logic API

I am currently following this user guide for adding a custom policy to my B2C sign up process
I have created the API and configured the various XML files. I can generate a token to access the API via the implict flow.
The API is secured under the app service with Azure Active Directory authentication.
The page linked to describes how to add basic authentication and a client ID / secret, which is a Client Credentials flow, so I was trying to test this in postman
However, having failed to get it to work I went looking and found a variety of posts stating implict credentials are not supported by Azure B2C?
If that is the case I'm puzzled how it is I'm supposed to ensure the claims of the API I am calling to carry out the business logic can be accessed by the custom policy?
My API is hosted on Azure in the same subscription. I can generate tokens for this API fine to use within my native / client app.
Please could someone advise how I should go about testing access to this API from a B2C context via Postman?
The page linked to describes how to add basic authentication and a client ID / secret, which is a Client Credentials flow, so I was trying to test this in postman
To be exact, it should not be called Client Credentials, because it isn't it.
It's just HTTP Basic authentication.
You are adding an alternative authentication method to your API in that case.
The fact that B2C does not support client credentials auth does not matter here.
What matters is that you have enabled AAD authentication on App Service.
This will block the calls that try to use Basic auth against your API.
Here are a couple options that you can do:
Disable authentication on the App Service and implement the two alternative authentication methods in your API code
Allow anonymous calls through from App Service auth and implement Basic auth for unauthenticated requests in your API code
As for testing from Postman, it should then be the same as testing any API supporting Basic authentication.
You don't authenticate against B2C, so there is nothing special about it.

Access web api using AAD from Azure Function without using secret keys

I'm working on Azure Cosmos DB Feed changer Function. My requirement is in the feed changer function I need to access Web API using AAD authentication.
How should I configure the connection between the Azure Function and Web API using AAD so that the azure function can send the change feed to Web API?
How can I call the Web API in the function code?
Thank You,
Dheeraj
Based on your requirements, I suggest you using MSI(Managed Service Identity) in your azure function app.
You could create an identity here.
Then search the identity in AAD Enterprise Application list,you could find the permissions of it.
Then please refer to this document to obtain the access token and call your web api which is using AAD authentication with that token.
In addition, you could store the secret in Azure Key Vault and get the access token from AKV to call your web api. It support you to manage multiply permissions.
More details ,please refer to this link:https://blogs.msdn.microsoft.com/benjaminperkins/2018/06/13/using-managed-service-identity-msi-with-and-azure-app-service-or-an-azure-function/

How to integrate my activiti app (version 6) with Azure active directory endpoint v2.0 without using ADAL.js or MSAL.js

I have an Activiti app which needs to be integrated with the Azure Active directory for user sign in and authentication. The application is registered on the Azure AD and I have the following information:
tenant ID
CID
key
I am trying to follow the steps in the official documentation here, using the implicit flow.
All the examples I could find for it make use of the msal.js library to authenticate users with Microsoft Azure Active Directory accounts. But i need to achieve this without using any libraries. How do I proceed with this?
How and where in the activiti-UI do i need to put in the code to hit the following URL given in the steps
https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?client_id=6731de76-14a6-49ae-97bc-6eba6914391e&response_type=id_token&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F&scope=openid&response_mode=fragment&state=12345&nonce=678910
Any examples on this would be of great help!!
Thanks in advance!
For the doc you choose, it does not use a library.
To refer to this doc, your app is required to be registered in the v2 endpoint, like Application Registration Portal or app registration(preview) in Azure Portal. And you also need to enable Allow Implicit Flow for the Web client.
Send the sign-in request in your browser:
https://login.microsoftonline.com/{tenant-name}/oauth2/v2.0/authorize?
client_id=your application id
&response_type=id_token
&redirect_uri=your application redirect urls
&scope=openid
&response_mode=fragment
&state=12345
&nonce=678910
The response like this:
By this, you could get the id_token for the sign-in user. If you want to get the access_token, you need to replace openid in the scope with the resource url with the format(like microsoft graph: https://graph.microsoft.com/User.Read), and replace the id_token with access_token in the response_type.
The access_token response like this:
If you want to parse the token, you could use jwt.io.

Azure API Gateway and authentication

We are looking to publish an API in an Azure B2C model where customers will use our app to access API's published using Docker Swarm based Azure Container Services. Our assumption here is that this model will require Azure B2C AD as opposed to Azure AD.
All API calls will have an OAuth token issued from B2C AD.
We want to know what is the best approach to validate the token centrally before it reaches the microservices on Azure Container Service. We were using API Gateway to route the API calls to the correct microservice while also using the WAF capability in the API Gateway. However, we realize that the API Gateway does not provide a way to verify the OAuth token before it forwards the request to the microservices.
Also please note, as per the suggestions in Microsoft Documentation we have two tenants with one tenant running all services such as database and microservice and the second tenant hosting the Azure B2C AD.
Can you please suggest the best option to implement the OAuth Verification without having to implement this in each microservice.
One thing you could do is put Azure API Management Service between your clients and services, there you'd have an option to use validate-jwt policy to inspect tokens and authorize calls.
The following is a quick overview of the steps:
Register an application (backend-app) in Azure AD to represent the API.
Register another application (client-app) in Azure AD to represent a client application that needs to call the API.
In Azure AD, grant permissions to allow the client-app to call the backend-app.
Configure the Developer Console to call the API using OAuth 2.0 user authorization.
Add the validate-jwt policy to validate the OAuth token for every incoming request.
Please refer to the following document for steps in detail.

Identity Server 4 (with external Azure AD auth) token is not valid in Graph API

I am switching my application from Azure Active Directory authentication to authentication with Identity Server (using Azure AD as external auth). The authentication and authorization part is implemented and my web API successfully validates token and give me what I'm asking.
Our application also uses external APIs, such as Graph API and SharePoint Online which require Azure AD token. E.g. when I go to https://graph.microsoft.com/v1.0/me from my JS application with token that I get back from Identity Server, Graph API response is
401
{
"error": {
"code": "InvalidAuthenticationToken",
"message": "Access token validation failure.",
"innerError": {
"request-id": "ce7651bb-5dc4-49e9-90ff-02df440ed4ad",
"date": "2017-08-11T08:53:12"
}
}
}
I expected that because Identity Server is giving me his token, and not passing the existing token that is provided by Azure AD. I copied all the claims from Azure AD token into identity server token, but no changes.
What would be the right approach to enable my application to continue using APIs which require Azure AD token?
EDIT:
What I'm hoping for is this.
Click login button on Js (or any other client app)
Redirect to Identity Server login screen
Click on Azure AD external auth
Redirect to Microsoft login page and enter your credentials there
Redirect to Identity server app
a. I started Fiddler and see that "Microsoft" redirect to {IdentityServerAppUrl}/signin-aad (I suppose this is because I configured CallbackPath property on OpenID Connect options). This request carry a cookie idsrv.external. I'm not sure but I think inside is access token from Azure AD. I don't know how to decode this. I tried with base64, but it is not working.
b. When this request is finished redirect is made to {IdentityServerAppUrl}/account/ExternalLoginCallback. In this action method I check with debugger all fields and data in request but I can't find token from AAD. I'm hoping to get token and put it in additional calims.
Identity Server app redirect to JS client app with its own token and additional claim that contains Azure AD token that is valid on graph API and SharePoint.
First I would like to locate Action method or middleware that handle {IdentityServerAppUrl}/signin-aad?
Second, is there any way to get token from Azure AD or any other external provider inside {IdentityServerAppUrl}/account/ExternalLoginCallback Action method?
Be aware that I'm new to this kind of stuff and maybe I'm totally wrong with this thinking.
I manage to do Azure AD authentication without Identity Server, but know we have request to have multiple external providers and I'm hoping to handle all authentication in one app. If one day I get request to have additional external provider I need to add to just in one place.
You need to retrieve an access token from AAD for the Graph API - how that exactly works, check the Microsoft documentation.
Once you have that access token, you can return it as a claim in either the IdentityServer identity or access token (depending if you want to make it available to your front or back-end).
You can also try that first in a simple MVC app to remove the moving partsy - and once you have the AD part working, move your code to the app using the identityserver middleware.
I am also looking for an answer to this question. However, I think it should work a bit differently. IdentityServer gives you a JWT that you can use to authorize to the recources that make up your app. E.g.: yourAPI-1 and yourAPI-2. With the JWT you can pass on the identity. Microsoft Graph is an external resource. Therefore we would need the access token form the Graph API as a claim or external resource, same way as you'd receive an access token for an internal resource.
I would guess that there should be a way of forwarding whatever information you get from the identity provider (Azure AD) to IdentityServer for your client (JS app) to pick up. I am facing the same problem here.
There is another thread about this topic that caught my attention which I will look into. It requires to build your IdentityServer from the source with a few modifications: ASP.NET Identity (with IdentityServer4) get external resource oauth access token
I will let you know what the outcome is and push it to a git repo that you can use if it works:

Resources