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.
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.
Antes de começar, certifique-se de ter o seguinte:
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:
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.
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.
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.appId é o ID da aplicação Logto. Pode encontrá-lo na página de detalhes da aplicação.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.
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.
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:
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!