web-dev-qa-db-fra.com

Connexion non sécurisée bloquée: vous ne pouvez pas obtenir de jeton d'accès ni vous connecter à cette application à partir d'une page non sécurisée. Essayez de recharger la page en tant que https: //

J'implémente l'authentification Passport Facebook en liant l'itinéraire de l'API d'authentification Facebook à un bouton utilisant href, comme: 

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

Lorsque je clique sur le bouton, il redirige vers la page d'authentification de Facebook. Mais sur la page, un message d'erreur indiquant quelque chose comme"Connexion non sécurisée bloquée: vous ne pouvez pas obtenir de jeton d'accès ni vous connecter à cette application à partir d'une page non sécurisée. Essayez de recharger la page au format https: // "

Comment puis-je résoudre ce problème?

httpspassport.jsfacebook-authenticationpassport-facebook
13
Nimish David Mathew

Étonnamment, je viens juste de commencer à essayer de faire la même chose qu’il ya une heure et d’avoir le même problème. Si vous accédez au portail de développement FB et accédez à Paramètres sous Connexion Facebook, l'option Enforce HTTPS est activée.

 enter image description here

_ {Enquête supplémentaire montrée}:

"Appliquer HTTPS. Ce paramètre requiert HTTPS pour les redirections OAuth et les pages obtenant des jetons d'accès avec le SDK JavaScript. Ce paramètre est activé par défaut pour toutes les nouvelles applications créées à partir de mars 2018 et vous devez planifier la migration de toutes les applications existantes afin qu'elles n'utilisent que les URL HTTPS." Mars 2019. La plupart des principaux hébergeurs d'applications cloud proposent une configuration gratuite et automatique des certificats TLS pour vos applications. Si vous auto-hébergez votre application ou que votre service d'hébergement n'offre pas le protocole HTTPS par défaut, vous pouvez obtenir un certificat gratuit pour votre ou vos domaines. ) de Let's Encrypt ".

Référence: Sécurité de connexion

16
Christopher

Puisque vous utilisez passport, vérifiez également vos paramètres auth.js ou à tout autre endroit où vous les conserverez. Même si votre site Web dispose d'un certificat , le code suivant échouera quand même:

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

Le problème réside dans la callbackUrl. 

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

Les déclarations ci-dessus vont échouer toutes les deux. CallbackUrl doit commencer par https. Le premier essaiera de charger http://localhost et d’ajouter le callbackUrl. Le second charge de manière évidente l'URL complète avec http et les deux ne parviennent pas à se connecter avec FB. Alors essayez l'une des solutions suivantes. Si votre site dispose d'un certificat, indiquez l'URL complète. Si vous testez cela sur un hôte local, créez votre propre certificat et accédez-y par https comme:

'callbackURL'   : 'https://example.com/auth/facebook/callback'
'callbackURL'   : 'https://localhost:9999/auth/facebook/callback'
4
Kurt Van den Branden

Puisque Facebook requiert l'utilisation de HTTPS pour nos URI de redirection, nous pouvons utiliser ngrok sur localhost pour démarrer un tunnel HTTP sécurisé local. C'est une alternative suggérée propre et rapide pour le moment.

  • Obtenir paquet officiel ngrok
  • Décompressez dans votre répertoire préféré unzip /opt/ngrok.Zip;
  • Faites votre premier tunnel HTTP: /opt/ngrok http 3000

Voir plus d’excellents cas d’utilisation dans ngrok docs .

3
Lindoélio Lázaro

Pour réparer, pour le développement local, générer des certificats SSL sur votre machine. Exécutez les commandes ci-dessous (testées sur Mac High Sierra, vous aurez besoin de la librairie openssl installée sur votre système d'exploitation) pour créer un fichier cert.pem et un fichier key.pem dans votre répertoire de travail.

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

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

Changez le serveur http de votre noeud pour qu'il utilise https. Vous devrez importer le module https à la place du module 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>)

Accédez à l'application sur votre console de développeur facebook et définissez les URI de redirection OAuth valides sur la version https de votre domaine localhost. Faites la même chose pour le domaine d'application et l'URL du site.

1
Enogwe Victor

utiliser un vpn travaillé pour moi cyber fantôme est gratuit essayez-le

0
Scott Seiber

Il existe deux manières de résoudre ce problème: Premièrement: Vous pouvez accéder à votre stratégie Google Passport et ajouter un proxy: true

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

La plupart du temps, par exemple, lorsque vous déployez ou appliquez une application via Heroku, ils ont un proxy qui permet à Heroku de diriger les requêtes vers votre serveur spécifique et Passport suppose que si votre requête passe par un proxy, elle risque de ne pas safe (So ... No https) . La deuxième façon de résoudre ce problème consiste à utiliser un chemin spécifique pour votre callbackURL . Par exemple, au lieu d'utiliser:

callbackURL: "/auth/facebook/callback"

vous utiliseriez:

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

Gardez à l'esprit que si vous envisagez d'utiliser cette approche, vous devrez peut-être créer des variables d'environnement pour conserver les valeurs de votre redirectURL spécifique, tant pour le développement que pour la production. 

0
Ygor D.

Dans les paramètres de votre passeport, modifiez votre URL de redirection en https: // someUrl 'Https' est important. 

0
Anand Sharma

Dans mon cas, j'ai modifié mon fichier package.json.

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

J'espère vous aider.

0
joe1220