Integración fácil de Google Sign-In en Flutter

Instalar el paquete Google Sign-In para Flutter

Después de haber configurado Firebase Auth, lo primero que debes hacer es instalar el paquete google_sign_in para Flutter, en su última versión (6.2.2). Para ello, puedes:

Ejecutar el comando $ flutter pub add google_sign_in en tu terminal;
Agregar manualmente google_sign_in: ^6.2.2 en las dependencias de tu archivo pubspec.yaml.

Luego, importa el paquete en tu código Flutter:

import 'package:google_sign_in/google_sign_in.dart';

Añadir Google Sign-In a Firebase

El segundo paso será agregar este método de inicio de sesión a tu proyecto Firebase para Flutter. Para ello:

Abre tu proyecto en Firebase;
En el menú de la izquierda, haz clic en «Authentication» (el botón con dos personas);
Haz clic en «Sign-in method» y luego en «Add provider»;
Activa el método de inicio de sesión de Google haciendo clic en «Google» y habilitándolo. Te pedirá que agregues una dirección de correo electrónico asociada a este proyecto (utiliza tu cuenta de Gmail).

Para asegurarte de que el inicio de sesión de Google funciona en un dispositivo real, agrega la huella SHA-1 de tu aplicación a Firebase:

Consulta mi guía de instalación de Firebase con Flutter para saber cómo obtener esta huella;
En Firebase, ve a la página principal de tu proyecto y haz clic en el ícono de Android;
Desplázate hacia abajo hasta la sección «SHA certificate fingerprints» y agrega las huellas SHA-1 obtenidas desde tu terminal Visual Studio.

El paquete está instalado y has activado el método de inicio de sesión con Google en Firebase, ahora solo falta configurar el sistema de inicio de sesión.

Añadir GoogleServiceInfo.plist

Después de configurar tu proyecto con Firebase, obtén el archivo GoogleService-Info.plist y colócalo en [my_project]/ios/Runner/. Si no lo tienes, descárgalo desde Firebase:

Ve a «Settings» > «Project Settings»;
En la sección «Your apps», descarga el archivo.

Luego, agrega la siguiente configuración a tu archivo [my_project]/ios/Runner/Info.plist, debajo de la línea <dict> y por encima de <key>CFBundleDevelopmentRegion</key>:

<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- Reemplaza este valor con el de REVERSED_CLIENT_ID en GoogleService-Info.plist -->
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>
<!-- Fin de la sección Google Sign-in -->

Luego, en tu archivo GoogleService-Info.plist, copia el valor después de com.googleusercontent.apps. bajo la clave <key>REVERSED_CLIENT_ID</key>, y reemplaza la cadena correspondiente en Info.plist.

Tu aplicación ahora puede comunicarse con el servicio de inicio de sesión de Google.

Permitir Google Auth para teléfonos Android

Una última acción que debes realizar para permitir que el servicio Google Auth funcione en tu aplicación para teléfonos Android es agregar la dependencia en tu archivo /android/app/build.gradle.

Para ello, agrega la línea implementation 'com.google.android.gms:play-services-auth:21.2.0' en la sección dependencies, como sigue:

dependencies {
    implementation 'com.google.android.gms:play-services-auth:21.2.0'
    //Tus otras dependencias
}

Encontrarás la última versión de los servicios de autenticación en la documentación oficial de Google.

Crear el sistema de inicio de sesión con Google Sign-In en Flutter

Ahora es el momento de programar las interacciones en Dart para conectar a tu usuario con Google Sign-In. Crea un nuevo archivo Dart en la carpeta lib, llamado auth_service.dart. En este archivo, crea una función signInWithGoogle() que gestione:

La apertura de la ventana de inicio de sesión de Google;
La obtención de la información de inicio de sesión;
La creación de nuevos identificadores;
La conexión a la aplicación.

