Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

525
Views
Cómo implementar loginRedirect usando vuejs y azureb2c y msal.js

Estoy tratando de implementar un SSO usando Azure b2c y Vuejs y MSAL, pero tengo algunos problemas.

 msalConfig: { auth: { clientId: "******dd03", authority:"https://*****", knownAuthorities: [ "******hb2cdev.onmicrosoft.com", ], redirectUri:'localhost:8080/#/main' }, cache: { cacheLocation: "localStorage", }, }, accessToken: ""

configuración de componentes:

 async created() { this.$msalInstance = new PublicClientApplication( this.authStore.$state.msalConfig ); }, mounted() { console.log("msqlInstance :", this.$msalInstance); const accounts = this.$msalInstance.getAllAccounts(); if (accounts.length == 0) { console.log("empty"); return; } this.account = accounts[0]; console.log("test :", this.account); this.$emitter.emit("login", this.account); }, methods: { async SignIn() { console.log("test"); await this.$msalInstance .loginPopup({}) .then((res) => { const myAccounts = this.$msalInstance.getAllAccounts(); this.account = myAccounts[0]; this.$emitter.emit("login", this.account); }) .catch((error) => { console.error(`error during authentication: ${error}`); }); }, async SignOut() { await this.$msalInstance .logout({}) .then((res) => { this.$emitter.emit("logout", "logging out"); }) .catch((error) => { console.error(error); }); }, },

este código funciona como se esperaba, pero cuando reemplazo .loginPopup({}) en el método de inicio de sesión por loginRedirect para evitar que aparezca la ventana emergente, aparece este error:

 UserAuth.vue?212c:67 error during authentication: BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Para lograr el requisito anterior,

En primer lugar, existen los siguientes requisitos previos que necesitamos en nuestro entorno;

  • Una suscripción de Azure

  • Una instancia/inquilino de Azure AD B2C

  • código de estudio visual

  • Vue.js

  • Node.js/NPM

  • .NET Core 3.1 o posterior (si desea compilar y ejecutar la API)

  • TypeScript: sí, después de la demanda popular, usamos TS para este proyecto

Como ya ha configurado su entorno, asegúrese de tener lo siguiente en su archivo .env .

 VUE_APP_MSAL_CLIENT_ID=<your client id> VUE_APP_MSAL_LOGIN_AUTHORITY=https://<yourB2Cname>.b2clogin.com/<yourB2Cname>.onmicrosoft.com/<YourSignupSigninPolicyName>/ VUE_APP_MSAL_PASSWORD_RESET_AUTHORITY=https://<yourB2Cname>.b2clogin.com/<yourB2Cname>.onmicrosoft.com/<YourPasswordResetPolicy>/ VUE_APP_MSAL_KNOWN_AUTHORITY=<yourB2Cname>.b2clogin.com

Para una configuración completa, consulte esta publicación de blog .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!