Небезопасный вход заблокирован: вы не можете получить токен доступа или войти в это приложение с небезопасной страницы. Попробуйте перезагрузить страницу как https://

Я реализую аутентификацию Passport Facebook, связывая API API аутентификации Facebook с кнопкой href, например:

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

Когда я нажимаю на кнопку, она перенаправляется на страницу проверки подлинности Facebook. На странице появляется сообщение об ошибке "Незащищенный вход в систему заблокирован: вы не можете получить токен доступа или войти в это приложение с небезопасной страницы. Попробуйте перезагрузить страницу как https://"

Как я могу исправить эту проблему?

Ответ 1

Удивительно, но я просто начал делать то же самое, что и час назад, и имел ту же проблему. Если вы заходите на портал разработчиков FB и переходите в " Настройки" в разделе " Войти в Facebook", есть опция Enforce HTTPS.

enter image description here

Дальнейшие исследования показали:

"Enforce HTTPS. Этот параметр требует HTTPS для перенаправления OAuth и страниц, получающих маркеры доступа с помощью JavaScript SDK. Все новые приложения, созданные с марта 2018 года, по умолчанию имеют этот параметр, и вы должны планировать перенос любых существующих приложений, чтобы использовать только HTTPS-URL Март 2019. Большинство крупных приложений облачных приложений предоставляют бесплатную и автоматическую настройку сертификатов TLS для ваших приложений. Если вы самостоятельно размещаете свое приложение или хостинг-сервис, по умолчанию не предоставляете HTTPS, вы можете получить бесплатный сертификат для своего домена ) от Let Encrypt. "

Ссылка: Вход Безопасность

Ответ 2

Поскольку Facebook требует использования HTTPS для наших URI перенаправления, мы можем использовать ngrok на localhost для запуска локального безопасного HTTP-туннеля. На данный момент это чистая и быстрая альтернатива.

  • Получить официальный пакет ngrok
  • Разархивируйте ваш предпочитаемый каталог unzip/opt/ngrok.zip;
  • Создайте свой первый HTTP-туннель: /opt/ngrok http 3000

Более подробные примеры использования в документах ngrok.

Ответ 3

Поскольку вы используете 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. Второй похвально загружает полный URL-адрес с помощью http, и оба не могут подключиться к FB. Поэтому попробуйте одно из следующего. Если у вашего сайта есть сертификат, укажите полный URL-адрес. Если вы тестируете это на локальном хосте, создайте свой собственный сертификат и получите доступ к нему через https:

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

Ответ 4

Чтобы исправить локальную разработку, сгенерируйте сертификаты ssl на вашем компьютере. Запустите приведенные ниже команды (протестированные на Mac High Sierra, вам понадобится библиотека openssl lib, установленная на вашем os), чтобы создать 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 и установите для URI верных адресов OAuth версию https вашего домена localhost. Сделайте то же самое для домена приложения и URL-адреса сайта.

Ответ 5

В моем случае я изменил файл package.json.

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

Я надеюсь помочь вам.

Ответ 6

Это для ссылки php sdk

Теперь для входа в систему через Facebook требуется https.

Требуется следующая процедура, чтобы получить достоверную аутентификацию от Facebook.

Основные сидения

  1. установите Домены приложений в качестве корневого домена (www.example.com)
  2. URL-адрес политики конфиденциальности (https://www.example.com/privacy-demo/)
  3. URL-адрес службы обслуживания (https://www.example.com/terms-demo/)
  4. Установить категорию
  5. URL сайта (https://www.example.com/facebook-login/) facebook-login Эта папка содержит все мои файлы входа в facebook

    продвинутый

  6. IP-адрес сервера (ваш IP-адрес хоста 124.25.48.36)

Продукты ниже настроек входа в Facebook

  1. Действительные URI перенаправления OAuth (https://www.example.com/facebook-login/fb-callback.php)

Быстрый старт

  1. Выберите URL-адрес веб-сайта для сайта (https://www.example.com/facebook-login/)

Сохраните все изменения и разместите свое приложение (то есть: в своем приложении). Теперь будет отображаться статус вашего приложения.

Вы можете сослаться на этот код https://github.com/facebook/php-graph-sdk

Ответ 7

использовать vpn работал для меня, кибер-призрак, попробовал это

Ответ 8

В настройках паспорта измените URL-адрес перенаправления на некоторые https://someUrl 'https' важен

Ответ 9

Есть два способа решить эту проблему: Во-первых: вы можете перейти к своей стратегии паспорта Google и добавить прокси: true

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

В большинстве случаев, когда вы развертываете или добавляете приложение через Heroku, у них есть прокси, который позволяет Heroku направлять запросы на ваш конкретный сервер, и Passport предполагает, что если ваш запрос проходит через прокси-сервер, это может быть не так безопасно (так... Нет https). Второй способ, который вы можете решить, - это использовать определенный путь для вашего callbackURL. Например, вместо использования:

callbackURL: "/auth/facebook/callback"

вы должны использовать:

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

Имейте в виду, что если вы собираетесь использовать этот подход, вам может потребоваться создать переменные среды для хранения значений вашего конкретного redirectURL для разработки, а также для производства.