使用 msal 连接到 Azure B2C - 状态参数答案

【问题标题】：use msal to connect to Azure B2C - state parameter使用 msal 连接到 Azure B2C - 状态参数
【发布时间】：2018-01-24 02:46:03
【问题描述】：

我使用来自：https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp 的示例作为实现 B2C 注册的基础。

如何传递示例中的 state 参数？我看到有一个关于状态的问题，所以我想可以在示例中使用状态。但是，我不知道如何使用它以及在返回令牌后如何检索它。

【问题讨论】：

您能否提供“我看到该州存在问题”的链接？

标签： azure-ad-b2c msal

【解决方案1】：

我在我的 loginRedirect() 方法中使用状态.. 所以我会在这里发布我的代码，它应该可以帮助你完成这项工作。我在角度使用 MSAL，但我调用的方法应该是相同的。

在此示例中，用户单击调用登录方法的登录按钮：

{
   const args: AuthenticationParameters = {
     state: "some string" //set state parameter (type: string)
   };
   this.msalService.loginRedirect(args);
}

然后此代码会将用户重定向到 login.. 然后返回您的网站（您的 redirectURI）.. 在此页面上，您应该实现 handleRedirectCallback 方法，该方法将在用户重定向后触发。在此回调中，您还将从登录过程中获得响应（或错误），其中将包含您的状态字符串。

this.msalService.handleRedirectCallback((authError, response) => {
  if (response) {
     const state = this.msalService.getAccountState(response.accountState);
     // you don't need to use "this.msalService.getAccountState()" I think
     ...
     do something with state. I use it to redirect back to initial page url. 
     ...
  }
});

【讨论】：

【解决方案2】：

您可以在 loginRequest 上发送state 参数：

const loginRequest = {
   ...
    scopes: "your scopes",
    state: "my custom state value"
}

然后您在accountState 的响应中捕获它，如下所示：

clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
    if (loginResponse.account) {
        // will print: my custom state value
        console.log(loginResponse.accountState);
        ....
    }
});

您可以在此处找到文档：https://docs.microsoft.com/en-us/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request

【讨论】：

【解决方案3】：

在查看source code for MSAL.js 时，我看不到您如何控制state 的值。 AuthenticationRequestParameters 未公开，当 AuthenticationRequestParameters 为 constructed 时，state 的值设置为新的 guid。

示例：

在下面的 MSAL.js 代码中，我们无法控制 authenticationRequest 变量。

loginRedirect(scopes? : Array<string> , extraQueryParameters? : string): void {
    ...

    this.authorityInstance.ResolveEndpointsAsync()
    .then(() => {
        const authenticationRequest = new AuthenticationRequestParameters(this.authorityInstance, this.clientId, scopes, ResponseTypes.id_token, this._redirectUri);
        ...
    });
    ...
}

【讨论】：

我很好奇。如果库正在创建状态参数，将其公开给用户有什么好处？
请参阅this SO Post，了解如何使用 state 参数来控制重定向。 @user911