使用 MSAL 进行 SPA 的多个用户会话答案

【问题标题】：Multiple user sessions with SPA using MSAL使用 MSAL 进行 SPA 的多个用户会话
【发布时间】：2020-02-01 13:58:43
【问题描述】：

我现在遇到过几次需要在我的 SPA 应用程序中使用密码授予流程的情况。

例如，一位用户使用 MSALjs 登录到我的单页应用程序 (SPA)。他们调用我的服务的所有 API 都将在该用户上下文中。应用程序中有一部分要求用户将设备交给另一个人以授权某些特定功能（如覆盖或签名）。一旦该操作完成，一切都会在原始用户上下文中继续进行。

如果 MSAL 能够为该用例处理多个会话，那就太好了。今天，我们通过创建一个 API 来处理这个问题，该 API 接受其他用户的凭据并在幕后使用密码授予流程。

是否有人知道 MSALjs 中允许 SPA 同时拥有多个用户会话的任何客户端功能？这样，我也可以通过隐式流路由第二个用户，同时保持原始会话。一旦第二个用户完成，我可以将他们注销并继续第一个会话。

【问题讨论】：

标签： single-page-application adal msal adal.js msal.js

【解决方案1】：

我认为您可以为此使用新版本的 MSAL.js 包，它称为 @azure/msal-browser。它使用带有 PKCE 的授权代码流，它可以处理 SPA 中的许多帐户。示例代码：

import * as msal from "@azure/msal-browser";

// 1. Intitialize the auth client - this only needs to run once
const authClient = new msal.PublicClientApplication({
    auth: {
        clientId: "yourClientId",
        authority: "https://login.microsoftonline.com/yourTenantId",
        redirectUri: "yourRedirectUrl",
    },
    cache: {
        cacheLocation: "localStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
});

// 2. Log a new user in and return their account object - call for each person you want to log in
const getLoggedInUser = () => {
    return authClient.handleRedirectPromise().then((redirectResponse) => {
        // If this is the return redirect of the login flow
        if (redirectResponse && redirectResponse.account) {
            return account;
        }
        
        // This is not the return redirect - trigger the flow
        authClient.loginRedirect();
    });
}

// 3. (Optional) Get account objects for all logged in users
const getAllLoggedInUsers = () => {
    return authClient.getAllAccounts();
}

// 4. Get an access token for a particular account, you probably need to expose scopes as a parameter too
const getAccessToken = (user) => {
    const request = {
        scopes: ["yourScopeUri1", "yourScopeUri2"],
        forceRefresh: true, // Set this to "true" to ignore token cache
        account = user;
    };    
    
    return authClient.acquireTokenSilent(request)
        .then(tokenResponse => tokenResponse.accessToken)
        .catch(error => {
            if (error instanceof msal.InteractionRequiredAuthError) {
                console.warn("Silent token acquisition failed. Acquiring token using popup.");
                return authClient.acquireTokenPopup(request)
                    .then(tokenResponse => tokenResponse.accessToken)
                    .catch(error => {
                        console.error(error);
                    });
            } else {
                console.error(error);
            }
    });
}

文档：

【讨论】：