Inicie sesión con Facebook en CodeIgniter usando JavaScript SDK

Facebook JavaScript SDK proporciona la forma más sencilla de implementar el sistema de inicio de sesión con Facebook en el sitio web. Con JavaScript SDK, puede permitir que el usuario inicie sesión en la aplicación web con su cuenta de Facebook. El usuario puede iniciar sesión en su aplicación web utilizando su cuenta de Facebook existente sin registrarse en su sitio web.
Varios SDK y API están disponibles para integrar el inicio de sesión de Facebook en el sitio web. Sin embargo, el SDK de JavaScript de Facebook es la forma más fácil de integrar el inicio de sesión de Facebook en la aplicación web. Le permite implementar el inicio de sesión con Facebook sin actualizar la página usando JavaScript SDK. En este tutorial, le mostraremos cómo integrar el inicio de sesión con Facebook en CodeIgniter utilizando JavaScript SDK y Graph API.
Se implementarán las siguientes funcionalidades para implementar el inicio de sesión de Facebook en CodeIgniter.
  • Autentica al usuario con la cuenta de Facebook usando JavaScript SDK.
  • Recupera la información del perfil del usuario usando Graph API.
  • Almacena los datos del perfil del usuario en la base de datos MySQL.

Creación de aplicaciones de Facebook

Para acceder al SDK de JavaScript de Facebook, debe crear una aplicación de Facebook y especificar el ID de la aplicación en su llamada a la API. Para generar la ID de la aplicación en la cuenta de desarrollador de Facebook, siga esta guía paso a paso: cómo crear la aplicación de Facebook, la ID de la aplicación y el secreto de la aplicación
Después de crear la aplicación de Facebook, copie la ID de la aplicación y colóquela en la opción correspondiente de la init()función en el código JavaScript.

Crear tabla de base de datos

