Firebase Authentication在Cordova应用中谷歌登录无响应问题求助

问题根因分析 #

你遇到的无响应问题核心来自3个错误点：

1. 登录逻辑结构错误：你将认证触发逻辑写在了onAuthStateChanged的回调函数内，该函数只会在用户认证状态发生变更时触发，点击登录按钮时状态没有变更，内部代码根本不会执行
2. 变量未定义：代码中的_provider == google判断条件用到的两个变量都没有提前定义，谷歌登录逻辑分支永远不会触发
3. 环境适配错误：Cordova的WebView环境不支持Web版Firebase的signInWithRedirect重定向认证流程，跨域限制会直接阻断认证链路

修复步骤 #

第一步：修改认证逻辑代码

首先调整逻辑结构，把状态监听和登录触发拆分，移除无效判断，参考修改后的代码：

// 全局监听认证状态，不要放在login函数内部
firebase.auth().onAuthStateChanged(function(_user) {
    if (_user) {
        auth.handleSuccess(_user, _user.uid)
        console.log('already logged in...')
        loggedin = true;
    }
});

login: function() {
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
    .then(function() {
        console.log("fb_auth | Starting Authentication process", "info")
        // 这里先暂时替换成signInWithPopup测试，后续建议换原生插件方案
        return firebase.auth().signInWithPopup(provider).then(function(result) {
                var token = result.credential.accessToken;
                let fb_result = result.user;
                auth.handleSuccess(fb_result.uid, fb_result)
                console.log("auth.login | Authentication Process Successful", "info")
                loggedin = true;
                $('#landingPage').fadeOut();
            })
            .catch(function(error) {
                var errorCode = error.code;
                var errorMessage = error.message;
                console.log("fb_auth | Error: " + errorMessage, "warn")
                alert(errorMessage) // 加弹窗方便调试
            });
    })
},

第二步：安装Cordova专属Firebase认证插件

Web版Firebase认证在移动端WebView下有很多限制，直接用原生适配插件更稳定，执行安装命令：
cordova plugin add cordova-plugin-firebase-authentication --save

第三步：完善Firebase控制台配置

1. 登录Firebase控制台，添加你的iOS应用，准确填写应用的Bundle ID
2. 生成iOS应用的签名SHA1值，填入Firebase控制台的应用配置页
3. 下载生成的GoogleService-Info.plist文件，放到Cordova项目的iOS平台根目录

第四步：替换为原生插件的登录逻辑

插件安装完成后，直接调用原生API完成认证，避免WebView的跨域问题：

login: function() {
    cordova.plugins.firebase.auth.signInWithGoogle().then(function(authData) {
        // 拿到认证凭证后同步到Web端Firebase实例即可
        const credential = firebase.auth.GoogleAuthProvider.credential(authData.idToken);
        return firebase.auth().signInWithCredential(credential);
    }).then(function(result) {
        auth.handleSuccess(result.user.uid, result.user)
        loggedin = true;
        $('#landingPage').fadeOut();
    }).catch(function(error) {
        console.log("认证错误：", error)
        alert(error.message)
    })
}

调试建议 #

你可以在每个逻辑分支加弹窗日志，确认代码执行到哪一步；另外不要只看XCode的系统日志，需要打开Safari的开发者工具，连接调试iOS设备的WebView，才能看到网页侧的控制台输出和报错信息。

内容的提问来源于stack exchange，提问作者Max Webb