Aggiungere l'accesso a un'app a pagina singola AngularJS - NodeJSAdd sign-in to an AngularJS single page app - NodeJS

In questo articolo si aggiungerà l'accesso con account Microsoft a un'app AngularJS usando l'endpoint v2.0 di Azure Active Directory.In this article we'll add sign in with Microsoft powered accounts to an AngularJS app using the Azure Active Directory v2.0 endpoint. L'endpoint v2.0 consente di eseguire un'unica integrazione nell'app e autenticare gli utenti con account personali e aziendali o dell'istituto di istruzione.the v2.0 endpoint enable you to perform a single integration in your app and authenticate users with both personal and work/school accounts.

Questo esempio è una semplice app a pagina singola To-Do List che archivia le attività in un'API REST back-end, scritta in NodeJS e protetta con i token di connessione OAuth di Azure AD.This sample is a simple To-Do List single page app that stores tasks in a backend REST API, written in NodeJS and secured using OAuth bearer tokens from Azure AD. L'app AngularJS userà la libreria di autenticazione JavaScript open source adal.js per gestire l'intero processo di accesso e acquisire i token per chiamare l'API REST.The AngularJS app will use our open source JavaScript authentication library adal.js to handle the entire sign in process and acquire tokens for calling the REST API. Lo stesso modello può essere applicato per l'autenticazione in altre API REST, ad esempio Microsoft Graph o le API di Gestione risorse di Azure.The same pattern can be applied to authenticate to other REST APIs, like the Microsoft Graph or the Azure Resource Manager APIs.

Nota

Non tutti gli scenari e le funzionalità di Azure Active Directory sono supportati dall'endpoint 2.0.Not all Azure Active Directory scenarios & features are supported by the v2.0 endpoint. Per determinare se è necessario usare l'endpoint v2.0, leggere le informazioni sulle limitazioni v2.0.To determine if you should use the v2.0 endpoint, read about v2.0 limitations.

ScaricareDownload

Per iniziare, sarà necessario scaricare e installare node.js.To get started, you'll need to download & install node.js. Sarà quindi possibile clonare o scaricare lo scheletro di un'app:Then you can clone or download a skeleton app:

git clone --branch skeleton https://github.com/AzureADQuickStarts/AppModelv2-SinglePageApp-AngularJS-NodeJS.git

Lo scheletro di un'app include tutto il codice boilerplate per una semplice app AngularJS, ma non tutte le parti relative all'identità.The skeleton app includes all the boilerplate code for a simple AngularJS app, but is missing all of the identity-related pieces. Se non si vuole proseguire, in alternativa è possibile clonare o scaricare l'esempio completo.If you don't want to follow along, you can instead clone or download the completed sample.

git clone https://github.com/AzureADSamples/SinglePageApp-AngularJS-NodeJS.git

Registrare un'appRegister an app

Per prima cosa, creare un'app nel portale di registrazione delle app oppure seguire questa procedura dettagliata.First, create an app in the App Registration Portal, or follow these detailed steps. Verificare di:Make sure to:

  • Aggiungere la piattaforma Web per l'app.Add the Web platform for your app.
  • Immettere l' URI di reindirizzamentocorretto.Enter the correct Redirect URI. Il valore predefinito per questo esempio è http://localhost:8080.The default for this sample is http://localhost:8080.
  • Lasciare abilitata la casella di controllo Consenti flusso implicito .Leave the Allow Implicit Flow checkbox enabled.

Copiare l' ID applicazione assegnato all'app, perché verrà richiesto a breve.Copy down the Application ID that is assigned to your app, you'll need it shortly.

Installare adal.jsInstall adal.js

Per iniziare, andare al progetto scaricato e installare adal.js.To start, navigate to project you downloaded and install adal.js. Se bower è installato, è sufficiente eseguire questo comando.If you have bower installed, you can just run this command. In caso di mancata corrispondenza delle versioni delle dipendenze, scegliere la versione superiore.For any dependency version mismatches, just choose the higher version.

bower install adal-angular#experimental

In alternativa, è possibile scaricare manualmente adal.js e adal-angular.js.Alternatively, you can manually download adal.js and adal-angular.js. Aggiungere entrambi i file alla directory app/lib/adal-angular-experimental/dist .Add both files to the app/lib/adal-angular-experimental/dist directory.

Aprire ora il progetto nell'editor di testo preferito e caricare adal.js alla fine del corpo della pagina:Now open the project in your favorite text editor, and load adal.js at the end of the page body:

<!--index.html-->

...

<script src="App/bower_components/dist/adal.min.js"></script>
<script src="App/bower_components/dist/adal-angular.min.js"></script>

...

Configurare l'API RESTSet up the REST API

