使用 MSAL.js 在身份验证请求中传递自定义状态Pass custom state in authentication requests using MSAL.js

由 OAuth 2.0 定义的 state 参数包含在身份验证请求中,并在令牌响应中返回,以防止跨站点请求伪造攻击。The state parameter, as defined by OAuth 2.0, is included in an authentication request and is also returned in the token response to prevent cross-site request forgery attacks. 默认情况下,适用于 JavaScript 的 Microsoft 身份验证库 (MSAL.js) 在身份验证请求中传递随机生成的唯一 state 参数值。By default, Microsoft Authentication Library for JavaScript (MSAL.js) passes a randomly generated unique state parameter value in the authentication requests.

state 参数也可用于在重定向之前对应用的状态信息进行编码。The state parameter can also be used to encode information of the app's state before redirect. 可以在应用中传递用户的状态,例如他们所在的页面或视图,作为此参数的输入。You can pass the user's state in the app, such as the page or view they were on, as input to this parameter. MSAL.js 库允许你将自定义状态作为 state 参数传入 Request 对象:The MSAL.js library allows you to pass your custom state as state parameter in the Request object:

// Request type
export type AuthenticationParameters = {
    scopes?: Array<string>;
    extraScopesToConsent?: Array<string>;
    prompt?: string;
    extraQueryParameters?: QPDict;
    claimsRequest?: string;
    authority?: string;
    state?: string;
    correlationId?: string;
    account?: Account;
    sid?: string;
    loginHint?: string;
    forceRefresh?: boolean;
};

备注

如果要跳过缓存的令牌并转到服务器,请将布尔值 forceRefresh 传入到用于发出登录/令牌请求的 AuthenticationParameters 对象。If you would like to skip a cached token and go to the server, please pass in the boolean forceRefresh into the AuthenticationParameters object used to make a login/token request. 默认情况下不应使用 forceRefresh,因为对应用程序存在性能影响。forceRefresh should not be used by default, because of the performance impact on your application. 可以依靠缓存为用户提供更好的体验。Relying on the cache will give your users a better experience. 只应在知道当前缓存的数据没有最新信息的情况下,才应跳过缓存。Skipping the cache should only be used in scenarios where you know the currently cached data does not have up-to-date information. 例如,管理工具将角色添加到需要使用更新角色获取新令牌的用户。Such as an Admin tool that adds roles to a user that needs to get a new token with updated roles.

例如:For example:

let loginRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/user.read", 
             "https://microsoftgraph.chinacloudapi.cn/user.write"],
    state: "page_url"
}

myMSALObj.loginPopup(loginRequest);

发送请求时,传入状态将追加到 MSAL.js 设置的唯一 GUID 中。The passed in state is appended to the unique GUID set by MSAL.js when sending the request. 返回响应时,MSAL.js 将检查状态是否匹配,然后在 Response 对象中返回自定义传入状态作为 accountStateWhen the response is returned, MSAL.js checks for a state match and then returns the custom passed in state in the Response object as accountState.

export type AuthResponse = {
    uniqueId: string;
    tenantId: string;
    tokenType: string;
    idToken: IdToken;
    accessToken: string;
    scopes: Array<string>;
    expiresOn: Date;
    account: Account;
    accountState: string;
};

若要了解详细信息,请阅读使用 MSAL.js 生成单页应用程序 (SPA)To learn more, read about building a single-page application (SPA) using MSAL.js.