Para almacenar los datos del perfil de Facebook del usuario, se debe crear una tabla en la base de datos. El siguiente SQL crea una userstabla con algunos campos básicos en la base de datos MySQL.
CREATE  TABLE ` usuarios ` (
  `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
  ` oauth_provider`  varchar ( 50 ) COLLATE utf8_unicode_ci NOT NULL ,
  `oauth_uid`  varchar ( 100 ) COLLATE utf8_unicode_ci NOT NULL ,
  ` first_name`  varchar ( 50 ) COLLATE utf8_unicode_ci NOT NULL ,
  `last_name`  varchar ( 50 ) COLLATE utf8_unicode_ci NOT NULL ,
  ` email`  varchar( 100 ) COLLATE utf8_unicode_ci NOT NULL ,
  `gender`  varchar ( 10 ) COLLATE utf8_unicode_ci NOT NULL ,
  ` locale`  varchar ( 10 ) COLLATE utf8_unicode_ci NOT NULL ,
  `cover`  varchar ( 255 ) COLLATE utf8_unicode_ci NOT NULL ,
  ` picture`  varchar ( 255) ) COLLATE utf8_unicode_ci NOT NULL ,
  `link`  varchar ( 255 ) COLLATE utf8_unicode_ci NOT NULL ,
  ` created`datetime NOT NULL ,
  `modified` datetime NOT NULL ,
  CLAVE PRIMARIA ( ` id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;
Iniciar sesión con Facebook usando JavaScript SDK

Controlador (Facebook_login.php)

El controlador Facebook_Login contiene 3 funciones, __construct (), index () y saveUserData ().
  • __construct() - Carga el modelo de usuario.
  • index() - Cargar el inicio de sesión y la vista de perfil.
  • saveUserData() - Ajax llama a este método para insertar los datos de usuario en la base de datos.
    • Descodifique los datos JSON publicados y obtenga datos de perfil de usuario.
    • Inserte o actualice los datos del usuario en la base de datos utilizando el modelo de usuario.
<? php defined ( 'BASEPATH' ) O exit ( 'No se permite el acceso directo al script' ); 

la clase  Facebook_Login  extiende  CI_Controller  { 
    function  __construct () { 
        parent :: __construct (); 
        // Cargar modelo de usuario 
        $ esto -> cargar -> modelo ( 'usuario' ); 
    } 
    
índice de     función pública  () { 
        // Cargar inicio de sesión y vista de perfil 
        $ this -> load -> view ( 'facebook_login / index' ); 
    }

    función pública  saveUserData () { 
        // Decodificar datos json y obtener datos del perfil de usuario 
        $ postData  json_decode ( $ _POST [ 'userData' ]); 
        
        // Preparando datos para la inserción de la base de datos 
        $ userData [ 'oauth_provider' ] =  $ _POST [ 'oauth_provider' ]; 
        $ userData [ 'oauth_uid' ] =  $ postData -> id ; 
        $ userData [ 'first_name' ] =  $ postData -> first_name ; 
        $ userData [ 'last_name'] =  $ postData -> last_name ; 
        $ userData [ 'email' ] =  $ postData -> email ; 
        $ userData [ 'gender' ] =  $ postData -> gender ; 
        $ userData [ 'locale' ] =  $ postData -> locale ; 
        $ userData [ 'cover' ] =  $ postData -> cover -> source ; 
        $ userData [ 'picture' ] =  $ postData-> imagen -> datos -> url ; 
        $ userData [ 'link' ] =  $ postData -> link ; 
        
        // Insertar o actualizar datos de usuario 
        $ userID  $ this -> user -> checkUser ( $ userData ); 
        
        volver  verdadera ; 
    } 
}

Modelo (User.php)

El modelo de usuario contiene 2 funciones, __construct () y checkUser ().
  • __construct() - Definir el nombre de la tabla y la clave principal de esta tabla.
  • checkUser() - Insertar o actualizar la información del perfil de usuario en la tabla de usuarios.
    • Si existen datos con el mismo oauth_provider y oauth_uid, el registro existente se actualiza. De lo contrario, los datos del usuario se insertan en la tabla de usuarios.
    • En función de la inserción, se devuelve el ID de usuario correspondiente.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 
clase de  usuario  se extiende  CI_Model { 
    función  __construct () { 
        $ this -> nombreTabla  'usuarios' ; 
        $ this -> primaryKey  'id' ; 
    } 
    
    / * 
     * Insertar / Actualizar datos de perfil de Facebook en la base de datos 
     * @param array los datos para insertar en la tabla 
     * / 
    public function  checkUser ( $ userData  = array ()) {
        if (! empty ( $ userData )) { 
            // compruebe si los datos del usuario ya existen en la base de datos con la misma información outh 
            $ this -> db -> select ( $ this -> primaryKey ); 
            $ this -> db -> from ( $ this -> tableName ); 
            $ this -> db -> where (array ( 'oauth_provider' => $ userData [ 'oauth_provider' ],  'oauth_uid' => $ userData [ 'oauth_uid' ])));
            $ esto -> db -> get (); 
            
            if ( $ prevQuery -> num_rows ()>  0 ) { 
                $ prevResult  $ prevQuery -> row_array (); 
                
                // actualizar datos de usuario 
                $ userData [ 'modificado' ] =  fecha ( "Ymd H: i: s" ); 
                $ update  $ this -> db -> update ( $ this -> tableName $ userData , array ( 'id' => $ prevResult ['id' ])); 
                
                // obtener ID de usuario 
                $ userID  $ prevResult [ 'id' ]; 
            } else { 
                // insertar datos de usuario 
                $ userData [ 'created' ] =  date ( "Ymd H: i: s" ); 
                $ userData [ 'modificado' ] =  fecha ( "Ymd H: i: s" ); 
                $ insert  $ this -> db -> insert ( $ this -> tableName , $ userData );
                
                
                db -> insert_id (); 
            } 
        } 
        
        // devolver ID de usuario 
        devolver  $ ID de usuario ? $ userID : FALSE ; 
    } 
}

Ver (facebook_login / index.php)

Esta vista muestra el botón de inicio de sesión de Facebook si el usuario no inició sesión con su cuenta de Facebook; de lo contrario, se mostrarán los datos del perfil del usuario.
Código de JavaScript:
jQuery Ajax se usa para publicar los datos del perfil del usuario en el controlador Facebook_Login, por lo tanto, incluya la biblioteca jQuery.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script >
El siguiente JavaScript maneja el proceso de autenticación de Facebook utilizando el SDK de JavaScript de Facebook y la API Graph. appIdDebe especificar el ID de la aplicación de Facebook en la opción del método FB.init ().
  • fbLogin() - Abre un diálogo de inicio de sesión para iniciar sesión con la cuenta de Facebook.
  • getFbUserData()- Recupere los datos del perfil de usuario de Facebook y muestre los detalles del perfil y el estado de inicio de sesión para el usuario. Esta información de perfil se recupera de Facebook: ID de cuenta, Nombre, Apellido, Correo electrónico, Género, Configuración regional, Foto de perfil, Foto de portada y Enlace de perfil.
  • saveUserData() - Publique los datos del perfil de Facebook en el método saveUserData del controlador Facebook_Login a través de Ajax.
  • fbLogout() - Desconecta al usuario de la cuenta de Facebook.
< Secuencia de comandos >
 ventana . fbAsyncInit  =  function () {
     // FB JavaScript SDK configuración y configuración
    FB.init ({
      appId: '1609295222731026' , // FB App ID 
      cookie: true ,   // habilitar las cookies para permitir que el servidor acceda a la sesión 
      xfbml: true ,   // analizar los complementos sociales en esta 
      versión de la página : 'v2.10'  // usar gráfico Api versión 2.10
    });
    
    // Compruebe si el usuario ya 
    inició sesión en FB.getLoginStatus ( función (respuesta) {
         si (respuesta. Estado  ===  'conectado' ) {
             // muestra los datos del usuario
            getFbUserData ();
        }
    });
};

