Português (Portugal)
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Construir autenticação Expo (React Native) com Logto

Aprende como construir um fluxo de autenticação de utilizador com Expo (React Native) integrando o Logto SDK.

Gao
Gao
Founder

Introdução

Introdução

  • Logto é uma alternativa de código aberto ao Auth0 para construir infraestruturas de identidade. Suporta vários métodos de login, incluindo nome de utilizador, e-mail, número de telefone e logins sociais populares como Google e GitHub.
  • Expo (React Native) é um ecossistema de ferramentas que te ajudam a criar apps nativas universais com React que correm em Android, iOS, e na web.

Neste tutorial, vamos mostrar-lhe como construir um fluxo de autenticação de utilizador com Expo (React Native) integrando o Logto SDK. O tutorial usa TypeScript como a linguagem de programação.

Pré-requisitos

Antes de começar, certifique-se de que tem o seguinte:

  • Uma conta Logto. Se não tiver uma, pode registar-se gratuitamente.
  • Ambiente de desenvolvimento An Expo (React Native) e um projeto.

Criar uma aplicação Logto

Para começar, crie uma aplicação Logto com o tipo "Native". Siga estes passos para criar uma aplicação Logto:

  1. Inicie sessão no Logto Console.
  2. Na barra de navegação à esquerda, clique em Aplicações.
  3. Clique em Criar aplicação.
  4. Na página aberta, encontre a secção "Native" e localize o cartão "Expo (React Native)".
  5. Clique em Começar a construir e insira o nome da sua aplicação.
  6. Clique em Criar.

Depois deverá ver um guia interativo que o orienta no processo de integração do Logto SDK com a sua aplicação Expo (React Native). O conteúdo seguinte pode ser uma referência para uso futuro.

Experimente o guia interativo do Logto Cloud

Integrar com Logto SDK

Instalação

Instala o Logto SDK e as suas dependências pares através do teu gestor de pacotes favorito:

O pacote @logto/rn é o SDK para Logto. Os pacotes restantes são suas dependências pares. Eles não poderiam ser listados como dependências diretas porque o Expo CLI exige que todas as dependências para módulos nativos sejam instaladas diretamente no package.json do projeto raiz.

Iniciar provedor Logto

Importa e utiliza LogtoProvider para fornecer um contexto Logto:

Implementar login e logout

Muda para a página de detalhes da aplicação no Console do Logto. Adiciona um URI de redirecionamento nativo (por exemplo, io.logto://callback), depois clica em "Salvar".

  • Para iOS, o esquema do URI de redirecionamento não é realmente importante, já que a classe ASWebAuthenticationSession vai ouvir o URI de redirecionamento independentemente de estar registrado ou não.

  • Para Android, o esquema do URI de redirecionamento deve ser preenchido no arquivo app.json do Expo, por exemplo:

Agora de volta à tua app, podes usar o hook useLogto para fazer login e logout:

Mostrar informações do utilizador

Para mostrar as informações do utilizador, podes usar o método getIdTokenClaims():

Verificação: Executar a aplicação

Agora pode executar a aplicação e tentar iniciar sessão/terminar sessão com o Logto:

  1. Abra a aplicação no seu navegador, deverá ver o botão "Iniciar sessão".
  2. Clique no botão "Iniciar sessão" e deverá ser redirecionado para a página de login do Logto.
  3. Depois de iniciar sessão, deverá ser redirecionado de volta para a aplicação e deverá ver os dados do utilizador e o botão "Terminar sessão".
  4. Clique no botão "Terminar sessão" e deverá ser redirecionado para a página de logout do Logto, e depois redirecionado de volta para a aplicação em estado de não iniciado sessão.

Se encontrar algum problema durante a integração, não hesite em juntar-se ao nosso servidor Discord para conversar com a comunidade e a equipa Logto!

Leituras adicionais

Experimenta o Logto Hoje