Aquí tienes el código que podrás agregar:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class AuthService {
  // Instancias de Firebase
  final FirebaseFirestore _firestore = FirebaseFirestore.instance;
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<void> signInWithGoogle() async {
    // Iniciar el proceso de inicio de sesión
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
    // Obtener los detalles de autenticación de la solicitud
    final GoogleSignInAuthentication googleAuth = await googleUser!.authentication;
    // Crear un nuevo identificador para el usuario
    final AuthCredential credential = GoogleAuthProvider.credential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    // Iniciar sesión con las credenciales
    UserCredential result = await _auth.signInWithCredential(credential);

    // Si el usuario es nuevo, agregar su información a Firestore
    if (result.additionalUserInfo!.isNewUser) {
      var user = _auth.currentUser!.uid;
      var name = googleUser.displayName.toString();
      var email = googleUser.email.toString();
      var avatar = googleUser.photoUrl.toString();
      await _addGoogleUser(user, name, email, avatar);
    }
  }

  Future<void> _addGoogleUser(String userID, String name, String email, String avatar) {
    return _firestore
        .collection('Users')
        .doc(userID)
        .set({
          'name': name,
          'email': email,
          'avatar': avatar,
        })
        .then((value) => print('Usuario agregado'))
        .catchError((error) => print('Error: $error'));
  }
}

Importa este archivo Dart en tu página de inicio de sesión y usa la función AuthService().signInWithGoogle() en un botón o un GestureDetector para conectar a tu usuario a través de Google Sign-In en Flutter.

Recuperar información de inicio de sesión

Cuando un usuario se conecta a través de Google Sign-In en Flutter, puedes recuperar cierta información relacionada con su cuenta, como su correo electrónico, nombre, apellido y foto de perfil. Aquí te explico cómo obtenerla:

Nombre y Apellido: googleUser.displayName;
Correo electrónico: googleUser.email;
Foto: googleUser.photoUrl.

Aquí, googleUser es una variable de tipo GoogleSignInAccount? que contiene el resultado de la función await GoogleSignIn().signIn(). Si copiaste y pegaste el código que proporcioné, todo debería funcionar correctamente.

Agregar mi nuevo usuario a mi base de datos Firebase

Probablemente querrás almacenar la información de tu usuario cuando se conecte por primera vez a través de Google Sign-In en Flutter. Agrega este bloque de código a la función signInWithGoogle() para crear un documento durante el primer inicio de sesión:

if (result.additionalUserInfo!.isNewUser) {
  var user = _auth.currentUser!.uid;
  var name = googleUser.displayName.toString();
  var email = googleUser.email.toString();
  var avatar = googleUser.photoUrl.toString();
  await _addGoogleUser(user, name, email, avatar);
}

Este bloque debe ser colocado dentro de la función SignInWithGoogle().

La función _addGoogleUser() debe estar definida en la misma clase AuthService. Esta función se encargará de agregar el usuario a la base de datos de Firebase. Aquí tienes un ejemplo de esta función, que puedes adaptar según las necesidades de tu proyecto Flutter:

Future<void> addGoogleUser(
     String userID, String pseudo, String email, String avatar) {
   return firestore
       .collection('Users')
       .doc(auth.currentUser?.uid)
       .set({
         'pseudo': pseudo,
         'email': email,
         "avatar": avatar,
       })
       .then((value) => print('Usuario agregado'))
       .catchError((error) => print('Error: $error'));
 }

Gracias a estas dos nuevas funciones, tu aplicación Flutter podrá detectar si un usuario inicia sesión por primera vez a través de Google Sign-In. Si es el caso, se creará un documento en Firebase con la información del usuario.

CocoaPods’s specs repository is too out-of-date

Añadir un servicio de terceros a tu aplicación Flutter puede no funcionar de inmediato debido a dependencias. Aquí tienes un error común y cómo resolverlo:

Ve a la carpeta ios de tu proyecto;
Elimina el archivo Podfile.lock;
En el terminal, ejecuta el comando pod repo remove trunk;
Luego, según el tipo de Mac que tengas:
- Para un Mac con chip Intel, ejecuta pod install --repo-update en la carpeta ios;
- Para Mac con chip M1, primero ejecuta sudo arch -x86_64 gem install ffi, luego arch -x86_64 pod install --repo-update en la carpeta ios.