Come integrare Azure AD con l'applicazione Angular
Configurare un'applicazione angolare per usare l'autenticazione di Azure AD. Qui spiegherò quale codice è necessario per integrare Azure AD con la tua applicazione Angular.
converti stringa in json javascript
Va bene, ora siamo a posto. Iniziamo.
Passo 1
Installa il pacchetto Microsoft Adal.
npm install microsoft-adal-angular6 Passo 2
Importa il modulo adal nell'app.module della tua applicazione.
MsAdalAngular6Module.forRoot({ tenant: 'angular application tenant id', clientId: 'angular application client id', redirectUri: 'URI on which you want to redirect user after login', endpoints: { 'api application url': 'api application client id', // this is for feteching the access token }, navigateToLoginRequestUrl: false, cacheLocation: '', postLogoutRedirectUri: 'URI on which you want to redirect user after logout', }), Dopo aver importato il modulo dell'app dovrebbe apparire come,
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { MsAdalAngular6Module } from 'microsoft-adal-angular6'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, MsAdalAngular6Module.forRoot({ tenant: 'angular application tenant id', clientId: 'angular application client id', redirectUri: 'URI on which you want to redirect user after login', endpoints: { 'api application url': 'api application client id', // this is for feteching the access token }, navigateToLoginRequestUrl: false, cacheLocation: '', postLogoutRedirectUri: 'URI on which you want to redirect user after logout', }), ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } È possibile trovare ClientId, tenantId dalla pagina di panoramica dell'applicazione registrata dell'annuncio di Azure.
Abbiamo finito con la configurazione, ora siamo pronti per usare le funzionalità di Azure AD. Di seguito sono riportati alcuni esempi:
import { Component } from '@angular/core'; import { MsAdalAngular6Service } from 'microsoft-adal-angular6'; import { Observable } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angular-client'; accessToken: string; constructor(private adalService: MsAdalAngular6Service) { } login(): void { this.adalService.login(); } logout(): void { this.adalService.logout(); } getLoggedInUser(): any { return this.adalService.LoggedInUserEmail; } getAccessToken(): Observable { return this.adalService.acquireToken('backend-api-uri'); } getToken(): string { return this.adalService.accessToken; } } Questo è. Grazie per aver letto questo articolo.
#angular #angular8 #Azure AD
l'app di Kohl non funziona