React NativeとRelayを用いたBack4Appユーザー認証

15min
Relayを使用したReact Native認証
はじめに
GraphQL APIを使用して、ユーザーがサインアップまたはログインした後、いつでもログインしたユーザーを取得するために使用できるセッショントークンを受け取ります。セッショントークンはRelayミューテーションから来ます。これらのRelayミューテーションの例は、前のガイドの中にあります。サインアップ または ログイン.
セッショントークンの値は現在のセッションを表し、ユーザーが認証されているかどうかを制御します。認証の瞬間に、この値はヘッダーパラメータに設定される必要があります。Relayでは、ヘッダーパラメータを処理するためにEnvironmentを使用するので、このファイル内にセッショントークンを挿入する必要があります。
ヘッダーにセッションを追加した後、各リクエストはBack4Appによって認証され、ユーザーはプライベートリソースにアクセスできるようになります。
いつでも、スタイルや完全なコードを確認するために、私たちのGitHubリポジトリを通じてこのプロジェクトにアクセスできます。
﻿JavaScriptの例リポジトリ﻿
目標
ヘッダーパラメータにセッショントークンを使用して、Back4Appでユーザーリクエストを認証します。
前提条件
Parse Server バージョン 3.10 以上を使用して Back4App で作成されたアプリ。
次を完了する必要があります：Relay 環境設定チュートリアル:
次を完了する必要があります：Relay を使用した React Native ログインサンプル:
このチュートリアルでは、Expo を React Native フレームワークとして使用します；
このチュートリアルでは、Javascript をデフォルトの実装言語として使用します；
このチュートリアルでは、Async Storage を使用します；
- Async Storage をインストールする
チュートリアルを完了した後、 サインアップ または ログイン, アプリはセッショントークンを受け取ります。Async Storage を使用してトークンを保存しましょう。公式ドキュメントに従って、アプリに Async Storage ライブラリをインストールしてください。
Async Storage、Redux、またはお好みのローカルストレージソリューションを使用できます。この値が環境で利用可能であることを確認してください。
- トークンを取得する
次に、 最後のガイドコード を使用します。セッショントークンを取得し、この値を Async Storage を使用してアプリケーションに永続化する必要があります。
最初のステップは、Async Storage からセッショントークンを取得するための関数を環境ファイル内に作成することです。
非同期ストレージをインポートします:
JS
  import AsyncStorage from '@react-native-async-storage/async-storage';
  import AsyncStorage from '@react-native-async-storage/async-storage';
﻿
次に、関数を作成します:
JS
  export const getSessionToken = async () => {
    const sessionToken = await AsyncStorage.getItem('sessionToken');
    return sessionToken;
  };
  export const getSessionToken = async () => {
    const sessionToken = await AsyncStorage.getItem('sessionToken');
    return sessionToken;
  };
