Wie man Microsoft Authentication in eine SPA mit OAuth 2.0 integriert - Code Flow mit PKCE

Integration von Microsoft Authentication in eine Single-Page-Anwendung

Die Integration von Microsoft-Authentifizierung in eine Single Page Application (SPA) ist relativ einfach. Microsoft bietet umfangreiche Dokumentation und Tutorials zur Integration in Anwendungen. Dieser Artikel veranschaulicht diesen Prozess anhand einer Angular-Anwendung als Beispiel.

1. Wir beginnen mit der Erstellung einer Application in Azure Active Directory. Anleitung dazu im Azure Portal (Learn how to create an azure active directory application)

2. Dann werden die erforderlichen Pakete mit dem folgenden Befehl im Projekt installiert:

1npm install @azure/msal-browser @azure/msal-angular

3. Nun wird das MsalModule in der Datei app.module.ts konfiguriert:

1imports: [
2    MsalModule.forRoot(new PublicClientApplication({
3        auth: {
4        clientId: '<ClientId>',
5        authority: '<AuthorityId>',
6        redirectUri: environment.ssoRedirectUrl
7        },
8        cache: {
9        cacheLocation: 'localStorage',
10        storeAuthStateInCookie: isIE, 
11        }
12    }),
13    {
14        interactionType: InteractionType.Redirect,
15        authRequest: {
16        scopes: ['user.read']
17        }
18    },
19    {
20        interactionType: InteractionType.Redirect,
21        protectedResourceMap: new Map([
22        ['https://graph.microsoft.com', ['user.read','Directory.Read.All']]
23        ])
24    }),

4. Integration von @azure/msal-angular/MsalBroadcastService in app.component.ts:

1this.broadcastService.inProgress$
2    .pipe(
3    filter((status: InteractionStatus) => status === InteractionStatus.None),
4    takeUntil(this._destroying$)
5    )
6    .subscribe(() => {
7    //login routine
8    this.isLoggedIn = this.authService.instance.getAllAccounts().length > 0;
9    this.profile$ = this.httpClient.get('https://graph.microsoft.com/v1.0/me');
10    });

5. Integration des MsalInterceptor, der Anfragen nach "protected" Ressourcen automatisch mit einer Authentifizierung versieht:

1providers: [
2    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true },
3],

6. Mit MsalGuard werden Routen geschützt, für die Authentifizierung erforderlich ist:

1@NgModule({
2    imports: [RouterModule.forRoot([
3    { path: '', component: EmployeeSalaryComponent, pathMatch: 'full', canActivate: [MsalGuard] },
4    { path: 'details', component: SomeComponent, canActivate: [MsalGuard] },
5
6    { path: '**', redirectTo: '' }
7    ], {
8    initialNavigation: 'enabledBlocking'
9    })],
10    exports: [RouterModule]
11})

Dank der umfassenden Dokumentation und der Beispiele von Microsoft dauerte es etwa eine Stunde, bis ich den ersten Anmeldevorgang in meiner Anwendung erfolgreich durchführen konnte. Um weitere Daten über den aktuell angemeldeten Benutzer zu erhalten, kann man die API im Microsoft Graph Explorer analysieren.

Links

• Angular documentation

• React tutorial

• MSAL Angular on GitHub

• Microsoft Graph Explorer