All geek questions in one place

Authentication against the Azure Mobile Service application with the purchased ADAL.js token

I am trying to authenticate an HTML application on an Azure Mobile Service application.

Customization

Both applications use AAD as authentication, so both applications have an application registered in Active Directory:

Azure Mobile Service App:

HTML application:

  • in "permissions for other applications" I added an Azure Mobile Service application with delegated permission "access"

The Azure Mobile Service uses the .NET backend, in which I have included and configured the NuGet package "Microsoft Backup Security Extension for Microsoft Azure Mobile Services.NET", as described in https://azure.microsoft.com/en-gb/documentation/articles / mobile-services-dotnet-backend-windows-phone-get-started-users /

The HTML application uses ADAL.JS and Angular:

adalAuthenticationServiceProvider.init( { // Config to specify endpoints and similar for your app clientId: "<html app aad client id>", redirectUri: "<html app redirect uri>", endpoints: { '<AMS app client id>': 'https://ampapp.azure-mobile.net/' } }, $httpProvider );

This setup works as expected, I open the html application, authenticate against Azure AD, get a redirect to my application, and I am logged in. Also, when I try to access my Azure Mobile Service, I see that Adal.js enters the media token.

Problem

The carrier token is not accepted by the Azure Mobile Service - I receive 401 not authorized. I don’t know why, but the Azure Mobile Service uses its own authentication header, but good.

MSDN defines the so-called "client login operation" for Azure Mobile Service:

"Requires an authentication token from Microsoft Azure Mobile Services, using an authentication token already obtained from the identity provider." ( https://msdn.microsoft.com/en-us/library/azure/jj710106.aspx )

So let's do the following:

  // obtain token for Azure Mobile Service from Adal.js var token = this.getAADToken(ZUMOAuthenticationProvider.Config().url); $http({ method: 'POST', url: ZUMOAuthenticationProvider.Config().url + 'login/aad', data: JSON.stringify({ "access_token" : token }), headers: { 'X-ZUMO-APPLICATION': '<application key>' }). success(function (data, status, headers, config) { alert(data); }). error(function (data, status, headers, config) { alert(data); });

Note. The token received on the first line is indeed an access token for the azure app for aad mobile apps, not the HTML app.

This POST request also receives a 401 response. Therefore, I do not know how to authenticate my application. I also tried azure mobile service js lib. This library works, but it uses a popup for authentication, but I don't like adding another library to my projects for just a few REST calls.

Similar problems

While trying to solve my problems, I found another Stackoverflow entry:

Why is my Azure Mobile Service not accepting the carrier token that ADAL.js sends?

  • same problem, no solution (even in chat related in last comment)

How to secure Azure Mobile Service with Azure AD? ADAL.JS

  • the same author as above, I checked everything that is mentioned in the accepted answer, but it does not work.

I also reviewed new Azure Mobile apps from the new Azure Management portal, but it looks like they use the same authentication mechanism.

So how can I make this work?

+6
source share
3 answers

Ok, I found my error:

 endpoints: { '<AMS app client id>': 'https://ampapp.azure-mobile.net/' }

It should be

 endpoints: { 'https://ampapp.azure-mobile.net/': '<AMS app id uri>': }

After that it works! I want to publish an Angular module for github that introduces a token in the X-Auth-User header for each request, for example adal.js.

Edit:

As already mentioned, a more detailed answer:

As already mentioned in my question, you need to configure 2 applications in Azure Active Directory:

  • AAD app for Azure Mobile Service
    • just follow the instructions from article
  • AAD application for HTML application
    • set oauth2AllowImplicitFlow to true
    • in the "Permissions for other applications" section, add the AAD application for Azure Mobile Service enter image description here

Configure your Angular app to use Azure Mobile Service as your endpoint

 adalAuthenticationServiceProvider.init( { clientId:"54110492-4ae3-4c9f-9530-3101458d43fb", redirectUri: "https://localhost:44304/", endpoints: { 'https://zumodemoapp.azure-mobile.net/': 'https://zumodemoapp.azure-mobile.net/login/aad' } }, $httpProvider );

Now you can use the client login operation to get the Azure Mobile Service authentication token.

 var zumoAppID = 'https://zumodemoapp.azure-mobile.net/login/aad'; var zumoLoginUri = 'https://zumodemoapp.azure-mobile.net/login/aad'; var zumoTodoController = 'https://zumodemoapp.azure-mobile.net/tables/TodoItem'; // 1. acquire a oath token for our zumo app from azure ad via adal.js adalAuthenticationService.acquireToken(zumoAppID).then(function (data) { //2. we have the azure ad token, lets get a azure mobile service token $http.post(zumoLoginUri, JSON.stringify({ "access_token": data })). success(function (data, status, headers, config) { //3. with the azure mobile service token we can authenticate our request $http.get(zumoTodoController, { headers: { 'X-ZUMO-AUTH': data.authenticationToken } }). success(function (data, status, headers, config) { alert(data); //yay! }); }). error(function (data, status, headers, config) { alert(data); }); });

As mentioned in the comment, I created a more detailed blog post here . If you need more information, leave a comment :).

+2
source

You can use the AzureMobileServices script client to log in with the token already received:

You need to include the following script command: https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.8.min.js

Then, after you received the token with ADAL.JS, you can use it to log in and get the authentication ID of the mobile service:

 var appUrl = 'https://foobar.azure-mobile.net' , appKey = 'zumo key' // found on the dashboard of the mobile service , client = new WindowsAzure.MobileServiceClient(appUrl, appKey); // ... var token = this.getAADToken(ZUMOAuthenticationProvider.Config().url); client .login('aad', { 'access_token': token }) .then(function() { // client.currentUser.mobileServiceAuthenticationToken });

This token should then be included in the following mobile service API requests:

 var config = { headers: { 'X-ZUMO-AUTH': client.currentUser.mobileServiceAuthenticationToken } } $http .get(appUrl + '/some/path', config) .then(function (r) { console.log(r); });
0
source

POST probably returns 401 because the audience of the AAD token is incorrect. The mobile service expects this to be the / login / aad endpoint, but I suspect that the token you submit is actually linked to the website you are calling from. The delegated access permission simply says that you can take a token from the site and convert it to a token for Mobile Service. It does not change the nature of the issued token.

So, the best suggestion is to make sure you subscribe to the Mobile Service audience or perform a delegated access flow. Unfortunately, the latter does not seem to have too many samples unless ADAL.NET is used.

One way to solve the problem would be to set up the MS_AadAudience application for the mobile service in accordance with the settings of your website. You should only do this if the site and the mobile service exist within the same logical security boundary for your application. That is, everything that can enter your site can access the mobile service at this moment. In general, the best approach is to get a token of access to the mobile service.

0
source

Source: https://habr.com/ru/post/988504/

More articles:


All Articles