不安全登录被阻止：您无法获取访问令牌或从不安全页面登录到此应用程序。尝试将页面重新加载为 https://

Posted 2023-03-08

【中文标题】不安全登录被阻止：您无法获取访问令牌或从不安全页面登录到此应用程序。尝试将页面重新加载为 https://

【英文标题】：Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://

【发布时间】：2018-08-30 10:05:23

【问题描述】：

我正在通过使用 href 将 Facebook 身份验证 API 路由链接到按钮来实现 Passport Facebook 身份验证，例如：

<a href="auth/facebook">Facebook Login</a>

当我点击按钮时，它会重定向到 Facebook 身份验证页面。但是在页面上，会显示一条错误消息，例如 “Insecure Login Blocked: You can't get an access token or login to this app from an insecure page. Try re-loading the page as https://"

我该如何解决这个问题？

【问题讨论】：

如果您在 2018 年 3 月之后创建了 facebook 应用程序，现在您只能使用 Https，但是，我仍然不清楚 localhost。无论如何，为您的本地主机生成 SSL 应该相当容易。

这可能对你有帮助：***.com/questions/49358800/…

如果您在 localhost 上，您可以使用 ngrok 将您的 localhost 转发到 web 上的 https

【参考方案1】：

令人惊讶的是，我刚刚开始尝试做同样的事情，就像一个小时前一样，并且遇到了同样的问题。如果您进入 FB 开发者门户并转到 Facebook 登录 下的 设置，则可以选择强制 HTTPS。

显示进一步调查：

“强制使用 HTTPS。此设置需要 HTTPS 用于 OAuth 重定向和使用 javascript SDK 获取访问令牌的页面。自 2018 年 3 月创建的所有新应用程序都默认启用此设置，您应该计划迁移任何现有应用程序以仅使用HTTPS URL 到 2019 年 3 月。大多数主要的云应用程序主机都为您的应用程序提供免费和自动配置 TLS 证书。如果您自托管您的应用程序或您的托管服务默认不提供 HTTPS，您可以为您的应用程序获取免费证书来自 Let's Encrypt 的域。”

参考：Login Security

【讨论】：

这是 Let's Encrypt 提供的关于 localhost 证书的页面：letsencrypt.org/docs/certificates-for-localhost

如何在 localhost 中使用 facebook 登录

并且该按钮被禁用（2018 年 3 月）。在任何情况下，您都必须使用 HTTPS。 My answer 将帮助您为本地主机设置 SSL 证书。或者您的自定义域。

@PranavPinarayi 你解决了在 localhost 中使用 facebook 登录的问题吗？

【参考方案2】：

就我而言，我修改了我的 package.json 文件。

"start": "node scripts/start.js" => 
"start": "set HTTPS=true&&node scripts/start.js"

希望对你有帮助。

【参考方案3】：

由于 Facebook 一直要求我们的重定向 URI 使用 HTTPS，我们可以在 localhost 使用 ngrok 来启动本地安全 HTTP 隧道。目前，它是一个干净且快速的建议替代方案。

获取official ngrok package 解压到你喜欢的目录 unzip /opt/ngrok.zip; 创建您的第一个 HTTP 隧道：/opt/ngrok http 3000

在ngrok docs 中查看更多出色的用例。

【讨论】：

感谢 Lindoélio。我喜欢这个解决方案，但无法让它发挥作用。我创建了一个到 http 3001 的隧道，然后将 ngrok 生成的 URL c5c35cb6.ngrok.io 放入我的重定向 uri 中，但我仍然遇到同样的错误。还有其他想法吗？

编辑：好的，如果我转到 ngrok url（例如c5c35cb6.ngrok.io），它就可以工作。但是，我的网站太慢了，几乎无法使用...

【参考方案4】：

此供php sdk参考

现在 Web 应用程序需要 https 才能通过 Facebook 登录。

以下程序需要从 Facebook 获得有效的身份验证。

基本设置

