ユーザーの認証 - React Native SDK
項目一覧
@realm/react
にはユーザー認証用のフックがあります。 useAuthとuseEmailPasswordAuthは、有効な認証プロバイダーで認証を処理します。
useAuth
のクイック リファレンスについては、このページのuseAuth フックを参照してください。 useEmailPasswordAuth
のクイック リファレンスについては、[ メール/パスワード ユーザーの管理 ] ページでuseEmailPasswordAuth フックを参照してください。
Realm.js API を直接使用することもできます。 Credentialsオブジェクトをインスタンス化し、それをApp.logIn()に渡して、 Userオブジェクトを認証して取得します。
前提条件
ユーザーを認証する前に、次の操作を行う必要があります。
アプリで 1 つ以上の認証プロバイダを有効にします。
クライアントでのユーザー認証の構成
@realm/react
にはユーザー認証用のプロバイダーとフックがあります。 ユーザー認証を設定するには:
@realm/react
プロバイダーを設定します。UserProvider
のフォールバック コンポーネントを書き込みます。
@realm/ Reactプロバイダーを設定する
AppProviderでラップされたコンポーネントは、 useAppおよびuseAuthフックにアクセスできます。 これらのコンポーネントは、 AppProvider
が App Services バックエンドに正常に接続された場合にのみレンダリングされます。
UserProviderでラップされたコンポーネントは、 userUserフックを使用して認証されたユーザーにアクセスできます。 これらのコンポーネントは、アプリに認証されたユーザーがある場合にのみレンダリングされます
ユーザー認証を設定するには:
App Services にアクセスするために必要なすべてのコンポーネントを
AppProvider
でラップします。AppProvider
内で、認証されたユーザーにアクセスできるようにするすべてのコンポーネントをUserProvider
1} でラップします。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> ); };
ユーザープロバイダーのフォールバック コンポーネントの書込み (write)
アプリに認証済みでログインしているユーザーが いない 場合、 UserProvider
とその子はレンダリングされません。 この場合を処理するには、フォールバック コンポーネントをUserProvider
に渡すことができます。 これは通常、アプリのログイン画面です。
次の例では匿名認証を使用していますが、 useAuth
メソッドのいずれかを使用できます。
UserProvider
の認証フォールバック コンポーネントを書き込むには、次の手順に従います。
機能的なコンポーネントを作成します。
useAuth
フックからlogInWithAnonymous
とresult
を分解します。空の依存関係配列を持つ
useEffect
ブロック内でlogInWithAnonymous()
を呼び出します。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
の子がレンダリングされます。
匿名ユーザーをログインするには、次の手順に従います。
useAuth
フックからlogInWithAnonymous
とresult
を分解します。引数なしで
logInWithAnonymous()
を呼び出します。result
を処理します。
export const LogInWithAnonymous = () => { const {logInWithAnonymous, result} = useAuth(); const performAnonymousLogin = logInWithAnonymous; // Handle `result`... };
メール/パスワード ユーザー
メール/パスワード認証プロバイダーは、ユーザーがメールアドレスとパスワードを使用してアプリケーションにログインすることを可能にします。
useEmailPasswordAuth
フックを使用して、クライアント内のユーザー ログを処理できます。 useEmailPasswordAuth
のクイック リファレンスについては、[ メール/パスワード ユーザーの管理 ] ページでuseEmailPasswordAuth フックを参照してください。
ユーザーをメールとパスワードを使用してログインするには、次の手順に従います。
useEmailPasswordAuth
フックからlogIn
とresult
を分解します。ユーザーのメールとパスワードを オブジェクトとして
LogIn()
に渡します。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 キーを作成する必要があります。
API キーでログインするには次の手順に従います。
useAuth
フックからloginWithApiKey
とresult
を分解します。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を返す任意の認証システムを使用してユーザー認証を処理します。
カスタムJSON web tokenユーザーをログインするには次のようにします。
App Services バックエンドでJSON web token認証プロバイダ を設定します。
外部システムからJSON web tokenを取得します。
useAuth
フックからlogInWithJWT
とresult
を分解します。JSON web tokenを
logInWithJWT()
に渡します。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`... };
カスタム関数ユーザー
カスタム関数認証プロバイダーを使用すると、ユーザーに関する任意の情報のペイロードを受け取る関数を実行してユーザー認証を処理できます。 詳細については、 「 カスタム機能認証」を参照してください。
カスタム関数プロバイダーにユーザーをログインするには、次の手順に従います。
認証ニーズを処理するための App Services 関数を作成します。
App Services Appのカスタム関数プロバイダーを有効にし、以前に作成した関数を使用するように構成します。
useAuth
フックからlogInWithFunction
とresult
を分解します。関連するユーザーデータ(ユーザー名など)を
logInWithFunction()
に渡します。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 アプリを通じてユーザーを認証することを可能にします。
ユーザーを既存の 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 アカウントを使用してユーザーを認証することを可能にします。
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 でサインインを通じてユーザーを認証することを可能にします。
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 フック参照
useAuth
フックには、すべての App Services 認証プロバイダーの認証方法があります。 認証に関連する状態もあります。 詳細については、 useAuthリファレンス を参照してください。
useAuthについては、 @realm/react
API ドキュメントも確認してください。