web-dev-qa-db-fra.com

comment intégrer la connexion facebook à votre site web?

J'ai fait quelques recherches et je n'arrive pas à comprendre complètement comment intégrer la connexion Facebook à votre site Web.

J'essaie de le faire pour une boutique php à l'ancienne qui, jusqu'à présent, n'utilise aucun type de connexion, mais seulement une session qui permet aux utilisateurs de parcourir les pages et d'ajouter des articles au panier.

J'ai lu ici, sur stackoverflow, que vous avez besoin d'une table dans votre base de données pour conserver l'adresse e-mail de l'utilisateur et facebook_id. Donc, après cela, je peux me connecter à d'autres tables dans ma base de données afin de fournir des informations et bien plus à chaque utilisateur?

Existe-t-il d'autres façons d'intégrer facilement votre site Web aux comptes Facebook et Google? J'ai lu quelque chose sur OpenID, mais je ne comprenais pas vraiment à quoi ça sert :)

C'est pourquoi je vous demande de me mettre sur la bonne voie :). Je suis vraiment nouveau avec cela et tous les conseils, meilleures pratiques, etc. seront grandement appréciés!

Merci!

28
Dan Dinu

L'idée derrière la connexion Facebook est simple: l'utilisateur se rend sur la page Facebook, s'y connecte, Facebook s'inquiète des détails et finalement vous donne (votre serveur) un coup de pouce et un identifiant, ce qui signifie "nous avons confirmé positivement l'identité de cet utilisateur, c'est l'utilisateur 174264384" . Votre serveur est alors libre de faire ce qu'il veut avec ces informations. Si vous souhaitez suivre un utilisateur sur plusieurs visites, alors oui, vous voudrez probablement stocker ce numéro dans une base de données avec toute information supplémentaire. La prochaine fois que Facebook vous indiquera que l'utilisateur 174264384 s'est connecté, vous pourrez récupérer toutes les informations associées de votre base de données.

J'espère que cela aide comme un aperçu de 30 000 pieds. Les détails de la façon dont Facebook peut authentifier un utilisateur en toute sécurité et remettre ces informations à votre serveur sont mieux gérés par le PHP SDK . Lisez la documentation si vous voulez explorer les détails.

OpenID fait essentiellement la même chose, seuls les détails techniques diffèrent et ce n'est pas spécifique à Facebook. Oauth est une autre technologie très similaire.

25
deceze

Il y a un tutoriel Facebook officiel sur la façon de le faire avec JS:

Tutoriel Facebook officiel

9
Jarrod

Ce type de technologie (appelé OpenConnect, si je ne me trompe pas, et ils passent à OAuth) est un peu la même avec OpenID.

Google, en effet, utilise openID, et je ne suis pas vraiment sûr de leur fonctionnement.

Pour FacebookConnect, vous enregistrez votre application sur Facebook ( https://developers.facebook.com/apps ) et vous trouverez des détails sur l'auth https://developers.facebook.com/ docs/authentication / ici.

L'idée est que vous allez obtenir un code d'autorisation que vous renvoyez à Facebook et obtenir un access_token qui signifie que votre utilisateur est authentifié avec votre site Web. Vous pouvez stocker cela dans une variable $ _SESSION je pense ... Il n'est pas nécessaire de stocker quoi que ce soit dans la base de données, mais dans votre configuration particulière, vous pouvez utiliser l'ID utilisateur comme identifiant utilisateur unique.

3
Andrei Zisu

Je pensais que cela vous serait utile, si vous souhaitez utiliser le javascript sdk pour cela, veuillez copier ce code:

<DOCTYPE html>

<html>

<head>

<title>Facebook Login JavaScript Example</title>

<meta charset=”UTF-8″>

</head>

<body>

<script>

// This is called with the results from from FB.getLoginStatus().

function statusChangeCallback(response) {

console.log(‘statusChangeCallback’);

console.log(response);

// The response object is returned with a status field that lets the

// app know the current login status of the person.

// Full docs on the response object can be found in the documentation

// for FB.getLoginStatus().

if (response.status === ‘connected’) {

// Logged into your app and Facebook.

testAPI();

} 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.';

}

}
// This function is called when someone finishes with the Login

// Button. See the onlogin handler attached to it in the sample

// code below.

function checkLoginState() {

FB.getLoginStatus(function(response) {

statusChangeCallback(response);

});

}
window.fbAsyncInit = function() {

FB.init({

appId : ‘{your-app-id}’,// plaste 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

});

// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {

statusChangeCallback(response);

});
};
// Load the SDK asynchronously

(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’));
// Here we run a very simple test of the Graph API after login is

// successful. See statusChangeCallback() for when this call is made.

function testAPI() {

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 + ‘!';

});

}

</script>

<fb:login-button scope=”public_profile,email” onlogin=”checkLoginState();”>

</fb:login-button>
<div id=”status”>

</div>
</body>

</html>

J'ai trouvé le script à partir d'un tutoriel utile, si vous envisagez de modifier cette réponse, veuillez consulter ce tutoriel Facebook Login Integration with website

3
Rahul Negi

Créer une table MySQL

CREATE TABLE `user_login` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `oauth_provider` enum('google','facebook') COLLATE utf8_unicode_ci NOT NULL,
 `oauth_uid` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `username` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
 `user_email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `gender` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
 `picture_url` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `register_date` datetime NOT NULL,
 `last_update_date` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Voir le code de démonstration https://datainflow.com/facebook-login-javascript-sdk/

0
Nisha Sharma