การตรวจสอบสิทธิ์ React Native ด้วย GraphQL และ Relay

การตรวจสอบสิทธิ์ใน react native โดยใช้ relay บทนำ โดยใช้ graphql api หลังจากที่ลงทะเบียนหรือเข้าสู่ระบบผู้ใช้ คุณจะได้รับโทเค็นเซสชันที่คุณสามารถใช้เพื่อดึงข้อมูลผู้ใช้ที่เข้าสู่ระบบได้ตลอดเวลา โทเค็นเซสชันมาจาก relay mutation คุณจะพบตัวอย่าง relay mutation เหล่านั้นในคู่มือก่อนหน้านี้ของ https //www back4app com/docs/parse graphql/graphql sign up หรือ https //www back4app com/docs/parse graphql/graphql login ค่าโทเค็นเซสชันแสดงถึงเซสชันปัจจุบันและควบคุมว่าผู้ใช้ได้รับการตรวจสอบสิทธิ์หรือไม่ ในขณะการตรวจสอบสิทธิ์ ค่านี้ต้องเริ่มต้นอยู่ในพารามิเตอร์หัวข้อ ใน relay เราใช้ environment เพื่อจัดการพารามิเตอร์หัวข้อ ดังนั้นคุณควรแทรกโทเค็นเซสชันภายในไฟล์นี้ หลังจากเพิ่มเซสชันไปยังหัวข้อแล้ว การร้องขอแต่ละครั้งจะได้รับการตรวจสอบสิทธิ์โดย back4app และผู้ใช้จะเข้าถึงทรัพยากรส่วนตัวได้ คุณสามารถเข้าถึงโครงการนี้ได้ทุกเมื่อผ่านที่เก็บ github ของเราเพื่อตรวจสอบสไตล์และโค้ดที่สมบูรณ์ https //github com/templates back4app/react native graphql relay js users เป้าหมาย ตรวจสอบสิทธิ์การร้องขอของผู้ใช้บน back4app โดยใช้โทเค็นเซสชันในพารามิเตอร์หัวข้อ ข้อกำหนดเบื้องต้น แอปที่สร้างขึ้นที่ back4app โดยใช้ parse server เวอร์ชัน 3 10 หรือสูงกว่า คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/relay setup คุณต้องทำให้เสร็จสิ้น https //www back4app com/docs/react native/graphql/users/react native login sample สำหรับบทช่วยสอนนี้เราจะใช้ expo เป็นเฟรมเวิร์ก react native; สำหรับบทช่วยสอนนี้เราจะใช้ javascript เป็นภาษาการใช้งานเริ่มต้นของเรา; สำหรับบทช่วยสอนนี้เราจะใช้ async storage; 1 ติดตั้ง async storage หลังจากทำให้เสร็จสิ้นบทช่วยสอน https //www back4app com/docs/parse graphql/graphql sign up หรือ https //www back4app com/docs/parse graphql/graphql login , แอปของคุณจะได้รับโทเค็นเซสชัน มาจัดเก็บโทเค็นโดยใช้ async storage ทำตามเอกสารอย่างเป็นทางการเพื่อติดตั้งไลบรารี async storage บนแอปของคุณ คุณสามารถใช้ async storage, redux, หรือโซลูชันการจัดเก็บข้อมูลในเครื่องที่คุณชื่นชอบ คุณเพียงแค่ต้องมั่นใจว่าค่านี้จะพร้อมใช้งานใน environment 2 ดึงโทเค็น มาดำเนินการต่อโดยใช้ https //www back4app com/docs/parse graphql/graphql login คุณจะต้องดึงโทเค็นเซสชันและเก็บค่าดังกล่าวในแอปพลิเคชันของคุณโดยใช้ async storage เริ่มต้นโดยการเปลี่ยนการจัดการสถานะโทเค็นเซสชันจาก usestate hook เป็น async storage ขั้นตอนแรกคือการสร้างฟังก์ชันภายในไฟล์ environment เพื่อดึงโทเค็นเซสชันจาก 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 บันทึกโทเค็นในฝั่งลูกค้า ตอนนี้เรามาปรับปรุงคอมโพเนนต์ sign in เพื่อเก็บรักษาโทเค็นเซสชันแทนที่จะจัดการด้วย usestate hook คอมโพเนนต์จะเก็บสถานะการล็อกอินแม้จะมีการรีโหลดแอปเพราะมันมีโทเค็นเซสชันที่ถูกเก็บรักษาไว้ เปิดคอมโพเนนต์ sign in ภายใน oncompleted จาก onsubmit โดยการบันทึกโทเค็นเซสชันใน async storage จะได้ผลลัพธ์ดังต่อไปนี้ จากนั้นปรับปรุง 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 ใหม่สำหรับ session token 1 const \[sessiontoken, setsessiontoken] = usestate(null); เพิ่ม useeffect ที่จะถูกเรียกทุกครั้งที่คอมโพเนนต์ถูกติดตั้งและตรวจสอบว่ามี session token หรือไม่ (นำเข้า 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 หลังจากการเปลี่ยนแปลงทั้งหมด คอมโพเนนต์ 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 แล้ว เพื่อให้แน่ใจว่าไม่มีผู้ใช้คนใดเข้าสู่ระบบอยู่ ให้ปิดแอปพลิเคชันของคุณและเปิดใหม่อีกครั้ง อย่าลืมล้าง async storage ด้วย คุณสามารถทำได้โดยเรียกใช้ asyncstorage clear() asyncstorage clear() และล้างสถานะปัจจุบัน เข้าสู่ระบบอีกครั้งและคุณจะเห็นข้อความต่อไปนี้ 6 ตั้งค่า session token บน relay environment ตอนนี้ มาลงทะเบียน session token ในคำขอของแอปพลิเคชันไปยัง back4app graphql api กันเถอะ ภายในไฟล์ environment ให้ดึง sessiontoken และเพิ่มมันลงในวัตถุ headers คุณควรส่ง sessiontoken ผ่านตัวแปร x parse session token ใน headers ที่นี่ เราจะนำกลับมาใช้ฟังก์ชัน 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 }; ฟังก์ชันข้างต้นจะดึง session token เฉพาะเมื่อมันมีอยู่ ตอนนี้ให้เพิ่มมันลงในวัตถุ headers โดยการทำการแยกมันออก 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 }; ด้านล่างของ headers จะมี try catch สำหรับทำการร้องขอ มาตั้งค่า if หลังจากการร้องขอที่จะจัดการเมื่อสถานะ http ของการร้องขอเป็น 401 ซึ่งหมายความว่า token ปัจจุบันไม่ถูกต้องอีกต่อไป ดังนั้นเราจะล้างข้อมูลใน storage และยกเลิกผู้ใช้ปัจจุบัน 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 backend ได้แล้ว และถ้าหากโทเค็นเซสชันไม่มีอยู่ จะไม่เกิดปัญหาเพราะเราจะไม่ส่งมันไป อย่าลืมกำหนดกลไกความปลอดภัยเพื่อรับประกันระดับการเข้าถึงที่ต้องการสำหรับผู้ใช้ เพื่อให้เข้าใจได้ดียิ่งขึ้นให้เข้าลิงก์ https //docs parseplatform org/js/guide/#security จาก parse บทสรุป ในคู่มือนี้ คุณได้บันทึกโทเค็นเซสชันโดยใช้การจัดเก็บแบบอะซิงโครนัส และตอนนี้สามารถเริ่มดึงข้อมูลที่ต้องการให้ผู้ใช้ล็อกอินได้ ในเอกสารถัดไป มาจัดเตรียมคอมโพเนนต์ที่จะดึงข้อมูลเกี่ยวกับผู้ใช้ที่ล็อกอินและหยุดใช้ usestate เพื่อแสดงข้อมูลนี้ สำหรับการลงทะเบียนผู้ใช้ คุณสามารถทำตามวิธีการเดียวกันกับบทเรียนนี้เพื่อจัดการโทเค็นเซสชัน