Autentique um usuário - SDK da Web

Nesta página

Visão geral

Conecte-se
Anônimo
E-mail/senha
Chave API
Função personalizada
JWT personalizado
Autenticação do Facebook
Autenticação do Google
Autenticação da Apple
Obtenha um token de acesso do usuário
Atualize a expiração do token
Desconecte

Os Atlas Device SDKs estão obsoletos. Consulte apágina de descontinuação do para detalhes.

Visão geral

O SDK da Web oferece aos desenvolvedores uma API unificada para autenticar usuários de aplicativos para qualquer provedor de autenticação. Os usuários se conectam fornecendo credenciais de autenticação para um determinado provedor de autenticação. O SDK gerencia automaticamente os tokens de autenticação e atualiza os dados dos usuários conectados.

Conecte-se

Anônimo

O fornecedor Anônimo permite que os usuários se conectem em seu aplicação com contas efêmeras que não têm informações associadas.

Para se conectar, crie uma credencial anônima e passe-a para App.logIn():

async function loginAnonymous() {
  // Create an anonymous credential
  const credentials = Realm.Credentials.anonymous();
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  console.assert(user.id === app.currentUser.id);
  return user;
}
const user = await loginAnonymous();

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.

Para se conectar, crie uma credencial de e-mail/senha com o endereço de e-mail e a senha do usuário e passe-a para App.logIn():

async function loginEmailPassword(email, password) {
  // Create an email/password credential
  const credentials = Realm.Credentials.emailPassword(email, password);
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  console.assert(user.id === app.currentUser.id);
  return user;
}
const user = await loginEmailPassword("joe.jasper@example.com", "passw0rd");

Chave 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.

Para se conectar com uma chave de API, crie uma credencial de chave de API com uma chave de API de servidor ou usuário e passe-a para App.logIn():

async function loginApiKey(apiKey) {
  // Create an API Key credential
  const credentials = Realm.Credentials.apiKey(apiKey);
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  console.assert(user.id === app.currentUser.id);
  return user;
}
const user = await loginApiKey(REALM_API_KEY.key); // add previously generated API key

Função personalizada

O provedor de autenticação de 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.

Para se conectar com o provedor de função personalizada, crie uma credencial de função personalizada com um objeto de carga útil e passe-a para App.logIn():

async function loginCustomFunction(payload) {
  // Create a Custom Function credential
  const credentials = Realm.Credentials.function(payload);
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  console.assert(user.id === app.currentUser.id);
  return user;
}
const user = await loginCustomFunction({ username: "ilovemongodb" });

JWT personalizado

O provedor de autenticação JWT personalizado permite que você lide com a autenticação do usuário com qualquer sistema de autenticação que retorne um token da Web JSON.

Para se conectar, crie uma credencial JWT personalizada com um JWT do sistema externo e passe-a para App.logIn():

async function loginCustomJwt(jwt) {
  // Create a Custom JWT credential
  const credentials = Realm.Credentials.jwt(jwt);
  // Authenticate the user
  const user = await app.logIn(credentials);
  // `App.currentUser` updates to match the logged in user
  console.assert(user.id === app.currentUser.id);
  return user;
}
const user = await loginCustomJwt("eyJ0eXAi...Q3NJmnU8oP3YkZ8");

Autenticação 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. Você pode usar o fluxo de autenticação integrado ou autenticar com o SDK do Facebook.

Importante

Habilite o provedor de autenticação do Facebook

Para conectar um usuário com uma conta do Facebook existente, você deve configurar e habilitar o provedor de autenticação do Facebook para seu aplicativo.

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.

Use o fluxo integrado do Facebook OAuth 2.0

O Realm SDK da Web inclui métodos para lidar com o processo OAuth 2.0 e não requer que que você instale o SDK do Facebook. O fluxo integrado segue três etapas principais:

Você chama app.logIn() com uma credencial do Facebook. A credencial deve especificar um URL para seu aplicativo que também esteja listado como URI de redirecionamento na configuração do provedor.

// The redirect URI should be on the same domain as this app and
// specified in the auth provider configuration.
const redirectUri = "https://app.example.com/handleOAuthLogin";
const credentials = Realm.Credentials.facebook(redirectUri);
// Calling logIn() opens a Facebook authentication screen in a new window.
const user = await app.logIn(credentials);
// The app.logIn() promise will not resolve until you call `Realm.handleAuthRedirect()`
// from the new window after the user has successfully authenticated.
console.log(`Logged in with id: ${user.id}`);

Uma nova janela abre para uma tela de autenticação do Facebook e o usuário autentica e autoriza seu aplicativo nessa janela. Depois de concluída, a nova janela redireciona para o URL especificado na credencial.

Você chama Realm.handleAuthRedirect() na página redirecionada, que armazena o token de acesso do Atlas App Services do usuário e fecha a janela. A janela original do aplicativo detectará automaticamente o token de acesso e concluirá o login do usuário.

