Question

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

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

Answer 1

在审核source code for MSAL.js时，我看不出如何控制state的值。在AuthenticationRequestParameters为constructed时，state未公开，AuthenticationRequestParameters的值设置为新的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); ... }); ... }

Answer 2

我在我的loginRedirect（）方法中使用状态。.因此，我将在此处发布我的代码，这应该对您有所帮助。我在角度中使用MSAL，但调用的方法应该相同。

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

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

此代码随后将重定向用户以登录..然后返回您的网站（您的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. 
     ...
  }
});

Answer 3

您可以在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

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

3 个答案: