在 Chrome 扩展程序中使用 Facebook 进行身份验证的最佳方式是什么？答案

【问题标题】：What is the best way to authenticate with Facebook in a Chrome Extension?在 Chrome 扩展程序中使用 Facebook 进行身份验证的最佳方式是什么？
【发布时间】：2016-11-16 22:31:04
【问题描述】：

我正在构建一个 chrome 扩展，它将与我也在构建的 Node.js/Restify Web 服务进行交互。我使用 passport.js 制作了几个 API 端点，供用户点击并通过 Facebook 进行身份验证。但是，一旦我运行了 chrome 扩展程序，我意识到尝试通过 ajax 请求我的 Facebook auth 端点时存在各种 CORS 问题。

在线查看问题后，看起来大多数人都在客户端进行 Facebook 身份验证。现在我在想，也许我会重写扩展程序以使用客户端 Facebook 身份验证，并让其他所有内容（非 Facebook）都通过我的 Restify API。

我的 Facebook 身份验证端点如下所示：

server.get('/facebook_login/callback', auth.authenticate({
  failureRedirect: '/error',
  scope: [
    auth.fbPermissions.email,
    auth.fbPermissions.publicProfile
  ]
}), function(req, res, next) {
  res.redirect('/', next);
});

server.get('/facebook_login', auth.authenticate({
  failureRedirect: '/error',
  scope: [
    auth.fbPermissions.email,
    auth.fbPermissions.publicProfile
  ]
}));

扩展中唯一的 JavaScript 代码是这样的：

document.addEventListener('DOMContentLoaded', function() {
  window.open("http://localhost:8080/facebook_login");
});

如果有人使这些方法中的任何一种起作用，请告诉我。任何帮助表示赞赏！

【问题讨论】：

“我意识到有各种各样的 CORS 问题” 你需要澄清你的意思。 CORS 通常不是扩展的问题。另外，请查看chrome.identity。
@Xan 在更改我的代码以重现 CORS 错误后，我意识到只要我在新窗口中打开登录 url，我就不再得到它们了。另外，chrome.identity 看起来很有用，所以谢谢你的建议。

标签： node.js facebook facebook-graph-api google-chrome-extension restify

【解决方案1】：

我可以通过在新窗口中打开我的facebook_login 页面来完成这项工作。看来我现在会坚持使用服务器端 Facebook 登录。

【讨论】：

明智：客户端登录更容易提取 API 密钥。