web-dev-qa-db-fra.com

Connexion Facebook sur localhost - connexion non sécurisée

J'ajoute une connexion Facebook à notre React, en utilisant le SDK Javascript Facebook. J'ai suivi cette tutoriel .

Lorsque je clique sur le bouton de connexion que j'ai ajouté à la page, l'erreur suivante s'affiche:

Facebook a détecté que X n'utilise pas de connexion sécurisée pour transférer des informations. Jusqu'à ce que X mette à jour ses paramètres de sécurité, vous ne pourrez pas utiliser Facebook pour vous y connecter.

enter image description here

Mon application est en mode développement, ce qui devrait signifier (selon les documents Facebook) que les redirections vers l'hôte local sont autorisées, mais ce n'est pas le cas.

J'ai également essayé d'ajouter localhost à Valid OAuth Rediriger les URI dans la page des développeurs Facebook, mais cela n'a pas résolu le problème.

J'ai réussi à résoudre le problème partiellement en utilisant ngrok après cela tutoriel , mais il est très bogué (parfois ne fonctionne pas) et peu pratique à travailler, car je dois souvent redémarrer tout le serveur et tout .

javascriptreactjsfacebookhttphttps
9
druskacik

Vous devez d'abord utiliser un nom de domaine, vous pouvez le faire dans votre fichier hosts

/ etc/hosts:

127.0.0.1   test.example.com
255.255.255.255 broadcasthost
::1             localhost

puis vous devez mettre à jour votre script de démarrage comme

package.json:

...
"start": "HTTPS=true react-scripts start"
...

et démarrez votre application reactjs avec:

npm run start

vous verrez alors votre application sur https://test.example.com et bien sûr vous devez ajouter ce domaine à votre application facebook comme URL de confiance

1
Okkano

En cas d'angulaire: essayez de servir votre application en couche socket sécurisée en vrai mode facebook détecte une connexion non sécurisée

Utilisez la commande suivante: ng serve --ssl true

1
Prakash Khadka

Pas besoin d'utiliser ngrok ou autres.

Assurez-vous d'avoir spécifié votre mode de développementapp-id De l'application Facebook dans

window.fbAsyncInit = function() {
    FB.init({
        appId      : '{app-id}',
        cookie     : true,                     // Enable cookies to allow the server to access the session.
        xfbml      : true,                     // Parse social plugins on this webpage.
        version    : '{api-version}'           // Use this Graph API version for this call.
    });
...

Et redémarrez le serveur après cette mise à jour.

0
Pavel Bely

enter image description here

En mode développement, si vous utilisez un utilisateur réel pour vous connecter, envisagez d'utiliser un utilisateur de test.

Pour créer un utilisateur de test, suivez les étapes comme dans l'image ci-dessus

  1. Assurez-vous que le mode de développement est activé
  2. Accédez à Rôles
  3. Accédez à Utilisateurs de test
  4. Vous pouvez ajouter ou utiliser les utilisateurs de test existants

Vous pouvez maintenant faire la connexion sociale avec ce nouvel utilisateur

NB: Vous pouvez définir le mot de passe en:

  1. en cliquant sur modifier ,
  2. puis en cliquant sur changer le nom ou le mot de passe de cet utilisateur de test
0
Diyen Momjang

Je confirme que vous pouvez utiliser le rappel http://localhost sans SSL lorsque votre application est en état "En développement".

Je suis venu ici parce que mon rappel était http://localhost.localdomain, un hack que j'ai fait avant 2018 pour l'authentification Facebook en fait, et cela ne fonctionnait pas sur Chome 78.

0
Fred

En raison des modifications de sécurité sur Facebook, vous ne pouvez vous connecter à partir d'un simple HTTP que si vous désactivez le https et êtes en modèle de développement sur votre application Facebook, voici une image explicative

Correct fb configuration to enable login from http instead of https

0
Camilo Casadiego