将 App Domains 设置为您的根域 (www.example.com) 隐私政策网址 (https://www.example.com/privacy-demo/) 服务条款 URL (https://www.example.com/terms-demo/) 设置类别

站点 URL (https://www.example.com/facebook-login/) facebook-login 这个文件夹包含我所有的 facebook 登录文件

高级

服务器IP白名单（你的主机IP地址124.25.48.36）

Facebook 登录设置下方的产品

有效的 OAuth 重定向 URI (https://www.example.com/facebook-login/fb-callback.php)

快速入门

选择网站放网址 (https://www.example.com/facebook-login/)

保存所有更改并运行您的应用（即：在您的应用上）现在您的应用状态将生效。

你可以参考这个代码https://github.com/facebook/php-graph-sdk

【讨论】：

你对 http 有什么建议？

【参考方案5】：

由于您使用的是passport，请同时检查您的auth.js 设置，或者您保存这些设置的位置。 即使您的网站有证书，以下代码仍然会失败：

'facebookAuth' : 
  'clientID'      : '.............', // App ID
  'clientSecret'  : '............................', // App Secret
  'callbackURL'   : 'localhost:9999/auth/facebook/callback',
  'profileURL'    : 'https://graph.facebook.com/v2.5/me?fields=first_name,last_name,email',
  'profileFields' : ['id', 'email', 'name'] 
,

问题在于callbackUrl。

'callbackURL'   : '/auth/facebook/callback'
'callbackURL'   : 'http://localhost:9999/auth/facebook/callback'

上述语句都将失败。 callbackUrl 需要以https 开头。第一个将尝试加载http://localhost 并附加callbackUrl。第二个显然用http 加载了完整的url，并且都无法连接到FB。所以尝试以下方法之一。如果您的网站有证书，请提供完整的网址。如果您在 localhost 上进行测试，请创建您自己的证书并通过 https 访问它，例如：

'callbackURL'   : 'https://example.com/auth/facebook/callback'
'callbackURL'   : 'https://localhost:9999/auth/facebook/callback'

【参考方案6】：

为了解决本地开发问题，请在您的机器上生成 ssl 证书。运行以下命令（在 Mac High Sierra 上测试，您需要在您的操作系统上安装 openssl 库）在您的工作目录中创建一个 cert.pem 和一个 key.pem 文件。

openssl req -x509 -newkey rsa:2048 -keyout keytmp.pem -out cert.pem -days 365

openssl rsa -in keytmp.pem -out key.pem

将您的节点 http 服务器更改为使用 https。您需要导入 https 模块来代替 http 模块。

const https = require('https')
const path = require('path')
const fs = require('fs')
const options = 
  cert: fs.readFileSync(path.resolve(__dirname, '<path_to_your_cert.pem>')),
  key: fs.readFileSync(path.resolve(__dirname, '<path_to_your_key.pem>'))

const server = https.createServer(options, <your_handler_or_app_eg_express>)
server.listen(<your_prefered_port_number>)

在您的 facebook 开发者控制台上转到该应用程序，并将有效 OAuth 重定向 URI 设置为您的 localhost 域的 https 版本。对应用程序域和站点 URL 执行相同操作。

【参考方案7】：

使用为我工作的 *** 网络幽灵免费试用

【参考方案8】：

在您的护照设置中，将您的重定向网址更改为 https://someUrl “https”很重要

【参考方案9】：

有两种方法可以解决这个问题： 第一的： 你可以去你的google Passport策略并添加代理：true

    passport.use(
  new FacebookStrategy(
    
      clientID: facebookID,
      clientSecret: facebookSecret,
      callbackURL: "/auth/facebook/callback",
      proxy: true
    
  )
);

大多数情况下发生的情况是，例如，当您通过 Heroku 部署或应用程序时，他们有一个代理，允许 Heroku 将请求定向到您的特定服务器，并且 Passport 假设如果您的请求通过代理，它可能不安全（所以...没有 https）。 解决此问题的第二种方法是使用回调URL 的特定路径。 例如，不要使用：

callbackURL: "/auth/facebook/callback"

你会使用：

callbackURL: https://mydomain/auth/facebook/callback

请记住，如果您要使用这种方法，您可能需要创建环境变量来保存您的特定 redirectURL 的值，以用于开发和生产。

【讨论】：

谢谢。这在 2020 年有所帮助。我正在研究 glitch.me