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.
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.
Antes de começar, certifique-se de ter o seguinte:
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:
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.
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.
endpoint é o endpoint da API Logto. Você pode encontrá-lo no guia embutido ou na seção Domínios nas configurações do inquilino.appId é o ID da aplicação Logto. Você pode encontrá-lo na página de detalhes da aplicação.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.
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.
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:
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!