// Cargar el SDK de JavaScript de forma asíncrona 
( función (d, s, id) {
     var js, fjs = d. GetElementsByTagName (s) [ 0 ];
     if (d. GetElementById (id)) devolver ;
    js = d. crearElemento (s); js id  = id;
    js src  =  "//connect.facebook.net/en_US/sdk.js" ;
    fjs parentNode . insertBefore (js, fjs);
} ( documento , 'script' , 'facebook-jssdk' ));

// inicio de sesión de Facebook con la 
función  SDK de JavaScript fbLogin () {
    FB.login ( función (respuesta) {
         si (response.authResponse) {
             // Obtiene y muestra los datos del perfil del usuario
            getFbUserData ();
        } else {
             documento . getElementById ( 'status' ) .innerHTML =  'El usuario canceló el inicio de sesión o no lo autorizó completamente.' ;
        }
    }, {alcance: 'correo electrónico' });
}

// Obtener los datos del perfil de usuario de la 
función de  facebook getFbUserData () {
    FB.api ( '/ me' , {locale: 'en_US' , fields: 'id, first_name, last_name, correo electrónico, enlace, género, locale, imagen, portada' },
     función (respuesta) {
         documento . GetElementById ( 'fbLink ' ). setAttribute ( "onclick" , "fbLogout ()" );
         document . getElementById ( ' fbLink ' ) .innerHTML =  ' Logout from Facebook ' ;
         document . getElementById ( ' status ' ) .innerHTML = 'Gracias por iniciar sesión,'  + response.first_name +  '!' ;
        documento . getElementById ( 'userData' ) .innerHTML =  '<div style = "position: relative;"> <img src = "' + response.cover. source + '" /> <img style = "position: absolute; top: 90 %; izquierda: 25%; " src = "' + response.picture. data .url + '" /> </div> <p> <b> FB ID: </b> ' + response. ID + '</p> <p> <b> Nombre: </b>''</p> <p> <b> Correo electrónico: </b>' + response.email + '</p> <p> <b> Género: </b>' + response.gender + '</ p > <p> <b> Locale: </b> ' + response.locale + ' </p> <p> <b> Link de perfil: </b> <a target = "_ blank" href = "' + response . link + '"> haga clic para ver el perfil </a> </p>' ;
        
        // Guardar datos de usuario
        saveUserData (respuesta);
    });
}

// Guardar los datos del usuario en la 
función de  base de datos saveUserData (userData) {
     $ .post ( "<? Php echo base_url ('facebook_login / saveUserData');?>" , {Oauth_provider: 'facebook' , userData: JSON.stringify (userData )}, function (data) { return  true ;});
}

// Cerrar sesión de la 
función de  Facebook fbLogout () {
    FB.logout ( function () {
         document . GetElementById ( 'fbLink' ). SetAttribute ( "onclick" , "fbLogin ()" );
         document . GetElementById ( 'fbLink' ) .innerHTML =  '<img src = "<? Php echo base_url ('asset / images / fblogin.png ');?> "/> ' ;
         document . getElementById ( ' userData ' ) .innerHTML =  ' ' ;
         document .getElementById ( 'status') .innerHTML =  'Has cerrado sesión en Facebook.' ;
    });
}
</ script >
Código HTML:
el siguiente código HTML se usa para mostrar el botón de inicio de sesión de Facebook, los datos del perfil de usuario y el estado de inicio de sesión.
<! - Muestra el estado de inicio de sesión -> 
< div  id = "status" > </ div >

<! - Botón de inicio o cierre de sesión de Facebook -> 
< a  href = "javascript: void (0);"  onclick = "fbLogin ();"  id = "fbLink" > < img  src = " <? php  echo  base_url ( ' asset / images / fblogin.png' );  ?> " /> </ a >

<! - Mostrar datos de perfil de usuario -> 
< div  id = "userData" > </ div >
Inicia sesión con Facebook usando PHP

Conclusión

Nuestro código de ejemplo hace que la integración de inicio de sesión en Facebook sea más fácil para la aplicación web CodeIgniter. Ayuda a implementar el inicio de sesión de Facebook en CodeIgniter sin actualizar la página usando JavaScript SDK. Solo se necesitan algunas configuraciones mínimas para integrar el sistema de inicio de sesión con Facebook en su aplicación CodeIgniter. Alternativamente, puede usar PHP SDK v5 para CodeIgniter para integrar el inicio de sesión de Facebook en CodeIgniter.

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.