Phonegap Build网站转App，Facebook登录浏览器运行报错求助

我之前做PhoneGap打包App时也踩过Facebook登录的坑，咱们一步步来排查和解决问题～

首先看你给出的代码片段，大概率是几个常见问题导致的浏览器报错，我给你拆解分析：

1. 缺少Facebook JS SDK的核心引入 #

浏览器里根本找不到FB对象，自然会报错！你需要在<head>里加上SDK的引入脚本，这是网页版Facebook登录的基础：

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

2. FB.init参数不完整 #

你的代码里autoLogAppEvents...没写完，完整的初始化参数至少要包含这些关键项，否则会导致初始化失败：

FB.init({
  appId      : 'my-app-id', // 替换成你真实的Facebook App ID
  cookie     : true, // 启用Cookie来保存登录状态
  xfbml      : true, // 解析页面中的Facebook社交插件
  version    : 'v18.0' // 用Facebook最新的API版本号
});

3. Facebook应用后台配置不匹配 #

这是很多人忽略的点：

• 你必须在Facebook开发者后台，把mywebsite.com（包括本地测试的localhost地址）添加到有效的OAuth跳转URI和网站域名列表里，否则浏览器会因为跨域或权限限制报错。
• 检查App状态是否是“上线”（如果是测试阶段，要确保测试账号已经添加到应用的测试用户里）。

4. 浏览器测试 vs PhoneGap App环境的差异 #

如果你的最终目的是打包成PhoneGap App，其实更推荐用官方的cordova-plugin-facebook4插件，而不是网页版JS SDK：

• 网页版在App的WebView里容易出现弹窗被拦截、登录状态无法持久化的问题；
• 插件版是原生适配，体验更稳定。

给你一个完整的浏览器测试用login.html示例，你可以直接参考：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Facebook Login</title>
    <!-- 引入Facebook JS SDK -->
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
    <script type="text/javascript">
        window.fbAsyncInit = function() {
            FB.init({
                appId      : '你的真实App ID',
                cookie     : true,
                xfbml      : true,
                version    : 'v18.0'
            });

            // 页面加载后自动检查登录状态
            FB.getLoginStatus(function(response) {
                handleLoginStatus(response);
            });
        };

        // 处理登录状态回调
        function handleLoginStatus(response) {
            if (response.status === 'connected') {
                console.log('用户已登录，可以调用Facebook API');
                // 这里可以调用FB.api获取用户信息
                FB.api('/me', {fields: 'name,email'}, function(res) {
                    console.log('用户信息：', res);
                });
            } else {
                console.log('用户未登录，引导登录');
            }
        }

        // 手动触发登录按钮
        function triggerLogin() {
            FB.login(function(response) {
                handleLoginStatus(response);
            }, {scope: 'public_profile,email'});
        }
    </script>
</head>
<body>
    <h2>Facebook登录测试</h2>
    <button onclick="triggerLogin()">点击登录Facebook</button>
</body>
</html>

如果要打包PhoneGap App，记得在config.xml里添加插件配置：

<plugin name="cordova-plugin-facebook4" spec="~6.4.0">
    <variable name="APP_ID" value="你的App ID" />
    <variable name="APP_NAME" value="你的App名称" />
</plugin>

最后提醒下：浏览器测试时打开控制台，看具体的报错信息（比如是FB is not defined还是权限错误），能更快定位问题～

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