Conceitos básicos da AWS

Criar uma aplicação Flutter

Criar uma aplicação Flutter simples usando o AWS Amplify

Módulo 3: Adicionar autenticação

Neste módulo, você usará as bibliotecas e a CLI do Amplify para configurar e adicionar autenticação a seu aplicativo.

Introdução

A primeira categoria do Amplifiy que você adicionará ao aplicativo será a Authentication. O Amplify utiliza o Amazon Cognito como base para gerenciar grupos de usuários e grupos identidade.

Neste módulo, você aprenderá a cadastrar, confirmar, fazer login e encerrar a sessão de um usuário. Implementaremos a funcionalidade para cada tela com poucas linhas de código.

O que você aprenderá

  • Configurar a categoria Auth
  • Cadastrar um usuário
  • Verificar um e-mail de usuário
  • Fazer login de um usuário autenticado
  • Encerrar a sessão de um usuário autenticado

Principais conceitos

Autenticação – É o processo de verificar e gerenciar um usuário, possibilitando que ele interaja com recursos do aplicativo.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • Criar o serviço de autenticação

    Para adicionar o serviço de autenticação ao nosso projeto Amplify, precisamos executar este comando no terminal no diretório raiz do projeto:

    amplify add auth

    Você verá algumas perguntas sobre a configuração do serviço de autenticação. Pressione a tecla Enter para selecionar o valor padrão para cada pergunta. O resultado será parecido com este:

    ➜  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.

    Depois que o recurso de autenticação for totalmente configurado, o resultado deverá ser parecido com o seguinte:

    Successfully added resource photogallery42b5391b locally

    Como mostrado na saída acima, o recurso foi adicionado apenas localmente. Para configurar nosso back-end com as alterações feitas localmente, precisamos executar este comando;

    amplify push

    Antes de enviar as alterações locais ao back-end, a CLI do Amplify mostrará um relatório de status para garantir que você quer forçar as seguintes alterações:

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

    Antes de enviar as alterações locais ao back-end, a CLI do Amplify mostrará um relatório de status para garantir que você quer forçar as seguintes alterações:

    ✔ All resources are updated in the cloud

    Você também pode verificar se o recurso Auth foi devidamente configurado acessando o arquivo /lib/amplifyconfiguration.dart e inspecionando os valores de autenticação.

  • Instalar a dependência

    De volta ao Visual Studio Code, abra pubspec.yaml e adicione a seguinte dependência:

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

    Agora, salve o arquivo para que o Visual Studio Code instale o plug-in Amplify Auth Cognito. Você também pode executar o comando $ flutter pub get do terminal se a dependência não for instalada depois de salvar.

    O resultado será este:

    exit code 0
  • Configurar o plug-in

    Agora que a dependência Auth está instalada, podemos adicionar o plug-in Auth à nossa instância do Amplify em _MyAppState._configureAmplify() do arquivo main.dart:

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

    Execute então o aplicativo e confirme se seus logs retornam uma mensagem de conclusão com êxito.

    Se você continuar e vir a mensagem de operação concluída com êxito, poderá começar a implementar a função de seu fluxo de autenticação. Caso contrário, repita as etapas acima ou acesse o módulo Inicializar o Amplify e verifique se você seguiu todas as etapas indicadas.

  • Implementar funcionalidade

    De volta ao módulo Criar um aplicativo Flutter, implementamos nosso AuthService para processar a atualização do AuthState com base na função chamada. Agora precisamos atualizar cada uma das nossas funções para atualizar somente o estado quando o usuário concluir cada processo com êxito.

    Em auth_service.dart, adicione uma propriedade AuthCredentials no AuthService:

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

    Essa propriedade será usada para manter o SignUpCredentials na memória durante o processo de cadastro para que um usuário possa fazer login imediatamente após a verificação do endereço de e-mail. Se não tivéssemos feito isso, o usuário precisaria fazer login manualmente pela tela de login.

    Atualize o signUpWithCredentials da seguinte forma:

    // 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. A função precisa ser atualizada para ser assíncrona, uma vez que usaremos o recurso await durante o processo de cadastro.
    2. Precisamos criar o userAttributes para passar o e-mail do usuário como parte do cadastro.
    3. Passaremos o nome de usuário e senha fornecidos pelas credenciais, juntamente com os atributos do usuário contendo o e-mail para cadastro com o Cognito. Uma vez que esse é um processo assíncrono, precisamos usar a palavra-chave await.
    4. Se obtivermos um resultado com êxito, a próxima etapa deverá ser a verificação de e-mail. Se o processo de cadastro for concluído por qualquer razão, simplificaremos o login do usuário no aplicativo.
    5. Armazenaremos o SignUpCredentials em _credentials para quando o usuário verificar o e-mail dele.
    6. Atualizaremos o AuthState para verificação exatamente como fizemos antes, mas apenas após o login ser feito com êxito e nós definirmos que o processo de cadastro não foi concluído.
    7. Se o cadastro falhar por qualquer razão, simplesmente imprimiremos o erro nos logs.

    Atualize o verifyCode para isso:

    // 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. Assim como fizemos com signUpWithCredentials, o verifyCode também precisa ser marcado como uma função assíncrona.
    2. Usaremos _credentials para fornecer o nome de usuário e passar o código inserido de VerificationPage para confirmSignUp.
    3. Se o resultado de confirmSignUp especificar que o cadastro foi concluído, tentaremos fazer login do usuário com _credentials criadas durante o cadastro. É importante observar que não atualizaremos mais o AppState durante o caso de sucesso já que o usuário ainda precisa fazer login no Amplify.
    4. Se o cadastro não for concluído, usaremos o resultado para descobrir quais etapas precisam ser realizadas para concluir o cadastro. Isso não deve acontecer no nosso aplicativo.

    Implementamos a parte de cadastro em nosso fluxo de autenticação, mas agora precisamos atualizar a parte de login. Atualizaremos loginWithCredentials para:

    // 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. Já que loginWithCredentials recebe AuthCredentials como um parâmetro, ele funcionará se forem passadas tanto LoginCredentials quanto SignUpCredentials.
    2. Passamos o nome de usuário e senha de AuthCredentials para o método de login do Amplify e aguardamos o resultado.
    3. Se o login for realizado com êxito e a propriedade isSignedIn no resultado confirmar que o usuário está conectado, atualizaremos o estado da sessão.
    4. Não devemos acessar esse estado no nosso aplicativo. Se o usuário inserir as credenciais incorretas ou ocorrer outro erro, o resultado deverá ser nosso bloco catch.

    Agora, atualize o 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. Quando chamarmos Auth.signOut() sem passar opções, faremos logout do usuário apenas neste dispositivo, em vez de em todos os dispositivos.
    2. Poderemos reutilizar nosso método showLogin() para atualizar o estado e retornar o usuário para a tela de login depois que o logout for concluído com êxito.

    Por fim, precisamos conseguir fazer login do usuário automaticamente se ele fechar o aplicativo, mas já tiver se conectado durante uma sessão anterior. Adicione essa função final ao 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);
     }
    }

    O checkAuthStatus tentará obter o AuthSession atual. Caso ele consiga, o login do usuário será feito. Se a busca falhar, isso significa que o login do usuário não foi feito, e ele será direcionado para a página de login.

    No momento, chamamos showLogin dentro do método initState de _MyAppState. Vamos mudar para checkAuthStatus:

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

    Essas são as únicas modificações necessárias para complementar o fluxo atual de autenticação. Compile e execute o aplicativo. Você deverá conseguir se cadastrar, confirmar o e-mail, sair e depois fazer login novamente.

    EndofModule3-gif

Conclusão

Você adicionou a autenticação de usuário ao seu aplicativo de galeria de fotos com êxito. No próximo módulo, adicionaremos armazenamento ao aplicativo.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Fechar
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.
Fechar

Adicionar armazenamento