Come integrare Azure AD con l'applicazione Angular

Blog

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.

Questo è il titolo dell'immagine

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