Autenticazione contro un WebAPI utilizzando B2C azzurro da un centro termale (angolare e adal.js)

Question

Sto cercando di autenticare le mie SPA (angular.js e adal.js (simili all'esempio https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi)

mio annuncio è un azzurro inquilino b2c anteprima

posso accedere correttamente al mio WebAPI dal mio sito web, ma non dal JS SPA via angolare

mio Setup:.. WebAPI e del sito web condividono la stessa clientid (fa solo sembra funzionare in questo modo) La SPA ha il suo clientid, perché altrimenti ottengo errori "api versione non supportata" quando provo ad accedere. Ho abilitato oauth2AllowImplicitFlow per tutte le applicazioni, ho concesso permessi dell'applicazione dalla spa al webapi. Cors è abilitato su Webapi e SPA.

Mi sembra di essere in grado di ottenere un token dopo aver completato il login, ma quando provo a chiamare la mia API, ottengo un accesso negato per questa richiesta.

Si suppone che funzioni in questo modo? Non sono riuscito a trovare un esempio di come utilizzare b2c insieme a una spa e l'API in esecuzione su server diversi.

Grazie in anticipo

Peter

Answer 1

Questo è not currently supported.

Applications pagina singola (Javascript)

Molte applicazioni moderne dotate di una singola pagina di applicazione (SPA) front-end scritta principalmente in JavaScript e spesso utilizzando una SPA framework quali AngularJS, Ember.js, Durandal, ecc. Questo flusso è non ancora disponibile nell'anteprima B2C di Azure AD.

Answer 2

Ufficialmente non è supportato da Microsoft, ma con alcune modifiche del ramo sperimentale su github azure-activedirectory-library-for-js è possibile farlo funzionare.

Fix Logout URL alla versione 2.0 finale del protocollo OAuth2 con il parametro della politica nel metodo logout di adal.js alla riga 546:

var urlNavigate = this.instance + tenant + '/oauth2/v2.0/logout?' + logout + (this.config.extraQueryParameter ? '&' + this.config.extraQueryParameter : ''); 

La proprietà nome utente non viene mai impostato in modo _createUser di Adal. js. Il nome utente è utilizzato nel processo di rinnovo del token, risolvere il problema con l'aggiunta di questa tre linee:

if (parsedJson.hasOwnProperty('emails')) { 
    user.userName = parsedJson.emails[0]; 
} 

Infine, in Adal-angular.js in linea 146, acquireTokenSilent viene chiamato con il parametro di tipo sbagliato. Questo metodo accetta solo tipo di matrice come ambiti di parametri, risolvere il problema mettendo clientId in array:

_adal.acquireTokenSilent([_adal.config.clientId], null, function (error, tokenOut) { 

ho già tirato una richiesta su github su questo, è possibile utilizzarlo come riferimento.

Quando si inizializza fornitore Adal sul angolare mettere il segno b2c in politica in extraQueryParameter come questo:

adalProvider.init({ 
    tenant: 'tenant.onmicrosoft.com', 
    clientId: 'clientid', 
    extraQueryParameter: "p=B2C_1_SignIn" 
}, $httpProvider); 

Answer 3

Sembra uno scenario B2C codice di esempio per AzureAD SPA è stato appena pubblicato su GitHub. Vedi here.

"L'esempio mostra come creare un'applicazione Web utilizzando Hello.js che esegue la gestione delle identità con Azure AD B2C. L'app è una semplice applicazione Web che esegue funzioni di accesso, registrazione e disconnessione con politiche di accesso e di registrazione all'iscrizione e anche modifica del profilo utilizzando la politica di EditProfile. "

NOTA: Al momento di questa risposta la funzionalità è ancora in "anteprima"