Mentre si configurano altre impostazioni, verrà resa operativa l'API REST back-end.While we're setting things up, lets get the backend REST API working. In un prompt dei comandi installare tutti i pacchetti necessari eseguendo (assicurarsi di essere nella directory di primo livello del progetto):In a command prompt, install all the necessary packages by running (make sure you're in the top-level directory of the project):

npm install

Aprire ora config.js e sostituire il valore audience:Now open config.js and replace the audience value:

exports.creds = {

     // TODO: Replace this value with the Application ID from the registration portal
     audience: '<Your-application-id>',

     ...
}

L'API REST userà questo valore per convalidare i token ricevuti dall'app Angular nelle richieste AJAX.The REST API will use this value to validate tokens it receives from the Angular app on AJAX requests. Si noti che questa semplice API REST archivia i dati in memoria, quindi, ogni volta che si arresta il server, si perderanno tutte le attività create in precedenza.Note that this simple REST API stores data in-memory - so each time to stop the server, you will lose all previously created tasks.

Da ora in avanti non si parlerà più del funzionamento dell'API REST.That's all the time we're going to spend discussing how the REST API works. È possibile scrivere nel codice, ma, per altre informazioni sulla protezione delle API Web con Azure AD, vedere questo articolo.Feel free to poke around in the code, but if you want to learn more about securing web APIs with Azure AD, check out this article.

Concedere l'accesso agli utentiSign users in

Ora verrà scritto un codice di identità.Time to write some identity code. Come è possibile osservare, adal.js contiene un provider AngularJS, che funziona bene con il meccanismo di routing Angular.You might have already noticed that adal.js contains an AngularJS provider, which plays nicely with Angular routing mechanisms. Iniziare aggiungendo il modulo adal all'app:Start by adding the adal module to the app:

// app/scripts/app.js

angular.module('todoApp', ['ngRoute','AdalAngular'])
.config(['$routeProvider','$httpProvider', 'adalAuthenticationServiceProvider',
 function ($routeProvider, $httpProvider, adalProvider) {

...

Ora è possibile inizializzare adalProvider con l'ID applicazione:You can now initialize the adalProvider with your Application ID:

// app/scripts/app.js

...

adalProvider.init({

        // Use this value for the public instance of Azure AD
        instance: 'https://login.microsoftonline.com/', 

        // The 'common' endpoint is used for multi-tenant applications like this one
        tenant: 'common',

        // Your application id from the registration portal
        clientId: '<Your-application-id>',

        // If you're using IE, uncommment this line - the default HTML5 sessionStorage does not work for localhost.
        //cacheLocation: 'localStorage',

    }, $httpProvider);

Ora adal.js ha tutte le informazioni necessarie per proteggere l'app e far accedere gli utenti.Great, now adal.js has all the information it needs to secure your app and sign users in. Per forzare l'accesso per una particolare route nell'app, è sufficiente una riga di codice:To force sign in for a particular route in the app, all it takes is one line of code:

// app/scripts/app.js

...

}).when("/TodoList", {
    controller: "todoListCtrl",
    templateUrl: "/static/views/TodoList.html",
    requireADLogin: true, // Ensures that the user must be logged in to access the route
})

...

Ora, quando un utente fa clic sul collegamento TodoList , viene reindirizzato automaticamente da adal.js ad Azure AD per l'accesso, se necessario.Now when a user clicks the TodoList link, adal.js will automatically redirect to Azure AD for sign-in if necessary. È anche possibile inviare in modo esplicito richieste di accesso e di disconnessione richiamando adal.js nei controller:You can also explicitly send sign-in and sign-out requests by invoking adal.js in your controllers:

// app/scripts/homeCtrl.js

angular.module('todoApp')
// Load adal.js the same way for use in controllers and views   
.controller('homeCtrl', ['$scope', 'adalAuthenticationService','$location', function ($scope, adalService, $location) {
    $scope.login = function () {

        // Redirect the user to sign in
        adalService.login();

    };
    $scope.logout = function () {

        // Redirect the user to log out    
        adalService.logOut();

    };
...

Visualizzare le info utenteDisplay user info

Ora che l'utente è connesso, sarà probabilmente necessario accedere ai dati di autenticazione dell'utente connesso contenuti nell'applicazione.Now that the user is signed in, you'll probably need to access the signed-in user's authentication data in your application. Adal.js espone queste informazioni nell'oggetto userInfo .Adal.js exposes this information for you in the userInfo object. Per accedere a questo oggetto in una visualizzazione, aggiungere prima adal.js all'ambito radice del controller corrispondente:To access this object in a view, first add adal.js to the root scope of the corresponding controller:

// app/scripts/userDataCtrl.js

angular.module('todoApp')
// Load ADAL for use in view
.controller('userDataCtrl', ['$scope', 'adalAuthenticationService', function ($scope, adalService) {}]);

Sarà quindi possibile indirizzare direttamente l'oggetto userInfo nella visualizzazione:Then you can directly address the userInfo object in your view:

<!--app/views/UserData.html-->

...

    <!--Get the user's profile information from the ADAL userInfo object-->
    <tr ng-repeat="(key, value) in userInfo.profile">
        <td>{{key}}</td>
        <td>{{value}}</td>
    </tr>
...

È anche possibile usare l'oggetto userInfo per determinare se l'utente è connesso.You can also use the userInfo object to determine if the user is signed in or not.

<!--index.html-->

...

    <!--Use the ADAL userInfo object to show the right login/logout button-->
    <ul class="nav navbar-nav navbar-right">
        <li><a class="btn btn-link" ng-show="userInfo.isAuthenticated" ng-click="logout()">Logout</a></li>
        <li><a class="btn btn-link" ng-hide="userInfo.isAuthenticated" ng-click="login()">Login</a></li>
    </ul>
...

Chiamare l'API RESTCall the REST API

Ora verranno recuperati alcuni token e verrà chiamata l'API REST per creare, leggere, aggiornare ed eliminare le attività.Finally, it's time to get some tokens and call the REST API to create, read, update, and delete tasks. La novità è cheWell guess what? non è necessario eseguire alcuna operazione.You don't have to do a thing. Adal.js eseguirà automaticamente il recupero, la memorizzazione nella cache e l'aggiornamento dei token.Adal.js will automatically take care of getting, caching, and refreshing tokens. Allegherà anche questi token alle richieste AJAX in uscita inviate all'API REST.It will also take care of attaching those tokens to outgoing AJAX requests that you send to the REST API.

Come funziona esattamente tutto questo?How exactly does this work? Sta tutto negli intercettori AngularJS, che consentono ad adal.js di trasformare i messaggi http in uscita e in ingresso.It's all thanks to the magic of AngularJS interceptors, which allows adal.js to transform outgoing and incoming http messages. Adal.js presume inoltre che le richieste inviate allo stesso dominio della finestra usino i token destinati allo stesso ID applicazione dell'app AngularJS.Furthermore, adal.js assumes that any requests send to the same domain as the window should use tokens intended for the same Application ID as the AngularJS app. Infatti lo stesso ID applicazione è stato usato sia nell'app Angular che nell'API REST NodeJS.This is why we used the same Application ID in both the Angular app and in the NodeJS REST API. È possibile, ovviamente, ignorare questo comportamento e comunicare ad adal.js di ottenere i token per le altre API REST, se necessario, ma per questo semplice scenario verranno usate le impostazioni predefinite.Of course, you can override this behavior and tell adal.js to get tokens for other REST APIs if necessary - but for this simple scenario the defaults will do.

Ecco un frammento che mostra come sia semplice inviare richieste con i token di connessione da Azure AD:Here's a snippet that shows how easy it is to send requests with bearer tokens from Azure AD:

// app/scripts/todoListSvc.js

...
return $http.get('/api/tasks');
...

Congratulazioni.Congratulations! A questo punto l'app a singola pagina integrata in Azure AD è completata.Your Azure AD integrated single page app is now complete. Come è evidente,Go ahead, take a bow. può autenticare gli utenti, chiamare in modo sicuro l'API REST back-end con OpenID Connect e ottenere informazioni di base sull'utente.It can authenticate users, securely call its backend REST API using OpenID Connect, and get basic information about the user. Per impostazione predefinita, supporta tutti gli utenti con un account Microsoft personale o un account aziendale o dell'istituto di istruzione di Azure AD.Out of the box, it supports any user with a personal Microsoft Account or a work/school account from Azure AD. Provare l'app eseguendo:Give the app a try by running:

node server.js

In un browser passare a http://localhost:8080.In a browser navigate to http://localhost:8080. Accedere con un account Microsoft personale o un account aziendale o dell'istituto di istruzione.Sign in using either a personal Microsoft account or a work/school account. Aggiungere attività all'elenco attività dell'utente e disconnettersi. Provare ad accedere con l'altro tipo di account.Add tasks to the user's to-do list, and sign out. Try signing in with the other type of account. Se è necessario un tenant di Azure AD per creare utenti aziendali o dell'istituto di istruzione, qui sono disponibili informazioni per ottenerne uno (è gratuito).If you need an Azure AD tenant to create work/school users, learn how to get one here (it's free).

Per altre informazioni sull'endpoint v2.0, tornare alla guida per sviluppatori versione 2.0.To continue learning about the the v2.0 endpoint, head back to our v2.0 developer guide. Per altre risorse, vedere:For additional resources, check out:

Ottenere aggiornamenti della sicurezza per i prodottiGet security updates for our products

È consigliabile ricevere notifiche in caso di problemi di sicurezza. A tale scopo, visitare questa pagina e sottoscrivere gli avvisi di sicurezza.We encourage you to get notifications of when security incidents occur by visiting this page and subscribing to Security Advisory Alerts.