无需SDK实现Facebook Login OAuth弹窗登录流程

当使用Facebook官方JS SDK调用FB.login()时，用户完成登录授权后弹窗会自动关闭，同时回调能拿到包含accessToken的响应对象。现在手动构造登录URL打开弹窗后，授权成功会加载回调地址而非自动关闭，需要复现SDK的消息通信机制来实现目标：不加载SDK、弹窗自动关闭、传递Token到自定义回调。

1. 编写回调页面逻辑 #

Facebook授权成功后会跳转到你指定的redirect_uri页面，这个页面需要解析URL哈希中的授权参数，通过postMessage给父窗口发送Token信息，然后关闭自身。

创建回调页面（比如callback.html），代码如下：

// 解析URL哈希中的授权参数
function parseHashParams() {
    const hash = window.location.hash.slice(1);
    const params = new URLSearchParams(hash);
    return {
        accessToken: params.get('access_token'),
        expiresIn: params.get('expires_in'),
        userId: params.get('user_id'),
        error: params.get('error')
    };
}

window.addEventListener('load', () => {
    const authData = parseHashParams();
    
    // 给父窗口发送消息，注意origin要匹配你的主站域名，避免安全问题
    window.opener.postMessage({
        type: 'facebook-auth',
        data: authData
    }, 'https://example.net'); // 替换成你的主站域名
    
    // 延迟关闭，确保消息发送完成
    setTimeout(() => {
        window.close();
    }, 100);
});

2. 修改父窗口的弹窗与消息监听逻辑 #

父窗口需要打开登录弹窗，同时监听来自弹窗的消息，处理授权结果，还要处理用户主动关闭弹窗的情况。

修改父窗口代码如下：

const appId = 'REDACTED';
// 注意这里不需要encodeURIComponent，URLSearchParams会自动处理编码
const redirectUri = 'https://example.net/callback.html';

// 构造登录URL，用URLSearchParams避免拼接错误
const loginParams = new URLSearchParams({
    client_id: appId,
    redirect_uri: redirectUri,
    response_type: 'token',
    scope: 'public_profile,email'
});
const loginUrl = `https://www.facebook.com/v19.0/dialog/oauth?${loginParams.toString()}`;

// 打开登录弹窗
const loginWindow = window.open(loginUrl, 'Facebook Login', 'width=600,height=400');

// 监听来自弹窗的消息
window.addEventListener('message', (event) => {
    // 验证消息来源，确保安全
    if (event.origin !== 'https://example.net') return;
    
    if (event.data.type === 'facebook-auth') {
        const { accessToken, error } = event.data.data;
        
        if (error) {
            // 处理授权错误
            console.error('Facebook授权失败:', error);
            // 调用你的自定义错误回调
        } else if (accessToken) {
            // 处理成功拿到Token的情况
            console.log('获取到的Access Token:', accessToken);
            // 调用你的自定义回调方法
            // yourCustomCallback(accessToken);
        }
        
        // 兜底关闭弹窗（如果没自动关闭的话）
        if (loginWindow) loginWindow.close();
    }
});

// 监听用户主动关闭弹窗的情况
const checkWindowClosed = setInterval(() => {
    if (loginWindow && loginWindow.closed) {
        clearInterval(checkWindowClosed);
        console.log('用户关闭了登录弹窗');
        // 处理用户取消授权的逻辑
    }
}, 500);

关键注意事项 #

• 安全验证：postMessage的第二个参数必须指定主站域名，避免接收恶意网站的消息；消息监听时也要验证event.origin，确保来源合法。
• 回调域名配置：redirect_uri必须在Facebook开发者后台的「有效OAuth重定向URI」列表中，否则会触发授权失败。
• 延迟关闭：回调页面中加入setTimeout确保消息发送完成再关闭，避免因窗口过快关闭导致消息丢失。

内容的提问来源于stack exchange，提问作者John Michael Law