Angular 的 MSAL/Microsoft 授权问题：如何验证 id_token？答案

【问题标题】：MSAL/ Microsoft Authorization problem with Angular: How to validate id_token?Angular 的 MSAL/Microsoft 授权问题：如何验证 id_token？
【发布时间】：2019-07-01 11:31:38
【问题描述】：

我正在尝试使用 MSAL Angular 库通过 microsoft 进行授权。我在 MS Azure 中配置了环境，编写了一个代码......登录后我得到了 id_token，但我无法在 graph.microsoft.com/v1.0/me 上验证它作为承载者。我得到“InvalidAuthenticationToken”代码。我搜索了所有堆栈，但仍然无法弄清楚，即使有一些熟悉的线程。我想确保令牌有效并从响应中获取用户的电子邮件。这是我的代码：

@Injectable()
export class MsalService {

  B2CTodoAccessTokenKey = 'b2c.access.token';

  tenantConfig = {
    tenant: 'censored.onmicrosoft.com',
    // Replace this with your client id
    clientID: 'censored',
    signInPolicy: 'B2C_1_signinsignup',
    signUpPolicy: 'B2C_1_signin',
    redirectUri: 'http://localhost:4200/auth/microsoft',
    b2cScopes: 
['https://censored.onmicrosoft.com/api/user_impersonation'],
    resource: 'https://graph.microsoft.com'
  };

  /*
   * B2C SignIn SignUp Policy Configuration
   */
  clientApplication = new Msal.UserAgentApplication(
    this.tenantConfig.clientID, this.authority,
    function(errorDesc: any, token: any, error: any, tokenType: any) {
    },
    {
      redirectUri: this.tenantConfig.redirectUri,
      navigateToLoginRequestUrl: false
    }
  );

  public login(): void {
    this.clientApplication.authority = 
'https://login.microsoftonline.com/common';
    this.authenticate();
  }

  public authenticate(): void {
    var _this = this;



 this.clientApplication.loginPopup(this.tenantConfig.b2cScopes)
.then(function(idToken: any) {

_this.clientApplication.acquireTokenSilent(
_this.tenantConfig.b2cScopes)
    .then(
        function(accessToken: any) {
          _this.saveAccessTokenToCache(accessToken);
        }, function(error: any) {
          _this.clientApplication.acquireTokenPopup(
_this.tenantConfig.b2cScopes).then(
            function(accessToken: any) {
              _this.saveAccessTokenToCache(accessToken);
            }, function(error: any) {
              console.log('error: ', error);
            });
        });
    }, function(error: any) {
      console.log('error: ', error);
    });
  }

【问题讨论】：

我不熟悉这个 MSAL 库，但我认为您需要 access_token 来调用图形 api 而不是 id_token。至少在 python MSAL 中，两者都被返回，MSAL 负责验证和解码id_token。你真的不需要关心access_token，因为它是为图形资源设计的，而不是你的应用程序。
您在授权标头中使用了什么？

标签： javascript angular typescript azure-active-directory msal

【解决方案1】：

首先，您似乎缺少 response_type 参数，这是您使用的 Authorization code grant flow 所必需的。

此外，您不能直接使用令牌，但需要将从响应 url 获得的代码交换到令牌中。

 public static AuthenticationResult ExchangeCodeForToken(string InTenantName, string InUserObjId, string InRedirectUri, string InApplicationAzureClientID, string InApplicationAzureClientAppKey)
  {
            Check.Require(!string.IsNullOrEmpty(InTenantName), "InTenantName must be provided");
            Check.Require(!string.IsNullOrEmpty(InUserObjId), "InUserObjId must be provided");

            if (CanCompleteSignIn) //redirect from sign-in
            {
                var clientCredential = new ClientCredential(InApplicationAzureClientID, InApplicationAzureClientAppKey);
                var authContext = new AuthenticationContext(Globals.GetLoginAuthority(InTenantName), (TokenCache)new ADALTokenCache(InUserObjId)); //Login Authority is https://login.microsoftonline.com/TenantName
                return authContext.AcquireTokenByAuthorizationCode(VerificationCode, new Uri(InRedirectUri), clientCredential, Globals.AZURE_GRAPH_API_RESOURCE_ID); //RESOURCE_ID is "https://graph.microsoft.com/"
            }

            return null; 
   }

见related post。

【讨论】：