การใช้งาน Parse SDK กับ Facebook Login บน React Native

การเข้าสู่ระบบ facebook ด้วย react native บทนำ ในบทเรียนก่อนหน้านี้ คุณได้สร้างฟีเจอร์การเข้าสู่ระบบ/ออกจากระบบของผู้ใช้ในแอปของคุณโดยใช้ parse user parse user คลาส ตอนนี้คุณจะได้เรียนรู้วิธีการใช้ facebook fbsdk login เพื่อดึงข้อมูลผู้ใช้จาก facebook และเข้าสู่ระบบ ลงทะเบียน หรือเชื่อมโยงผู้ใช้ที่มีอยู่กับมัน คุณจะติดตั้งและกำหนดค่าห้องสมุด react native fbsdk react native fbsdk เพื่อให้บรรลุเป้าหมายนี้ วิธีการ parse user linkwith parse user linkwith มีหน้าที่ในการลงทะเบียนและเข้าสู่ระบบผู้ใช้โดยใช้วิธีการตรวจสอบสิทธิ์ของบุคคลที่สามใด ๆ ตราบใดที่คุณส่งพารามิเตอร์ที่ถูกต้องตามที่ผู้ให้บริการแต่ละรายร้องขอ หลังจากเชื่อมโยงข้อมูลผู้ใช้กับ parse user parse user ใหม่หรือที่มีอยู่แล้ว parse จะเก็บเซสชันผู้ใช้ที่ถูกต้องในอุปกรณ์ของคุณ การเรียกใช้วิธีการในอนาคต เช่น currentasync currentasync จะสามารถดึงข้อมูลผู้ใช้ของคุณได้สำเร็จ เช่นเดียวกับการเข้าสู่ระบบปกติ ในทุกช่วงเวลา คุณสามารถเข้าถึงโปรเจกต์ android ที่สร้างขึ้นด้วยบทเรียนนี้ได้ที่ที่เก็บ github ของเรา https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java ข้อกำหนดเบื้องต้น ในการทำบทเรียนนี้ให้เสร็จสมบูรณ์ คุณจะต้องการ แอป react native ที่สร้างขึ้นและ https //www back4app com/docs/react native/parse sdk/react native sdk ทำคู่มือก่อนหน้านี้ให้เสร็จเพื่อให้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับ https //www back4app com/docs/react native/parse sdk/working with users/react native login เป้าหมาย สร้างฟีเจอร์การเข้าสู่ระบบผู้ใช้โดยใช้ facebook fbsdk login บน parse สำหรับแอป react native 1 การติดตั้ง dependencies วิธีที่ได้รับความนิยมมากที่สุดในการเพิ่มการเข้าสู่ระบบ facebook บน react native คือการใช้ react native fbsdk react native fbsdk เพื่อจัดการมัน เนื่องจากการกำหนดค่าของไลบรารีนี้ขึ้นอยู่กับสภาพแวดล้อมการพัฒนาของคุณ แพลตฟอร์มเป้าหมาย และความชอบของคุณ ให้ตั้งค่าตามที่ระบุใน https //github com/facebook/react native fbsdk หมายเหตุ หากคุณกำลังพัฒนาสำหรับ ios ให้แน่ใจว่าโปรเจกต์ของคุณรองรับไฟล์ swift ซึ่งมี bridging header นอกจากนี้ ให้ใส่ใจกับตำแหน่งที่คุณเพิ่ม facebook app ids ภายใน info plist info plist ไฟล์และตรวจสอบว่าไฟล์ pods ของคุณถูกสร้างขึ้นอย่างถูกต้อง 2 การใช้ fbsdk login กับ parse ตอนนี้เรามาสร้างวิธีใหม่ภายใน userlogin userlogin คอมโพเนนต์ที่เรียกโมดัลการตรวจสอบสิทธิ์ facebook fbsdk ด้วย loginmanager loginwithpermissions loginmanager loginwithpermissions , โดยขออนุญาตเพียงเพื่อเข้าถึงอีเมลของผู้ใช้ หากผู้ใช้ลงชื่อเข้าใช้ด้วย facebook สำเร็จ คุณสามารถเรียก accesstoken getcurrentaccesstoken accesstoken getcurrentaccesstoken เพื่อดึงโทเค็นการเข้าถึงของผู้ใช้จาก facebook หลังจากนั้นคุณยังต้องได้รับ id id และ email email โดยใช้ graphrequest graphrequest ผ่าน fbsdk graphrequestmanager graphrequestmanager javascript 1 const douserloginfacebook = async function () { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error, 16 emailresult, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid = emailresult id; 23 const facebookemail = emailresult email; 24 const authdata = { 25 id facebookid, 26 access token facebookaccesstoken, 27 }; 28 // log in or sign up on parse using this facebook credentials 29 let usertologin = new parse user(); 30 // set username and email to match provider email 31 usertologin set('username', facebookemail); 32 usertologin set('email', facebookemail); 33 return await usertologin 34 linkwith('facebook', { 35 authdata authdata, 36 }) 37 then(async (loggedinuser) => { 38 // login returns the corresponding parseuser object 39 alert alert( 40 'success!', 41 `user ${loggedinuser get( 42 'username', 43 )} has successfully signed in!`, 44 ); 45 // to verify that this is in fact the current user, currentasync can be used 46 const currentuser = await parse user currentasync(); 47 console log(loggedinuser === currentuser); 48 // navigation navigate takes the user to the screen named after the one 49 // passed as parameter 50 navigation navigate('home'); 51 return true; 52 }) 53 catch(async (error) => { 54 // error can be caused by wrong parameters or lack of internet connection 55 alert alert('error!', error message); 56 return false; 57 }); 58 } 59 }; 60&#x9; 61 // formats a fbsdk graphrequest to retrieve user email and id 62 const emailrequest = new graphrequest( 63 '/me', 64 { 65 accesstoken facebookaccesstoken, 66 parameters { 67 fields { 68 string 'email', 69 }, 70 }, 71 }, 72 responseemailcallback, 73 ); 74&#x9; 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77&#x9; 78 return true; 79 }); 80 } 81 }, 82 (error) => { 83 console log('login fail with error ' + error); 84 return false; 85 }, 86 ); 87 } catch (error) { 88 alert alert('error!', error code); 89 return false; 90 } 91 };1 const douserloginfacebook = async function () promise\<boolean> { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult object) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data object) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error string, 16 emailresult object, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid string = emailresult id; 23 const facebookemail string = emailresult email; 24 const authdata object = { 25 id facebookid, 26 access token facebookaccesstoken, 27 }; 28 // log in or sign up on parse using this facebook credentials 29 let usertologin parse user = new parse user(); 30 // set username and email to match provider email 31 usertologin set('username', facebookemail); 32 usertologin set('email', facebookemail); 33 return await usertologin 34 linkwith('facebook', { 35 authdata authdata, 36 }) 37 then(async (loggedinuser parse user) => { 38 // login returns the corresponding parseuser object 39 alert alert( 40 'success!', 41 `user ${loggedinuser get( 42 'username', 43 )} has successfully signed in!`, 44 ); 45 // to verify that this is in fact the current user, currentasync can be used 46 const currentuser parse user = await parse user currentasync(); 47 console log(loggedinuser === currentuser); 48 // navigation navigate takes the user to the screen named after the one 49 // passed as parameter 50 navigation navigate('home'); 51 return true; 52 }) 53 catch(async (error object) => { 54 // error can be caused by wrong parameters or lack of internet connection 55 alert alert('error!', error message); 56 return false; 57 }); 58 } 59 }; 60&#x9; 61 // formats a fbsdk graphrequest to retrieve user email and id 62 const emailrequest = new graphrequest( 63 '/me', 64 { 65 accesstoken facebookaccesstoken, 66 parameters { 67 fields { 68 string 'email', 69 }, 70 }, 71 }, 72 responseemailcallback, 73 ); 74&#x9; 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77&#x9; 78 return true; 79 }); 80 } 81 }, 82 (error string) => { 83 console log('login fail with error ' + error); 84 return false; 85 }, 86 ); 87 } catch (error object) { 88 alert alert('error!', error code); 89 return false; 90 } 91 }; โปรดทราบว่าหลังจากที่ graphrequest graphrequest สำเร็จแล้ว ฟังก์ชันนี้จะใช้ parse user linkwith parse user linkwith บน parse user parse user ใหม่เพื่อลงทะเบียนผู้ใช้ใหม่หรือเข้าสู่ระบบผู้ใช้ก่อนหน้านี้ด้วยข้อมูลประจำตัวเหล่านี้ โดยส่งข้อมูลการตรวจสอบสิทธิ์ facebook ของเขาไปตามนั้น เพิ่มฟังก์ชันนี้ไปยัง usersignin usersignin ของคุณและกำหนดให้กับปุ่ม facebook ของคุณ onpress onpress ไปข้างหน้าและทดสอบฟังก์ชันใหม่ของคุณ คุณจะเห็นว่าผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าหลักของคุณหลังจากเข้าสู่ระบบสำเร็จ 3 การตรวจสอบการเข้าสู่ระบบของผู้ใช้และการสร้างเซสชัน เพื่อให้แน่ใจว่าการเข้าสู่ระบบด้วย facebook ทำงาน คุณสามารถดูที่แดชบอร์ด parse ของคุณและดู ผู้ใช้ ผู้ใช้ ใหม่ของคุณ (หากข้อมูลการตรวจสอบสิทธิ์ facebook ของคุณไม่เป็นของผู้ใช้อื่น) ซึ่งมี authdata authdata ของ facebook คุณยังสามารถตรวจสอบว่าเซสชันที่ถูกต้องถูกสร้างขึ้นในแดชบอร์ด ซึ่งมีการชี้ไปยัง ผู้ใช้ ผู้ใช้ นั้น 4 การเชื่อมโยงผู้ใช้ที่มีอยู่กับ fbsdk login อีกหนึ่ง linkwith linkwith การใช้งานที่เป็นไปได้คือการเชื่อมโยงผู้ใช้ที่มีอยู่กับผู้ให้บริการการรับรองความถูกต้องอื่น ในกรณีนี้คือ facebook เพิ่มฟังก์ชันนี้ที่เรียก linkwith linkwith ในลักษณะเดียวกับที่คุณทำใน userlogin userlogin ไปยัง hellouser hellouser คอมโพเนนต์ของคุณหรือโดยตรงไปยังหน้าหลักของคุณ ความแตกต่างเพียงอย่างเดียวที่นี่คือแทนที่จะเรียกใช้วิธีจาก parse user parse user , คุณจะใช้มันจากอ็อบเจ็กต์ผู้ใช้ที่เข้าสู่ระบบแล้ว javascript 1 const douserlinkfacebook = async function () { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error, 16 emailresult, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid = emailresult id; 23 const authdata = { 24 id facebookid, 25 access token facebookaccesstoken, 26 }; 27 let currentuser = await parse user currentasync(); 28 return await currentuser 29 linkwith('facebook', { 30 authdata authdata, 31 }) 32 then(async (loggedinuser) => { 33 // login returns the corresponding parseuser object 34 alert alert( 35 'success!', 36 `user ${loggedinuser get( 37 'username', 38 )} has successfully linked his facebook account!`, 39 ); 40 // to verify that this is in fact the current user, currentasync can be used 41 currentuser = await parse user currentasync(); 42 console log(loggedinuser === currentuser); 43 return true; 44 }) 45 catch(async (linkwitherror) => { 46 // error can be caused by wrong parameters or lack of internet connection 47 alert alert('error!', linkwitherror message); 48 return false; 49 }); 50 } 51 }; 52&#x9; 53 // formats a fbsdk graphrequest to retrieve user email and id 54 const emailrequest = new graphrequest( 55 '/me', 56 { 57 accesstoken facebookaccesstoken, 58 parameters { 59 fields { 60 string 'email', 61 }, 62 }, 63 }, 64 responseemailcallback, 65 ); 66&#x9; 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69&#x9; 70 return true; 71 }); 72 } 73 }, 74 (error) => { 75 console log('login fail with error ' + error); 76 return false; 77 }, 78 ); 79 } catch (error) { 80 alert alert('error!', error code); 81 return false; 82 } 83 };1 const douserlinkfacebook = async function () promise\<boolean> { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult object) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data object) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error string, 16 emailresult object, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid string = emailresult id; 23 const authdata object = { 24 id facebookid, 25 access token facebookaccesstoken, 26 }; 27 let currentuser parse user = await parse user currentasync(); 28 return await currentuser 29 linkwith('facebook', { 30 authdata authdata, 31 }) 32 then(async (loggedinuser parse user) => { 33 // login returns the corresponding parseuser object 34 alert alert( 35 'success!', 36 `user ${loggedinuser get( 37 'username', 38 )} has successfully linked his facebook account!`, 39 ); 40 // to verify that this is in fact the current user, currentasync can be used 41 currentuser = await parse user currentasync(); 42 console log(loggedinuser === currentuser); 43 return true; 44 }) 45 catch(async (linkwitherror object) => { 46 // error can be caused by wrong parameters or lack of internet connection 47 alert alert('error!', linkwitherror message); 48 return false; 49 }); 50 } 51 }; 52&#x9; 53 // formats a fbsdk graphrequest to retrieve user email and id 54 const emailrequest = new graphrequest( 55 '/me', 56 { 57 accesstoken facebookaccesstoken, 58 parameters { 59 fields { 60 string 'email', 61 }, 62 }, 63 }, 64 responseemailcallback, 65 ); 66&#x9; 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69&#x9; 70 return true; 71 }); 72 } 73 }, 74 (error string) => { 75 console log('login fail with error ' + error); 76 return false; 77 }, 78 ); 79 } catch (error object) { 80 alert alert('error!', error code); 81 return false; 82 } 83 }; กำหนดฟังก์ชันนี้ให้กับปุ่ม facebook onpress onpress ในหน้าหลักของคุณ ทดสอบฟังก์ชันใหม่ของคุณ โดยสังเกตว่าค่า authdata ของวัตถุ parse user parse user จะถูกอัปเดตด้วยข้อมูลผู้ให้บริการการรับรองความถูกต้องใหม่ ยืนยันว่าผู้ใช้ได้อัปเดตจริงในแดชบอร์ดเซิร์ฟเวอร์ parse ของคุณ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการเข้าสู่ระบบหรือสมัครสมาชิกผู้ใช้ parse บน react native โดยใช้ facebook fbsdk login กับ react native fbsdk react native fbsdk ในคู่มือต่อไป เราจะแสดงวิธีการทำการค้นหาผู้ใช้ที่มีประโยชน์