How to access Azure Maps API from browser using Azure App Service Active Directory authentication? - azure-active-directory

I have an Azure App Service with Azure Active Directory Authentication enabled. So the users have been authenticated by AD. How do I use that authentication to call Azure Maps from the JavaScript in the browser?
I was able to make calls from the browser to the maps API using the maps shared key, but I obviously don't want to do that. I was also able to have the browser call my server, and have my server use the shared key to call the maps API, but I don't want my server to have to be the middle-man for every call.

Well, in your case, you can hit https://webappname.azurewebsites.net/.auth/me to get the token to call Azure Maps API, please follow the steps below.
1.Navigate to the resource explorer -> find your app service-> add ["resource=https://atlas.microsoft.com"] to additionalLoginParams like below -> PUT.
2.Navigate to the Azure Active Directory in the portal -> App registrations -> find the AD App corresponding your app service -> API permissions -> add the permission user_impersonation of Azure Maps like below.
Note: If you could not find Azure Maps on the first page, just go to APIs my organization uses and search for ba1ea022-5807-41d5-bbeb-292c7e1cf5f6, then click it and add the permission above.
3.Then when the user login the web app, after he consents the permissions, you can get the token with endpoint https://webappname.azurewebsites.net/.auth/me, and use the token to call the Azure Maps API with javascript, in this way, the user just needs to login for one time, the token was generated via the azure ad auth.
Note: Before you getting the token, make sure the user logged in the app is already added as a role e.g. Azure Maps Data Contributor in the Azure Map Account -> Access Control (IAM), if not, follow this link to add it.

Related

Why the URL of Azure App service can't be used as the Application ID URI in Azure AD?

The azure app service provided an URL in such format https://your-app-name.azurewebsites.net
When Expose an API in azure app registration the Application ID URI is needed. But when I use the url provided by the azure app service I got the following error:
Values of identifierUris property must use a verified domain of
the organisation or its subdomain: https://your-app-name.azurewebsites.net
the URL provided by the app service is not a verified domain? and how can I make it verified?
Application ID URI is an identifier that can be used instead of the client ID when specifying a scope defined in that app.
It has nothing to do with authentication redirect URIs, where it would need to match your app hosting.
Agree with juunas and this is just additional description. Screenshot below contained the error you met and one of the supported App ID URI pattern.
I'm afraid that the reason for exposing API is that you want to protect your web API with Azure AD. The App ID URI here is used for the authorization. Your web app also requires to configure the audience, then after you integrate Azure AD authorization into your application, the scope, the audience and other claims containing in the incoming access token will all be verified. I have a sample which is based on a web api. You can see the configuration for Azure AD authorization.
And https://your-app-name.azurewebsites.net is for authentication which used for redirect from microsoft identity platform back to your own web app. The scenario can be opening your own web page which requiring user to sign in --> redirect to microsoft sign in page --> sign in then redirect back to your web page. So we need to identify the redirect URL in Azure AD.

How to call Azure AD Secured Azure Functions from ReactJS Application

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

Graph API azure directory authorization error

I have a graph API app and want it to be accessible to every user for authorizing.
The app is made to be a multi-tenant application that should be available to everyone (see screenshot)1.
When a user who is not added to the azure active directory tries to access to grant permissions to the app, they get this error saying "the user is not added to the azure active directory, and the user needs to be added as a tenant to the app"
I am using this link for oauth access https://login.microsoftonline.com/DIRECTORY_ID/oauth2/v2.0/authorize?client_id=CLIENT_ID2&response_type=code&redirect_uri=http://localhost:3000/auth/callback&response_mode=query&scope=offline_access Channel.Create Channel.ReadBasic.All ChannelMessage.Send Team.ReadBasic.All Group.ReadWrite.All&state=12345
error message from graph app
You are using a tenant specific endpoint which will not support personal account. You need to use a common endpoint(login.microsoftonline.com/common/oauth2/v2.0/).
Based on your URL you have shared, you can use below example syntax,
https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=CLIENT_ID2&response_type=code&redirect_uri=http://localhost:3000/auth/callback&response_mode=query&scope=offline_access
Also, Please refer to similar question here.

Configure Azure AD B2C as Auth Provider in Salesforce

