사용자 인증 - 웹 SDK

이 페이지의 내용

개요

로그인
익명
이메일/비밀번호
API 키
사용자 지정 기능
사용자 지정 JWT
Facebook 인증
Google 인증
Apple 인증
사용자 액세스 토큰 받기
토큰 만료 새로 고침
로그아웃

Atlas Device SDK는 더 이상 사용되지 않습니다. 자세한 내용은 지원 중단 페이지 를 참조하세요.

개요

웹 SDK는 인증 제공자에 관계없이 애플리케이션 사용자를 인증할 수 있는 통합 API를 개발자에게 제공합니다. 사용자가 지정된 인증 제공자의 인증 자격 증명을 제공하여 로그인하면 SDK가 자동으로 인증 토큰을 관리하고 로그인한 사용자의 데이터를 새로 고칩니다.

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();

이메일/비밀번호

이메일/비밀번호 인증 제공자를 통해 사용자는 이메일 주소와 비밀번호를 사용하여 애플리케이션에 로그인할 수 있습니다.

로그인하려면 사용자의 이메일 주소와 비밀번호를 사용하여 이메일/비밀번호 자격 증명을 생성하고 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");

API 키

API 키 인증 제공자를 사용하면 서버 프로세스가 직접 또는 사용자를 대신하여 앱에 액세스할 수 있습니다.

API 키로 로그인하려면 서버 또는 사용자 API 키로 API 키 자격 증명을 만들어 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

사용자 지정 기능

사용자 지정 함수 인증 제공자 를 사용하면 사용자에 대한 임의의 정보 페이로드를 수신하는 함수 를 실행 하여 사용자 인증 을 처리하다 할 수 있습니다.

사용자 지정 함수 공급자로 로그인하려면 페이로드 객체를 사용하여 사용자 지정 함수 자격 증명을 생성하고 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

사용자 지정 JSON web token 인증 제공자를 사용하면 JSON web token 을 반환하는 모든 인증 시스템에서 사용자 인증을 처리할 수 있습니다.

로그인하려면 외부 시스템에서 JWT를 사용하여 사용자 지정 JWT 자격 증명을 생성하고 이를 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");

Facebook 인증

Facebook 인증 제공자를 사용하면 기존 Facebook 계정을 사용하여 Facebook 앱을 통해 사용자를 인증할 수 있습니다. 내장된 인증 플로우 를 사용하거나 Facebook SDK로 인증할 수 있습니다.

중요

Facebook 인증 제공자 활성화

기존 Facebook 계정으로 사용자를 로그인하려면 애플리케이션에 대한 인증 공급자를 구성하고 활성화해야 합니다.

중요

Facebook 프로필 사진 URL 저장 안 함

Facebook 프로필 사진 URL에는 이미지 권한을 부여하는 사용자의 액세스 토큰이 포함되어 있습니다. 보안을 위해 사용자의 액세스 토큰이 포함된 URL을 저장하지 마세요. 대신 이미지를 가져와야 할 때 사용자의 메타데이터 필드에서 직접 URL에 액세스합니다.

내장 Facebook OAuth 2.0 절차 사용

Realm 웹 SDK에는 OAuth 2.0 프로세스를 처리하는 메서드가 포함되어 있으며 Facebook SDK를 설치할 필요가 없습니다. 내장된 플로우는 세 가지 주요 단계를 따릅니다.

Facebook 자격 증명을 사용하여 app.logIn()을(를) 호출합니다. 자격 증명은 공급자 구성에서 리디렉션 URI로도 나열되는 앱의 URL을 지정해야 합니다.

// 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}`);

Facebook 인증 화면이 표시되는 새 창이 열리고 사용자는 해당 창에서 앱을 인증하고 권한을 부여합니다. 완료되면 새 창이 자격 증명에 지정된 URL로 리디렉션됩니다.

