Ejemplo de autenticación de la página de inicio de sesión de Flutter

Ejemplo de autenticación de la página de inicio de sesión de Flutter - Codelivly

En la era digital actual, la seguridad en línea se ha vuelto más importante que nunca. Con más y más información personal que se comparte en línea, es crucial contar con un sistema de inicio de sesión seguro para proteger los datos de sus usuarios. Afortunadamente, con la ayuda de Flutter y Firebase Authentication, nunca ha sido tan fácil crear una página de inicio de sesión segura para su aplicación.

Flutter es un poderoso marco de desarrollo de aplicaciones móviles que permite a los desarrolladores crear aplicaciones atractivas y receptivas para las plataformas iOS y Android. Con Flutter, puede crear interfaces de usuario interactivas de alta calidad con un mínimo esfuerzo. Y cuando se trata de autenticación, Firebase Authentication brinda una solución simple pero sólida que se integra a la perfección con Flutter.

En este artículo, lo guiaremos a través del proceso de creación de una página de inicio de sesión de Flutter con autenticación mediante Firebase Authentication. Comenzaremos creando la interfaz de usuario para la página de inicio de sesión, luego agregaremos la lógica de autenticación mediante Firebase Authentication. Finalmente, agregaremos enrutamiento a la aplicación para manejar la navegación entre páginas. Al final de este tutorial, tendrá una página de inicio de sesión completamente funcional, segura y fácil de usar. ¡Entonces empecemos!

Índice
  1. Paso 1: crea un nuevo proyecto de Flutter
  2. Paso 2: Agrega las dependencias necesarias
  3. Paso 3: Cree la interfaz de usuario de inicio de sesión
  4. Paso 4: Agregar lógica de autenticación
  5. Paso 5: Accede a la página de inicio
  6. Paso 6: Agregar enrutamiento

Paso 1: crea un nuevo proyecto de Flutter

Primero, cree un nuevo proyecto de Flutter en Android Studio o Visual Studio Code. También puede usar la línea de comando ejecutando el comando flutter create my_login_app.

Paso 2: Agrega las dependencias necesarias

Agregue las dependencias necesarias en el pubspec.yaml archivar. Para este ejemplo, usaremos el firebase_auth paquete para la autenticación. Agregue el siguiente código a dependencies sección:

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^1.4.1

Luego ejecuta el comando flutter pub get para instalar los paquetes.

Paso 3: Cree la interfaz de usuario de inicio de sesión

Cree la interfaz de usuario para la página de inicio de sesión usando Scaffold, FormY TextFormField widgets Agrega uno GlobalKey En Form widget para acceder a los datos del formulario más tarde. Aquí hay un ejemplo de cómo podría verse el código:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  String _email;
  String _password;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter your email';
                }
                return null;
              },
              onSaved: (value) {
                _email = value.trim();
              },
            ),
            TextFormField(
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter your password';
                }
                return null;
              },
              onSaved: (value) {
                _password = value.trim();
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _submitForm,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }

  void _submitForm() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      // TODO: Perform login
    }
  }
}

Paso 4: Agregar lógica de autenticación

agregue el siguiente código a _submitForm() método para autenticar al usuario usando Firebase Authentication:

void _submitForm() async {
  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();

    try {
      UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _email,
        password: _password,
      );
      // TODO: Navigate to the home page
    } on FirebaseAuthException catch (e) {
      if (e.code == 'user-not-found') {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('No user found for that email.'),
          ),
        );
      } else if (e.code == 'wrong-password') {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Wrong password provided for that user.'),
          ),
        );
      }
    }
  }
}

Este código utiliza el signInWithEmailAndPassword() método de FirebaseAuth class para autenticar al usuario usando su dirección de correo electrónico y contraseña. Si la autenticación es exitosa, el UserCredential el objeto contendrá la información del usuario. Si la autenticación falla, un FirebaseAuthException será arrojado, que puede ser atrapado y manejado en consecuencia.

Paso 5: Accede a la página de inicio

Una vez que el usuario esté autenticado, vaya a la página de inicio de la aplicación. Puedes hacer esto usando el Navigator class para insertar una nueva página en la pila. Este es un ejemplo de navegación a la página de inicio:

void _submitForm() async {
  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();

    try {
      UserCredential userCredential = await FirebaseAuth.instance.signInWithEmailAndPassword(
        email: _email,
        password: _password,
      );
      Navigator.pushReplacementNamed(context, '/home');
    } on FirebaseAuthException catch (e) {
      // Handle errors
    }
  }
}

Paso 6: Agregar enrutamiento

Finalmente, agregue enrutamiento a la aplicación para manejar la navegación entre páginas. Agregue el siguiente código a main.dart archivar:

import 'package:flutter/material.dart';
import 'package:my_login_app/home_page.dart';
import 'package:my_login_app/login_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Login App',
      initialRoute: '/login',
      routes: {
        '/login': (context) => LoginPage(),
        '/home': (context) => HomePage(),
      },
    );
  }
}

Este código define la ruta inicial a la página de inicio de sesión y define dos rutas: una para la página de inicio de sesión y otra para la página de inicio. Cuando el usuario inicia sesión con éxito, la aplicación va a la página de inicio.

¡Eso es! Ahora ha creado una página de inicio de sesión de Flutter con autenticación mediante Firebase Authentication. Por supuesto, deberá personalizar este código para satisfacer sus necesidades específicas, pero esto debería brindarle un buen punto de partida.

Si quieres conocer otros artículos parecidos a Ejemplo de autenticación de la página de inicio de sesión de Flutter puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas