Aprende como implementar autenticação personalizada na tua aplicação Flutter usando o Logto Flutter SDK.
FlutterFlow é uma plataforma de baixo código que permite-te criar aplicações Flutter visualmente. Fornece uma interface de arrastar e soltar para desenhares a interface do teu aplicativo e gera o código Flutter correspondente. De acordo com a documentação oficial, oferece três opções diferentes de integração de autenticação:
Para as duas primeiras, o FlutterFlow permite uma integração perfeita com Firebase e Supabase. Terás de configurar o teu projeto Firebase ou Supabase e ajustar as definições de autenticação no FlutterFlow. No entanto, se quiseres usar outro provedor de autenticação, precisarás de implementar a lógica de autenticação tu mesmo.
Quanto à autenticação personalizada, o FlutterFlow oferece uma forma de integrar qualquer provedor de autenticação que dependa de uma única API de autenticação personalizada.
No entanto, uma troca direta de credenciais do utilizador entre o cliente e o servidor de autenticação não é recomendada pelos padrões modernos de segurança. Em vez disso, deves utilizar um fluxo de autenticação seguro, como o OAuth 2.0 ou o OpenID Connect (OIDC), para autenticar utilizadores. Para provedores de identidade modernos baseados em OAuth 2.0 ou OIDC, como Auth0, Okta e Logto, o tipo de concessão de credenciais de proprietário de recurso (ROPC) não é recomendado ou é proibido devido a razões de segurança. Consulta O tipo de concessão ROPC está obsoleto para mais detalhes.
Um fluxo de autenticação standard OAuth 2.0 ou OIDC envolve múltiplos passos e redirecionamentos entre a aplicação cliente, o servidor de autorização e o navegador do utilizador. Neste post, vamos mostrar-te como personalizar a classe CustomAuthManager do FlutterFlow usando Logto Flutter SDK para implementar um fluxo de autenticação segura na tua aplicação FlutterFlow.
Para personalizares a classe CustomAuthManager, precisas de ativar a funcionalidade de código personalizado no FlutterFlow. Segue o guia Gerir Código Personalizado No GitHub para conectares e sincronizares o teu projeto FlutterFlow com o GitHub.
Depois de concluído, terás três ramificações diferentes no teu repositório GitHub FlutterFlow:
main: A ramificação principal do projeto Flutter. Precisarás desta ramificação para fazeres o deploy do teu projeto.flutterflow: A ramificação onde o FlutterFlow sincronizará as alterações do editor de interface do utilizador para o teu código.develop: A ramificação onde podes modificar o teu código personalizado.Cria a tua interface no FlutterFlow. Podes seguir a documentação do FlutterFlow para criares a interface com base nos teus requisitos. Neste tutorial, como requisito mínimo, presumiremos que tens duas páginas:
HomePage simples com um botão de inicia sessão. (Não é necessário formulário de login, o fluxo de autenticação do utilizador é tratado no lado do Logto. Verifica o guia personalizar sie para mais detalhes.)
user para exibir as informações do utilizador e um botão de terminar sessão.
Vai à página App Settings - Authentication e ativa a autenticação personalizada. Isto criará uma classe CustomAuthManager e ficheiros relacionados no teu projeto FlutterFlow.
Depois de criares a tua interface personalizada e ativares a autenticação personalizada no FlutterFlow, precisas de sincronizar o teu projeto com o GitHub. Vai à página integrations - GitHub e clica no botão Push to Repository
CustomAuthManagerMuda para a ramificação develop no teu repositório GitHub e faz o merge das alterações mais recentes da ramificação flutterflow. Isso sincronizará todas as mudanças da interface para a tua ramificação develop, incluindo os widgets das páginas e a classe CustomAuthManager pré-construída.
Adiciona a dependência do Logto SDK ao teu projeto.
A classe UserProvider é responsável pela gestão do estado de autenticação do utilizador. Precisamos de personalizar as propriedades para armazenar as informações de autenticação do utilizador fornecidas pelo Logto SDK.
Adiciona uma propriedade idToken com o tipo OpenIdClaims para armazenar as declarações do id_token para o utilizador autenticado.
A classe
OpenIdClaimsé definida no Logto SDK, e fornece as declarações doid_tokenpadrão OIDC de um utilizador autenticado.
O método initialize irá inicializar uma instância de cliente Logto e atualizar o stream do utilizador atual com o estado de autenticação do utilizador armazenado localmente.
O Logto SDK usa o pacote flutter_secure_storage para armazenar os dados de autenticação do utilizador de forma segura. Uma vez que o utilizador esteja autenticado, as declarações do
id_tokenserão armazenadas no armazenamento local.
Chamar o método LogtoClient.signIn irá iniciar um fluxo de autenticação OIDC padrão. A página de login do Logto será aberta numa webview. O fluxo de autenticação baseado em webview é gerido pelo flutter_web_auth.
O LogtoClient irá gerir a autorização, a troca de tokens e a recuperação de informações do utilizador. Uma vez que o utilizador esteja autenticado, as declarações idTokenClaims serão armazenadas no armazenamento local.
Recupera as idTokenClaims do LogtoClient e atualiza o stream do utilizador atual.
O método signOut irá limpar os dados de autenticação do utilizador armazenados localmente e atualizar o stream do utilizador atual.
authManager para acessar a instância CustomAuthManager.currentUserUid para obter o uid do utilizador atual.currentUserData para obter os dados do utilizador atual.logtoClient para acessar a instância do cliente Logto.Chama o método authManager.signIn para iniciar o fluxo de autenticação quando o utilizador clicar no botão de inicia sessão.
redirectUrié o URL de callback que será usado para capturar o callback de autorização da página de login do Logto. Consulta a implementação de inicia sessão para mais detalhes sobre o redirectUri.
O utilizador será redirecionado para a página user após a autenticação com sucesso.
Usa os getters de utilitários de autenticação para acessar os dados do utilizador atual e a instância do cliente Logto.
Por exemplo, para exibir as informações do utilizador usando vários widgets Text:
Aciona o método de termina sessão quando o utilizador clicar no botão de termina sessão e redireciona o utilizador de volta para a página inicial.
Executa a tua aplicação FlutterFlow num emulador. Clica no botão de inicia sessão na página inicial para iniciar o fluxo de autenticação. A página de login do Logto será aberta numa webview. Após a autenticação com sucesso, o utilizador será redirecionado para a página de perfil de utilizador e as informações do utilizador serão exibidas na página de perfil. Clica no botão de termina sessão para efetuar logout do utilizador e redirecioná-lo de volta para a página inicial.
Não te esqueças de fazer o merge da ramificação develop de volta para a ramificação main e empurrar as alterações para o repositório GitHub.
O Logto SDK fornece mais métodos para interagir com a API Logto. Podes personalizar ainda mais a classe CustomAuthManager para implementar mais funcionalidades usando o Logto SDK.