Étape 2: mise en œuvre
Nous implémenterez ensuite, connectez-vous en utilisant Facebook. Tout ce que nous devons faire est de copier et collez le code qui nous sont fourni par Facebook pour créer la connexion sociale de Facebook et remplacez l’espace réservé par votre propre identifiant d’application Facebook. Je va être expliquant le même code avec ma personnalisation offert dans la codepen ci-dessous.
Permet d’ajouter l’interface de connexion de Facebook. Vous aurez envie de placer ce code dans la section body de votre code html.
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();"><br></fb:login-button><br><div id="status"><br></div>
Ensuite, vous remarquerez cette section de code à la fin de la section de JavaScript. Cet extrait de code JavaScript SDK Facebook charge de façon asynchrone. Il fournit également la bibliothèque JavaScript qui est utilisée pour rendre votre interface de connexion Facebook.
// Load the SDK asynchronously<br>(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')); Maintenant, il suffit de remplacer l’espace réservé d’id app avec l’id de l’application de votre application, que vous avez créé au début. Vous trouverez l’espace réservé à cette ligne appId: « {votre app-id} ». Cette fonction est juste au-dessus de chargement JavaScript asynchrone.
window.fbAsyncInit = function() {<br>FB.init({ appId : '{your-app-id}', cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.1' // use version 2.1 });</p><p>// Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus(). // This function gets the state of the person visiting this page. FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }; Ensuite, nous allons ajouter la fonction qui gère la réponse et modifie le contenu de la page selon le type de réponse. J’ai cette fonction située tout en haut de la section scripts.
// This is called with the results from from FB.getLoginStatus().<br>function statusChangeCallback(response) { // The response object is returned with a status field that lets the app know the current login status of the person. if (response.status === 'connected') { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; }); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } } Comme vous pouvez le voir, la fonction ci-dessus reçoit une variable de réponse et vérifie son état. S’il est connecté il va chercher les utilisateurs enregistres dans infos et affiche ces informations dans la console de votre navigateur, que la zone est où vous pourriez construire davantage sur ce script pour gérer les données. Vous noterez également le statut de not_authorized. Lorsque la connexion n’est pas autorisée, cette fonction a changé le code html sur votre page pour vous demander d’ouvrir une session. Mais comment cette fonction s’habituer ? Dans cette fonction suivante, cela est géré lorsque quelqu'un clique sur le bouton Facebook sur la page. Avis de la onlogin="checkLoginState() ; dans votre code html de corps pour le bouton de Facebook.
// This function is called when someone finishes with the Login Button.<br>function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); } Maintenant, si vous enregistrez cette page sous le nom index.html, ouvrez dans un navigateur, vous devriez voir le bouton de connexion Facebook. Vous pouvez utiliser le code fourni par facebook sur le lien ci-dessus ou vous pouvez utiliser le code de codepen que j’ai modifié pour le rendre un peu plus court pour les explications.
