Construir autenticação CapacitorJS com Logto
Neste tutorial, vamos demonstrar como construir o fluxo de autenticação com Logto no Capacitor. Isso permitirá que você crie fluxos de entrada e inscrição em várias plataformas com facilidade.
Founder
Introdução
- Logto é uma alternativa moderna ao Auth0 para construir infraestrutura de identidade de cliente com mínimo esforço. Suporta vários métodos de entrada, incluindo nome de usuário, e-mail, número de telefone e entradas sociais populares como Google e GitHub.
- Capacitor é um runtime nativo de código aberto para construir aplicativos Web Native.
Neste tutorial, vamos demonstrar como construir o fluxo de autenticação com Logto no Capacitor. Isso permitirá que você crie fluxos de entrada e inscrição em várias plataformas com facilidade.
Pré-requisitos
Antes de começar, certifique-se de ter o seguinte:
- Uma conta Logto. Se não tiver uma, pode inscrever-se gratuitamente.
- Um projeto Capacitor. Pode seguir o guia oficial para criar um.
Criar uma aplicação Logto
Para começar, crie uma aplicação Logto com o tipo "Native". As aplicações Logto servem como aplicações cliente nos fluxos OAuth 2.0 e OpenID Connect (OIDC). Siga estas etapas para criar uma aplicação Logto:
- Inicie sessão no Console Cloud do Logto.
- Na barra de navegação à esquerda, clique em Aplicações.
- Clique em Criar aplicação.
- Selecione Native como o tipo de aplicação e insira o nome da aplicação.
- Clique em Criar.
Após criar a aplicação Logto, configure o URI de redirecionamento. O URI de redirecionamento é usado para redirecionar o utilizador de volta para a sua aplicação após o fluxo de autenticação.
Certifique-se de que o URI redireciona para a aplicação Capacitor, por exemplo, com.example.app://callback. O valor pode variar dependendo da configuração da sua aplicação Capacitor. Para mais detalhes, veja Capacitor Deep Links.
Lembre-se de clicar em Salvar Alterações após atualizar o URI de redirecionamento.
Se não tiver certeza sobre o URI de redirecionamento, pode deixá-lo vazio por agora e atualizá-lo mais tarde.
Configurar o Capacitor
Supondo que você já tenha um projeto Capacitor, este tutorial é agnóstico em relação ao framework, então você pode usar qualquer framework de UI que preferir e atualizar o código conforme necessário.
Instalar dependências
Inicializar o cliente Logto
- O
endpointé o ponto de acesso da API Logto. Pode encontrá-lo no guia interno ou na seção Domínios nas configurações do inquilino. - O
appIdé o ID da aplicação Logto. Pode encontrá-lo na página de detalhes da aplicação.
Implementar o botão de entrada
Adicione o seguinte código ao manipulador onClick do botão de entrada:
Substitua com.example.app://callback pelo URI de redirecionamento que configurou na aplicação Logto.
Ponto de verificação: Acionar o fluxo de autenticação
Execute a aplicação Capacitor e clique no botão de entrada. Uma janela do navegador será aberta, redirecionando para a página de entrada do Logto.
Sair
Como o Capacitor aproveita o Safari View Controller no iOS e as Abas Personalizadas do Chrome no Android, o estado de autenticação pode ser mantido por um tempo. No entanto, às vezes o utilizador pode querer sair da aplicação imediatamente. Nesse caso, podemos usar o método signOut para encerrar a sessão do utilizador:
O método signOut tem um parâmetro opcional para o URI de redirecionamento após a saída. Se não for fornecido, o utilizador será redirecionado para a página de saída do Logto:
O utilizador precisa clicar em "Concluído" para fechar a visualização web e voltar para a aplicação Capacitor. Se quiser redirecionar automaticamente o utilizador de volta para a aplicação Capacitor, pode fornecer o URI de redirecionamento após a saída:
Certifique-se de que o URI de redirecionamento após a saída redireciona para a aplicação Capacitor e lembre-se de adicionar o URI de redirecionamento após a saída ao Console do Logto:
Ponto de verificação: Completar o fluxo de autenticação
Execute novamente a aplicação Capacitor e clique no botão de entrada. Se tudo correr bem, quando o fluxo de autenticação for concluído, a aplicação Capacitor receberá o resultado da entrada e exibirá as informações do utilizador no console.
Depois clique no botão de sair, e a aplicação Capacitor será redirecionada para a página de saída do Logto. Será redirecionada automaticamente de volta para a aplicação Capacitor se o URI de redirecionamento após a saída estiver configurado.
Agora pode configurar o fluxo de autenticação no Console Cloud do Logto sem precisar escrever código complexo. A configuração será aplicada a todas as aplicações cliente, garantindo uma experiência de utilizador consistente.
Se encontrar algum problema durante a integração, por favor, não hesite em nos contatar via email em [email protected] ou entre no nosso servidor Discord!