>
>
>
>
>
>
>
>
>
Guía para implementar el login con Google en Flutter
El inicio de sesión con Google es una funcionalidad común en muchas aplicaciones móviles, ya que permite a los usuarios autenticarse de manera rápida y segura. Flutter facilita la integración de esta característica utilizando el paquete firebase_auth junto con el google_sign_in. En este artículo, te guiaré paso a paso en cómo implementar el inicio de sesión con Google en una aplicación Flutter.
Requisitos previos
- Tener instalado Flutter en tu sistema.
2. Contar con un proyecto en Firebase, ya que utilizaremos Firebase Authentication.
3. Una cuenta de Google para crear credenciales de autenticación.
Paso 1: Configura Firebase en tu proyecto de Flutter
- a) Crear un proyecto en Firebase
Ve a Firebase Console y crea un nuevo proyecto.
2. Sigue los pasos para configurar Firebase y selecciona la plataforma Android o iOS según sea tu caso.
3. Registra tu aplicación dentro del proyecto Firebase y obtén el archivo google-services.json.
b) Configura Firebase en Android
1. Copia el archivo google-services.json dentro de tu proyecto Flutter en la ruta android/app/.
2. En el archivo android/build.gradle, agrega:
classpath ‘com.google.gms:google-services:4.3.10’
3. En el archivo android/app/build.gradle, agrega:
apply plugin: ‘com.google.gms.google-services’
Paso 2: Añade dependencias en pubspec.yaml
Añade las siguientes dependencias en el archivo pubspec.yaml para integrar Firebase y Google Sign-In en tu proyecto:
«`yaml
dependencies:
firebase_core: latest_version
firebase_auth: latest_version
google_sign_in: latest_version
«`
Luego, ejecuta flutter pub get para instalar las dependencias.
Paso 3: Inicializa Firebase
Antes de usar Firebase Authentication, debes inicializar Firebase en tu aplicación. Modifica el archivo main.dart como se muestra a continuación:
«`dart
import ‘package:firebase_core/firebase_core.dart’;
import ‘package:flutter/material.dart’;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
);
}
}
«`
Paso 4: Implementa el inicio de sesión con Google
Ahora, vamos a implementar la autenticación con Google usando Firebase Authentication y Google Sign-In. Crea el siguiente servicio de autenticación en un nuevo archivo auth_service.dart:
«`dart
import ‘package:firebase_auth/firebase_auth.dart’;
import ‘package:google_sign_in/google_sign_in.dart’;
class AuthService {
final GoogleSignIn googleSignIn = GoogleSignIn();
final FirebaseAuth _auth = FirebaseAuth.instance;
Future<User?> signInWithGoogle() async {
try {
final GoogleSignInAccount? googleUser = await googleSignIn.signIn();
if (googleUser == null) return null;
final GoogleSignInAuthentication googleAuth = await googleUser.authentication;
final OAuthCredential credential = GoogleAuthProvider.credential(
accessToken: googleAuth.accessToken,
idToken: googleAuth.idToken,
);
final UserCredential userCredential = await _auth.signInWithCredential(credential);
return userCredential.user;
} catch (e) {
print(e.toString());
return null;
}
}
Future<void> signOut() async {
await googleSignIn.signOut();
await _auth.signOut();
}
}
«`
Paso 5: Crear la UI de login
Ahora vamos a crear una interfaz básica que permita al usuario iniciar sesión con Google.
«`dart
import ‘package:flutter/material.dart’;
import ‘package:firebase_auth/firebase_auth.dart’;
import ‘auth_service.dart’;
class HomeScreen extends StatelessWidget {
final AuthService _authService = AuthService();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Login con Google’),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
User? user = await _authService.signInWithGoogle();
if (user != null) {
print(‘Usuario autenticado: ${user.displayName}’);
}
},
child: Text(‘Iniciar sesión con Google’),
),
),
);
}
}
«`
Paso 6: Verificar el estado de la sesión
Si deseas verificar si el usuario está autenticado y mostrar su información, puedes hacerlo de la siguiente manera:
«`dart
class HomeScreen extends StatelessWidget {
final FirebaseAuth _auth = FirebaseAuth.instance;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Inicio’),
),
body: Center(
child: _auth.currentUser == null
? Text(‘No has iniciado sesión’)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(‘Bienvenido ${_auth.currentUser?.displayName}’),
ElevatedButton(
onPressed: () async {
await AuthService().signOut();
print(‘Cerraste sesión’);
},
child: Text(‘Cerrar sesión’),
),
],
),
),
);
}
}
«`
Conclusión
Con estos pasos, has implementado un sistema de inicio de sesión con Google en tu aplicación Flutter. Utilizamos Firebase Authentication para manejar el proceso de autenticación y Google Sign-In para gestionar las credenciales de Google. ¡Ahora puedes ofrecer a tus usuarios una forma rápida y segura de iniciar sesión!
En GRUPO EBIM desarrollamos soluciones TI a la medida de las necesidades de tu empresa. Somos expertos en consultoría SAP, Outsourcing de personal TI, y contamos con un equipo de profesionales dispuestos a brindar soluciones digitales escalables para tu negocio. ¡Llena nuestro formulario de contacto y obtén más información sobre los servicios que ofrecemos!
