cómo integrar el inicio de sesión de Facebook con su sitio web?

Question

Investigué y parece que no entiendo completamente cómo integrar el inicio de sesión de Facebook con su sitio web.

Estoy tratando de hacer esto para una tienda de php antigua que, hasta ahora, no utiliza ningún tipo de inicio de sesión, pero solo una sesión que permite a los usuarios navegar por las páginas y agregar elementos al carrito.

He leído aquí, en stackoverflow, que necesita una tabla en su base de datos para mantener la dirección de correo electrónico del usuario y facebook_id. Entonces, después de eso, ¿puedo conectarme con otras tablas en mi db para proporcionar información y mucho más a cada usuario?

¿Hay otras maneras de integrar fácilmente su sitio web con facebook & cuentas de google? Leí algo sobre OpenID, pero realmente no entendí de qué sirve :)

Así que por eso les pido que me pongan en camino :). Soy realmente nuevo con esto y cualquier consejo, mejores prácticas, etc. serán muy apreciados.

Gracias!

Answer 1

La idea detrás del inicio de sesión de Facebook es simple: el usuario va a la página de Facebook, inicia sesión allí, Facebook se preocupa por los detalles y finalmente le da (a su servidor) un pulgar y una identificación, lo que significa "tenemos confirmó positivamente la identidad de este usuario, es el usuario 174264384 ". Su servidor puede hacer lo que quiera con esta información. Si desea rastrear a un usuario en varias visitas, entonces sí, probablemente desee almacenar ese número en una base de datos junto con cualquier información adicional. La próxima vez que Facebook le avise que el usuario 174264384 se ha conectado, puede recuperar cualquier información asociada de su base de datos.

Espero que ayude como una vista general de 30,000 pies. Los detalles de cómo Facebook puede autenticar de forma segura a un usuario y devolver esta información a su servidor se manejan mejor con el PHP SDK. Lea el si desea explorar los detalles.

OpenID básicamente hace lo mismo, solo difieren los detalles técnicos y no es específico de Facebook. Oauth es otra tecnología muy similar.

Answer 2

Este tipo de tecnología (llamada OpenConnect, si no me equivoco, y están cambiando a OAuth) es algo similar con OpenID.

Google, de hecho, usa openID, y no estoy muy seguro de cómo funcionan.

Para FacebookConnect, registre su aplicación en Facebook (https://developers.facebook.com/apps) y aquí encontrará detalles sobre auth https://developers.facebook.com/docs/authentication/.

La idea es que obtendrá un código de autorización que envíe de nuevo a Facebook y obtenga un access_token, lo que significa que su usuario está autenticado en su sitio web. Puede almacenar esto en $ _SESSION var Creo que ... No hay necesidad de almacenar nada en DB, pero en su configuración particular puede usar el ID de usuario como el identificador de usuario único.

Answer 3

Antes de usar Outh/OpenID utilizamos para pedir al usuario en nuestro sitio web que proporcione su nombre de usuario y contraseña para sitios respetados como Facebook, Google. Luego, usando Curl, buscamos los datos de estos sitios sociales en nombre de nuestro usuario. Entonces, estos datos se convierten en la fuente de nuestros datos de formularios de registro. Como solicitar su nombre, correo electrónico y sexo en el formulario de inscripción, se puede omitir.

Dado que el usuario puede tener miedo de dar su nombre de usuario y contraseña a cada sitio, surge la necesidad de Outh. Ahora simplemente redireccionamos al usuario a Facebook, Facebook solicita la contraseña del usuario. Y redirige al usuario a nuestro sitio con token de autenticación adjunto en la url. Que podemos obtener a través de $ _GET. Usando este token podemos consultar facebook para todo lo relacionado con ese usuario y, por lo tanto, podemos omitir el formulario de registro una vez más. Estos datos se almacenan en la tabla que se destinó al almacenamiento de los campos del Formulario de registro.

(Esto es sólo una visión general hay otros pasos como, bueno para cuidar apagado)

Answer 4

Hay un tutorial de Facebook oficial sobre cómo hacer esto con JS:

Official Facebook Tutorial

Answer 5

I pensó que será útil para usted, si usted desea utilizar Javascript SDK para esto, por favor copie el código:

<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> 

encontré el guión de au tutorial completo, si está pensando en editar esta respuesta, consulte este tutorial Facebook Login Integration with website