// When the user is redirected back to your app, handle the redirect to
// save the user's access token and close the redirect window. This
// returns focus to the original application window and automatically
// logs the user in.
Realm.handleAuthRedirect();

Autenticar com o SDK do Facebook

Você pode usar o SDK oficial do Facebook para lidar com a autenticação do usuário e o fluxo de redirecionamento. Depois de autenticado, o SDK do Facebook retorna um token de acesso que você pode usar para concluir o login do usuário na sua aplicação.

// Get the access token from the Facebook SDK
const { accessToken } = FB.getAuthResponse();
// Define credentials with the access token from the Facebook SDK
const credentials = Realm.Credentials.facebook(accessToken);
// Log the user in to your app
await app.logIn(credentials);

Autenticação do Google

O provedor de autenticação do Google permite autenticar usuários por meio de um projeto do Google usando a conta do Google existente.

Observação

Habilitar o provedor de autenticação do Google

Para autenticar um usuário do Google, é necessário configurar o provedor de autenticação do Google.

Conectar um usuário do Google à sua aplicação é um processo de duas etapas:

Primeiro, você autentica o usuário com o Google. Você pode usar uma biblioteca como o Google One Tap para uma experiência simplificada.
Em segundo lugar, você conecta o usuário à sua aplicação com um token de autenticação retornado pelo Google após a autenticação bem-sucedida do usuário.

Autenticar com o Google One Tap

Observação

Requer OpenID Connect

O Google One Tap só permite a autenticação de usuário através do OpenID Connect. Para conectar usuários do Google à sua aplicação na web, você deve ativar o OpenID Connect na configuração do provedor de autenticação do App Services.

O Google One Tap é um SDK do Google que permite que os usuários se cadastrem ou se conectem em um website com um clique (ou toque).

Exemplo

Fluxo básico do Google One Tap

Este exemplo mostra como definir a autenticação do Google com App Services em um aplicativo na web muito básica. o aplicativo contém apenas um arquivo index.html.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Google One Tap Example</title>
  </head>
  <body>
    <h1>Google One Tap Example</h1>
    <!-- The data-callback HTML attribute sets the callback function that is run
      when the user logs in. Here we're calling the handleCredentialsResponse JavaScript
      function defined in the below script section to log the user into App Services.
    -->
    <div
      id="g_id_onload"
      data-client_id="<your_google_client_id>"
      data-callback="handleCredentialsResponse"
    ></div>
  </body>
  <!-- Load Atlas App Services -->
  <script src="https://unpkg.com/realm-web/dist/bundle.iife.js"></script>
  <!-- Load Google One Tap -->
  <script src="https://accounts.google.com/gsi/client"></script>
  <!-- Log in with Realm and Google Authentication -->
  <script async defer>
    const app = new Realm.App({
      id: "<your_realm_app_id>",
    });
    // Callback used in `data-callback` to handle Google's response and log user into App Services
    function handleCredentialsResponse(response) {
      const credentials = Realm.Credentials.google({ idToken: response.credential });
      app
        .logIn(credentials)
        .then((user) => alert(`Logged in with id: ${user.id}`));
    }
  </script>
</html>

Use o fluxo integrado do Google OAuth 2.0

Observação

Não use o OpenID Connect para o fluxo integrado do Google OAuth 2.0

O OpenID Connect não funciona com o Atlas App Services ': fluxo integrado do Google OAuth 2.0 . Se você quiser usar o OpenID Connect com o Realm Web SDK, use o fluxo de Autenticação com o Google One Tap .

O Realm SDK da Web inclui métodos para lidar com o processo OAuth 2.0 e não exige que você instale um SDK do Google. O fluxo integrado segue três etapas principais:

Chame app.logIn() com uma credencial do Google. A credencial deve especificar um URL para seu aplicativo que também esteja listado como URI de redirecionamento na configuração do provedor.
Uma nova janela é aberta para uma tela de autenticação do Google e o usuário autentica e autoriza seu aplicativo nessa janela. Depois de concluída, a nova janela redireciona para o URL especificado na credencial.
Chame Realm.handleAuthRedirect() na página redirecionada, que armazena o token de acesso ao App Services e fecha a janela. A janela original do aplicativo detectará automaticamente o token de acesso e concluirá o login do usuário.

Exemplo

Fluxo de login básico da web

Este exemplo mostra como definir a autenticação do Google com App Services em um aplicativo na web muito básica. o aplicativo tem os seguintes arquivos:

