Inicio de Sesión con Facebook en Aplicación Android con Ionic

11 min

cómo agregar inicio de sesión de facebook a tu aplicación ionic introducción esta sección explica cómo puedes crear una aplicación con registro de usuario utilizando el inicio de sesión de facebook y las características principales de parse server https //www back4app com/product/parse server a través de back4app después de seguir este tutorial, podrás hacer esto en cualquier momento, puedes acceder al proyecto ionic completo construido con este tutorial en nuestro repositorio de github https //github com/back4app/ionic email verification para completar este inicio rápido, necesitas visual studio code https //code visualstudio com/download (o cualquier ide web que prefieras) ionic framework https //ionicframework com/getting started/ una aplicación creada en back4app sigue el tutorial de nueva aplicación parse https //www back4app com/docs/get started/new parse app para aprender cómo crear una aplicación parse en back4app una cuenta de facebook https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f para crear la aplicación 1 configuración de facebook para comenzar a usar las funciones de facebook, necesitas ve al facebook developer https //developers facebook com/ sitio web y crea una cuenta e inicia sesión ve a mis aplicaciones https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f y haz clic en \agregar una nueva aplicación\ en el panel izquierdo, haz clic en \configuraciones\ > \básico\ en esta página toma nota de tu \id de aplicación\ agrega una \url de política de privacidad\ selecciona una \categoría\ desplázate hacia abajo y presiona \guardar cambios\ 4\ en la parte superior de la misma página, haz clic en el \apagar\ botón y confirma para hacer que tu aplicación esté activa 5\ desplázate hacia abajo en la misma página y haz clic en \agregar plataforma\ para este tutorial, elijamos android agrega tu \nombre del paquete de google play\ que en nuestro caso es com back4app myapp agrega los \hash de clave\ de tu máquina (ejecuta \keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\ para averiguar el tuyo) \guardar cambios\ 6\ en el panel izquierdo, vuelve a \tablero\ , desplázate hacia abajo y haz clic en \inicio de sesión de facebook\ 2 vincula tu aplicación de facebook con back4app ve a tu panel de control de la aplicación en sitio web de back4app https //www back4app com/ y haz clic en \configuración del servidor\ encuentra el bloque “inicio de sesión de facebook” y haz clic en \configuración\ el bloque “inicio de sesión de facebook” se ve así 3\ agrega el \id de la aplicación\ que anotaste en el paso anterior 3 configurar en este tutorial, comenzaremos desde donde lo dejamos en el anterior registro de usuario con verificación de correo electrónico https //www back4app com/docs/ionic/user registration email verification 4 inicio de sesión de facebook primero instalemos los plugins de cordova de facebook $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook ahora, implementemos el \facebooklogin()\ método login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } finalmente, añadamos un botón a nuestra \login\ página y hagamos que llame al método que acabamos de crear login html 1 2 3 log in with facebook 4 5 5 prueba tu aplicación dado que el inicio de sesión de facebook no funciona en un navegador, prueba tu aplicación ejecutando \ionic cordova run android\ inicia sesión en sitio web de back4app https //www back4app com/ encuentra tu aplicación y haz clic en \tablero\ > \núcleo\ > \navegador\ > \usuario\ para ver el usuario que has creado! ¡está hecho! en esta etapa, puedes iniciar sesión, registrarte y cerrar sesión en tu aplicación con facebook utilizando las características principales de parse server a través de back4app!