Autentique um usuário - SDK da Web
Nesta página
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 seu aplicativo.
// 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
.