Authenticate against an Azure Mobile Service App with ADAL.js acquired token

Question

I\'m trying to authenticate a HTML app against an Azure Mobile Service app.

The Setup

Both apps use AAD as authentication backend, so both apps have an app

Answer 1

Ok, i found my bug:

endpoints: {
    '': 'https://ampapp.azure-mobile.net/'
}

This should be

endpoints: {
    'https://ampapp.azure-mobile.net/': '': 
}

After this it works! I'm goind to publish a Angular modul to github which injects the token in the X-Auth-User header to every request like adal.js does.

Edit:

As promised here a more detailed answer:

As mentioned in my question you have to setup 2 applications in Azure Active Directory:

• an AAD app for the Azure Mobile Service
  • just follow the instructions from this article
• an AAD app for the HTML app
  • set the "oauth2AllowImplicitFlow" to "true"
  • under "permissions to other applications" add the Azure Mobile Service AAD app

Configure the Angular app to use the Azure Mobile Service as an 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-directed login operation to get a 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 please leave a comment :).