Docs Menu
Docs Home
/ /
Atlas Device SDK
/ /

ユーザーの認証 - React Native SDK

項目一覧

  • 前提条件
  • クライアントでのユーザー認証の構成
  • @realm/ Reactプロバイダーを設定する
  • ユーザープロバイダーのフォールバック コンポーネントの書込み (write)
  • ユーザー セッション
  • 認証プロバイダとクライアント認証
  • 匿名ユーザー
  • メール/パスワード ユーザー
  • API キー ユーザー
  • カスタムJSON web tokenユーザー
  • カスタム関数ユーザー
  • Facebook ユーザー
  • Google ユーザー
  • Apple ユーザー
  • オフライン ログイン
  • ユーザー アクセス トークンを取得する
  • リフレッシュ トークンの有効期限
  • ユーザーのログアウト
  • useAuth フック参照

@realm/react にはユーザー認証用のフックがあります。 useAuthuseEmailPasswordAuthは、有効な認証プロバイダーで認証を処理します。

useAuthのクイック リファレンスについては、このページのuseAuth フックを参照してください。 useEmailPasswordAuthのクイック リファレンスについては、[ メール/パスワード ユーザーの管理 ] ページでuseEmailPasswordAuth フックを参照してください。

Realm.js API を直接使用することもできます。 Credentialsオブジェクトをインスタンス化し、それをApp.logIn()に渡して、 Userオブジェクトを認証して取得します。

ユーザーを認証する前に、次の操作を行う必要があります。

@realm/react にはユーザー認証用のプロバイダーとフックがあります。 ユーザー認証を設定するには:

  1. @realm/reactプロバイダーを設定します。

  2. UserProviderのフォールバック コンポーネントを書き込みます。

AppProviderでラップされたコンポーネントは、 useAppおよびuseAuthフックにアクセスできます。 これらのコンポーネントは、 AppProviderが App Services バックエンドに正常に接続された場合にのみレンダリングされます。

UserProviderでラップされたコンポーネントは、 userUserフックを使用して認証されたユーザーにアクセスできます。 これらのコンポーネントは、アプリに認証されたユーザーがある場合にのみレンダリングされます

ユーザー認証を設定するには:

  1. App Services にアクセスするために必要なすべてのコンポーネントをAppProviderでラップします。

  2. AppProvider内で、認証されたユーザーにアクセスできるようにするすべてのコンポーネントをUserProvider 1} でラップします。

  3. UserProviderには、ユーザーをログインさせるコンポーネントを含むfallbackプロパティが含まれています。 認証されたユーザーが存在しない場合、アプリはこのコンポーネントをレンダリングします。

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

アプリに認証済みでログインしているユーザーが いない 場合、 UserProviderとその子はレンダリングされません。 この場合を処理するには、フォールバック コンポーネントをUserProviderに渡すことができます。 これは通常、アプリのログイン画面です。

次の例では匿名認証を使用していますが、 useAuthメソッドのいずれかを使用できます。

UserProviderの認証フォールバック コンポーネントを書き込むには、次の手順に従います。

  1. 機能的なコンポーネントを作成します。

  2. useAuthフックからlogInWithAnonymousresultを分解します。

  3. 空の依存関係配列を持つuseEffectブロック内でlogInWithAnonymous()を呼び出します。

  4. resultを処理します。 認証操作が成功しない場合は、 resultに基づいてエラー処理を記述できます。

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

React Native SDK は Atlas App Services と通信して、アクセス トークンとリフレッシュ トークンを使用してセッションを管理します。

セッション管理の詳細については、App Services ドキュメントの「ユーザー セッション 」を参照してください。

クライアントでユーザー認証を構成し、App Services App で認証プロバイダーを構成した後、ユーザーはログインできます。

匿名プロバイダーを使用すると、ユーザーは関連情報を持たない一時アカウントでアプリケーションにログインできます。

ユーザーが現在ログインしているときに認証方法を呼び出すと、現在のユーザーが新しいユーザーに切り替えられます。

UserProviderのフォールバックでlogInWithAnonymous()を呼び出すと、匿名ログインが成功するとすぐにUserProviderの子がレンダリングされます。

匿名ユーザーをログインするには、次の手順に従います。

  1. useAuthフックからlogInWithAnonymousresultを分解します。

  2. 引数なしでlogInWithAnonymous()を呼び出します。

  3. resultを処理します。

export const LogInWithAnonymous = () => {
const {logInWithAnonymous, result} = useAuth();
const performAnonymousLogin = logInWithAnonymous;
// Handle `result`...
};

メール/パスワード認証プロバイダーは、ユーザーがメールアドレスとパスワードを使用してアプリケーションにログインすることを可能にします。

useEmailPasswordAuthフックを使用して、クライアント内のユーザー ログを処理できます。 useEmailPasswordAuthのクイック リファレンスについては、[ メール/パスワード ユーザーの管理 ] ページでuseEmailPasswordAuth フックを参照してください。

ユーザーをメールとパスワードを使用してログインするには、次の手順に従います。

  1. useEmailPasswordAuthフックからlogInresultを分解します。

  2. ユーザーのメールとパスワードを オブジェクトとしてLogIn()に渡します。

  3. resultを処理します。

export const LoginWithEmail = () => {
const {logIn, result} = useEmailPasswordAuth();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const performLogin = () => {
logIn({email, password});
};
// Handle `result`...
};

API キー認証プロバイダーを使用すると、サーバープロセスはアプリに直接、またはユーザーに代わってアクセスできます。

API キーを使用してユーザーをログインさせる前に、API キーを作成する必要があります。

