Introducción a AWS

Crear una aplicación Flutter

Crear una aplicación Flutter sencilla con AWS Amplify

Módulo 3: agregar autenticación

En este módulo usará las CLI y bibliotecas de Amplify para configurar y agregar autenticación a su aplicación.

Introducción

La primera categoría de Amplify que agregará a la aplicación será la de autenticación. Amplify aprovecha Amazon Cognito entre bastidores para administrar los grupos de usuario y de identidades.

En este módulo aprenderá a registrar, confirmar, iniciar sesión y cerrar la sesión de un usuario. Implementaremos la funcionalidad para cada pantalla en solo algunas líneas de código.

Lo que aprenderá

  • Configurar la categoría de autenticación
  • Registrar a un usuario
  • Verificar el correo electrónico de un usuario
  • Iniciar la sesión de un usuario autenticado
  • Cerrar la sesión de un usuario autenticado

Conceptos clave

Autenticación: la autenticación es el proceso de verificar y administrar un usuario, al mismo tiempo que permite que pueda interactuar con los recursos de la aplicación.

 Tiempo de realización

10 minutos

 Servicios utilizados

Implementación

  • Crear el servicio de autenticación

    Para agregar el servicio de autenticación a nuestro proyecto de Amplify, necesitamos ejecutar este comando en la terminal en el directorio raíz del proyecto:

    amplify add auth

    Se le realizarán algunas preguntas con respecto a la configuración del servicio de autenticación. Pulse la tecla Enter (Intro) a fin de seleccionar el valor predeterminado para cada pregunta. El resultado debería verse así:

    ➜  photo_gallery git:(master) ✗ amplify add auth
    Using service: Cognito, provided by: awscloudformation
    
     The current configured provider is Amazon Cognito.
    
     Do you want to use the default authentication and security configuration? Default configuration
     Warning: you will not be able to edit these selections.
     How do you want users to be able to sign in? Username
     Do you want to configure advanced settings? No, I am done.

    Una vez que el recurso de autenticación esté totalmente configurado, debería obtener un resultado como el siguiente:

    Successfully added resource photogallery42b5391b locally

    Según lo indicado por el resultado previo, el recurso solamente se agregó de manera local. Para configurar nuestro backend con los cambios que hicimos de manera local, debemos ejecutar este comando:

    amplify push

    Antes de enviar los cambios locales al backend, la CLI de Amplify mostrará un informe de estado para garantizar que desea enviar los siguientes cambios:

    Current Environment: dev
    
    | Category | Resource name        | Operation | Provider plugin   |
    | -------- | -------------------- | --------- | ----------------- |
    | Auth     | photogallery42b5391b | Create    | awscloudformation |
    ? Are you sure you want to continue? Yes

    Antes de enviar los cambios locales al backend, la CLI de Amplify mostrará un informe de estado para garantizar que desea enviar los siguientes cambios:

    ✔ All resources are updated in the cloud

    Además, puede verificar que el recurso de autenticación se haya configurado de manera adecuada al visualizar el archivo /lib/amplifyconfiguration.dart e inspeccionar los valores de autenticación.

  • Instalar la dependencia

    Al volver a Visual Studio Code, abra pubspec.yaml y agregue la siguiente dependencia:

    ... # amplify_core: '<1.0.0'
    
    amplify_auth_cognito: '<1.0.0'
    
    ... # dev_dependencies:

    Ahora, guarde el archivo para que Visual Studio Code instale el complemento Cognito de autenticación de Amplify. También puede ejecutar $ flutter pub get desde la terminal si la dependencia no está instalada al guardar.

    Debería obtener un resultado de:

    exit code 0
  • Configurar el complemento

    Ahora que se instaló la dependencia de autenticación, podemos agregar el complemento de autenticación a nuestra instancia de Amplify en _MyAppState._configureAmplify() del archivo main.dart:

    ... // void _configureAmplify() async {
    
    _amplify.addPlugin(authPlugins: [AmplifyAuthCognito()]);
    
    ... // try {

    Ejecute la aplicación y confirme que todavía tiene el mensaje de éxito en los registros.

    Si todavía recibe el mensaje de éxito, puede comenzar a implementar la funcionalidad del flujo de autenticación. Si no, repita los pasos anteriores o consulte el módulo Inicializar Amplify y asegúrese de haber seguido todos los pasos.

  • Implementar la funcionalidad

    Volvemos al módulo Crear una aplicación Flutter e implementamos AuthService para gestionar la actualización de AuthState en base a la función que se llamó. Ahora necesitamos actualizar cada una de las funciones para actualizar solamente el estado cuando el usuario complete correctamente cada proceso.

    En auth_service.dart, agregue una propiedad AuthCredentials en AuthService:

    ... // final authStateController = StreamController<AuthState>();
    
    AuthCredentials _credentials;
    
    ... // void showSignUp() {

    Esta propiedad se utilizará para mantener las SignUpCredentials en la memoria durante el proceso de registro, de esta manera un usuario puede iniciar sesión inmediatamente después de verificar las direcciones de correo electrónico. Si no hacemos esto, el usuario tendrá que iniciar sesión manualmente a través de la pantalla de inicio de sesión.

    Actualizar signUpWithCredentials como se muestra a continuación:

    // 1
    void signUpWithCredentials(SignUpCredentials credentials) async {
      try {
        // 2
        final userAttributes = {'email': credentials.email};
    
        // 3
        final result = await Amplify.Auth.signUp(
            username: credentials.username,
            password: credentials.password,
            options: CognitoSignUpOptions(userAttributes: userAttributes));
    
        // 4
        if (result.isSignUpComplete) {
          loginWithCredentials(credentials);
        } else {
          // 5
          this._credentials = credentials;
    
          // 6
          final state = AuthState(authFlowStatus: AuthFlowStatus.verification);
          authStateController.add(state);
        }
      
      // 7
      } on AuthError catch (authError) {
        print('Failed to sign up - ${authError.cause}');
      }
    }
    1. La función necesita actualizarse para que sea asincrónica mientras usamos await durante el proceso de registro.
    2. Debemos crear userAttributes a fin de pasar los correos electrónicos del usuario como parte del registro.
    3. Pasaremos el nombre de usuario y la contraseña provistos por las credenciales, junto con los atributos que contienen el correo electrónico para registrarse con Cognito. Como es un proceso asincrónico, debemos utilizar la palabra clave await.
    4. Si recibimos un resultado correctamente, el paso siguiente debe ser verificar el correo electrónico. Si el proceso de registro se completa por alguna razón, simplemente iniciaremos la sesión del usuario en la aplicación.
    5. Almacenaremos las SignUpCredentials en _credentials para cuando el usuario verifique el correo electrónico.
    6. Actualizamos AuthState para la verificación como lo hicimos anteriormente, pero solo después de iniciar sesión y establecer que el proceso de registro no está completo.
    7. Si el registro falla por algún motivo, simplemente imprimiremos el error en los registros.

    Actualizar verifyCode de la siguiente manera:

    // 1
    void verifyCode(String verificationCode) async {
     try {
       // 2
       final result = await Amplify.Auth.confirmSignUp(
           username: _credentials.username, confirmationCode: verificationCode);
    
       // 3
       if (result.isSignUpComplete) {
         loginWithCredentials(_credentials);
       } else {
         // 4
         // Follow more steps
       }
     } on AuthError catch (authError) {
       print('Could not verify code - ${authError.cause}');
     }
    }
    1. Tal como lo hicimos con signUpWithCredentials, verifyCode necesita que también se marque como una función asincrónica.
    2. Usaremos _credentials para proporcionar el nombre de usuario y pasar el código ingresado desde VerificationPage a confirmSignUp.
    3. Si el resultado de confirmSignUp especifica que el registro está completo, luego intentaremos iniciar la sesión del usuario con las credenciales de _credentials creadas durante el registro. Es importante tener en cuenta que ya no actualizaremos AppState durante el caso de éxito, ya que el usuario aún necesita iniciar sesión en Amplify.
    4. Si el registro no está completo, entonces utilice el resultado para averiguar qué otras acciones se deben tomar para completar el registro. Esto no debería suceder en nuestra aplicación.

    Implementamos la porción de registro del flujo de autenticación, pero ahora necesitamos actualizar la parte de inicio de sesión. Actualizar loginWithCredentials de la siguiente manera:

    // 1
    void loginWithCredentials(AuthCredentials credentials) async {
     try {
       // 2
       final result = await Amplify.Auth.signIn(
           username: credentials.username, password: credentials.password);
    
       // 3
       if (result.isSignedIn) {
         final state = AuthState(authFlowStatus: AuthFlowStatus.session);
         authStateController.add(state);
       } else {
         // 4
         print('User could not be signed in');
       }
     } on AuthError catch (authError) {
       print('Could not login - ${authError.cause}');
     }
    }
    1. Ya que loginWithCredentials toma a AuthCredentials como parámetro, funcionará si se pasa LoginCredentials o SignUpCredentials.
    2. Pasamos la contraseña y nombre de usuario de AuthCredentials al método de inicio de sesión de Amplify y esperamos el resultado.
    3. Si el inicio de sesión es correcto y la propiedad isSignedIn sobre el resultado confirma que el usuario ya inició sesión, actualizamos el estado a la sesión.
    4. No deberíamos alcanzar este estado en nuestra aplicación. Si el usuario accede en las credenciales incorrectas o recibe algún otro error, debería figurar en el bloque de captura.

    Ahora, actualice el método logOut:

    void logOut() async {
     try {
       // 1
       await Amplify.Auth.signOut();
    
       // 2
       showLogin();
     } on AuthError catch (authError) {
       print('Could not log out - ${authError.cause}');
     }
    }
    1. Al llamar a Auth.signOut() sin pasar ninguna opción, cerraremos sesión solo al usuario en este dispositivo en vez de cerrar sesión al usuario en todos los dispositivos.
    2. Podemos reutilizar el método showLogin() para actualizar el estado y llevar al usuario a la pantalla de inicio de sesión después de que se realice el cierre de sesión correctamente.

    Por último, necesitamos poder iniciar la sesión del usuario de manera automática si cierra la aplicación, pero ya inició sesión previamente. Agregar esta función final a AuthService.

    void checkAuthStatus() async {
     try {
       await Amplify.Auth.fetchAuthSession();
    
       final state = AuthState(authFlowStatus: AuthFlowStatus.session);
       authStateController.add(state);
     } catch (_) {
       final state = AuthState(authFlowStatus: AuthFlowStatus.login);
       authStateController.add(state);
     }
    }

    checkAuthStatus intentará obtener la AuthSession actual; si es correcta, el usuario iniciará sesión. Si la búsqueda falla, significa que el usuario no inició sesión y debe presentarse con LoginPage.

    En este momento, llamamos a showLogin dentro del método initState de _MyAppState. Cambiémoslo a checkAuthStatus:

    ... // _configureAmplify();
    
    _authService.checkAuthStatus();
    
    ... // initState closing }

    Estas son las únicas modificaciones necesarias para complementar el flujo de autenticación existente. Cree y ejecute la aplicación y debería poder registrarse, confirmar su correo electrónico, cerrar sesión y luego volver a iniciar sesión.

    EndofModule3-gif

Conclusión

¡Ha agregado correctamente la autenticación de usuario a la aplicación de galería de fotos! En el siguiente módulo, agregaremos almacenamiento a su aplicación.

¿Este módulo le resultó útil?

Gracias
Indíquenos lo que le gustó.
Cerrar
Lamentamos haberlo decepcionado
¿Hay información desactualizada, confusa o inexacta? Ayúdenos a mejorar este tutorial con sus comentarios.
Cerrar

Agregar almacenamiento