Guía Completa de Autenticación de Terceros en Flutter con Parse en Back4App

introducción integrar métodos de autenticación de terceros como facebook, google y apple en tu aplicación flutter puede mejorar significativamente la experiencia del usuario al proporcionar opciones de inicio de sesión flexibles y convenientes parse server, impulsado por back4app, ofrece soporte integrado para estos proveedores de autenticación en este tutorial, aprenderás cómo implementar la autenticación de terceros en tu aplicación flutter utilizando el sdk de parse en back4app al final de este tutorial, tendrás una aplicación flutter con funciones de registro e inicio de sesión completamente funcionales que incluyen autenticación estándar con correo electrónico/contraseña utilizando parse métodos de autenticación de terceros facebook google apple requisitos previos para seguir este tutorial, necesitarás lo siguiente una cuenta de back4app regístrate para obtener una cuenta gratuita en back4app https //www back4app com un entorno de desarrollo flutter instalado en tu máquina sigue esta guía https //flutter dev/docs/get started/install si necesitas ayuda para configurar flutter conocimientos básicos de flutter y dart si eres nuevo, consulta la introducción de flutter https //flutter dev/docs/get started/codelab cuentas de desarrollador para facebook, google y apple (requeridas para configurar métodos de inicio de sesión de terceros) un ide o editor de texto como visual studio code o android studio paso 1 – configurando tu backend de back4app 1 1 crear un proyecto en back4app inicia sesión en tu panel de back4app https //dashboard back4app com/ haz clic en "crear nueva app" ingresa un nombre para tu aplicación, por ejemplo, "authdemo" , y haz clic en "crear" una vez que se crea el proyecto, navega a configuración de la app > seguridad y claves anota tu id de aplicación y clave de cliente necesitarás estos valores para inicializar parse en tu aplicación flutter 1 2 habilitar proveedores de autenticación en tu panel de back4app, navega a configuración del servidor > autenticación habilita los métodos de autenticación que planeas usar facebook google apple para cada proveedor, necesitarás ingresar credenciales específicas (id de app, id de cliente, secretos, etc ), que se configurarán en los próximos pasos paso 2 – instalando y configurando parse sdk en flutter 2 1 crear un nuevo proyecto de flutter abre tu terminal y crea un nuevo proyecto de flutter flutter create auth demo cd auth demo 2 2 agregar dependencias abre pubspec yaml y agrega las siguientes dependencias para parse y opciones de inicio de sesión de terceros dependencies flutter sdk flutter parse server sdk flutter ^4 0 1 flutter facebook auth ^5 0 5 google sign in ^5 4 0 sign in with apple ^3 3 0 ejecuta flutter pub get para instalar las dependencias 2 3 inicializar parse en main dart en el lib/main dart archivo, importa el sdk de parse e inicialízalo en la main función import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'screens/auth screen dart'; // you'll create this file later void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'parse auth demo', theme themedata( primaryswatch colors blue, ), home authscreen(), ); } } reemplaza 'your app id' y 'your client key' con tus credenciales reales de back4app del paso 1 paso 3 – implementando autenticación estándar 3 1 crear el servicio de autenticación crea un nuevo directorio llamado services bajo lib y añade un archivo llamado auth service dart este servicio manejará el registro y el inicio de sesión de usuarios utilizando parse // lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk dart'; class authservice { future\<parseuser?> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return user; } else { return null; } } future\<parseuser?> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return user; } else { return null; } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser?; await user? logout(); } } 3 2 crea la pantalla de autenticación crea un nuevo directorio llamado screens bajo lib y añade un archivo llamado auth screen dart esta pantalla proporcionará la interfaz de usuario para la autenticación estándar // lib/screens/auth screen dart import 'package\ flutter/material dart'; import ' /services/auth service dart'; class authscreen extends statefulwidget { @override authscreenstate createstate() => authscreenstate(); } class authscreenstate extends state\<authscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); final texteditingcontroller passwordcontroller = texteditingcontroller(); final texteditingcontroller emailcontroller = texteditingcontroller(); final authservice authservice = authservice(); void signup() async { var user = await authservice signup( usernamecontroller text trim(), passwordcontroller text trim(), emailcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('user created successfully!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('sign up failed '))); } } void login() async { var user = await authservice login( usernamecontroller text trim(), passwordcontroller text trim(), ); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('login failed '))); } } @override widget build(buildcontext context) { return scaffold( appbar appbar(title const text('parse auth')), body padding( padding const edgeinsets all(16 0), child singlechildscrollview( child column( children \[ const text( 'standard authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), textfield( controller usernamecontroller, decoration const inputdecoration(labeltext 'username'), ), textfield( controller emailcontroller, decoration const inputdecoration(labeltext 'email'), ), textfield( controller passwordcontroller, decoration const inputdecoration(labeltext 'password'), obscuretext true, ), const sizedbox(height 20), elevatedbutton( onpressed signup, child const text('sign up'), ), elevatedbutton( onpressed login, child const text('login'), ), const divider(), const sizedbox(height 20), const text( 'third party authentication', style textstyle(fontsize 18, fontweight fontweight bold), ), // buttons for third party authentication will be added here ], ), ), ), ); } } paso 4 – integrando la autenticación de facebook 4 1 configurar la cuenta de desarrollador de facebook crea una aplicación de facebook ve a facebook para desarrolladores https //developers facebook com/ y inicia sesión haz clic en "mis aplicaciones" y luego "crear aplicación" seleccionar "consumidor" como el tipo de aplicación y hacer clic en "siguiente" complete el nombre de la aplicación y correo electrónico de contacto , luego haga clic en "crear aplicación" agrega el inicio de sesión de facebook a tu aplicación en el panel de tu aplicación, navega a "agregar un producto" y selecciona "inicio de sesión de facebook" elige "android" y/o "ios" dependiendo de tu plataforma objetivo sigue los pasos de configuración proporcionados por facebook necesitarás el identificador de paquete para ios y nombre del paquete para android configurar uri de redirección oauth establecer el oauth redirect uri a https //parseapi back4app com/auth/facebook/callback obtener id de la aplicación y secreto de la aplicación en el panel de tu aplicación, ve a "configuración" > "básico" anote el id de la aplicación y secreto de la aplicación agrega el id de la aplicación y el secreto a back4app en el panel de back4app, navega a configuración del servidor > autenticación bajo facebook , ingresa tu id de la aplicación y secreto de la aplicación 4 2 actualizar auth service dart con facebook login agrega el siguiente código para manejar la autenticación de facebook // add these imports at the top import 'package\ flutter facebook auth/flutter facebook auth dart'; // inside authservice class map\<string, dynamic> facebookauthdata( string? accesstoken, string? userid, datetime? expirationdate) { return { 'id' userid, 'access token' accesstoken, 'expiration date' expirationdate? toutc() toiso8601string(), }; } future\<parseuser?> loginwithfacebook() async { final loginresult result = await facebookauth instance login(); if (result status == loginstatus success) { final accesstoken accesstoken = result accesstoken!; var user = parseuser(null, null, null); var response = await user loginwith( 'facebook', facebookauthdata( accesstoken token, accesstoken userid, accesstoken expires, ), ); if (response success) { return user; } } return null; } 4 3 agregar botón de inicio de sesión de facebook a auth screen dart agrega el siguiente botón a tu interfaz de usuario elevatedbutton( onpressed () async { var user = await authservice loginwithfacebook(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('facebook login failed '))); } }, child const text('login with facebook'), ), 4 4 configuraciones específicas de la plataforma android actualiza tu android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! add this inside the \<application> tag > \<meta data android\ name="com facebook sdk applicationid" android\ value="@string/facebook app id"/> \<activity android\ name="com facebook facebookactivity" android\ configchanges="keyboard|keyboardhidden|screenlayout|screensize|orientation" android\ label="@string/app name" /> \<! existing configurations > \</manifest> agrega tu id de aplicación de facebook a android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="facebook app id">your facebook app id\</string> \</resources> ios actualiza tu info plist archivo \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>fbyour facebook app id\</string> \</array> \</dict> \</array> \<key>facebookappid\</key> \<string>your facebook app id\</string> \<key>facebookdisplayname\</key> \<string>authdemo\</string> paso 5 – integrando la autenticación de google 5 1 configurar la cuenta de desarrollador de google crear un proyecto en google cloud console ir a google cloud console https //console cloud google com/ y crear un nuevo proyecto configurar la pantalla de consentimiento de oauth navegar a apis y servicios > pantalla de consentimiento de oauth configurar la pantalla de consentimiento con los alcances necesarios crear id de cliente oauth ir a credenciales > crear credenciales > id de cliente oauth elegir aplicación web agregar uris de redirección autorizados https //parseapi back4app com/auth/google/callback anotar el id de cliente y secreto de cliente agregar id de cliente y secreto a back4app en el panel de back4app, bajo configuración del servidor > autenticación , ingresa tu id de cliente y secreto de cliente para google 5 2 actualizar auth service dart con google login agrega el siguiente código para manejar la autenticación de google // add this import at the top import 'package\ google sign in/google sign in dart'; // inside authservice class map\<string, dynamic> googleauthdata(string? idtoken, string? accesstoken) { return { 'id token' idtoken, 'access token' accesstoken, }; } future\<parseuser?> loginwithgoogle() async { final googlesignin googlesignin = googlesignin( scopes \['email'], ); final googlesigninaccount? googleuser = await googlesignin signin(); if (googleuser == null) { return null; } final googlesigninauthentication googleauth = await googleuser authentication; var user = parseuser(null, null, null); var response = await user loginwith( 'google', googleauthdata( googleauth idtoken, googleauth accesstoken, ), ); if (response success) { return user; } return null; } 5 3 agregar botón de inicio de sesión de google a auth screen dart agrega el siguiente botón a tu interfaz de usuario elevatedbutton( onpressed () async { var user = await authservice loginwithgoogle(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('google login failed '))); } }, child const text('login with google'), ), 5 4 configuraciones específicas de la plataforma android agrega lo siguiente a tu android/app/build gradle archivo dependencies { // add this line implementation 'com google android gms\ play services auth 20 0 0' // existing dependencies } agrega tu id de cliente de google a android/app/src/main/res/values/strings xml \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> \<resources> \<string name="app name">authdemo\</string> \<string name="default web client id">your google client id\</string> \</resources> actualiza tu android/app/src/main/androidmanifest xml \<manifest xmlns\ android="http //schemas android com/apk/res/android" package="com example auth demo"> \<! existing configurations > \<application> \<! existing configurations > \<meta data android\ name="com google android gms client application id" android\ value="@string/default web client id" /> \</application> \</manifest> ios agrega el id de cliente revertido a tu info plist \<key>cfbundleurltypes\</key> \<array> \<dict> \<key>cfbundleurlschemes\</key> \<array> \<string>com googleusercontent apps your client id\</string> \</array> \</dict> \</array> paso 6 – integrando la autenticación de apple 6 1 configurar la cuenta de desarrollador de apple registrar tu aplicación inicia sesión en el portal de desarrolladores de apple https //developer apple com/ y registra tu aplicación habilitar el inicio de sesión con apple bajo identificadores , selecciona tu aplicación y habilita el inicio de sesión con apple crear un id de servicios crea un id de servicios para tu aplicación establece el uri de redirección a https //parseapi back4app com/auth/apple/callback generar un secreto de cliente crea una clave privada de inicio de sesión con apple usa esta clave para generar un secreto de cliente agregar credenciales a back4app en el panel de back4app, bajo configuración del servidor > autenticación , ingresa tu id de servicios y secreto de cliente para apple 6 2 actualizar auth service dart con inicio de sesión de apple agrega el siguiente código para manejar la autenticación de apple // add this import at the top import 'package\ sign in with apple/sign in with apple dart'; import 'dart\ io' show platform; // inside authservice class map\<string, dynamic> appleauthdata(string? identitytoken, string? userid) { return { 'id' userid, 'token' identitytoken, }; } future\<parseuser?> loginwithapple() async { if (!platform isios) { // sign in with apple is only available on ios return null; } final credential = await signinwithapple getappleidcredential( scopes \[ appleidauthorizationscopes email, appleidauthorizationscopes fullname, ], ); var user = parseuser(null, null, null); var response = await user loginwith( 'apple', appleauthdata( credential identitytoken, credential useridentifier, ), ); if (response success) { return user; } return null; } 6 3 agrega el botón de inicio de sesión de apple a auth screen dart agrega el siguiente botón a tu interfaz de usuario elevatedbutton( onpressed () async { var user = await authservice loginwithapple(); if (user != null) { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login successful!'))); } else { scaffoldmessenger of(context) showsnackbar(snackbar(content text('apple login failed '))); } }, child const text('login with apple'), ), 6 4 configuraciones específicas de la plataforma solo ios en xcode, abre tu proyecto y ve a firmar y capacidades haz clic en "+ capacidad" y agrega "iniciar sesión con apple" asegúrate de que tu identificador de paquete coincida con el registrado en el portal de desarrolladores de apple paso 7 – probando tu aplicación ahora que has configurado todos los métodos de autenticación, puedes ejecutar tu aplicación y probar cada opción de inicio de sesión 7 1 ejecutar la aplicación flutter run para ios, debes ejecutar la aplicación en un dispositivo real para probar iniciar sesión con apple para android, puedes usar un emulador o un dispositivo físico 7 2 probar la autenticación estándar ingresa un nombre de usuario, correo electrónico y contraseña toca "registrarse" para crear un nuevo usuario toca "iniciar sesión" para iniciar sesión con las credenciales creadas 7 3 probar el inicio de sesión con facebook toca "iniciar sesión con facebook" aparecerá una pantalla de inicio de sesión de facebook inicia sesión con tus credenciales de facebook 7 4 prueba de inicio de sesión de google toca "iniciar sesión con google" aparecerá una pantalla de inicio de sesión de google inicia sesión con tu cuenta de google 7 5 prueba de inicio de sesión de apple (solo ios) toca "iniciar sesión con apple" aparecerá el aviso de inicio de sesión de apple autentica usando tu id de apple conclusión en este tutorial, implementaste con éxito la autenticación estándar de correo electrónico/contraseña e integraste métodos de autenticación de terceros (facebook, google y apple) en tu aplicación flutter utilizando el sdk de parse en back4app esta configuración mejora la experiencia del usuario al ofrecer múltiples opciones de inicio de sesión convenientes próximos pasos perfiles de usuario amplía la aplicación para gestionar perfiles de usuario, permitiendo a los usuarios actualizar su información funcionalidad de cierre de sesión implementa funciones de cierre de sesión para cada método de autenticación seguridad de datos asegura tus datos implementando control de acceso basado en roles con acls y roles de parse manejo de errores mejora el manejo de errores para proporcionar retroalimentación más detallada a los usuarios mejoras en la ui personaliza la ui para que coincida con la marca de tu aplicación y mejore la experiencia del usuario recursos adicionales documentación de back4app https //www back4app com/docs guía del sdk de parse flutter https //docs parseplatform org/flutter/guide/ documentación oficial de flutter https //flutter dev/docs facebook para desarrolladores https //developers facebook com/ plataforma de identidad de google https //developers google com/identity documentación de iniciar sesión con apple https //developer apple com/sign in with apple/ ¡feliz codificación!