Autenticar usuários - React Native SDK
Nesta página
- Pré-requisitos
- Configurar a autenticação do usuário no cliente
- Configurar fornecedores @realm/react
- Grave um componente de fallback para UserProvider
- Sessões de usuário
- Provedores de autenticação e autenticação de cliente
- Utilizador anónimo
- Usuário de e-mail/senha
- Usuário da chave de API
- Usuário JWT personalizado
- Usuário de função personalizada
- Usuário do Facebook
- Usuário do Google
- Usuário da Apple
- Login off-line
- Obtenha um token de acesso do usuário
- Atualize a expiração do token
- Desconectar um usuário
- Referência do hook useAuth
@realm/react
tem hooks para autenticação de usuário. useAuth e useEmailPasswordAuth lidam com a autenticação com provedores de autenticação habilitados.
Para consulta rápida do useAuth
, veja useAuth Hook nesta página. Para consulta rápida do useEmailPasswordAuth
, veja useEmailPasswordAuth Hook na página Gerenciar usuários de e-mail/senha.
Você também pode usar as APIs do Realm.js diretamente. Crie uma instância de um objeto credenciais e passe-a para App.login() para autenticar e obter um objeto de usuário.
Pré-requisitos
Antes de autenticar um usuário, você deve:
Habilitar um ou mais provedores de autenticação na aplicação.
Configurar a autenticação do usuário no cliente
@realm/react
tem provedores e hooks para autenticação de usuário. Para configurar a autenticação do usuário:
Configure
@realm/react
provedores.Grave um componente de fallback para
UserProvider
.
Configurar fornecedores @realm/react
Os componentes envolvidos pelo AppProvider podem acessar os hooks useApp e useAuth . Esses componentes só serão renderizados se AppProvider
se conectar com êxito ao backend do Atlas App Services .
Os componentes agrupados pelo UserProvider podem acessar usuários autenticados com o gancho useUser. Esses componentes só serão renderizados se o seu aplicativo tiver um usuário autenticado
Para configurar a autenticação do usuário:
Encerre todos os componentes que precisam acessar o App Services em
AppProvider
.Dentro do
AppProvider
, encerre todos os componentes que você deseja ter acesso como usuário autenticado comUserProvider
.Em
UserProvider
, inclua um acessório defallback
com um componente que registra um usuário. O aplicativo renderiza este componente se não houver nenhum usuário autenticado.
import React from 'react'; import {AppProvider, UserProvider} from '@realm/react'; // Fallback log in component that's defined in another file. import {LogIn} from './Login'; export const LoginExample = () => { return ( <ScrollView> <AppProvider id={APP_ID}> {/* If there is no authenticated user, mount the `fallback` component. When user successfully authenticates, the app unmounts the `fallback` component (in this case, the `LogIn` component). */} <UserProvider fallback={LogIn}> {/* Components inside UserProvider have access to the user. These components only mount if there's an authenticated user. */} <UserInformation /> </UserProvider> </AppProvider> </ScrollView> ); };
Grave um componente de fallback para UserProvider
Se seu aplicativo não tiver um usuário autenticado e conectado, o UserProvider
e seus filhos não serão renderizados. Para lidar com este caso, passe um componente de fallback para UserProvider
. Geralmente esta é a tela de conexão dos aplicativos.
O exemplo a seguir utiliza autenticação anônima, mas você pode utilizar qualquer um dos métodos do useAuth
.
Para gravar um componente de fallback de autenticação para UserProvider
:
Crie um componente funcional.
Desestruturar
logInWithAnonymous
eresult
do ganchouseAuth
.Chame a função
logInWithAnonymous()
dentro de um blocouseEffect
que tem uma array de dependência vazia.Lide com
result
. Se a operação de autenticação não for bem-sucedida, você pode gravar o tratamento de erro com base noresult
.
export const LogIn = () => { // `logInWithAnonymous` logs in a user using an // anonymous Realm Credential. // `result` gives us access to the result of the // current operation. In this case, `logInWithAnonymous`. const {logInWithAnonymous, result} = useAuth(); // Log in an anyonmous user on component render. // On successful login, this fallback component unmounts. useEffect(() => { logInWithAnonymous(); }, []) return ( <View > {!result.error && <Text>Please log in</Text>} <View> {result.pending && <ActivityIndicator />} {result.error && <ErrorComponent error={result.error} />} </View> </View> ); };
Sessões de usuário
O React Native SDK comunica-se com o Atlas App Services para gerenciar sessões com tokens de acesso e tokens de atualização.
Para saber mais sobre o gerenciamento de sessões, consulte Sessões de usuário na documentação do App Services.
Provedores de autenticação e autenticação de cliente
Quando tiver configurado a autenticação do usuário em seu cliente e os fornecedores de autenticação em seu App Services App, você poderá conectar os usuários.
Utilizador anónimo
O provedor Anônimo permite que os usuários façam login em seu aplicativo com contas temporárias que não têm informações associadas.
Chamar um método de autenticação quando um usuário está conectado no momento, muda o usuário atual para o novo usuário.
Se chamar logInWithAnonymous()
no fallback do UserProvider
, os filhos de UserProvider
serão renderizados assim que o anônimo for conetado.
Para conectar um usuário anônimo:
Desestruturar
logInWithAnonymous
eresult
do ganchouseAuth
.Chame
logInWithAnonymous()
sem nenhum argumento.Lidar com o
result
.
export const LogInWithAnonymous = () => { const {logInWithAnonymous, result} = useAuth(); const performAnonymousLogin = logInWithAnonymous; // Handle `result`... };
Usuário de e-mail/senha
O provedor de autenticação por e-mail/senha permite que os usuários se conectem ao seu aplicativo com um endereço de e-mail e uma senha.
Você pode usar o hook useEmailPasswordAuth
para lidar com a conexão do usuário em seu cliente. Para consulta rápida do useEmailPasswordAuth
, veja useEmailPasswordAuth Hook na página de usuário Gerenciar e-mail/senha.
Para fazer login de um usuário com e-mail e senha:
Desestruturar
logIn
eresult
do ganchouseEmailPasswordAuth
.Passe o e-mail e a senha do usuário para
LogIn()
como um objeto.Lidar com o
result
.
export const LoginWithEmail = () => { const {logIn, result} = useEmailPasswordAuth(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const performLogin = () => { logIn({email, password}); }; // Handle `result`... };
Usuário da chave de API
O provedor de autenticação da chave de API permite que os processos de servidor acessem seu aplicativo diretamente ou em nome de um usuário.
Antes de conectar um usuário com uma chave de API, é necessário criar uma chave de API.
Para fazer login com uma chave de API:
Desestruturar
loginWithApiKey
eresult
do ganchouseAuth
.Passe sua chave de API para
loginWithApiKey()
.
const loginApiKeyUser = async (apiKey: ApiKey) => { try { logInWithApiKey(apiKey!.key); } catch (error) { console.log(error); } };
Usuário JWT personalizado
O fornecedor de autenticação JWT personalizado lida com a autenticação do usuário com qualquer sistema de autenticação que retorne um JSON web token.
Para conectar um usuário JWT personalizado:
Configure o fornecedor de autenticação JWT no backend do App Services.
Obtenha um JWT de um sistema externo.
Desestruturar
logInWithJWT
eresult
do ganchouseAuth
.Passe o JWT para
logInWithJWT()
.Lidar com o
result
.
export const LogInWithJWT = () => { const {logInWithJWT, result} = useAuth(); // Get the current anonymous user so we can call // an App Services Function later. const anonymousUser = useUser(); const performJWTLogin = async () => { // Get a JWT from a provider. In this case, from // an App Services Function called "generateJWT". const token = (await anonymousUser.functions.generateJWT()) as string; logInWithJWT(token); }; // Handle `result`... };
Usuário de função personalizada
O provedor de autenticação função personalizada permite lidar com a autenticação do usuário executando uma função que recebe uma carga de informações arbitrárias sobre um usuário. Consulte Autenticação de funções personalizadas para ver detalhes.
Para conectar um usuário com o provedor de função personalizada:
Crie uma função do App Services para lidar com suas necessidades de autenticação.
Habilite o provedor de função personalizada para seu App Services App e configure-o para usar a função criada anteriormente.
Desestruturar
logInWithFunction
eresult
do ganchouseAuth
.Transfira quaisquer dados de usuário relevantes (como nome de usuário) para
logInWithFunction()
.Lidar com o
result
.
export const LogInWithFunction = () => { const {logInWithFunction, result} = useAuth(); const performFunctionLogin = async (email: string, password: string) => { // Pass arbitrary information to the Atlas function configured // for your App's Custom Function provider. logInWithFunction({email, password}); }; // Handle `result`... };
Usuário do Facebook
O provedor de autenticação do Facebook permite que você autentique usuários por meio de um aplicativo do Facebook usando sua conta existente do Facebook.
Para conectar um usuário com uma conta do Facebook existente, configure e habilite o provedor de autenticação do Facebook para o seu App Services App.
Importante
Não armazene URLs de fotos de perfil do Facebook
Os URLs da imagem de perfil do Facebook incluem o token de acesso do usuário para conceder permissão à imagem. Para garantir a segurança, não armazene um URL que inclua um token de acesso do usuário. Em vez disso, acesse o URL diretamente dos campos de metadados do usuário quando precisar buscar a imagem.
Você pode usar o SDK oficial do Facebook para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente. Quando autenticado, o SDK do Facebook retorna um token de acesso que você pode enviar para seu aplicativo React Native e usar para completar a conexão do usuário ao seu aplicativo.
export const LogInWithFacebook = () => { const {logInWithFacebook, result} = useAuth(); const performLogin = () => { // Get an access token using the Facebook SDK. // You must define this function. const token = getFacebookToken(); logInWithFacebook(token); }; // Handle `result`... };
Usuário do Google
O provedor de autenticação do Google permite que você autentique os usuários com sua conta do Google existente.
Para autenticar um usuário do Google, você deve configurar o provedor de autenticação do Google para o seu App Services App.
Não há integração oficial do recurso Fazer Login com o Google para o React Native. A abordagem mais simples para integrar o recurso Fazer Login com o Google ao seu aplicativo React Native com autenticação do Realm é usar uma biblioteca de terceiros. Você pode também construir sua própria solução usando o Google Identity Services para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente.
Independentemente da implementação, você deve recuperar um token de ID do servidor de autorização do Google. Use esse token de ID para conectar ao Realm.
export const LogInWithGoogle = () => { const {logInWithGoogle, result} = useAuth(); const performLogin = () => { // Get an access token using a third-party library // or build your own solution. You must define this function. const token = getGoogleToken(); logInWithGoogle(token); }; // Handle `result`... };
Usuário da Apple
O provedor de autenticação Apple permite que você autentique usuários por meio do Sign-in With Apple.
Para autenticar um usuário da Apple, você deve configurar o provedor de autenticação da Apple para seu App Services App.
Você pode usar o SDK oficial do JavaScript do recurso Entrar com a Apple para lidar com a autenticação do usuário e redirecionar o fluxo de um aplicativo de cliente. Quando autenticado, o SDK do JavaScript da Apple retorna um token de ID que você pode enviar para seu aplicativo React Native e usar para completar a conexão do usuário ao seu aplicativo.
export const LogInWithApple = () => { const {logInWithApple, result} = useAuth(); const performLogin = () => { // Get an access token using the Apple SDK. // You must define this function. const token = getAppleToken(); logInWithApple(token); }; // Handle `result`... };
Dica
Se você receber uma mensagem de erro Login failed
dizendo que o token contains
an invalid number of segments
, verifique se está passando uma versão de string codificada em UTF-8 do JWT.
Login off-line
Quando seu aplicativo Realm autentica um usuário, armazena em cache as credenciais do usuário. Você pode verificar as credenciais de usuário existentes para ignorar o fluxo de login e acessar o usuário em cache. Use isto para abrir um realm offline.
Observação
O login inicial exige uma conexão de rede
Quando um usuário se inscreve em seu aplicativo ou faz login pela primeira vez com uma conta existente em um cliente, o cliente deve ter uma conexão de rede. A verificação de credenciais de usuário em cache permite que você abra um domínio offline, mas somente se o usuário já tiver feito login enquanto estiver online.
// Log user into your App Services App. // On first login, the user must have a network connection. const getUser = async () => { // If the device has no cached user credentials, log in. if (!app.currentUser) { const credentials = Realm.Credentials.anonymous(); await app.logIn(credentials); } // If the app is offline, but credentials are // cached, return existing user. return app.currentUser!; };
Para saber como usar o usuário em cache na Configuração Sincronizada e acessar um domínio enquanto estiver off-line, leia a documentação Open a Synced Realm While Offline (Abrir um domínio sincronizado enquanto estiver off-line ).
Obtenha um token de acesso do usuário
Quando um usuário se conecta, o Atlas App Services cria um token de acesso para o usuário que lhe concede acesso à sua aplicação. O Realm SDK gerencia automaticamente os tokens de acesso, atualiza-os quando expiram e inclui um token de acesso válido para o usuário atual em cada solicitação. O Realm não atualiza automaticamente o token de atualização. Quando o token de atualização expira, o usuário deve se conectar novamente.
Se você enviar solicitações fora do SDK, precisará incluir o token de acesso do usuário em cada solicitação e atualizar manualmente o token quando ele expirar.
Você pode acessar e atualizar um token de acesso de usuário conectado ao SDK a partir de seu objeto Realm.User
, como no seguinte exemplo:
const RefreshUserAcessToken = () => { const user = useUser(); const [accessToken, setAccessToken] = useState<string | null>(); // Gets a valid user access token to authenticate requests const refreshAccessToken = async () => { // An already logged in user's access token might be stale. To // guarantee that the token is valid, refresh it if necessary. await user.refreshCustomData(); setAccessToken(user.accessToken); }; // Use access token... };
Atualize a expiração do token
A atualização dos tokens expira após um período de tempo definido. Quando o token de atualização expira, o token de acesso não pode mais ser atualizado e o usuário deve se conectar novamente.
Se o token de atualização expirar após a abertura do domínio, o dispositivo não poderá sincronizar até que o usuário faça login novamente. Seu manipulador de erros de sincronização deve implementar uma lógica que capture um erro de token expirado ao tentar sincronizar e, em seguida, redirecionar os usuários para um fluxo de login.
Para obter informações sobre como configurar a expiração do token de atualização, consulte Gerencie sessões de usuário na documentação do App Services.
Desconectar um usuário
Para desconectar qualquer usuário, chame o método User.logOut()
em sua instância de usuário.
Aviso
Se o usuário se desconectar, você não poderá mais ler ou gravar dados em nenhum domínio sincronizado que o usuário tenha aberto. Consequentemente, qualquer operação que ainda não tenha sido concluída antes de o usuário iniciar o logout não poderá ser concluída com êxito e provavelmente resultará em erro. Todos os dados de uma operação de gravação que falhar dessa forma serão perdidos.
function UserInformation() { const user = useUser(); const {logOut} = useAuth(); const performLogout = () => { logOut(); }; // Add UI for logging out... }
Referência do hook useAuth
O hook useAuth
tem um método de autenticação para cada provedor de autenticação do App Services. Possui também um estado relacionado à autenticação. Consulte a referência useAuth para mais detalhes.
Você pode também consultar a documentação da API @realm/react
do useAuth.