## Introdução - [Logto](https://logto.io/) é 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](https://capacitorjs.com/) é 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](https://cloud.logto.io/). - Um projeto Capacitor. Você pode seguir o [guia oficial](https://capacitorjs.com/docs/getting-started) 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: 1. Faça login no [Consola Logto Cloud](https://cloud.logto.io/). 2. Na barra de navegação à esquerda, clique em **Aplicações**. 3. Clique em **Criar aplicação**. 4. Selecione **Nativo** como o tipo de aplicação e insira o nome da aplicação. 5. Clique em **Criar**. Create Logto application

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](https://capacitorjs.com/docs/guides/deep-links). 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 ```bash # ou yarn, pnpm npm install @logto/capacitor # Instale dependências parciais npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Inicie o cliente Logto ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - 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: ```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 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. Logto sign-in page

Se o usuário fechar a janela do navegador sem completar o fluxo de autenticação, o aplicativo Capacitor receberá um `LogtoClientError`. ## 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: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` 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: Logto sign-out page

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: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` 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: Logto redirect URI configuration

## 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. Capacitor iOS app

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 contact@logto.io ou [juntar-se ao nosso servidor Discord](https://discord.gg/UEPaF3j5e6)! ## Leituras adicionais - [Customize a experiência de login](https://docs.logto.io/docs/recipes/customize-sie/) - [Configure conectores](https://docs.logto.io/docs/recipes/configure-connectors/) - [Proteja sua API](https://docs.logto.io/docs/recipes/protect-your-api/) Experimente Logto Hoje