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

44min
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.
Un entorno de desarrollo Flutter instalado en tu máquina. Sigue esta guía si necesitas ayuda para configurar Flutter.
Conocimientos básicos de Flutter y Dart. Si eres nuevo, consulta la introducción de Flutter.
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.
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:
Bash
flutter create auth_demo
cd auth_demo
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:
YAML
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
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:
Dart
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(),
    );
  }
}
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.
Dart
// 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();
  }
}
// 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.
Dart
// 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
            ],
          ),
        ),
      ),
    );
  }
}
// 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 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:
Dart
// 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;
}
// 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:
Dart
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'),
),
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:
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>
<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:
XML
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
<resources>
    <string name="app_name">AuthDemo</string>
    <string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
</resources>
﻿
iOS
Actualiza tu Info.plist archivo:
XML
<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>
<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 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:
Dart
// 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;
}
// 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:
Dart
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'),
),
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:
Text
dependencies {
    // Add this line
    implementation 'com.google.android.gms:play-services-auth:20.0.0'
    // Existing dependencies
}
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:
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>
﻿
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>
﻿
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>
﻿
Actualiza tu android/app/src/main/AndroidManifest.xml:
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>
<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:
XML
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
        </array>
    </dict>
</array>
<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 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:
Dart
// 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;
}
// 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:
Dart
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'),
),
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
Bash
flutter run
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﻿
﻿Guía del SDK de Parse Flutter﻿
﻿Documentación Oficial de Flutter﻿
﻿Facebook para Desarrolladores﻿
﻿Plataforma de Identidad de Google﻿
﻿Documentación de Iniciar Sesión con Apple﻿
¡Feliz Codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo visualizar datos en Flutter con fl_chart y Back4App
Cómo crear widgets en la pantalla de inicio en Flutter con HomeWidget y Back4App