리디렉션된 페이지에서 Realm.handleAuthRedirect()을(를) 호출하면 사용자의 Atlas App Services 액세스 토큰이 저장되고 창이 닫힙니다. 원래 앱 창이 자동으로 액세스 토큰을 감지하고 사용자 로그인을 완료합니다.

// 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();

Facebook SDK로 인증하기

공식 Facebook SDK 를 사용할 수 있습니다. 사용자 인증 및 리디렉션 흐름을 처리하다 합니다. 인증이 완료되면 Facebook SDK는 사용자의 앱 로그인을 완료하는 데 사용할 수 있는 액세스 토큰을 반환합니다.

// 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);

Google 인증

Google 인증 제공자를 사용하면 기존 Google 계정을 사용하여 Google 프로젝트를 통해 사용자를 인증할 수 있습니다.

참고

Google 인증 제공자 활성화

Google 사용자를 인증하려면 Google 인증 제공자를 구성해야 합니다.

Google 사용자를 앱에 로그인하는 프로세스는 다음 두 단계로 이루어집니다.

먼저 Google을 통해 사용자를 인증합니다. Google One Tap 과 같은 라이브러리를 사용할 수 있습니다. 간소화된 환경을 제공합니다.
둘째, 사용자 인증에 성공하면 Google이 반환한 인증 토큰을 사용하여 사용자를 앱에 로그인합니다.

Google One Tap으로 인증

참고

OpenID Connect 필요

Google One Tap은 OpenID Connect를 통한 사용자 인증 만 지원합니다. Google 사용자를 웹 앱 에 로그 하려면 App Services 인증 제공자 구성에서 OpenID Connect를 활성화 해야 합니다.

Google One Tap은 사용자가 클릭 한 번(또는 탭)으로 웹사이트에 가입하거나 로그인할 수 있는 Google SDK입니다.

예시

기본 Google 원탭 절차

이 예시에서는 기본적인 웹 앱에서 App Services로 Google 인증을 설정하는 방법을 보여줍니다. 앱에는 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>

내장 Google OAuth 2.0 절차 사용

참고

내장 Google OAuth 2.0 절차에 OpenID Connect를 사용하지 마세요.

OpenID Connect는 App Services에서 작동하지 않습니다.: 내장 Google OAuth 2.0 흐름. Realm Web SDK 와 함께 OpenID Connect를 사용하려면 Google One Tap으로 인증 절차를 사용하세요 .

Realm 웹 SDK에는 OAuth 2.0 프로세스를 처리하는 메서드가 포함되어 있으며 Google SDK를 설치할 필요가 없습니다. 내장된 플로우는 세 가지 주요 단계를 따릅니다.

Google 자격 증명으로 app.logIn()을(를) 호출합니다. 자격 증명은 공급자 구성에서 리디렉션 URI로도 나열되는 앱의 URL을 지정해야 합니다.
Google 인증 화면이 표시되는 새 창이 열리고 사용자는 해당 창에서 앱을 인증하고 권한을 부여합니다. 완료되면 새 창이 자격 증명에 지정된 URL로 리디렉션됩니다.
리디렉션된 페이지에서 Realm.handleAuthRedirect()을(를) 호출하면 사용자의 App Services 액세스 토큰이 저장되고 창이 닫힙니다. 원래 앱 창이 자동으로 액세스 토큰을 감지하고 사용자 로그인을 완료합니다.

예시

기본 웹 로그인 절차

이 예에서는 기본적인 웹 앱에서 App Services로 Google 인증을 설정하는 방법을 보여줍니다. 앱에는 다음 파일이 있습니다.

.
├── 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>

중요

Google용 내장 OAuth 2.0 리디렉션 제한 사항

OAuth 애플리케이션 인증 요구 사항의 변경으로 인해 Google 사용자를 인증할 때 기본 제공 OAuth 2.0 프로세스에는 제한이 따릅니다. Atlas App Services 의 리디렉션 흐름을 사용하여 Google 로그인 리디렉션 흐름을 사용하는 경우 앱이 개발/테스트/준비 단계에 있는 동안 최대 100 명의 Google 사용자가 인증할 수 있으며 모든 사용자는 인증하기 전에 확인되지 않은 애플리케이션 알림을 받게 됩니다.