﻿
- クライアント側にトークンを保存する
では、サインインコンポーネントを改善して、useStateフックを使用して管理するのではなく、セッショントークンを永続化します。このコンポーネントは、セッショントークンが永続化されているため、アプリを再読み込みしてもログイン状態を保持します。
サインインコンポーネントを開きます。onSubmitのonCompleted内で、セッショントークンを非同期ストレージに保存し、次の結果を得ます:
次に、onCompletedを改善します:
JS
onCompleted: async (response) => {
   if(!response?.logIn || response?.logIn === null) {
     alert('Error while logging');
     return;
   }

   const { viewer } = response?.logIn;
   const { sessionToken, user } = viewer;

   if (sessionToken !== null) {
     setUserLogged(user);
     alert(`user ${user.username} successfully logged`);
     await AsyncStorage.setItem('sessionToken', sessionToken);
     return;
   }
},
onCompleted: async (response) => {
   if(!response?.logIn || response?.logIn === null) {
     alert('Error while logging');
     return;
   }

   const { viewer } = response?.logIn;
   const { sessionToken, user } = viewer;

   if (sessionToken !== null) {
     setUserLogged(user);
     alert(`user ${user.username} successfully logged`);
     await AsyncStorage.setItem('sessionToken', sessionToken);
     return;
   }
},
﻿
次に、SignInコンポーネントの宣言内で、セッショントークンのための新しいuseStateを作成します:
JS
const [sessionToken, setSessionToken] = useState(null);
const [sessionToken, setSessionToken] = useState(null);
﻿
コンポーネントがマウントされるたびに呼び出されるuseEffectを追加し、セッショントークンがあるかどうかを確認します（getSessionTokenを環境ファイルからインポートします:
JS
useEffect(() => {
 (async () => {
   const sT = await getSessionToken();
   setSessionToken(sT);
 })();
}, []);
useEffect(() => {
 (async () => {
   const sT = await getSessionToken();
   setSessionToken(sT);
 })();
}, []);
﻿
最後に、onCompletedを再度変更して、新しいuseStateを処理し、新しいコード行を取得します:
JS
onCompleted: async (response) => {
   if (!response?.logIn || response?.logIn === null) {
   alert('Error while logging');
   return;
   }
   
   const { viewer } = response?.logIn;
   const { sessionToken, user } = viewer;
   
   if (sessionToken !== null) {
      setSessionToken(sessionToken);
      await AsyncStorage.setItem('sessionToken', sessionToken);
      return;
 
   }
},
onCompleted: async (response) => {
   if (!response?.logIn || response?.logIn === null) {
   alert('Error while logging');
   return;
   }
   
   const { viewer } = response?.logIn;
   const { sessionToken, user } = viewer;
   
   if (sessionToken !== null) {
      setSessionToken(sessionToken);
      await AsyncStorage.setItem('sessionToken', sessionToken);
      return;
 
   }
},
﻿
ユーザーのログインに関するuseStateを削除し、以下の両行をそれぞれの場所から削除します:
JS
const [userLogged, setUserLogged] = useState(null);
const [userLogged, setUserLogged] = useState(null);
﻿
と
JS
setUserLogged(user);
setUserLogged(user);
﻿
アラートを避け、ユーザーの情報とトークンをuseStateに設定し、その後Async Storageにトークンを保存します。
if文を変更して、セッショントークンを処理します。
JS
if (sessionToken) {
 return (
   <View>
     <Text>User logged</Text>
   </View>
 );
}
if (sessionToken) {
 return (
   <View>
     <Text>User logged</Text>
   </View>
 );
}
﻿
- サインインコンポーネントの最終結果
すべての変更後、SignInコンポーネントは以下のようになります。
JS
import React, {useEffect, useState} from 'react';
import LogInMutation from './mutations/LogInMutation';
import environment, { getSessionToken } from '../../relay/environment';
import {FormikProvider, useFormik} from 'formik';
import { Button, Text, TextInput, View, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SignIn = () => {
 const [sessionToken, setSessionToken] = useState(null);

 useEffect(() => {
   (async () => {
     const sT = await getSessionToken();
     setSessionToken(sT);
   })();
 }, []);

 const onSubmit = async (values) = {
   const { username, password } = values;
   const input = {
     username,
     password,
   };

   LogInMutation.commit({
     environment,
     input,
     onCompleted: async (response) => {
       if (!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setSessionToken(sessionToken);
         setUserLogged(user);

         await AsyncStorage.setItem('sessionToken', sessionToken);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
 };

 const formikbag = useFormik({
   initialValues: {
     username: '',
     password: '',
   },
   onSubmit,
 });

const { handleSubmit, setFieldValue } = formikbag;

 if (sessionToken) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User logged</Text>
     </View>
   );
 }

 return (
     <FormikProvider value={formikbag}>
         <View style={Styles.login_wrapper}>
             <View style={Styles.form}>
                 <Text>Username</Text>
                 <TextInput
                     name={"username"}
                     style={Styles.form_input}
                     autoCapitalize="none"
                     onChangeText={(text) => setFieldValue("username", text)}
                 />
                 <Text>Password</Text>
                 <TextInput
                     style={Styles.form_input}
                     name={"password"}
                     autoCapitalize="none"
                     secureTextEntry
                     onChangeText={(text) => setFieldValue("password", text)}
                 />
                 <TouchableOpacity onPress={() => handleSubmit()}>
                     <View style={Styles.button}>
                         <Text style={Styles.button_label}>{"Sign in"}</Text>
                     </View>
                 </TouchableOpacity>
             </View>
         </View>
     </FormikProvider>
 );
};

export default SignIn;
import React, {useEffect, useState} from 'react';
import LogInMutation from './mutations/LogInMutation';
import environment, { getSessionToken } from '../../relay/environment';
import {FormikProvider, useFormik} from 'formik';
import { Button, Text, TextInput, View, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SignIn = () => {
 const [sessionToken, setSessionToken] = useState(null);

 useEffect(() => {
   (async () => {
     const sT = await getSessionToken();
     setSessionToken(sT);
   })();
 }, []);

 const onSubmit = async (values) = {
   const { username, password } = values;
   const input = {
     username,
     password,
   };

   LogInMutation.commit({
     environment,
     input,
     onCompleted: async (response) => {
       if (!response?.logIn || response?.logIn === null) {
         alert('Error while logging');
         return;
       }

       const { viewer } = response?.logIn;
       const { sessionToken, user } = viewer;

       if (sessionToken !== null) {
         setSessionToken(sessionToken);
         setUserLogged(user);

         await AsyncStorage.setItem('sessionToken', sessionToken);
         return;
       }
     },
     onError: (errors) => {
       alert(errors[0].message);
     },
   });
 };

 const formikbag = useFormik({
   initialValues: {
     username: '',
     password: '',
   },
   onSubmit,
 });

const { handleSubmit, setFieldValue } = formikbag;

 if (sessionToken) {
   return (
     <View style={ {marginTop: 15, alignItems: 'center'} }>
       <Text>User logged</Text>
     </View>
   );
 }

 return (
     <FormikProvider value={formikbag}>
         <View style={Styles.login_wrapper}>
             <View style={Styles.form}>
                 <Text>Username</Text>
                 <TextInput
                     name={"username"}
                     style={Styles.form_input}
                     autoCapitalize="none"
                     onChangeText={(text) => setFieldValue("username", text)}
                 />
                 <Text>Password</Text>
                 <TextInput
                     style={Styles.form_input}
                     name={"password"}
                     autoCapitalize="none"
                     secureTextEntry
                     onChangeText={(text) => setFieldValue("password", text)}
                 />
                 <TouchableOpacity onPress={() => handleSubmit()}>
                     <View style={Styles.button}>
                         <Text style={Styles.button_label}>{"Sign in"}</Text>
                     </View>
                 </TouchableOpacity>
             </View>
         </View>
     </FormikProvider>
 );
};

export default SignIn;
﻿
- テスト
Sign Inコンポーネントの新しい変更をテストする時が来ました。誰もログインしていないことを確認するために、アプリケーションを終了して再度開いてください。
非同期ストレージをクリアすることも忘れないでください。次のメソッドを呼び出すことでできます。 AsyncStorage.clear() メソッドを使用して、実際の状態をクリアします。
再度ログインすると、次のメッセージが表示されます。
﻿
- リレー環境にセッショントークンを設定する
さて、アプリケーションのリクエストにセッショントークンをBack4App GraphQL APIに挿入しましょう。環境ファイルの中で、sessionTokenを取得し、それをヘッダーオブジェクトに追加します。ヘッダーの変数X-Parse-Session-TokenにsessionTokenを渡す必要があります。
ここでは、私たちがすでに作成したgetSessionToken関数を再利用します。
次に、fetchQuery関数の前に関数を作成し、以下のコードを貼り付けます:
JS
export const getToken = async () => {
 const sessionToken = await getSessionToken();

 if (sessionToken) {
   return {
     'X-Parse-Session-Token': sessionToken,
   };
 }

 return {};
};
export const getToken = async () => {
 const sessionToken = await getSessionToken();

 if (sessionToken) {
   return {
     'X-Parse-Session-Token': sessionToken,
   };
 }

 return {};
};
﻿
上記の関数は、セッショントークンが存在する場合のみそれを取得します。次に、それをヘッダーオブジェクトに追加し、分解します。
JS
const headers = {
 Accept: 'application/json',
 'Content-type': 'application/json',
 'X-Parse-Application-Id': 'YOUR_APP_ID_HERE',
 'X-Parse-Client-Key': 'YOUR_CLIENT_KEY_HERE',
 ...await getToken(),
};
const headers = {
 Accept: 'application/json',
 'Content-type': 'application/json',
 'X-Parse-Application-Id': 'YOUR_APP_ID_HERE',
 'X-Parse-Client-Key': 'YOUR_CLIENT_KEY_HERE',
 ...await getToken(),
};
﻿
ヘッダーのすぐ下に、リクエストを行うためのtry catchがあります。リクエストのHTTPステータスが401になる場合に処理するifをリクエストの後に設定しましょう。これは、実際のトークンがもはや有効でないことを意味します。したがって、ストレージをクリアし、現在のユーザーを終了します:
JS
try {
   const response = await fetch(`https://parseapi.back4app.com/graphql`, {
       method: "POST",
       headers,
       body,
   });

   const data = await response.json();

   
   // this if will retrive the response when status code 401 and clear the session token
   if (response.status === 401) {
       await AsyncStorage.getItem("sessionToken");
       return;
   }

   if (data.errors) {
       throw data.errors;
   }

   return data;
} catch (err) {
   console.log("err on fetch graphql", err);

   throw err;
}
try {
   const response = await fetch(`https://parseapi.back4app.com/graphql`, {
       method: "POST",
       headers,
       body,
   });

   const data = await response.json();

   
   // this if will retrive the response when status code 401 and clear the session token
   if (response.status === 401) {
       await AsyncStorage.getItem("sessionToken");
       return;
   }

   if (data.errors) {
       throw data.errors;
   }

   return data;
} catch (err) {
   console.log("err on fetch graphql", err);

   throw err;
}
﻿
今、あなたのアプリケーションはBack4Appバックエンドからプライベートリソースを取得し始めることができます。そして、セッショントークンが存在しない場合でも、私たちはそれを渡さないので、壊れることはありません。
ユーザーのために望ましいアクセスレベルを保証するために、セキュリティメカニズムを構成することを忘れないでください。アクセスをよりよく理解するために、リンクを参照してください セキュリティドキュメントからParse。
結論
このガイドでは、非同期ストレージを使用してセッショントークンを保存し、現在はログインしたユーザーが必要なリソースを取得し始めることができます。
次のドキュメントでは、ログインしたユーザーに関する情報を取得し、表示するためにuseStateを使用するのをやめるコンポーネントを準備しましょう。
ユーザーのサインアップについては、このチュートリアルのアプローチを使用してセッショントークンを処理できます。
React NativeアプリでのRelayを使ったGraphQLユーザーログイン実装
React NativeとRelayで現在ログイン中のユーザーを取得
React NativeとRelayを用いたBack4Appユーザー認証

Relayを使用したReact Native認証

はじめに

目標

前提条件

1 - Async Storage をインストールする

2 - トークンを取得する

3 - クライアント側にトークンを保存する

4 - サインインコンポーネントの最終結果

5 - テスト

6 - リレー環境にセッショントークンを設定する

結論
