单页应用程序：登录和注销Single-page application: Sign-in and Sign-out

了解如何将登录添加到单页应用程序的代码中。Learn how to add sign-in to the code for your single-page application.

在应用程序中获取用于访问 API 的令牌之前，需要经身份验证的用户上下文。Before you can get tokens to access APIs in your application, you need an authenticated user context. 可以在 MSAL.js 中以两种方式将用户登录到应用程序：You can sign in users to your application in MSAL.js in two ways:

也可选择传递 API 的作用域，该作用域需在用户登录时获得用户许可。You can also optionally pass the scopes of the APIs for which you need the user to consent at the time of sign-in.

备注

如果应用程序已经可以访问经身份验证的用户上下文或 ID 令牌，则可跳过登录步骤，直接获取令牌。If your application already has access to an authenticated user context or ID token, you can skip the login step and directly acquire tokens. 有关详细信息，请参阅不使用 MSAL.js 登录名进行 SSO。For details, see SSO without MSAL.js login.

在弹出窗口或重定向体验之间进行选择Choosing between a pop-up or redirect experience

不能在应用程序中同时使用弹出窗口和重定向方法。You can't use both the pop-up and redirect methods in your application. 在弹出窗口和重定向体验之间进行的选择取决于应用程序流：The choice between a pop-up or redirect experience depends on your application flow:

  • 如果不希望用户在身份验证期间离开主应用程序页，建议使用弹出窗口方法。If you don't want users to move away from your main application page during authentication, we recommend the pop-up method. 由于身份验证重定向发生在弹出窗口中，系统会保留主应用程序的状态。Because the authentication redirect happens in a pop-up window, the state of the main application is preserved.

  • 如果用户的浏览器约束或策略禁用了弹出窗口，则可使用重定向方法。If users have browser constraints or policies where pop-up windows are disabled, you can use the redirect method. 请对 Internet Explorer 浏览器使用重定向方法，因为 Internet Explorer 上具有弹出窗口的已知问题。Use the redirect method with the Internet Explorer browser, because there are known issues with pop-up windows on Internet Explorer.

通过弹出窗口登录Sign-in with a pop-up window


const config = {
    auth: {
        clientId: 'your_app_id',
        redirectUri: "your_app_redirect_uri", //defaults to application start page
        postLogoutRedirectUri: "your_app_logout_redirect_uri"
    }
}

const loginRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/User.ReadWrite"]
}

let username = "";

const myMsal = new PublicClientApplication(config);

myMsal.loginPopup(loginRequest)
    .then(function (loginResponse) {
        //login success

        // In case multiple accounts exist, you can select
        const currentAccounts = myMsal.getAllAccounts();
    
        if (currentAccounts === null) {
            // no accounts detected
        } else if (currentAccounts.length > 1) {
            // Add choose account code here
        } else if (currentAccounts.length === 1) {
            username = currentAccounts[0].username;
        }
    
    }).catch(function (error) {
        //login failure
        console.log(error);
    });

使用重定向登录Sign-in with redirect


const config = {
    auth: {
        clientId: 'your_app_id',
        redirectUri: "your_app_redirect_uri", //defaults to application start page
        postLogoutRedirectUri: "your_app_logout_redirect_uri"
    }
}

const loginRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/User.ReadWrite"]
}

let username = "";

const myMsal = new PublicClientApplication(config);

function handleResponse(response) {
    //handle redirect response

    // In case multiple accounts exist, you can select
    const currentAccounts = myMsal.getAllAccounts();

    if (currentAccounts === null) {
        // no accounts detected
    } else if (currentAccounts.length > 1) {
        // Add choose account code here
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
    }
}

myMsal.handleRedirectPromise(handleResponse);

myMsal.loginRedirect(loginRequest);

注销Sign-out

MSAL 库提供 logout 方法，该方法会清除浏览器存储中的缓存并将注销请求发送到 Azure Active Directory (Azure AD)。The MSAL library provides a logout method that clears the cache in browser storage and sends a sign-out request to Azure Active Directory (Azure AD). 在注销后，库会默认重定向回应用程序启动页。After sign-out, the library redirects back to the application start page by default.

可以通过设置 postLogoutRedirectUri 来配置此 URI（在注销后应该重定向到此 URI）。You can configure the URI to which it should redirect after sign-out by setting postLogoutRedirectUri. 还应该在应用程序注册中将此 URI 注册为“注销 URI”。This URI should also be registered as the logout URI in your application registration.

const config = {
    auth: {
        clientId: 'your_app_id',
        redirectUri: "your_app_redirect_uri", //defaults to application start page
        postLogoutRedirectUri: "your_app_logout_redirect_uri"
    }
}

const myMsal = new PublicClientApplication(config);

// you can select which account application should sign out
const logoutRequest = {
    account: myMsal.getAccountByUsername(username)
}

myMsal.logout(logoutRequest);

后续步骤Next steps

转到此方案中的下一篇文章：获取应用的令牌。Move on to the next article in this scenario, Acquiring a token for the app.