En este documento te indicamos los pasos para implementar el inicio de sesión con Facebook mediante Facebook SDK for JavaScript en tu página web.
Necesitarás lo siguiente:
Si por cualquier motivo no puedes usar el SDK para JavaScript, puedes crear manualmente un proceso de inicio de sesión para implementar el inicio de sesión con Facebook.
En el panel de aplicaciones, elige tu aplicación, desplázate a Añadir un producto y haz clic en Configurar en el cuadro Inicio de sesión con Facebook. Selecciona Configuración en el panel de navegación izquierdo y, en Configuración del cliente de OAuth, introduce la URL de redireccionamiento en el campo URI de redireccionamiento de OAuth válidos para autorizarla correctamente.
Cuando se carga la página web, el primer paso es determinar si el usuario ya tiene la sesión iniciada en ella con el inicio de sesión con Facebook. Cuando realizas una llamada a FB.getLoginStatus
, se inicia una llamada a Facebook para obtener el estado de inicio de sesión. Después, Facebook llama con los resultados a tu función de devolución de llamada.
FB.getLoginStatus(function(response) { statusChangeCallback(response); });
{ status: 'connected', authResponse: { accessToken: '{access-token}', expiresIn:'{unix-timestamp}', reauthorize_required_in:'{seconds-until-token-expires}', signedRequest:'{signed-parameter}', userID:'{user-id}' } }
El elemento status
especifica el estado de inicio de sesión de la persona que utiliza la página web. El elemento status
puede ser uno de los siguientes:
Tipo de Status | Descripción |
---|---|
| La persona ha iniciado sesión en Facebook y en tu página web. |
| La persona ha iniciado sesión en Facebook, pero no en tu página web. |
| La persona no ha iniciado sesión en Facebook, de modo que no sabes si lo ha hecho en tu página web. También es posible que se haya llamado al método FB.logout() anteriormente y que no se pueda conectar a Facebook. |
Si el valor del estado es connected
, se incluyen los siguientes parámetros de authResponse
en la respuesta:
Parámetros de authResponse | Valor |
---|---|
| Identificador de acceso de la persona que usa la página web. |
| Marca de tiempo UNIX que indica cuándo caduca el identificador. Una vez que caduca el identificador, la persona tiene que volver a iniciar sesión. |
| Período de tiempo antes de que caduque el inicio de sesión y la persona necesite volver a iniciar sesión, en segundos. |
| Parámetro firmado que contiene información sobre la persona que usa la página web. |
| Identificador de la persona que usa la página web. |
El SDK para JavaScript detecta automáticamente el estado de inicio de sesión, de modo que no tienes que hacer ninguna acción para activar este comportamiento.
Si una persona abre tu página web, pero no ha iniciado sesión en ella o en Facebook, puedes usar el cuadro de diálogo de inicio de sesión para pedirle que inicie sesión en ambos sitios. Si la persona no ha iniciado sesión en Facebook, se le pedirá que lo haga y, después, que inicie sesión en tu página web.
Una persona puede iniciar sesión de dos modos:
Para usar el botón "Iniciar sesión" de Facebook, utiliza el configurador del plugin para personalizar el botón "Iniciar sesión" y obtener el código.
Para usar tu propio botón de inicio de sesión, invoca el cuadro de diálogo de inicio de sesión con una llamada a FB.login()
.
FB.login(function(response){ // handle the response });
Cuando una persona hace clic en tu botón HTML, se muestra una ventana emergente con el cuadro de diálogo de inicio de sesión. Este cuadro de diálogo te permite solicitar permisos para acceder a los datos de una persona. Se puede pasar el parámetro scope
junto con la llamada a la función FB.login()
. Este parámetro opcional es una lista de permisos separados por comas que una persona debe confirmar para que tu página web pueda acceder a sus datos.
En este ejemplo, se pide permiso al usuario que inicia sesión para acceder a su perfil público y correo electrónico desde la página web.
FB.login(function(response) { // handle the response }, {scope: 'public_profile,email'});
Las respuesta (ya sea para conectarse o cancelarlo) devuelve un objeto authResponse
a la devolución de llamada especificada cuando llama al método FB.login()
. Esta respuesta puede detectarse y gestionarse en el método FB.login()
.
FB.login(function(response) { if (response.status === 'connected') { // Logged into your webpage and Facebook. } else { // The person is not logged into your webpage or we are unable to tell. } });
Para cerrar la sesión de una persona en tu página web, adjunta la función FB.logout()
del SDK para JavaScript a un botón o enlace.
FB.logout(function(response) { // Person is now logged out });
Nota: Esta llamada a la función también puede cerrar la sesión de Facebook de la persona.
Además, el cierre de sesión en tu página web no revoca los permisos que el usuario concedió a tu página web durante el inicio de sesión. La revocación de permisos se debe realizar por separado. Diseña tu página web de modo que el cuadro de diálogo de inicio de sesión no se muestre a los usuarios que cerraron sesión cuando la vuelvan a iniciar.
Este código carga e inicializa el SDK para JavaScript en tu página HTML. Reemplaza {app-id}
por el identificador de la aplicación y {api-version}
por la versión de API Graph que se va a usar. A menos que tengas una razón concreta para usar una versión anterior, especifica la versión más reciente: v9.0
.
<!DOCTYPE html> <html> <head> <title>Facebook Login JavaScript Example</title> <meta charset="UTF-8"> </head> <body> <script> function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus(). console.log('statusChangeCallback'); console.log(response); // The current login status of the person. if (response.status === 'connected') { // Logged into your webpage and Facebook. testAPI(); } else { // Not logged into your webpage or we are unable to tell. document.getElementById('status').innerHTML = 'Please log ' + 'into this webpage.'; } } function checkLoginState() { // Called when a person is finished with the Login Button. FB.getLoginStatus(function(response) { // See the onlogin handler statusChangeCallback(response); }); } 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. }); FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized. statusChangeCallback(response); // Returns the login status. }); }; function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made. 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> <!-- The JS SDK Login Button --> <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button> <div id="status"> </div> <!-- Load the JS SDK asynchronously --> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script> </body> </html>