Crie autenticação CapacitorJS com Logto
Neste tutorial, demonstraremos como construir o fluxo de autenticação com Logto no Capacitor. Isso permitirá que você crie fluxos de login e cadastro multiplataforma com facilidade.
Founder
Introdução
- Logto é uma alternativa moderna ao Auth0 para construir infraestrutura de identidade de clientes com mínimo esforço. Ele suporta vários métodos de login, incluindo nome de usuário, e-mail, número de telefone e logins sociais populares como Google e GitHub.
- Capacitor é um runtime nativo de código aberto para criar aplicativos Web Nativos.
Neste tutorial, demonstraremos como construir o fluxo de autenticação com Logto no Capacitor. Isso permitirá que você crie fluxos de login e cadastro multiplataforma com facilidade.
Pré-requisitos
Antes de começar, certifique-se de ter o seguinte:
- Uma conta Logto. Se você não tiver uma, pode inscrever-se gratuitamente.
- Um projeto Capacitor. Você pode seguir o guia oficial para criar um.
Crie uma aplicação Logto
Para começar, crie uma aplicação Logto com o tipo "Nativo". As aplicações Logto servem como aplicações clientes nos fluxos OAuth 2.0 e OpenID Connect (OIDC). Siga estas etapas para criar uma aplicação Logto:
- Faça login no Consola Logto Cloud.
- Na barra de navegação à esquerda, clique em Aplicações.
- Clique em Criar aplicação.
- Selecione Nativo 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 usuário de volta para sua aplicação após o fluxo de autenticação.
Certifique-se de que o URI redireciona para o app Capacitor, por exemplo, com.example.app://callback. O valor pode variar dependendo da configuração do seu app Capacitor. Para mais detalhes, veja Links Profundos do Capacitor.
Lembre-se de clicar em Salvar Alterações após atualizar o URI de redirecionamento.
Se você não tem certeza sobre o URI de redirecionamento, você pode deixá-lo em branco por enquanto e atualizá-lo mais tarde.
Configure o Capacitor
Assumindo que você já tenha um projeto Capacitor, este tutorial é independente de framework, assim você pode usar qualquer framework de UI que preferir e atualizar o código conforme necessário.
Instale dependências
Inicie o cliente Logto
- O
endpointé o endpoint da API Logto. Você pode encontrá-lo no guia embutido ou na seção Domínios nas configurações do inquilino. - O
appIdé o ID da aplicação Logto. Você pode encontrá-lo na página de detalhes da aplicação.
Implemente o botão de login
Adicione o seguinte código ao manipulador onClick do botão de login:
Substitua com.example.app://callback pelo URI de redirecionamento que você configurou na aplicação Logto.
Ponto de verificação: Acione o fluxo de autenticação
Execute o app Capacitor e clique no botão de login. Uma janela do navegador abrirá, redirecionando para a página de login do Logto.
Logout
Como o Capacitor utiliza 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 usuário pode querer sair do aplicativo imediatamente. Nesse caso, podemos usar o método signOut para desconectar o usuário:
O método signOut possui um parâmetro opcional para o URI de redirecionamento pós-logout. Se não for fornecido, o usuário será redirecionado para a página de logout do Logto:
O usuário precisa clicar em "Concluído" para fechar a visualização web e retornar ao app Capacitor. Se você quiser redirecionar automaticamente o usuário de volta para o app Capacitor, pode fornecer o URI de redirecionamento pós-logout:
Certifique-se de que o URI de redirecionamento pós-logout redireciona para o app Capacitor e lembre-se de adicionar o URI de redirecionamento pós-logout ao Console Logto:
Ponto de verificação: Complete o fluxo de autenticação
Execute o app Capacitor novamente e clique no botão de login. Se tudo correr bem, quando o fluxo de autenticação for concluído, o app Capacitor receberá o resultado do login e imprimirá as informações do usuário no console.
Então, clique no botão de logout e o app Capacitor será redirecionado para a página de logout do Logto. Ele será automaticamente redirecionado de volta para o app Capacitor se o URI de redirecionamento pós-logout estiver configurado.
Agora você pode configurar o fluxo de autenticação no Console Logto Cloud sem escrever código complexo. A configuração será aplicada a todas as aplicações clientes, garantindo uma experiência de usuário consistente.
Se você encontrar algum problema durante a integração, por favor, não hesite em nos contatar por e-mail em [email protected] ou juntar-se ao nosso servidor Discord!