Criando uma web SDK para Logto em minutos

Logto, uma plataforma de autenticação de código aberto, oferece uma infinidade de SDKs oficiais projetados para simplificar a integração para vários frameworks e plataformas. No entanto, ainda há muitas plataformas que não possuem SDKs oficiais.

Para preencher essa lacuna, Logto fornece o pacote fundamental @logto/browser, projetado para ajudar os desenvolvedores a criar SDKs personalizados de acordo com requisitos específicos. Este pacote implementa as funcionalidades centrais do Logto, desligado de qualquer framework ou plataforma específica, desde que suporte JavaScript e seja executado em um ambiente de navegador.

Neste guia, vamos guiá-lo através dos passos para criar um SDK React usando @logto/browser, este SDK implementará o fluxo de login. Você pode seguir os mesmos passos para criar um SDK para qualquer outra plataforma baseada em JavaScript que esteja rodando no navegador.

O fluxo de login#

Antes de começarmos, vamos entender o fluxo de login em Logto. O fluxo de login consiste nas seguintes etapas:

1. Redirecionar para Logto: O usuário é redirecionado para a página de login do Logto.
2. Autenticar: O usuário insere suas credenciais e autentica com Logto.
3. Redirecionar de volta para o seu aplicativo: Após a autenticação bem sucedida, o usuário é redirecionado de volta para o seu aplicativo com um código de autorização.
4. Troca de Código: Seu aplicativo troca o código de autorização por tokens.

Breve introdução de @logto/browser#

O pacote @logto/browser expõe uma classe LogtoClient que fornece as funcionalidades centrais do Logto, incluindo métodos para o fluxo de login:

1. signIn(): Gera a URL de autenticação OIDC, e redireciona para ela.
2. handleSignInCallback(): Verifica e analisa a URL de retorno de chamada e extrai o código de autorização, então troca o código por tokens chamando o ponto final do token.
3. isAuthenticated(): Verifica se o usuário está autenticado.

Criando o SDK React#

No SDK, vamos fornecer 2 ganchos: useLogto e useHandleSignInCallback, e junto com um componente LogtoProvider:

1. useLogto: Um gancho que fornece o método signIn para disparar o fluxo de login, e o estado isAuthenticated para verificar se o usuário está autenticado.
2. useHandleSignInCallback: Um gancho que lida com a URL de retorno de chamada e troca o código de autorização por tokens, completando o fluxo de login.

Para usar o SDK, você pode simplesmente envolver seu aplicativo com o componente LogtoProvider, e usar os ganchos para verificar o estado de autenticação, fazer login e lidar com o retorno de chamada.

Passo 1: Instalar o pacote#

Primeiro, instale o pacote @logto/browser usando npm ou outros gerenciadores de pacotes:

Passo 2: Definir o contexto do React#

Defina o contexto do provedor, contendo 3 partes:

1. A instância LogtoClient subjacente que será inicializada no provedor, e usada nos ganchos.
2. O estado de autenticação.
3. O método para definir o estado de autenticação.

Crie um novo arquivo context.tsx e escreva o seguinte código:

Passo 3: Implementar o provedor#

Com o contexto pronto, vamos implementar o provedor. O provedor irá inicializar a instância LogtoClient, verificar se o usuário está autenticado, e fornecer o contexto para seus filhos.

Crie um novo arquivo provider.tsx:

Passo 4: Implementar os ganchos#

Agora, vamos implementar os ganchos.

• useLogto: Neste gancho, usamos o contexto para obter a instância LogtoClient, e fornecemos o método signIn e o estado isAuthenticated. Você pode continuar adicionando mais métodos a este gancho.
• useHandleSignInCallback: Este gancho lerá a URL de retorno de chamada do navegador, extrairá o código de autorização, e trocará por tokens. Ele também definirá o estado de autenticação para true após o usuário ser autenticado.

Crie um novo arquivo hooks.ts e escreva o seguinte código:

Verificação: usando o SDK#

Agora, você criou o SDK React para Logto. Você pode usá-lo em seu aplicativo envolvendo o aplicativo com o componente LogtoProvider, e utilizando os ganchos para verificar o estado de autenticação, fazer login, e lidar com o retorno de chamada. Você pode conferir o projeto de exemplo oficial do React aqui.

Conclusão#

Neste guia, mostramos as etapas para criar um SDK React para Logto implementando o fluxo básico de autenticação. O SDK fornecido aqui é um exemplo básico. Você pode estendê-lo adicionando mais métodos e funcionalidades para atender às necessidades de seu aplicativo.

Você pode seguir os mesmos passos para criar um SDK para qualquer outra plataforma baseada em JavaScript que rode em um navegador.

Recursos:

1. SDK de Navegador Logto
2. SDK React Logto