无需 SDK 的 Facebook 登录 OAuth 流程

Question

当我使用 connect.facebook.net/en_US/sdk.js 并调用 FB.login() 时，我会看到一个登录/身份验证弹出窗口。当有人登录时，窗口关闭，并使用响应对象调用提供给 FB.login 的回调函数。从该响应对象中，我提取了 response.authResponse.accessToken，我可以使用它通过调用 facebook 来验证用户信息。太棒了！

现在我该如何在不使用 sdk.js 的情况下做到这一点？

我可以手动打开弹出窗口，并且有一些关于如何执行此操作的文档。

const appId = 'REDACTED';
const redirectUri = encodeURIComponent('https://example.net/callback');
    
// Construct the Facebook login URL
const loginUrl = `https://www.facebook.com/v19.0/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&scope=public_profile,email`;

// Open the Facebook login window
window.open(loginUrl, 'Facebook Login', 'width=600,height=400');

但现在流程完全不同了！它使用回调地址并在登录后在弹出窗口中加载该地址而不是关闭。我不想那样。 SDK 以某种方式打开窗口并在父窗口和弹出窗口之间设置消息传递。我该如何重新创建它？

最终目标是：

1. 未加载js sdk
2. 登录时关闭 Facebook 弹出窗口
3. 让 facebook 弹出窗口调用我自己的回调方法并传递令牌

Answer 1

你必须通过postMessage API进行管理：

因此，当用户登陆 /callback 页面时，您可以执行以下操作：

window.opener.postMessage(dataParsedFromUrl, "*") // comunicate data to opener
// dataParsedFromUrl is derived from parameters that facebook append to your redirect url
window.close() //close the popup

因此，在您的页面中，您需要添加事件监听器以在弹出窗口传达消息时获取数据：

const appId = 'REDACTED';
const redirectUri = encodeURIComponent('https://example.net/callback');
    
// Construct the Facebook login URL
const loginUrl = `https://www.facebook.com/v19.0/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=token&scope=public_profile,email`;

// Open the Facebook login window
window.open(loginUrl, 'Facebook Login', 'width=600,height=400');

window.addEventListener("message", function(e){
  console.log(e.data) // dataParsedFromUrl
})