メール/パスワード ユーザーの管理 - React Native SDK

@realm/ Reactプロバイダーを設定する

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でラップされているすべてのコンポーネントは、 userUserフックからそのユーザー オブジェクトのインスタンスにアクセスできるようになります。

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

1. ユーザーがまだ登録されていない場合は登録します。

2. useEmailPasswordAuthフックからlogInとresultを分解します。

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

4. resultを処理します。

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

確認メールの再送信

プロバイダーが確認メール を送信するように設定されている場合、Atlas App Services はユーザーが登録すると確認メールを自動的に送信します。 メールには、 30分間有効なトークンを使用して構成されたEmail Confirmation URLへのリンクが含まれています。 ユーザーが期間内にリンクに従って確認しない場合は、新しい確認メールをリクエストする必要があります。

確認メールを再送信するには、以下の手順に従います。

1. useEmailPasswordAuthフックからresendConfirmationEmailとresultを分解します。

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

3. resultに基づいて確認を処理します。

const ResendUserConfirmationEmail = () => {
  const {resendConfirmationEmail, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const performResendConfirmationEmail = () => {
    resendConfirmationEmail({email});
  };
  // Handle `result`...
}

ユーザー確認機能の再試行

必要に応じて、カスタム確認関数を再実行できます。

ユーザー確認機能を再試行するには、次の手順に従います。

1. useEmailPasswordAuthフックからretryCustomConfirmationとresultを分解します。

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

3. resultに基づいて確認を処理します。

const RetryCustomUserConfirmation = () => {
  const {retryCustomConfirmation, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const performRetryCustomConfirmation = () => {
    retryCustomConfirmation({email});
  };
  // Handle `result`...
}

メールでパスワードをリセット

パスワード リセット メールを送信してユーザーの ID を確認できます。 パスワード リセット メール を送信するように App Services App を設定する必要があります。 モバイル アプリケーションでは、アプリ内で直接パスワードのリセットを取り扱えます。 Android の ディープリンク または iOS の ユニバーサル リンク を設定します。

パスワード リセット メールからのtokenとtokenIdの値は 30 分間有効です。 ユーザーがその時間内にメールのPassword Reset URLにアクセスしない場合、値は期限切れになり、ユーザーは別のパスワード リセット メールをリクエストする必要があります。

メールでパスワードをリセットするには：

1. App Services で、 Password Reset MethodがSend a password reset emailに設定されていることを確認します。

2. クライアント コードで、 useEmailPasswordAuthフックからsendResetPasswordEmail 、 resetPassword 、 resultを構造化します。

3. ユーザーのメールを オブジェクトとしてsendResetPasswordEmail()に渡します。

4. リセットメールのパスワード URL からtokenとtokenIdの値を抽出します。

5. 新しいユーザー パスワード、 tokenとtokenIdを オブジェクトとしてresetPassword()に渡します。

const SendResetPasswordEmailButton = ({email}: {email: string}) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {sendResetPasswordEmail, result} = useEmailPasswordAuth();
  const performSendResetPasswordEmail = () => {
    sendResetPasswordEmail({email: email});
  };
  // Handle `result`...
};

interface ResetPasswordButtonProps {
  password: string;
  token: string;
  tokenId: string;
}
const ResetPasswordButton = ({
  password,
  token,
  tokenId,
}: ResetPasswordButtonProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {resetPassword, result} = useEmailPasswordAuth();
  const performPasswordReset = () => {
    resetPassword({token, tokenId, password});
  };
  // Handle `result`...
};

パスワード リセット機能の呼び出し

定義した App Services Function を呼び出して、パスワードのリセットを処理できます。 パスワードリセット機能を実行する ように構成する必要があります。App Services App

この関数は、ユーザー名、パスワード、および任意の数の追加引数を指定できます。 これらの引数を使用して、セキュリティの質問の回答やその他のチャレンジにユーザーがパスワード リセットを正常に完了するために渡す必要があるものなどの詳細を指定できます。

Atlas App Services 側では、このメソッドを呼び出すときに実行されるカスタム パスワード リセット機能を定義します。 その関数は、次の 3 つのステータスのいずれかを返す必要があります。

• fail

• pending

• success

failステータスはエラーとして扱われます。 SDK メソッドcallResetPasswordFunction()は戻り値を取らないため、クライアントにpendingまたはsuccessステータスを返すことはありません。

パスワードリセット機能を呼び出すには、次のようにします。

1. App Services で、パスワード リセット機能を作成します。

2. Atlas App Services で、 Password Reset MethodがRun a password reset functionに設定されていることを確認し、それが新規関数に設定されていることを確認します。

3. クライアント コードで、 useEmailPasswordAuthフックからcallResetPasswordFunctionとresultを分解します。

4. ユーザーのメールとパスワードを オブジェクトとしてcallResetPasswordFunction()に渡し、カスタム関数に定義したその他の引数を渡します。

const ResetPasswordWithFunction = () => {
  const {callResetPasswordFunction, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const performResetPassword = () => {
    callResetPasswordFunction({email, password}, "extraArg1", "extraArg2");
  };
}

interface ResetPasswordButtonProps {
  password: string;
  token: string;
  tokenId: string;
}
const ResetPasswordButton = ({
  password,
  token,
  tokenId,
}: ResetPasswordButtonProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  const {resetPassword, result} = useEmailPasswordAuth();
  const performPasswordReset = () => {
    resetPassword({token, tokenId, password});
  };
  // Handle `result`...
};