注销弹出窗口不起作用。我怎样才能在 MSAL 中制作一个

Question

我正在开发一个项目，并试图找出如何在我的网页上制作注销按钮。它正在使用

Vue2

，我的脚本现在看起来像这样。

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

const msalConfig = {
  auth: {
    clientId: "Blank for security", // THIS SHGULD BE COMING FROM AN ENVIRONMENT VARIABLE VIA vue-cli dotenv
    authority: "https://login.microsoftonline.com/common/",
    redirectUri: "http://localhost:8080/",
  },
};

const msalInstance = new msal.PublicClientApplication(msalConfig);
  export default {
    data: () => ({
      msalInstance,
      isLoggedIn: false,
      loginError: false,
      drawer: null,
    }),
    methods: {
    async login() {
      try {
        const loginResponse = await msalInstance.loginPopup({
          redirectUri: "http://localhost:8080/",
        });

        console.log(loginResponse.account.username);

        this.isLoggedIn = true;
      } catch (error) {
        console.error(error);
        this.isLoggedIn = false;
        this.loginError = error;
      }
    },
  },
  }

我找过有关注销的信息，但主要都是登录，我在这里搜索，似乎找不到如何注销。

这都是使用

msar-browser

。这可能很简单，但我不能 100% 确定如何使用它。

感谢您的帮助！

Answer 1

适用于 JavaScript 的 MSAL 库使客户端 JavaScript 应用程序能够通过 Azure AD B2C 服务使用 Azure Active Directory 帐户 (AAD)、Microsoft 个人帐户 (MSA) 以及 Facebook、Google、LinkedIn 和 Microsoft 帐户等社交身份提供商对用户进行身份验证。

回到您的问题，MSAL 的注销过程需要两个步骤。

1. 清除 MSAL 缓存。
2. 清除身份服务器上的会话。

PublicClientApplication

对象公开执行这些操作的API。

您可以使用logoutRedirect解决您的问题。使用

logoutRedirect

将清除用户令牌的本地缓存，然后将窗口重定向到服务器注销页面，如下所示。

const currentAccount = msalInstance.getAccountByHomeId(homeAccountId);
await msalInstance.logoutRedirect({
        account: currentAccount,
        postLogoutRedirectUri: "https:/***/loggedOutPage"
    });

我建议阅读 GitHub 上的注销 MSAL 文档以了解相同内容。

此外，请查看此 Vue.js 用户身份验证 文档中定义明确的示例以获取更多信息。