Criando um SDK web para Logto em minutos

Logto, uma plataforma de autenticação open-source, oferece uma infinidade de SDKs oficiais projetados para simplificar a integração para vários frameworks e plataformas. No entanto, ainda existem 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 básicas do Logto, independentemente de qualquer framework ou plataforma específica, desde que suporte JavaScript e seja executado em um ambiente de navegador.

Neste guia, vamos guiá-lo pelas etapas para criar um SDK React usando @logto/browser, este SDK implementará o fluxo de sign-in. Você pode seguir as mesmas etapas para criar um SDK para qualquer outra plataforma baseada em JavaScript que seja executada no navegador.

O fluxo de sign-in#

Antes de começarmos, vamos entender o fluxo de sign-in no Logto. O fluxo de sign-in consiste nas seguintes etapas:

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

Breve introdução do @logto/browser#

O pacote @logto/browser expõe uma classe LogtoClient que fornece as funcionalidades básicas do Logto, incluindo métodos para o fluxo de sign-in:

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

Criando o SDK React#

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

1. useLogto: Um hook que fornece o método signIn para disparar o fluxo de sign-in, e o estado isAuthenticated para verificar se o usuário está autenticado.
2. useHandleSignInCallback: Um hook que lida com a URL de callback e troca o código de autenticação por tokens, concluindo o fluxo de sign-in.

Para usar o SDK, você pode simplesmente envolver seu aplicativo com o componente LogtoProvider, e usar os hooks para verificar o estado de autenticação, sign-in e lidar com o callback.

Passo 1: Instale o pacote#

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

Passo 2: Defina o contexto do React#

Defina o contexto do fornecedor (provider), contendo 3 partes:

1. A instância subjacente LogtoClient que será inicializada no provedor (provider), e usada nos hooks.
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: Implemente o provedor (provider)#

Com o contexto pronto, vamos implementar o provedor. O provedor 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: Implemente os hooks#

Agora, vamos implementar os hooks.

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

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

Checkpoint: 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 usando os hooks para verificar o estado de autenticação, sign in e lidar com o retorno de chamada (callback). Você pode verificar o projeto oficial de amostra React aqui.

Conclusão#

Neste guia, mostramos como 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 do seu aplicativo.

Você pode seguir as mesmas etapas para criar um SDK para qualquer outra plataforma baseada em JavaScript que funcione em um navegador.

Recursos:

1. SDK de navegador Logto
2. SDK React Logto