Composants AngularJS et ADAL (Bibliothèque Azure Active Directory pour JS)

Question

J'ai construit une application angulaire 1.6 dans AngularJS avec TypeScript et le Routeur de composants, en utilisant le modèle de composant.

Maintenant j'essaye de m'authentifier dans AzureAD en utilisant la bibliothèque ADAL et une API sécurisée qui accepte un jeton de support.

Dans l'une des applications de courant I construit dans AngularJS 1.3, j'utilise ADAL de façon assez standard, et j'authentifiez dans la ressource (API) avec l'attribut RequireAdLogin de StateProvider:

var homeState = { 
    url: "/", 
    requireADLogin: true 
    }; 

Cela fonctionne bien , mais maintenant je suis en utilisant le routeur de composant avec -ui-routeur angulaire (avec @ Types /-ui-routeur angulaire):

import * as angular from 'angular'; 
import { State, StateProvider } from 'angular-ui-router'; 
import { MyComponent } from './my.component'; 
import { NavService, NavItem } from './../../common/nav/nav.service'; 
import { MediaService } from "./MediaService .service"; 

function routeConfig($stateProvider: StateProvider) { 
    "ngInject"; 

    $stateProvider 
    .state('app.media', { 
     url: '/media', 
     component: 'media' 
    }); 

le problème est, je ne peux pas obtenir l'API t o recevoir le jeton. Le premier signe d'ennui, quand j'ai remarqué la requireADLogin attribut est absent de la frappe de .IComponentOptions et le type d'état, donc je ne peux pas le faire:

.state('app.media', { 
    url: '/media', 
    component: 'media', 
    requireADLogin: true // THIS DOES NOT COMPILE! 
}); 

J'ai ensuite fait des recherches, et suis tombé sur ce poste plutôt déprimant:

GitHub ADAL Discussion:

https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283

ne pas aller dans cette chemin. Le routeur composant est obsolète https://docs.angularjs.org/guide/component-router

Doh! Eh bien, ce n'est pas une bonne nouvelle pour moi, c'est le moins qu'on puisse dire, car il semble que je sois bloqué. J'ai l'impression qu'il devrait y avoir du travail, mais je ne peux pas le voir.

Je pense que l'écriture d'un intercepteur HTTP personnalisé pourrait être une solution, car j'ai juste besoin d'alimenter le jeton support stocké dans le stockage vers l'en-tête HTTP de l'API. De plus, je suis à la recherche à la bibliothèque MS pour l'authentification JS:

https://github.com/AzureAD/microsoft-authentication-library-for-js

Mais cela semble trop bas pour mes besoins.

Je devrais mentionner, il était assez difficile d'obtenir la bibliothèque angulaire d'ADAL pour AngularJS pour travailler avec TypeScript et ce nouveau modèle de composant. Il semble que le chemin préféré est Angular 2.0, mais une réécriture à ce point dans NG2 n'est pas viable car ce projet est dans le temps.

Answer 1

J'ai résolu ce problème en extrayant manuellement le jeton porteur du mécanisme de stockage (dans mon cas de stockage de la session du navigateur) et en ajoutant chaque demande mes services web:

var accessToken = sessionStorage.getItem("adal.access.token.key" + 
     sessionStorage.getItem("adal.token.keys").replace("|", "")); 

configObj.headers = { 'Authorization': 'Bearer ' + accessToken } 

Je passe alors cet objet de configuration dans chaque requête, et le jeton est là - l'API l'accepte et tout le monde est content.

this.$http.get(url, configObj).then(resolveData, errorCall);