Estoy trabajando en un proyecto y tratando de averiguar cómo hacer un botón de cierre de sesión en mi página web. Está usando Vue2
y mi script se ve así ahora.
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; } }, }, }
He buscado información sobre cómo cerrar sesión, pero principalmente todos son inicios de sesión, y busqué aquí, y parece que no puedo encontrar cómo cerrar sesión.
todo esto es usando msar-browser
. Puede ser algo simple, pero no estoy 100% seguro de cómo usarlo.
¡Gracias por la ayuda!
La biblioteca MSAL para JavaScript permite que las aplicaciones de JavaScript del lado del cliente autentiquen a los usuarios mediante cuentas de Azure Active Directory (AAD), cuentas personales de Microsoft (MSA) y proveedores de identidad social como Facebook, Google, LinkedIn, cuentas de Microsoft a través del servicio Azure AD B2C.
Volviendo a su problema, el proceso de cierre de sesión de MSAL consta de dos pasos.
El objeto PublicClientApplication
expone las API que realizan estas acciones.
Puede resolver su problema usando logoutRedirect . El uso logoutRedirect
borrará el caché local de tokens de usuario y luego redirigirá la ventana a la página de cierre de sesión del servidor como se muestra a continuación.
const currentAccount = msalInstance.getAccountByHomeId(homeAccountId); await msalInstance.logoutRedirect({ account: currentAccount, postLogoutRedirectUri: "https:/***/loggedOutPage" });
Sugeriría leer este documento de cierre de sesión de MSAL en GitHub para comprender mejor el mismo.
Consulte también el ejemplo bien definido en este documento de autenticación de usuario de Vue.js para obtener más información.