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.
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:
- Inicie sessão no Logto Console.
- Na barra de navegação à esquerda, clique em Aplicações.
- Clique em Criar aplicação.
- Na página aberta, encontre a secção "Native" e localize o cartão "Expo (React Native)".
- Clique em Começar a construir e insira o nome da sua aplicação.
- 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.
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
ASWebAuthenticationSessionvai 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.jsondo 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:
- Abra a aplicação no seu navegador, deverá ver o botão "Iniciar sessão".
- Clique no botão "Iniciar sessão" e deverá ser redirecionado para a página de login do Logto.
- 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".
- 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!