我目前正在使用 Firebase Auth 和 Web 小部件库 firebaseui-web 对基于 VueJS 的登录流程进行原型设计。
成功验证后(password 或 google 提供商),小部件加载栏会无限重复,并且 firebaseui-web 不会触发其 signInSuccessWithAuthResult 回调。但是对 identitytoolkit.googleapis.com 的网络调用显然似乎已经识别并验证了我的用户(参见屏幕截图)
配置对象如下所示:
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");
},
},
};
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();
},
};
可复制的演示和完整代码位于 https://github.com/perelin/firebase-auth-providerdata-test。
这是该代表的 CodeSandbox:https://codesandbox.io/s/github/perelin/firebase-auth-providerdata-test (有时它会抛出 Unexpected token '{' 错误。然后只需重新加载/重建页面。
如果我知道接下来要尝试什么,我将不胜感激!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
所以,我发现了这个问题。看来
firebaseui.auth.AuthUI 返回的 firebaseui 实例不喜欢成为 Vue 数据属性 [1]很想知道为什么,但是寻找 bug 耗费了我足够的精力。我完成了:)
这是我的修复https://github.com /perelin/firebase-auth-providerdata-test/commit/e8c31aecb4d3bc8bcd93928c55c439201a965c65
[1] https://v3.vuejs.org/guide/data-方法.html