Question

我正在使用AzureAD MSAL在ReactJS应用中设置身份验证。我能够获得id_token和access_token。但是在获取访问令牌时，我无法通过此关键字引用局部变量。我试图将“ this”绑定到回调函数，但这会导致其他问题。

我正在将所有登录功能实现为一个类。

import { UserAgentApplication } from "msal";

export default class AuthService {
  constructor() {
    this.applicationConfig = {
      clientID: "<clientId>",
      authority: "<azureADTenantUrl>"
    };

    this.scopes = [
      "openid",
      "<Other scopes>"
    ];

    this.client = new UserAgentApplication(
      this.applicationConfig.clientID,
      this.applicationConfig.authority,
      this.authCallback,
      {
        redirectUri: "http://localhost:3000/"
      }
    );
  }

  login = () => {
    this.client.loginRedirect(this.scopes);
  };

  logout = () => {
    this.client.logout();
  };

  authCallback = (erroDesc, token, error, tokenType) => {
    if (tokenType == "id_token") {
       this.acquireTokenSilent(this.scopes).then(
         function(accessToken) {
           console.log(accessToken);
         },
         function(error) {
           console.log(error);
         }
       );
    }
  };
}

（这不是实际的错误消息，而是友好的描述）

this.scopes未定义，因为“ this”的范围是UserAgentApplication。

为避免这种情况，我尝试将this绑定到回调函数。我在构造函数中添加了以下语句。

this.authCallback = this.authCallback.bind(this);

这会导致另一个错误。

（这不是实际的错误消息，而是友好的描述）

this.acquireTokenSilent是未定义的，'this'没有定义供客户端使用this.client.acquireTokenSilent
进行引用

因此，我已经用原始代码对范围进行了硬编码，并且能够获取访问令牌，但是在回调中同样存在问题。这次，“ this”在回叫中为空。

我试图将authCallback移至react组件，并将其作为参数传递给服务，但这也有同样的问题。

非常感谢您提供有关如何正确配置此功能的帮助。谢谢。

Answer 1

尝试用此替代authCallback。它不能完全解决问题，但可以使您摆脱UserAgentApplication对“此”对象的劫持。

  authCallback = (erroDesc, token, error, tokenType) => {

    const client = window.client as Msal.UserAgentApplication;

    if (tokenType == "id_token") {
       client.acquireTokenSilent(["openid"]).then(

         function(accessToken) {
           console.log(accessToken);
         },
         function(error) {
           console.log(error);
         }
       );
    }
  };

或者，使用loginPopup函数而不是loginRedirect，因为它没有当前MSAL v0.2.3中仍然存在的“此”问题。

Answer 2

我能够在msal 1.1.1中运行它。尝试这种方式：

     this.msalClient = new Msal.UserAgentApplication(config);
     this.msalClient.handleRedirectCallback(authCallback.bind(this));

     function authCallback(error,response)
     {
       if (response.tokenType === 'access_token' && response.accessToken)
         {
          this.accesstoken = response.accessToken;
         }
     }

无法将“ this”绑定到AcquireTokenSilent的回调函数-Azure AD MSAL和ReactJS

2 个答案: