Aprenda como criar um SDK personalizado para Logto usando `@logto/browser`.
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.
Antes de começarmos, vamos entender o fluxo de login em Logto. O fluxo de login consiste nas seguintes etapas:
@logto/browserO pacote @logto/browser expõe uma classe LogtoClient que fornece as funcionalidades centrais do Logto, incluindo métodos para o fluxo de login:
signIn(): Gera a URL de autenticação OIDC, e redireciona para ela.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.isAuthenticated(): Verifica se o usuário está autenticado.No SDK, vamos fornecer 2 ganchos: useLogto e useHandleSignInCallback, e junto com um componente LogtoProvider:
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.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.
Primeiro, instale o pacote @logto/browser usando npm ou outros gerenciadores de pacotes:
Defina o contexto do provedor, contendo 3 partes:
LogtoClient subjacente que será inicializada no provedor, e usada nos ganchos.Crie um novo arquivo context.tsx e escreva o seguinte código:
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:
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:
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.
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: