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

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 を使用します； 1 async storage をインストールする チュートリアルを完了した後、 サインアップ または ログイン , アプリはセッショントークンを受け取ります。async storage を使用してトークンを保存しましょう。公式ドキュメントに従って、アプリに async storage ライブラリをインストールしてください。 async storage、redux、またはお好みのローカルストレージソリューションを使用できます。この値が環境で利用可能であることを確認してください。 2 トークンを取得する 次に、 最後のガイドコード を使用します。セッショントークンを取得し、この値を async storage を使用してアプリケーションに永続化する必要があります。 最初のステップは、async storage からセッショントークンを取得するための関数を環境ファイル内に作成することです。 非同期ストレージをインポートします 1 import asyncstorage from '@react native async storage/async storage'; 次に、関数を作成します 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 クライアント側にトークンを保存する では、サインインコンポーネントを改善して、usestateフックを使用して管理するのではなく、セッショントークンを永続化します。このコンポーネントは、セッショントークンが永続化されているため、アプリを再読み込みしてもログイン状態を保持します。 サインインコンポーネントを開きます。onsubmitのoncompleted内で、セッショントークンを非同期ストレージに保存し、次の結果を得ます 次に、oncompletedを改善します 1 oncompleted async (response) => { 2 if(!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6&#x9; 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9&#x9; 10 if (sessiontoken !== null) { 11 setuserlogged(user); 12 alert(`user ${user username} successfully logged`); 13 await asyncstorage setitem('sessiontoken', sessiontoken); 14 return; 15 } 16 }, 次に、signinコンポーネントの宣言内で、セッショントークンのための新しいusestateを作成します 1 const \[sessiontoken, setsessiontoken] = usestate(null); コンポーネントがマウントされるたびに呼び出されるuseeffectを追加し、セッショントークンがあるかどうかを確認します（ getsessiontoken getsessiontoken を環境ファイルからインポートします 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); 最後に、oncompletedを再度変更して、新しいusestateを処理し、新しいコード行を取得します 1 oncompleted async (response) => { 2 if (!response? login || response? login === null) { 3 alert('error while logging'); 4 return; 5 } 6 7 const { viewer } = response? login; 8 const { sessiontoken, user } = viewer; 9 10 if (sessiontoken !== null) { 11 setsessiontoken(sessiontoken); 12 await asyncstorage setitem('sessiontoken', sessiontoken); 13 return; 14 15 } 16 }, ユーザーのログインに関するusestateを削除し、以下の両行をそれぞれの場所から削除します 1 const \[userlogged, setuserlogged] = usestate(null); と 1 setuserlogged(user); アラートを避け、ユーザーの情報とトークンをusestateに設定し、その後async storageにトークンを保存します。 if文を変更して、セッショントークンを処理します。 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 サインインコンポーネントの最終結果 すべての変更後、signinコンポーネントは以下のようになります。 1 import react, {useeffect, usestate} from 'react'; 2 import loginmutation from ' /mutations/loginmutation'; 3 import environment, { getsessiontoken } from ' / /relay/environment'; 4 import {formikprovider, useformik} from 'formik'; 5 import { button, text, textinput, view, touchableopacity } from 'react native'; 6 import asyncstorage from '@react native async storage/async storage'; 7&#x9; 8 const signin = () => { 9 const \[sessiontoken, setsessiontoken] = usestate(null); 10&#x9; 11 useeffect(() => { 12 (async () => { 13 const st = await getsessiontoken(); 14 setsessiontoken(st); 15 })(); 16 }, \[]); 17&#x9; 18 const onsubmit = async (values) = { 19 const { username, password } = values; 20 const input = { 21 username, 22 password, 23 }; 24&#x9; 25 loginmutation commit({ 26 environment, 27 input, 28 oncompleted async (response) => { 29 if (!response? login || response? login === null) { 30 alert('error while logging'); 31 return; 32 } 33&#x9; 34 const { viewer } = response? login; 35 const { sessiontoken, user } = viewer; 36&#x9; 37 if (sessiontoken !== null) { 38 setsessiontoken(sessiontoken); 39 setuserlogged(user); 40&#x9; 41 await asyncstorage setitem('sessiontoken', sessiontoken); 42 return; 43 } 44 }, 45 onerror (errors) => { 46 alert(errors\[0] message); 47 }, 48 }); 49 }; 50&#x9; 51 const formikbag = useformik({ 52 initialvalues { 53 username '', 54 password '', 55 }, 56 onsubmit, 57 }); 58&#x9; 59 const { handlesubmit, setfieldvalue } = formikbag; 60&#x9; 61 if (sessiontoken) { 62 return ( 63 \<view style={ {margintop 15, alignitems 'center'} }> 64 \<text>user logged\</text> 65 \</view> 66 ); 67 } 68&#x9; 69 return ( 70 \<formikprovider value={formikbag}> 71 \<view style={styles login wrapper}> 72 \<view style={styles form}> 73 \<text>username\</text> 74 \<textinput 75 name={"username"} 76 style={styles form input} 77 autocapitalize="none" 78 onchangetext={(text) => setfieldvalue("username", text)} 79 /> 80 \<text>password\</text> 81 \<textinput 82 style={styles form input} 83 name={"password"} 84 autocapitalize="none" 85 securetextentry 86 onchangetext={(text) => setfieldvalue("password", text)} 87 /> 88 \<touchableopacity onpress={() => handlesubmit()}> 89 \<view style={styles button}> 90 \<text style={styles button label}>{"sign in"}\</text> 91 \</view> 92 \</touchableopacity> 93 \</view> 94 \</view> 95 \</formikprovider> 96 ); 97 }; 98&#x9; 99 export default signin; 5 テスト sign inコンポーネントの新しい変更をテストする時が来ました。誰もログインしていないことを確認するために、アプリケーションを終了して再度開いてください。 非同期ストレージをクリアすることも忘れないでください。次のメソッドを呼び出すことでできます。 asyncstorage clear() asyncstorage clear() メソッドを使用して、実際の状態をクリアします。 再度ログインすると、次のメッセージが表示されます。 6 リレー環境にセッショントークンを設定する さて、アプリケーションのリクエストにセッショントークンをback4app graphql apiに挿入しましょう。環境ファイルの中で、sessiontokenを取得し、それをヘッダーオブジェクトに追加します。ヘッダーの変数x parse session tokenにsessiontokenを渡す必要があります。 ここでは、私たちがすでに作成した getsessiontoken getsessiontoken 関数を再利用します。 次に、 fetchquery fetchquery 関数の前に関数を作成し、以下のコードを貼り付けます 1 export const gettoken = async () => { 2 const sessiontoken = await getsessiontoken(); 3&#x9; 4 if (sessiontoken) { 5 return { 6 'x parse session token' sessiontoken, 7 }; 8 } 9&#x9; 10 return {}; 11 }; 上記の関数は、セッショントークンが存在する場合のみそれを取得します。次に、それをヘッダーオブジェクトに追加し、分解します。 1 const headers = { 2 accept 'application/json', 3 'content type' 'application/json', 4 'x parse application id' 'your app id here', 5 'x parse client key' 'your client key here', 6 await gettoken(), 7 }; ヘッダーのすぐ下に、リクエストを行うためのtry catchがあります。リクエストのhttpステータスが401になる場合に処理するifをリクエストの後に設定しましょう。これは、実際のトークンがもはや有効でないことを意味します。したがって、ストレージをクリアし、現在のユーザーを終了します 1 try { 2 const response = await fetch(`https //parseapi back4app com/graphql`, { 3 method "post", 4 headers, 5 body, 6 }); 7&#x9; 8 const data = await response json(); 9&#x9; 10 11 // this if will retrive the response when status code 401 and clear the session token 12 if (response status === 401) { 13 await asyncstorage getitem("sessiontoken"); 14 return; 15 } 16&#x9; 17 if (data errors) { 18 throw data errors; 19 } 20&#x9; 21 return data; 22 } catch (err) { 23 console log("err on fetch graphql", err); 24&#x9; 25 throw err; 26 } 今、あなたのアプリケーションはback4appバックエンドからプライベートリソースを取得し始めることができます。そして、セッショントークンが存在しない場合でも、私たちはそれを渡さないので、壊れることはありません。 ユーザーのために望ましいアクセスレベルを保証するために、セキュリティメカニズムを構成することを忘れないでください。アクセスをよりよく理解するために、リンクを参照してください セキュリティドキュメント からparse。 結論 このガイドでは、非同期ストレージを使用してセッショントークンを保存し、現在はログインしたユーザーが必要なリソースを取得し始めることができます。 次のドキュメントでは、ログインしたユーザーに関する情報を取得し、表示するためにusestateを使用するのをやめるコンポーネントを準備しましょう。 ユーザーのサインアップについては、このチュートリアルのアプローチを使用してセッショントークンを処理できます。