API キーでログインするには次の手順に従います。

  1. useAuthフックからloginWithApiKeyresultを分解します。

  2. API キーをloginWithApiKey()に渡します。

const loginApiKeyUser = async (apiKey: ApiKey) => {
try {
logInWithApiKey(apiKey!.key);
} catch (error) {
console.log(error);
}
};

カスタムJSON web token認証プロバイダは、 JSON web tokenを返す任意の認証システムを使用してユーザー認証を処理します。

カスタムJSON web tokenユーザーをログインするには次のようにします。

  1. App Services バックエンドでJSON web token認証プロバイダ を設定します。

  2. 外部システムからJSON web tokenを取得します。

  3. useAuthフックからlogInWithJWTresultを分解します。

  4. JSON web tokenを logInWithJWT() に渡します。

  5. 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`...
};

カスタム関数認証プロバイダーを使用すると、ユーザーに関する任意の情報のペイロードを受け取る関数を実行してユーザー認証を処理できます。 詳細については、 「 カスタム機能認証」を参照してください。

カスタム関数プロバイダーにユーザーをログインするには、次の手順に従います。

  1. 認証ニーズを処理するための App Services 関数を作成します。

  2. App Services Appのカスタム関数プロバイダーを有効にし、以前に作成した関数を使用するように構成します。

  3. useAuthフックからlogInWithFunctionresultを分解します。

  4. 関連するユーザーデータ(ユーザー名など)をlogInWithFunction()に渡します。

  5. 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`...
};

Facebook認証プロバイダーは、既存の Facebook アカウントを使用して Facebook アプリを通じてユーザーを認証することを可能にします。

ユーザーを既存の Facebook アカウントでログインするには、App Services App のFacebook 認証プロバイダを設定して有効にする必要があります。

重要

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

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

公式のFacebook SDK を使用できます ユーザー認証を処理し、クライアントアプリケーションからのフローをリダイレクトします。認証が完了すると、 Facebook SDK はアクセス トークンを返します。このトークンをReact Nativeアプリに送信し、ユーザーがアプリへのログインを完了するために使用できます。

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`...
};

Google認証プロバイダーは、既存の Google アカウントを使用してユーザーを認証することを可能にします。

Google ユーザーを認証するには、App Services App のGoogle 認証プロバイダを設定する必要があります。

React Native には Google でサインインの公式統合はありません。 Sign in with Google を Realm 認証を使用して React Native アプリに統合する最も簡単な方法は、サードパーティのライブラリを使用することです。 Google Identity Services を使用して独自のソリューションを構築することもできます ユーザー認証とクライアント アプリケーションからのリダイレクト フローを処理します。

実装にかかわらず、Google 認証サーバーから ID トークンを取得する必要があります。 その ID トークンを使用して 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`...
};

Apple認証プロバイダーは、Apple でサインインを通じてユーザーを認証することを可能にします。

Apple ユーザーを認証するには、Atlas App Services App のApple 認証プロバイダーを設定する必要があります。

Sign in with AppleJavaScript SDK を 使用できます ユーザー認証とクライアント アプリケーションからのリダイレクト フローを処理します。認証が完了すると、Apple JavaScript SDK はIDトークンを返します。このトークンをReact Nativeアプリに送信し、ユーザーによるアプリへのログインを完了するために使用できます。

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`...
};

Tip

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

Realm アプリケーションはユーザーを認証する際、ユーザーの認証情報をキャッシュします。 既存のユーザー認証情報を確認して、ログイン フローをバイパスし、キャッシュされたユーザーにアクセスできます。 これを使用して、Realm をオフラインで開きます。

注意

最初のログインにはネットワーク接続が必要です

ユーザーがアプリにサインアップしたり、クライアントに既存のアカウントを使用して初めてログインする場合、クライアントにはネットワーク接続が必要です。 キャッシュされたユーザー認証情報を確認すると、ユーザーが以前にオンライン時にログインしたことがある場合にのみ、オフラインで Realm を開くことができます。

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

同期構成でキャッシュされたユーザーを使用してオフラインのときに Realm にアクセスする方法については、 オフラインのときに同期されたRealmを開くDocsをお読みください。

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

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

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

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

リフレッシュ トークンは一定期間後に期限切れになります。 更新トークンの有効期限が切れると、アクセス トークンの更新ができなくなり、ユーザーは再度ログインする必要があります。

Realm が開いた後に更新トークンの有効期限が切れると、ユーザーが再度ログインするまでデバイスは同期できなくなります。 同期エラー ハンドラーには、同期試行時にトークンの期限切れエラーを検出し、ユーザーをログイン フローにリダイレクトするロジックを実装する必要があります。

リフレッシュ トークンの有効期限の設定の詳細については、App Services ドキュメントの「ユーザー セッションの管理」を参照してください。

ユーザーをログアウトするには、ユーザー インスタンスでUser.logOut()メソッドを呼び出します。

警告

ユーザーがログアウトすると、ユーザーが開いた同期された Realm でデータの読み取りも書き込みもできなくなります。 その結果、開始ユーザーがログアウトする前にまだ完了していない操作は正常に完了できず、エラーが発生する可能性が高くなります。 このように失敗した書込み操作のデータは失われます。

function UserInformation() {
const user = useUser();
const {logOut} = useAuth();
const performLogout = () => {
logOut();
};
// Add UI for logging out...
}

useAuthフックには、すべての App Services 認証プロバイダーの認証方法があります。 認証に関連する状態もあります。 詳細については、 useAuthリファレンス を参照してください。

useAuthについては、 @realm/react API ドキュメントも確認してください。

戻る

ユーザーの作成と削除