it-swarm.com.de

Unsichere Anmeldung blockiert: Sie können von einer unsicheren Seite kein Zugriffstoken erhalten oder sich bei dieser App anmelden. Versuchen Sie, die Seite erneut als https: // zu laden.

Ich implementiere die Passport-Facebook-Authentifizierung, indem ich die Route der Facebook-Authentifizierungs-API mithilfe von href mit einer Schaltfläche verknüpft: 

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

Wenn ich auf die Schaltfläche klicke, wird auf die Facebook-Authentifizierungsseite umgeleitet. Auf der Seite wird jedoch eine Fehlermeldung angezeigt, in der Folgendes angezeigt wird:"Unsicherer Login blockiert: Sie können kein Zugriffstoken erhalten oder sich von einer unsicheren Seite aus bei dieser App anmelden. Versuchen Sie, die Seite erneut als https zu laden: // "

Wie kann ich dieses Problem beheben?

13

Erstaunlicherweise habe ich gerade versucht, dasselbe zu tun wie vor einer Stunde und hatte das gleiche Problem. Wenn Sie in das FB-Entwicklerportal gehen und unter Facebook Login zu Settings gehen, können Sie HTTPS erzwingen.

 enter image description here

Weitere Untersuchungen gezeigt:

"Erzwingen Sie HTTPS. Diese Einstellung setzt voraus, dass HTTPS für OAuth-Weiterleitungen und Seiten Zugriffstoken mit dem JavaScript-SDK erhalten. Für alle neuen Apps, die ab März 2018 erstellt wurden, ist diese Einstellung standardmäßig aktiviert. Sie sollten die Migration vorhandener Apps planen, um nur HTTPS-URLs zu verwenden März 2019. Die meisten großen Cloud-Anwendungshosts bieten eine kostenlose und automatische Konfiguration von TLS-Zertifikaten für Ihre Anwendungen.Wenn Sie Ihre App selbst hosten oder Ihr Hosting-Service standardmäßig kein HTTPS anbietet, können Sie ein kostenloses Zertifikat für Ihre Domain (s) anfordern ) von Let's Encrypt. "

Referenz: Login-Sicherheit

16
Christopher

Da Sie passport verwenden, überprüfen Sie auch Ihre auth.js-Einstellungen oder wo immer Sie diese Einstellungen beibehalten. Auch wenn Ihre Website über ein Zertifikat verfügt , schlägt der folgende Code fehl:

'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'] 
},

Das Problem liegt bei der callbackUrl

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

Die obigen Aussagen werden beide fehlschlagen. Die CallbackUrl muss mit https beginnen. Die erste versucht, http://localhost zu laden und die callbackUrl anzuhängen. Der zweite lädt obivious die volle URL mit http, und beide können sich nicht mit dem FB verbinden. Versuchen Sie also eine der folgenden Möglichkeiten. Wenn Ihre Site über ein Zertifikat verfügt, geben Sie die vollständige URL an. Wenn Sie dies auf einem localhost testen, erstellen Sie Ihr eigenes Zertifikat und greifen Sie über https wie folgt zu:

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

Da Facebook die Verwendung von HTTPS für unsere Umleitungs-URIs erfordert, können Sie ngrok bei localhost verwenden, um einen lokalen sicheren HTTP-Tunnel zu starten. Es ist eine saubere und schnell vorgeschlagene Alternative für jetzt.

  • Erhalten Sie offizielles ngrok-Paket
  • Entpacken Sie in Ihr bevorzugtes Verzeichnis unzip /opt/ngrok.Zip;
  • Erstellen Sie Ihren ersten HTTP-Tunnel: /opt/ngrok http 3000

Weitere große Anwendungsfälle finden Sie in ngrok docs .

3

Um dies zu beheben, generieren Sie für die lokale Entwicklung SSL-Zertifikate auf Ihrem Computer. Führen Sie die folgenden Befehle aus (getestet auf Mac High Sierra, Sie benötigen die auf Ihrem Betriebssystem installierte openssl lib), um eine cert.pem- und eine key.pem-Datei in Ihrem Arbeitsverzeichnis zu erstellen.

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

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

Ändern Sie Ihren Node-HTTP-Server zur Verwendung von https. Sie müssen das https-Modul anstelle des http-Moduls importieren.

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>)

Rufen Sie die App auf Ihrer Facebook-Entwicklerkonsole auf, und legen Sie die Gültigen OAuth-Umleitungs-URIs auf die https-Version Ihrer localhost-Domäne fest. Machen Sie dasselbe für die App-Domain und die Site-URL.

1
Enogwe Victor

verwenden Sie ein VPN für mich gearbeitet Cyber ​​Ghost ist kostenlos versuchen Sie es

0
Scott Seiber

Es gibt zwei Möglichkeiten, das zu lösen: Zuerst: Sie können zu Ihrer Google Passport-Strategie wechseln und Proxy hinzufügen: true

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

Meistens passiert, dass bei der Bereitstellung oder App über Heroku beispielsweise ein Proxy vorhanden ist, über den Heroku die Anforderungen an Ihren spezifischen Server weiterleiten kann, und Passport geht davon aus, dass Ihre Anforderung einen Proxy durchläuft safe (also ... kein https) . Der zweite Weg, den Sie lösen können, besteht darin, einen bestimmten Pfad für Ihre callbackURL ..__ zu verwenden. Anstelle von:

callbackURL: "/auth/facebook/callback"

sie würden verwenden:

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

Beachten Sie, dass Sie bei Verwendung dieses Ansatzes möglicherweise Umgebungsvariablen erstellen müssen, um die Werte Ihrer spezifischen redirectURL sowohl für die Entwicklung als auch für die Produktion zu speichern. 

0
Ygor D.

Ändern Sie in Ihrer Passeinstellung Ihre Weiterleitungs-URL in https: // someUrl .__ 

0
Anand Sharma

In meinem Fall habe ich meine package.json-Datei geändert.

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

Ich hoffe dir helfen.

0
joe1220

Dies für die PHP-SDK-Referenz 

Nun ist https erforderlich, damit sich die Webanwendung über Facebook anmelden kann. 

Das folgende Verfahren ist erforderlich, um eine gültige Authentifizierung von Facebook zu erhalten.

Grundlegende Einstellungen

  1. legen Sie App Domains als Root-Domäne fest (www.example.com). 
  2. URL der Datenschutzerklärung (https://www.example.com/privacy-demo/)
  3. URL der Nutzungsbedingungen (https://www.example.com/terms-demo/)
  4. Kategorie einstellen
  5. Site-URL (https://www.example.com/facebook-login/) facebook-login Dieser Ordner enthält meine gesamten Facebook-Anmeldedateien

    Erweitert

  6. Server-IP-Whitelist (Ihre Host-IP-Adresse 124.25.48.36)

Produkte unter den Facebook-Login-Einstellungen

  1. Gültige OAuth-Weiterleitungs-URIs (https://www.example.com/facebook-login/fb-callback.php)

Schnellstart

  1. Wählen Sie die Website aus, setzen Sie die Website-URL (https://www.example.com/facebook-login/).

Speichern Sie alle Änderungen und leben Sie Ihre App (z. B. in Ihrer App). Jetzt wird Ihr App-Status live.

Sie können diesen Code beziehen https://github.com/facebook/php-graph-sdk

0
Rijo