.
├── auth.html
└── index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Google Auth Example</title>
  </head>
  <body>
    <h1>Google Auth Example</h1>
    <button id="google-auth">Authenticate!</button>
  </body>
  <!-- Load Realm -->
  <script src="https://unpkg.com/realm-web/dist/bundle.iife.js"></script>
  <!-- Log in with App Services and Google Authentication -->
  <script>
    const app = new Realm.App({
      id: "<Your-App-ID>",
    });
    const authButton = document.getElementById("google-auth");
    authButton.addEventListener("click", () => {
      // The redirect URL should be on the same domain as this app and
      // specified in the auth provider configuration.
      const redirectUrl = "http://yourDomain/auth.html";
      const credentials = Realm.Credentials.google({ redirectUrl });
      // Calling logIn() opens a Google authentication screen in a new window.
      app
        .logIn(credentials)
        .then((user) => {
          // The logIn() promise will not resolve until you call `handleAuthRedirect()`
          // from the new window after the user has successfully authenticated.
          console.log(`Logged in with id: ${user.id}`);
        })
        .catch((err) => console.error(err));
    });
  </script>
</html>

auth.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Google Auth Redirect</title>
  </head>
  <body>
    <p>Redirects come here for Google Authentication</p>
  </body>
  <script>
    Realm.handleAuthRedirect();
  </script>
</html>

Importante

Limitações de redirecionamento do OAuth 2.0 integrado para o Google

Devido a alterações nos requisitos de verificação da aplicação OAuth, o processo OAuth 2.0 integrado enfrentará limitações ao autenticar usuários do Google . Se você usar o fluxo de redirecionamento de login do Google usando o fluxo de redirecionamento do Atlas App Services, no máximo 100 usuários do Google poderão se autenticar enquanto o aplicativo estiver em desenvolvimento/teste/estágio, e todos os usuários verão uma notificação de aplicativo não verificado antes de se autenticarem.

Para evitar essas limitações, recomendamos que você use um SDK oficial do Google para obter um token de acesso de usuário, conforme descrito acima.

Autenticação da Apple

O provedor de autenticação Apple permite que você autentique usuários por meio do Sign-in With Apple. Você pode usar o fluxo de autenticação integrado ou autenticar com o SDK da Apple.

Observação

Habilite o provedor de autenticação da Apple

Para autenticar um usuário da Apple, você deve configurar o provedor de autenticação da Apple.

Use o fluxo integrado do Apple OAuth 2.0

O Realm SDK da Web inclui métodos para lidar com o processo OAuth 2.0 e não requer que você instale o Apple JS SDK. O fluxo integrado segue três etapas principais:

Você chama app.logIn() com uma credencial da Apple. A credencial deve especificar um URL para seu aplicativo que também esteja listado como URI de redirecionamento na configuração do provedor.

// The redirect URI should be on the same domain as this app and
// specified in the auth provider configuration.
const redirectUri = "https://app.example.com/handleOAuthLogin";
const credentials = Realm.Credentials.apple(redirectUri);
// Calling logIn() opens an Apple authentication screen in a new window.
const user = app.logIn(credentials);
// The logIn() promise will not resolve until you call `Realm.handleAuthRedirect()`
// from the new window after the user has successfully authenticated.
console.log(`Logged in with id: ${user.id}`);

Uma nova janela abre para uma tela de autenticação da Apple e o usuário autentica e autoriza seu aplicativo nessa janela. Depois de concluída, a nova janela redireciona para o URL especificado na credencial.

Você chama Realm.handleAuthRedirect() na página redirecionada, que armazena o token de acesso ao App Services do usuário e fecha a janela. A janela original do aplicativo detectará automaticamente o token de acesso e concluirá o login do usuário.

// When the user is redirected back to your app, handle the redirect to
// save the user's access token and close the redirect window. This
// returns focus to the original application window and automatically
// logs the user in.
Realm.handleAuthRedirect();

Autentique com o Apple SDK

Você pode usar o login oficial com o Apple JS SDK para lidar com a autenticação do usuário e o fluxo de redirecionamento. Uma vez autenticado, o Apple JS SDK retorna um token de ID que você pode usar para concluir o login do usuário em seu aplicativo.

// Get the ID token from the Apple SDK
const { id_token } = await AppleID.auth.signIn();
// Define credentials with the ID token from the Apple SDK
const credentials = Realm.Credentials.apple(id_token);
// Log the user in to your app
const user = await app.logIn(credentials);

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.

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:

// Gets a valid user access token to authenticate requests
async function getValidAccessToken(user) {
  // An already logged in user's access token might be stale. To
  // guarantee that the token is valid, refresh it if necessary.
  await user.refreshAccessToken();
  return user.accessToken;
}

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.

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.

Desconecte

Para desconectar qualquer usuário, chame o User.logOut() em sua instância de usuário.

Desconecte o usuário atual:

await app.currentUser.logOut();

Desconecte o usuário por ID do usuário:

const userId = app.currentUser.id;
await app.allUsers[userId].logOut();

Voltar

Crie e exclua usuários

Gerenciar usuários de e-mail/senha