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