이러한 제한을 피하려면 앞에서 설명한 대로 공식 Google SDK를 사용하여 사용자 액세스 토큰을 받는 것이 좋습니다.

Apple 인증

Apple 인증 제공자를 사용하면 Apple로 로그인을 통해 사용자를 인증할 수 있습니다. 내장된 인증 플로우 를 사용하거나 Apple SDK로 인증할 수 있습니다.

참고

Apple 인증 제공자 활성화

Apple 사용자를 인증하려면 Apple 인증 제공자를 구성해야 합니다.

내장 Apple OAuth 2.0 절차 사용

Realm Web SDK에는 OAuth 2.0 프로세스를 처리하는 메서드가 포함되어 있으며 Apple JS SDK를 설치할 필요가 없습니다. 내장된 플로우는 세 가지 주요 단계를 따릅니다.

Apple 자격 증명으로 app.logIn()을(를) 호출합니다. 자격 증명은 공급자 구성에서 리디렉션 URI로도 나열되는 앱의 URL을 지정해야 합니다.

// 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}`);

Apple 인증 화면이 표시되는 새 창이 열리고 사용자는 해당 창에서 앱을 인증하고 권한을 부여합니다. 완료되면 새 창이 자격 증명에 지정된 URL로 리디렉션됩니다.

리디렉션된 페이지에서 Realm.handleAuthRedirect()을(를) 호출하면 사용자의 App Services 액세스 토큰이 저장되고 창이 닫힙니다. 원래 앱 창이 자동으로 액세스 토큰을 감지하고 사용자 로그인을 완료합니다.

// 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();

Apple SDK로 인증

공식 Sign in with Apple JavaScript SDK를 사용할 수 있습니다. 사용자 인증 및 리디렉션 흐름을 처리하다 합니다. 인증이 완료되면 Apple JavaScript SDK는 사용자의 앱 로그인을 완료하는 데 사용할 수 있는 ID 토큰을 반환합니다.

// 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);

팁

token contains an invalid number of segments(이)라는 Login failed 오류가 발생하면 JWT의 UTF-8 인코딩 문자열 버전을 전달하고 있는지 확인하세요.

사용자 액세스 토큰 받기

사용자가 로그인하면 Atlas App Services는 사용자에게 앱에 대한 액세스 권한을 부여하는 액세스 토큰을 생성합니다. Realm SDK는 액세스 토큰을 자동으로 관리하고 만료되면 갱신하며 각 요청마다 현재 사용자에 대한 유효한 액세스 토큰을 포함합니다. Realm은 새로 고침 토큰을 자동으로 갱신 하지 않습니다. 새로 고침 토큰이 만료되면 사용자는 다시 로그인해야 합니다.

SDK 외부로 요청을 보내는 경우 각 요청에 사용자의 액세스 토큰을 포함하고 토큰이 만료되면 수동으로 새로 고쳐야 합니다.

다음 예와 같이 SDK의 Realm.User 객체에서 로그인한 사용자의 액세스 토큰에 액세스하고 새로 고칠 수 있습니다.

// 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;
}

토큰 만료 새로 고침

새로 고침 토큰은 일정 시간이 지나면 만료됩니다. 새로 고침 토큰이 만료되면 액세스 토큰을 더 이상 새로 고칠 수 없으며 사용자는 다시 로그인해야 합니다.

새로 고침 토큰 만료 구성에 대한 자세한 내용은 App Services 문서에서 사용자 세션 관리를 참조하세요.

로그아웃

사용자를 로그아웃하려면 해당 사용자 인스턴스에서 User.logOut()을(를) 호출합니다.

현재 사용자를 로그아웃

await app.currentUser.logOut();

사용자 ID로 사용자 로그아웃

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

돌아가기

사용자 생성 및 삭제

이메일/비밀번호 사용자 관리

개요

로그인

익명