Authentifizieren Sie sich gegen eine Azure Mobile Service-App mit dem erworbenen Token von ADAL.js

Ich versuche, eine HTML-App gegenüber einer Azure Mobile Service-App zu authentifizieren.

Die Einrichtung

Beide Apps verwenden AAD als Authentifizierungs-Backend, sodass für beide Apps eine Anwendung im Active Directory registriert ist:

Azure Mobile Service-App:

  • Konfiguration wie unter https://azure.microsoft.com/de-de/documentation/articles/mobile-services-how-to-register-active-directory-authentication/ beschrieben.
  • Ich habe das Manifest bearbeitet, um den Client-Fluss zu aktivieren
  • Aktivieren Sie “Single Sign-On- und Lese-Benutzerprofile” unter “Berechtigungen für andere Anwendungen” für “Windows Azure Active Directory”.

HTML-App:

  • In “Berechtigungen für andere Anwendungen” habe ich die Azure Mobile Service-App mit der delegierten Berechtigung “Zugriff” hinzugefügt.

Der Azure Mobile-Dienst verwendet ein .NET-Backend, in dem das NuGet-Paket “Microsoft Backend-Sicherheitserweiterung für Microsoft Azure Mobile Services” enthalten und konfiguriert wurde, wie in https://azure.microsoft.com/de-de/documentation/articles/ beschrieben. mobile-services-dotnet-backend-windows-phone-get-started-users /

Die HTML-App verwendet ADAL.JS und Angular:

adalAuthenticationServiceProvider.init( { // Config to specify endpoints and similar for your app clientId: "", redirectUri: "", endpoints: { '': 'https://ampapp.azure-mobile.net/' } }, $httpProvider ); 

Dieses Setup funktioniert wie erwartet. Ich öffne meine HTML-App, authentifiziere mich bei Azure AD, bekomme eine Weiterleitung zu meiner App und bin eingeloggt. Außerdem sehe ich, dass ich bei Zugriff auf meinen Azure Mobile-Dienst Adal.js als Träger der Anwendung sehe Zeichen.

Das Problem

Der Inhaber-Token wird vom Azure Mobile Service nicht akzeptiert. Ich bekomme eine nicht autorisierte 401. Ich weiß nicht warum, aber der Azure Mobile Service verwendet einen eigenen Authentifizierungsheader – aber in Ordnung.

MSDN definiert einen sogenannten “Client-gesteuerten Anmeldevorgang” für den Azure Mobile Service:

“Fordert ein Authentifizierungstoken von Microsoft Azure Mobile Services an, indem ein Identitätstoken verwendet wird, das bereits von einem Identitätsanbieter abgerufen wurde.” ( https://msdn.microsoft.com/de-de/library/azure/jj710106.aspx )

Ok, lass uns das tun:

  // 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': '' }). success(function (data, status, headers, config) { alert(data); }). error(function (data, status, headers, config) { alert(data); }); 

Hinweis: Das von der ersten Zeile erfasste Token ist wirklich das Zugriffstoken für die Azure-Anwendung für mobile Dienste und nicht für die HTML-App.

Diese POST-Anforderung erhält auch eine 401-Antwort. Ich weiß nicht, wie ich meine App authentifizieren kann. Ich habe auch den Azure Mobile Service JS Lib ausprobiert. Diese Bibliothek funktioniert, aber sie verwendet ein Popup-Fenster für die Authentifizierung, aber ich möchte nicht gerne eine weitere Bibliothek für einige REST-Aufrufe zu meinen Projekten hinzufügen.

Ähnliche Probleme

Beim Versuch, meine Probleme zu lösen, habe ich einen anderen Stackoverflow-Beitrag gefunden:

Warum akzeptiert mein Azure Mobile Service nicht das Trägertoken, das ADAL.js sendet?

  • gleiches Problem, keine Lösung (auch in dem im letzten Kommentar verlinkten Chatlog)

Wie sichere ich einen Azure Mobile-Dienst mit Azure AD? ADAL.JS

  • Dieselbe Autorin wie oben, habe ich alles in der akzeptierten Antwort geprüft, aber es funktioniert nicht

Ich habe mir auch die neuen Azure Mobile-Apps aus dem neuen Azure-Verwaltungsportal angesehen, aber es scheint, als würden sie denselben Authentifizierungsmechanismus verwenden.

Wie kann ich das funktionieren lassen?

    Ok, ich habe meinen Fehler gefunden:

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

    Das sollte sein

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

    Danach funktioniert es! Ich werde ein Angular-Modul für github veröffentlichen, das den Token in den X-Auth-User-Header zu jeder Anfrage einfügt, wie dies bei adal.js der Fall ist.

    Bearbeiten:

    Wie versprochen wurde hier eine ausführlichere Antwort:

    Wie in meiner Frage erwähnt, müssen Sie zwei Anwendungen in Azure Active Directory einrichten:

    • eine AAD-App für den Azure Mobile Service
      • Folgen Sie einfach den statementen dieses Artikels
    • eine AAD-App für die HTML-App
      • setze “oauth2AllowImplicitFlow” auf “true”
      • Fügen Sie unter “Berechtigungen für andere Anwendungen” die AAD-App Azure Mobile Service hinzu Geben Sie hier die Bildbeschreibung ein

    Konfigurieren Sie die Angular-App für die Verwendung des Azure Mobile-Diensts als Endpunkt

     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 ); 

    Jetzt können Sie die Client-gesteuerte Login-Operation verwenden , um ein Azure Mobile Service-Authentifizierungstoken abzurufen.

     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); }); }); 

    Wie in dem Kommentar erwähnt, habe ich hier einen detaillierteren Blogpost erstellt. Wenn Sie weitere Informationen benötigen, hinterlassen Sie bitte einen Kommentar :).

    Sie können das AzureMobileServices-Clientskript verwenden, um sich mit einem bereits erhaltenen Token anzumelden:

    Sie müssen das folgende Skript einfügen: https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.8.min.js

    Nachdem Sie das Token mit ADAL.JS abgerufen haben, können Sie es verwenden, um sich anzumelden und ein Mobile Service Authentication Token zu erhalten:

     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 }); 

    Dieses Token muss dann in den nachfolgenden API-Anforderungen für mobile Dienste enthalten sein:

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

    Der POST gibt wahrscheinlich eine 401 zurück, weil die Zielgruppe des AAD-Tokens falsch ist. Der Mobile Service erwartet, dass dies sein / login / aad-Endpunkt ist, aber ich vermute, dass das gesendete Token tatsächlich für die Website gilt, von der Sie anrufen. Die delegierte Zugriffsberechtigung besagt lediglich, dass Sie ein Token von der Site nehmen und in ein Token für den Mobile Service umwandeln können. Die Art des ausgegebenen Tokens selbst wird dadurch nicht geändert.

    Der beste Vorschlag ist daher sicherzustellen, dass Sie sich bei der Mobile Service-Zielgruppe anmelden oder den delegierten Zugriffsablauf durchführen. Leider scheint es nicht zu viele Samples zu geben, es sei denn, Sie verwenden ADAL.NET

    Eine Problemumgehung besteht darin, die MS_AadAudience-App-Einstellung für den mobilen Dienst so einzustellen, dass sie der Ihrer Website entspricht. Sie sollten dies nur tun, wenn der Standort und der mobile Dienst innerhalb derselben logischen Sicherheitsgrenze für Ihre Anwendung vorhanden sind. Das heißt, alles, was sich an Ihrer Site anmelden kann, kann an dieser Stelle auf den Mobile Service zugreifen. Insgesamt ist es besser, ein Zugriffstoken für den mobilen Dienst zu erhalten.