Je suis actuellement en train de prototyper un flux de connexion basé sur VueJS à l'aide de Firebase Auth et de la bibliothèque de widgets Web Firebaseui-web.
Après une authentification réussie (password
或 google
提供商),小部件加载栏会无限重复,并且 firebaseui-web 不会触发其 signInSuccessWithAuthResult
回调。但是对 identitytoolkit.googleapis.com
) l'appel réseau semble clairement avoir identifié et authentifié mon utilisateur (voir capture d'écran)
L'objet de configuration est le suivant :
const uiConfig = { signInSuccessUrl: "#/loggedin", signInOptions: [ EmailAuthProvider.PROVIDER_ID, GoogleAuthProvider.PROVIDER_ID, ], tosUrl: "http://example.com", privacyPolicyUrl: "http://example.com", signInFlow: "redirect", callbacks: { signInSuccessWithAuthResult: function (authResult, redirectUrl) { console.log("signInSuccessWithAuthResult:", authResult, redirectUrl); return true; }, uiShown: function () { console.log("uiShown"); }, }, };
Code VUeJS :
export default { name: "Home", data: function () { return { fbUI: {}, }; }, methods: { initFBUI: function () { const uiReference = firebaseui.auth.AuthUI.getInstance("demoUI"); console.log("uiReference ", uiReference); this.fbUI = uiReference !== null ? uiReference : new firebaseui.auth.AuthUI(this.$fbAuth, "demoUI"); console.log("this.fbUI", this.fbUI); }, startAuthUI: function () { console.log("ui.isPendingRedirect()", this.fbUI.isPendingRedirect()); this.fbUI.start("#firebaseui-auth-container", uiConfig); console.log("this.fbUI started"); }, }, mounted() { this.initFBUI(); this.startAuthUI(); }, };
Démo reproductible et code complet sur https://github.com/perelin/firebase-auth-providerdata-test.
Voici le CodeSandbox qui représente : https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (parfois, cela renvoie Unexpected token '{'
erreur. Ensuite, rechargez/reconstruisez simplement la page.
Si je sais quoi essayer ensuite, je l'apprécierais vraiment !
Alors, j'ai trouvé ce problème. Il semble que l'instance firebaseui renvoyée par
firebaseui.auth.AuthUI n'aime pas être une propriété de données Vue [1]
J’aimerais savoir pourquoi, mais chercher des bugs me consomme assez d’énergie. J'ai fini :)
Voici mon correctifhttps://github.com/perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65
[1] https://v3.vuejs.org/guide/data-method.html