2015-06-04 7 views
6

Sto tentando di autenticare un'app HTML contro un'app di Servizio mobile di Azure.Autentica contro un'app di servizio mobile di Azure con token acquisito ADAL.js

L'installazione

Entrambe le applicazioni utilizzano DAA come autenticazione back-end, in modo da entrambe le applicazioni avere un'applicazione registrata in Active Directory:

Azure Mobile Service app:

HTML app:

  • in "le autorizzazioni per altre applicazioni" ho aggiunto l'applicazione Azure Mobile Service con la delegato permesso "accesso"

del servizio mobile Azure utilizza un backend .NET, dove ho inserito e configurato il pacchetto NuGet "Microsoft Azure mobile Servizi .NET backend Security Extension", come descritto in https://azure.microsoft.com/en-gb/documentation/articles/mobile-services-dotnet-backend-windows-phone-get-started-users/

L'applicazione utilizza HTML ADAL.JS e angolare:

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

Questa configurazione funziona come previsto, apro il mio html app, l'autenticazione AD Azure, ottenere un reindirizzamento al mio app e ho effettuato l'accesso. Inoltre, quando provo ad accedere al servizio mobile di Azure, vedo che Adal.js inietta il token bearer.

Il problema

Il token portatore non è accettata dalla Azure Mobile Service - Ho un 401 non autorizzato. Non so perché, ma il Servizio mobile di Azure utilizza la propria intestazione di autenticazione, ma ok.

MSDN definisce un cosiddetto "operazione di login del cliente-diretto" per l'Azure Mobile Service:

"richiede un token di autenticazione di Microsoft Azure Mobile Services utilizzando un token di identità già ottenuta da un provider di identità." (https://msdn.microsoft.com/en-us/library/azure/jj710106.aspx)

Ok, così lascia fare questo:

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

Nota: Il token acquisita dalla prima linea è in realtà un token di accesso per l'applicazione azzurro servizio di aad mobili e non per l'applicazione HTML.

Questa richiesta POST ottiene anche una risposta 401. Quindi non so come autenticare la mia app. Ho anche provato il servizio mobile di azure js lib. Questa libreria funziona, ma usa un popup per l'autenticazione, ma non mi piace aggiungere un'altra libreria ai miei progetti solo per alcune chiamate REST.

problemi simili

Quando si cerca di risolvere i miei problemi ho trovato altro post StackOverflow:

Why isn't my Azure Mobile Service accepting the bearer token ADAL.js is sending it?

  • stesso problema, nessuna soluzione (anche in chatlog collegato nel ultimo commento)

How do I secure an Azure Mobile Service with Azure AD? ADAL.JS

  • stesso autore come sopra, ho controllato tutto ciò di cui nella risposta accettata, ma non funziona

ho anche preso uno sguardo alle nuove applicazioni mobili Azure dal nuovo portale di gestione Azure ma sembra che stanno usando lo stesso meccanismo di autenticazione.

Quindi, come posso farlo funzionare?

+0

Quindi, hai impostato due app in AAD? Hai abilitato il flusso client su entrambi? – PilotBob

+0

Sì, 2 app in Azure AD, entrambi i flussi client sono abilitati perché entrambi devono essere in grado di autenticarsi tramite JS. Importante: l'app HTML deve essere concessa per accedere al servizio mobile di Azure –

+0

puoi inviarmi un esempio del JWT che stai inviando all'endpoint/login/aad in modo da poterlo confrontare con il mio. – PilotBob

risposta

2

Ok, ho trovato il mio errore:

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

Questo dovrebbe essere

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

Dopo questo funziona! Sto andando a pubblicare un modulo angolare su github che inietta il token nell'intestazione X-Auth-User ad ogni richiesta, come ad.al.js.

Edit:

Come promesso ecco una risposta più dettagliata:

Come accennato nella mia domanda è necessario configurare 2 applicazioni in Azure Active Directory:

  • un app AAD per l'Azure Servizio mobile
    • basta seguire le istruzioni da questo article
  • un app AAD per l'applicazione HTML
    • impostare il "oauth2AllowImplicitFlow" a "true"
    • sotto "le autorizzazioni per altre applicazioni" aggiungere l'applicazione Azure Mobile Service AAD enter image description here

configurare l'applicazione angolare di utilizzare il mobile Service Azure come 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 
); 

Ora è possibile utilizzare Client-directed login operation per ottenere un token di autenticazione Servizio mobile di Azure.

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

Come accennato nel commento ho creato un più dettagliato post sul blog here. Se hai bisogno di maggiori informazioni per favore lascia un commento :).

+0

Qual è l'ID dell'app AMS uri? Non riesco ancora a farlo funzionare. Sono sicuro al 99% che ho seguito tutti gli stessi passi che stai facendo. Quegli altri problemi sono stati inseriti da me. Il tuo post HTTP all'endpoint include l'intestazione di autenticazione? – PilotBob

+0

L'URI dell'ID dell'app AMS deve essere https: // .azure-mobile.net/login/aad Questo è il valore che deve essere impostato nella scheda "Configura" della registrazione AAD per il servizio mobile. – mattchenderson

+0

@Sven: potresti aggiornare questo post con la posizione del modulo angolare quando è pronto? Inoltre, sarebbe bello poter condividere la definizione per getAADToken(). Ho avuto l'impressione che tu possa ottenere solo token ID da ADAL JS - sarebbe bello sapere come ottenere il token di accesso. – mattchenderson

0

È possibile utilizzare lo script client AzureMobileServices di fare un login con un token già ottenuto:

È necessario includere lo script follwing: https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.2.8.min.js

Poi, dopo aver ottenuto il token con ADAL.JS voi può essere utilizzato per effettuare il login e ottenere un mobile di servizio token di autenticazione:

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

Questo token deve quindi essere inclusi nel riuscire richieste API di servizi mobili:

var config = { 
    headers: { 
    'X-ZUMO-AUTH': client.currentUser.mobileServiceAuthenticationToken 
    } 
} 

$http 
    .get(appUrl + '/some/path', config) 
    .then(function (r) { 
    console.log(r); 
    }); 
0

Il POST restituisce probabilmente un 401 perché il pubblico del token AAD non è corretto. Il servizio Mobile si aspetta che questo sia il suo/login/aad endpoint, ma sospetto che il token che si sta inviando sia effettivamente collegato al sito Web da cui si sta chiamando. L'autorizzazione di accesso delegato dice semplicemente che puoi prendere un token dal sito e trasformarlo in un token per il servizio mobile. Non cambia la natura del token emesso stesso.

Quindi il suggerimento migliore è assicurarsi di accedere al pubblico del servizio mobile o eseguire il flusso di accesso delegato. Sfortunatamente, non sembrano esserci troppi campioni su quest'ultimo unless using ADAL.NET

Un modo per aggirare sarebbe quello di impostare l'impostazione dell'app MS_AadAudience sul servizio mobile in modo che corrisponda a quella del tuo sito web. Dovresti farlo solo se il sito e il servizio mobile esistono all'interno dello stesso limite di sicurezza logico per la tua applicazione. Cioè, tutto ciò che può accedere al tuo sito può accedere al servizio mobile a questo punto. Nel complesso, l'approccio migliore consiste nell'ottenere un token di accesso al servizio mobile.

Problemi correlati