单页应用程序：登录和注销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"]
}

const myMsal = new userAgentApplication(config);

myMsal.loginPopup(loginRequest)
    .then(function (loginResponse) {
        //login success
        let idToken = loginResponse.idToken;
    }).catch(function (error) {
        //login failure
        console.log(error);
    });

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

重定向方法不会返回承诺，因为已从主应用离开。The redirect methods don't return a promise because of the move away from the main app. 若要处理并访问返回的令牌，需要在调用重定向方法之前注册成功和错误回叫。To process and access the returned tokens, you need to register success and error callbacks before you call the redirect methods.


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"]
}

const myMsal = new userAgentApplication(config);

function authCallback(error, response) {
    //handle redirect response
}

myMsal.handleRedirectCallback(authCallback);

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 UserAgentApplication(config);

myMsal.logout();

后续步骤Next steps

获取应用的令牌Acquiring a token for the app