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 application registered in the Active Directory:
Azure Mobile Service app:
- configured as described in https://azure.microsoft.com/en-gb/documentation/articles/mobile-services-how-to-register-active-directory-authentication/
- I edited the manifest to enable the client flow
- Enable "single sign-on and read users profiles" under "permissions to other applications" for "Windows Azure Active Directory"
HTML app:
- in "permissions to other applications" i added the Azure Mobile Service app with the delegated permission "access"
The Azure Mobile Service uses a .NET backend, where i included and configured the NuGet Package "Microsoft Azure Mobile Services .NET Backend Security Extension" as described in https://azure.microsoft.com/en-gb/documentation/articles/mobile-services-dotnet-backend-windows-phone-get-started-users/
The HTML app 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 my html app, authenticate against Azure AD, get a redirect to my App and I'm logged in. Also, when i try to access my Azure Mobile Service i see that Adal.js injects the bearer token.
The Problem
The bearer token is not accepted by the Azure Mobile Service - i get a 401 not authorized. I don't know why, but the Azure Mobile Service uses it's own authentication header - but ok.
MSDN defines a so called "Client-directed login operation" for the Azure Mobile Service:
"Requests an authentication token from Microsoft Azure Mobile Services by using an identity token already obtained from an identity provider." (https://msdn.microsoft.com/en-us/library/azure/jj710106.aspx)
Ok, so lets do this:
// 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 acquired by the first line is really a the access token for the azure mobile service aad application and not for the HTML app.
This POST request also gets a 401 response. So i don't know how to authenticate my app. I also tried the azure mobile service js lib. This lib works, but it uses a popup for authentication, but i don't like to add another library to my projects for just a few REST calls.
Similar Problems
When trying to solve my problems i found other Stackoverflow post:
Why isn't my Azure Mobile Service accepting the bearer token ADAL.js is sending it?
- same problem, no solution (even in the chatlog linked in the last comment)
How do I secure an Azure Mobile Service with Azure AD? ADAL.JS
- same author as above, i checked everything mentioned in the accepted answer but it doesn't work
I also took a look at the new Azure Mobile apps from the new Azure Management portal but it seems that they are using the same authentication mechanism.
So, how can i get this working?
