web-dev-qa-db-fra.com

Utiliser le bouton de connexion Facebook avec React

J'essaie l'authentification Facebook pour mon application pour la première fois. Je suis capable de le faire fonctionner correctement à travers un tutoriel, je peux connecter un utilisateur et le déconnecter en utilisant le bouton de connexion Facebook très pratique, comme indiqué dans un exemple de la documentation du SDK de Facebook ici:

https://developers.facebook.com/docs/facebook-login/web

J'adore utiliser ce bouton car il est facile de souscrire aux exigences de la marque Facebook automatiquement, et de devenir automatiquement un bouton de déconnexion Facebook lorsqu'un utilisateur est connecté. Parfait à tous points de vue. Voici à quoi ressemble le code du bouton avec la déconnexion automatique incluse:

<fb:login-button data-auto-logout-link="true" scope="public_profile" onlogin="checkLoginState();">
</fb:login-button>

On dirait de la sauce, jusqu’à ce que je l’essaye dans une page ReactJS.

// From the tutorials
<script type='text/babel'>
  var CommentBox = React.createClass({
    render: function() {
      return (
        <div className="commentBox">
          Hello, world! I am a CommentBox.<br />
          // MY ADDITION ... it breaks
          <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();">
          </fb:login-button>
        </div>
      );
    }
  });
  ReactDOM.render(
    <CommentBox />,
    document.getElementById('content')
  );
</script>

J'ai aussi essayé comme ça:

ReactDOM.render(
    <fb:login-button data-auto-logout-link="true" scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>,
    document.getElementById('loginbutton')
);

Je ne peux pas inclure le bouton de connexion FB SDK de cette manière car il indique "JSX n'est pas XML". Assez juste je suppose.

Est-il possible d'inclure ce bouton pratique dans une page React ou dois-je simplement créer un bouton FB personnalisé? J'aurais pensé que cela semblait être un cas d'utilisation courant, et comme Facebook nous a donné React, je suis surpris de ne pouvoir trouver un moyen d'utiliser plus facilement cette solution. (Faire le bouton personnalisé n'est pas la fin du monde, mais je veux savoir s'il existe un moyen meilleur/plus facile.)

reactjsfacebook-javascript-sdkreact-jsx
5
Steverino

Utilisez le générateur de code fourni par Facebook à l'adresse:

https://developers.facebook.com/docs/facebook-login/web/login-button

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true"></div>

Notez que pour que cela fonctionne avec la fonction onlogin du SDK de Facebook illustrée dans le didacticiel, vous devez ajouter un attribut personnalisé pour lier la fonctionnalité, par exemple:

<div class="fb-login-button" data-size="medium" data-auto-logout-link="true" data-onlogin="checkLoginState();"></div>

De plus, le générateur de code donnera plus de spécifications au processus d’amorçage du SDK que ce qui est indiqué dans le tutoriel par défaut. So au lieu de ce code fourni par le tutoriel :

// This won't work w/ custom <div ...> login buttons
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Vous devez utiliser quelque chose de plus semblable à cela, depuis le générateur de code:

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=YOUR-APP'S-ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Cela garantira que tout fonctionne correctement avec la version correcte (par exemple 2.8 vs 2.5) du SDK afin d'éviter toute série d'erreurs de console avec l'inclusion d'une version personnalisée du bouton de connexion FB SDK.

4
Don Rhummy

Vous pouvez utiliser un paquet existant tel que react-facebook-login .

Ou lisez sa source pour vous inspirer. 

1
abumalick