## Introdução - [Logto](https://logto.io/) é 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](https://capacitorjs.com/) é 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](https://cloud.logto.io/). - Um projeto Capacitor. Pode seguir o [guia oficial](https://capacitorjs.com/docs/getting-started) 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: 1. Inicie sessão no [Console Cloud do Logto](https://cloud.logto.io/). 2. Na barra de navegação à esquerda, clique em **Aplicações**. 3. Clique em **Criar aplicação**. 4. Selecione **Native** como o tipo de aplicação e insira o nome da aplicação. 5. Clique em **Criar**. Criar 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](https://capacitorjs.com/docs/guides/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 ```bash # ou yarn, pnpm npm install @logto/capacitor # Instalar dependências peer npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Inicializar o cliente Logto ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - 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: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` 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.

Se o utilizador fechar a janela do navegador sem completar o fluxo de autenticação, a aplicação Capacitor receberá um `LogtoClientError`. ## 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: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` 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: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` 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: Configuração do URI de redirecionamento do Logto

Configuração do URI de redirecionamento 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. Aplicação iOS do Capacitor

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 contact@logto.io ou [entre no nosso servidor Discord](https://discord.gg/UEPaF3j5e6)! ## Leitura adicional - [Personalizar a experiência de entrada](https://docs.logto.io/docs/recipes/customize-sie/) - [Configurar conectores](https://docs.logto.io/docs/recipes/configure-connectors/) - [Proteger sua API](https://docs.logto.io/docs/recipes/protect-your-api/) Experimente o Logto Hoje