Implementasi Autentikasi React Native dengan Relay

autentikasi react native menggunakan relay pendahuluan menggunakan api graphql, setelah mendaftar atau masuk, anda akan menerima token sesi yang dapat anda gunakan untuk mengambil pengguna yang masuk kapan saja token sesi berasal dari relay mutation anda akan menemukan contoh relay mutation tersebut di panduan sebelumnya tentang https //www back4app com/docs/parse graphql/graphql sign up atau https //www back4app com/docs/parse graphql/graphql login nilai token sesi mewakili sesi saat ini dan mengontrol apakah pengguna terautentikasi atau tidak pada saat autentikasi, nilai ini perlu dimulai untuk berada di parameter header di relay, kami menggunakan environment untuk menangani parameter header, jadi anda harus memasukkan token sesi di dalam file ini setelah menambahkan sesi ke header, setiap permintaan akan diautentikasi oleh back4app dan, pengguna akan mengakses sumber daya pribadi kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkap https //github com/templates back4app/react native graphql relay js users tujuan mengautentikasi permintaan pengguna di back4app menggunakan token sesi di parameter header prasyarat sebuah aplikasi yang dibuat di back4app menggunakan parse server versi 3 10 atau lebih tinggi anda harus menyelesaikan https //www back4app com/docs/react native/graphql/relay setup anda harus menyelesaikan https //www back4app com/docs/react native/graphql/users/react native login sample untuk tutorial ini kita akan menggunakan expo sebagai framework react native; untuk tutorial ini kita akan menggunakan javascript sebagai bahasa implementasi default kita; untuk tutorial ini kita akan menggunakan async storage; 1 instal async storage setelah menyelesaikan tutorial https //www back4app com/docs/parse graphql/graphql sign up atau https //www back4app com/docs/parse graphql/graphql login , aplikasi anda akan menerima token sesi mari kita simpan token menggunakan async storage ikuti dokumen resmi untuk menginstal lib async storage di aplikasi anda anda dapat menggunakan async storage, redux, atau solusi penyimpanan lokal pilihan anda anda hanya perlu memastikan bahwa nilai ini akan tersedia di lingkungan 2 ambil token mari kita lanjutkan menggunakan https //www back4app com/docs/parse graphql/graphql login anda perlu mendapatkan token sesi dan menyimpan nilai ini di aplikasi anda menggunakan async storage mulailah dengan mengubah pengelolaan status token sesi dari hook usestate ke async storage langkah pertama adalah membuat fungsi di dalam file lingkungan untuk mengambil token sesi dari async storage impor penyimpanan async 1 import asyncstorage from '@react native async storage/async storage'; sekarang, buat fungsi 1 export const getsessiontoken = async () => { 2 const sessiontoken = await asyncstorage getitem('sessiontoken'); 3 return sessiontoken; 4 }; 3 simpan token di sisi klien mari kita tingkatkan komponen masuk untuk mempertahankan token sesi alih alih mengelolanya menggunakan hook usestate komponen sekarang akan menjaga status masuk bahkan saat memuat ulang aplikasi karena memiliki token sesi yang dipertahankan buka komponen masuk di dalam oncompleted dari onsubmit, simpan token sesi di penyimpanan async mendapatkan hasil berikut kemudian tingkatkan 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 }, setelah itu, di dalam deklarasi komponen signin, buatlah usestate baru untuk token sesi 1 const \[sessiontoken, setsessiontoken] = usestate(null); tambahkan useeffect yang akan dipanggil setiap kali komponen dipasang dan periksa apakah memiliki token sesi (impor dari getsessiontoken getsessiontoken dari file lingkungan 1 useeffect(() => { 2 (async () => { 3 const st = await getsessiontoken(); 4 setsessiontoken(st); 5 })(); 6 }, \[]); terakhir, mari kita ubah lagi oncompleted untuk sekarang menangani usestate baru, mendapatkan baris kode baru 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 }, hapus usestate untuk pengguna yang masuk, kedua baris di bawah dari tempat masing masing 1 const \[userlogged, setuserlogged] = usestate(null); dan 1 setuserlogged(user); kami menghindari alert dan mulai mengatur informasi pengguna dan token dalam usestate diikuti dengan penyimpanan token di async storage ubah if untuk menangani sekarang token sesi 1 if (sessiontoken) { 2 return ( 3 \<view> 4 \<text>user logged\</text> 5 \</view> 6 ); 7 } 4 hasil akhir dari komponen signin setelah semua perubahan, komponen signin akan mirip dengan di bawah ini 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 pengujian saatnya untuk menguji perubahan baru dari komponen sign in untuk memastikan tidak ada pengguna yang masuk, matikan aplikasi anda dan buka lagi ingat juga untuk membersihkan async storage anda dapat melakukannya dengan memanggil asyncstorage clear() asyncstorage clear() metode dan membersihkan keadaan yang sebenarnya masuk kembali dan anda akan melihat pesan berikut 6 atur token sesi di lingkungan relay sekarang, mari kita masukkan token sesi pada permintaan aplikasi ke api graphql back4app di dalam file lingkungan, ambil sessiontoken dan tambahkan ke objek headers anda harus mengirimkan sessiontoken pada variabel x parse session token di headers di sini, kita akan menggunakan kembali getsessiontoken getsessiontoken fungsi yang sudah kita buat buat fungsi sebelum fetchquery fetchquery fungsi dan tempelkan kode berikut 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 }; fungsi di atas mengambil token sesi hanya jika ada sekarang, tambahkan ke objek headers dengan mendestruksinya 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 }; di bawah headers, ada try catch untuk membuat permintaan mari kita atur if setelah permintaan yang akan menangani ketika status http dari permintaan adalah 401 ini akan berarti bahwa token yang sebenarnya tidak valid lagi jadi, kita akan menghapus penyimpanan dan mengakhiri pengguna saat ini 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 } sekarang, aplikasi anda dapat mulai mengambil sumber daya pribadi dari backend back4app dan, jika token sesi tidak ada, tidak akan terjadi kesalahan karena kita tidak akan mengirimkannya jangan lupa untuk mengonfigurasi mekanisme keamanan untuk menjamin tingkat akses yang diinginkan bagi pengguna untuk lebih memahami, akses tautan https //docs parseplatform org/js/guide/#security dari parse kesimpulan dalam panduan ini, anda telah menyimpan token sesi menggunakan penyimpanan asinkron dan, sekarang dapat mulai mengambil sumber daya yang memerlukan pengguna yang masuk dalam dokumen berikut, mari kita siapkan komponen yang akan mengambil informasi tentang pengguna yang masuk dan berhenti menggunakan usestate untuk menampilkannya untuk pendaftaran pengguna, anda dapat mengikuti pendekatan yang sama dari tutorial ini untuk menangani token sesi