ユーザーの認証 - Web SDK

項目一覧

Overview

ログイン
匿名
メール/パスワード
API キー
カスタム関数
カスタム JWT
Facebook 認証
Google 認証
Apple 認証
ユーザーアクセストークンを取得する
リフレッシュトークンの有効期限
ログアウト

Atlas Device SDK は非推奨です。詳細については、の廃止ページを参照してください。

Overview

Web 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を返す任意の認証システムを使用してユーザー認証を処理できます。

ログインするには、外部システムからJSON web tokenを使用してカスタムJSON web token認証情報を作成し、それを 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 認証プロバイダを設定して有効にする必要があります。

重要

Facebook プロファイル画像 URL を保存しないでください

Facebook のプロファイル画像 URL には、画像の使用許可を付与するためのユーザーのアクセストークンが含まれます。セキュリティを確保するために、ユーザーのアクセストークンを含む URL を保存しないでください。代わりに、画像を取得する必要がある場合は、ユーザーのメタデータフィールドから URL に直接アクセスします。

組み込みの Facebook OAuth 2.0 フローを使用

Realm Web SDKにはOAuth 2.0 プロセスを処理するメソッドが含まれているため、Facebook SDK をインストールする必要はありません。組み込みフローは、次の 3 つの主要なステップに従います。

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 ユーザーをアプリにログインするには 2 段階のプロセスがあります。

まず、Google でユーザーを認証します。 Google One Tap のようなライブラリの使用が可能ストリーム化されたエクスペリエンスが必要です。
次に、ユーザー認証成功時に Google から返された認証トークンを使用してユーザーをアプリにログインします。

Google One Tap による認証

注意

OpenID Connect が必要です

Google One Tap は OpenID Connect によるユーザー認証のみをサポートしています。 Google ユーザーをウェブアプリにログインするには、Atlas App Services 認証プロバイダーの構成でOpenID Connect を有効にする必要があります。

Google ワンタップは、ユーザーが 1 回のクリック（またはタップ）でウェブサイトにサインアップしたりログインしたりできる Google SDK です。

例

基本的な Google One Tap フロー

この例では、非常に基本的なウェブアプリで 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は、Atlas App Services の: 組み込み Google OAuth 2.0フロー Realm Web SDK で OpenID Connect を使用する場合は、 Google One Tap フローによる認証を使用します。

Realm Web SDK には OAuth 2.0 プロセスを処理するメソッドが含まれているため、Google SDK をインストールする必要はありません。組み込みフローは、次の 3 つの主要なステップに従います。

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プロセスが制限に達します。 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 JavaScript SDK をインストールする必要はありません。組み込みフローは、次の 3 つの主要なステップに従います。

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

Tip

Login failedというエラーが発生した場合は、のtoken contains an invalid number of segments UTF-8string でエンコードされたJSON web token バージョンを渡していることを確認してください。

ユーザーアクセストークンを取得する

ユーザーがログインすると、Atlas App Services はユーザー用のアクセストークンを作成し、アプリへのアクセスを許可します。 Realm SDK はアクセストークンを自動的に管理し、有効期限が切れると更新し、リクエストごとに現在のユーザーの有効なアクセストークンを含めます。 Realm はリフレッシュトークンを自動的に更新しません。リフレッシュトークンの有効期限が切れると、ユーザーは再度ログインする必要があります。

SDK 外でリクエストを送信する場合は、リクエストごとにユーザーのアクセストークンを含め、有効期限が切れたときにトークンを手動で更新する必要があります。

次の例のように、 Realm.Userオブジェクトから SDK 内のログインユーザーのアクセストークンにアクセスして更新できます。

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

戻る

ユーザーの作成と削除

メール/パスワードユーザーの管理