javascript - 在使用 B2C 的 Javascript/Angular 6 SPA 应用程序中通过 MSAL.JS 注销时出错

Question

我有一个使用 MSAL.JS 对 Azure AD B2C 进行身份验证的 Javascript SPA 应用程序和另一个使用 MSAL for Angular 对 Azure AD B2C 进行身份验证的 Angular 6 SPA 应用程序。

在这两个应用程序中，注销都会引发以下错误。

相关 ID：6de6e068-7b07-4d24-bac4-c1af3131815b 时间戳：2018-09-25 16:16:20Z AADB2C90272：请求中未指定 id_token_hint 参数。请提供令牌并重试。

对于 Logout，MSAL 有非常简单的 logout api，它不带任何参数，那么我如何提供 id_token_hint？我错过了什么吗？在 Angular 应用程序中注入 MsalModule 时是否需要提供任何配置参数。或在 Msal.UserAgentApplication 的 Javascript 应用程序中的任何类似内容。

标签： javascriptangularazureazure-ad-b2cmsal.js

Answer 1

我基本上使用的是当前最新的 "msal": "^0.2.3" ，这是我的身份验证服务，app.module 中不需要配置，并且注销完美：

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import * as Msal from 'msal';
import { User } from "msal/lib-commonjs/User";
import { ApiService } from './api.service';
import { BackendRoutes } from './backend.routes';

@Injectable()
export class AuthenticationService {
    private _clientApplication: Msal.UserAgentApplication;
    private _authority: string;

constructor(private apiService: ApiService, private backendRoutes: BackendRoutes) {
    this._authority = `https://login.microsoftonline.com/tfp/${environment.tenant}/${environment.signUpSignInPolicy}`;

    this._clientApplication =
        new Msal.UserAgentApplication(
            environment.clientID,
            this._authority,
            this.msalHandler,
            {
                cacheLocation: 'localStorage',
                redirectUri: window.location.origin
            });
}

msalHandler(errorDesc: any, token: any, error: any, tokenType: any) {
    let userAgent: Msal.UserAgentApplication = <any>(this);
    if (errorDesc.indexOf("AADB2C90118") > -1) {
        //Forgotten password
        userAgent.authority = `https://login.microsoftonline.com/tfp/${environment.tenant}/${environment.passResetPolicy}`;
        userAgent.loginRedirect(environment.b2cScopes);

    } else if (errorDesc.indexOf("AADB2C90077") > -1) {
        //Expired Token, function call from interceptor with proper context
        this.logout();
    }
}

addUser(): void {
    if (this.isOnline()) {
        this.apiService.post(this.backendRoutes.addUser).subscribe();
    }
}

login(): void {
    this._clientApplication.loginRedirect(environment.b2cScopes);
}

logout(): void {
    this._clientApplication.logout();
}

getAuthenticationToken(): Promise<string> {
    return this._clientApplication.acquireTokenSilent(environment.b2cScopes)
        .then(token => token)
        .catch(error => {
            return Promise.reject(error);
        });
}

拦截器链接到它：

export class AuthenticationHttpInterceptor implements HttpInterceptor {

    constructor(private authenticationService: AuthenticationService) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return from(this.authenticationService.getAuthenticationToken()
            .then(token => {
                return req.clone({
                    setHeaders: {
                        Authorization: `Bearer ${token}`
                    }
                });
            })
            .catch(err => {
                this.authenticationService.msalHandler(err,null,null,null);
                return req;
            }))
            .switchMap(req => {
                return next.handle(req);
            });
    }
}