I am trying to configure Azure AD B2C as auth provider to Salesforce. I followed the instructions in http://salesforce.vidyard.com/watch/kcgTXQytUb6INIs2g3faKg (instead of google used Azure AD B2C).
When I click on the test-only initialization URL I get the following error
My B2C set up is very basic. I just have an email provider and an out-of-the-box sign-in sign-up policy.
Any help will be greatly appreciated.
I'm late to the party but I wanted to post here in case anyone else can use this information. We followed the below steps with an ordinary Custom Policy returning a JWT token. Notice steps 4-5 under Create an Azure AD B2C Application and step 8 under Configure Salesforce Auth. Provider, these will pull back an Access Token from Azure AD B2C.
Create an Azure AD B2C Application
Log into the Azure AD B2C instance you wish to connect to.
Go to Applications. Click + Add.
Add https://www.salesforce.com as a Reply URL. Click Create.
Select the new app you just created. Save the Application ID.
Click Published Scope. Add read as a scope. Click Save.
Save the Full Scope Value.
Click API access. Click + Add. Under Select API, select the name of the application. Under Select Scopes, ensure read and user_impersonation are selected.
Click OK. Select Keys from the left nav. Click + Generate key. Click Save.
Check the value of the generated App key. If it contains “/”, “?”, “&”, or “%” (there may be more invalid characters), delete the generated key and repeat steps 8 and 9 until a valid key is generated. Save the valid key.
Configure Salesforce Auth. Provider
Log into Salesforce. Go to Setup. In the Quick Find box, type Auth. Select Auth. Providers.
Click New.
Under Provider Type, select Open ID Connect.
Add an informative Name. This will be displayed to users as an option when signing in. Salesforce will generate a URL Suffix.
Place the Application ID, from Step 4 of “Create an Azure AD B2C Application”, in Consumer Key. Place the App key, from Step 9 of “Create an Azure AD B2C Application”, in Consumer Secret.
Retrieve the OpenID Connect discovery endpoint of the Azure AD B2C Custom Policy you wish to integrate with. This discovery endpoint can be found at https://{tenant-id}.b2clogin.com/{tenant-id}.onmicrosoft.com/v2.0/.well-known/openid-configuration?p={policy-id}.
Use the authorization_endpoint field in the discovery endpoint as the Authorize Endpoint URL in Salesforce. Use the token_endpoint field in the discovery endpoint as the Token Endpoint URL in Salesforce. Use the issuer field in the discovery endpoint as the Token Issuer in Salesforce.
Place the Full Scope Value, from Step 6 of “Create an Azure AD B2C Application”, in Default Scopes. Add “ read” to the end. (The final value should look something like this: https://{tenant-id}.onmicrosoft.com/{application-name}/read openid)
For Registration Handler, follow Step 11 from these directions: https://help.salesforce.com/articleView?id=sso_provider_openid_connect.htm&type=5
a. Note, in case that link changes. You can create a new Registration Handler using the code in this GitHub repository: https://github.com/salesforceidentity/social-signon-reghandler/blob/master/SocialRegHandler.cls. You may need to add u.CompanyName = 'CompanyName'; in the prepareUserData method.
Pause here, we’ll come back from Token Issuer.
Setup a Dummy User Info Endpoint
Salesforce requires a User Info endpoint. Azure AD B2C does not provide one. You can use the code in this GitHub repository to create a version of a user info endpoint: https://github.com/azure-ad-b2c/samples/tree/master/policies/user-info-endpoint
This code will only return the claims present on the user’s token. We settled on modifying the code to run in an Azure Function.
Whatever your solution, you should end up with a REST endpoint. Place that REST endpoint in the User Info field of the Auth. Provider in Salesforce.
Click Save.
Authorize the Callback URL in Azure AD B2C Application
Click on the Auth Provider configured in the above steps.
Under Salesforce Configuration, save the Single Logout URL.
Expand Communities and save the Callback URL of the Community in which you want to enable SSO.
Return to Azure AD B2C. Navigate to App registrations (Preview). Click All applications.
Select the application created in “Create an Azure AD B2C Application”. Click Authentication.
Click Add URI. Add the Callback URL from Step 3. Update the Logout URL with the Single Logout URL from Step 2. Click Save.
Are you able to test this login endpoint in your terminal using curl, to ensure it is returning the token?
curl -v https://<Azure login endpoint> -d "grant_type=password" -d "username=user#login.demo" -d "password=password"
You may need to add additional parameters to the curl command for Azure (perhaps add a client id & client secret?

How do I exclude specific URLs from authenticating using Azure AD?

Assuming I have a web app residing in Azure and using Azure AD, and I configured it to authenticate using Azure AD
settings -> Authentication / Authorization -> Authentication Providers -> Azure Active Directory
Now I want certain pages and URL paths to be publicly available (without need for authentication).
How do I configure that?
Somehow I stumbled upon the answer.
The way to configure that is described in the following article:
Expanding App Service Authentication/Authorization
You need to leave the "action to take" drop-down as "Allow request (no action)" and then the application may redirect the user to the log-in page as needed. This was not sufficiently explained in the Azure portal and led to some confusion on my part.

Resources