ลงชื่อเข้าใช้ Google บน React Native ด้วย Parse SDK

9 นาที

ลงชื่อเข้าใช้ด้วย google สำหรับ react native บทนำ ในบทเรียนก่อนหน้านี้ คุณได้สร้างฟีเจอร์การเข้าสู่ระบบ/ออกจากระบบของผู้ใช้ในแอปของคุณโดยใช้ \parse user\ คลาส ตอนนี้คุณจะได้เรียนรู้วิธีการใช้ google sign in เพื่อดึงข้อมูลผู้ใช้จาก google และเข้าสู่ระบบ ลงทะเบียน หรือเชื่อมโยงผู้ใช้ที่มีอยู่กับมัน คุณจะติดตั้งและกำหนดค่า \react native google signin\ ไลบรารีเพื่อให้บรรลุเป้าหมายนี้ วิธีการ \parse user linkwith\ มีหน้าที่ในการลงทะเบียนและเข้าสู่ระบบผู้ใช้โดยใช้วิธีการตรวจสอบสิทธิ์ของบุคคลที่สามใด ๆ ตราบใดที่คุณส่งพารามิเตอร์ที่ถูกต้องตามที่ผู้ให้บริการแต่ละรายร้องขอ หลังจากเชื่อมโยงข้อมูลผู้ใช้กับ \parse user\ ใหม่หรือที่มีอยู่ parse จะเก็บเซสชันผู้ใช้ที่ถูกต้องในอุปกรณ์ของคุณ การเรียกใช้วิธีการในอนาคต เช่น \currentasync\ จะดึงข้อมูลผู้ใช้ของคุณได้สำเร็จ เช่นเดียวกับการเข้าสู่ระบบปกติ คุณสามารถเข้าถึงโครงการนี้ได้ตลอดเวลาผ่านทาง github ของเราเพื่อตรวจสอบสไตล์และโค้ดทั้งหมด ที่เก็บตัวอย่าง javascript https //github com/templates back4app/react native js login google ที่เก็บตัวอย่าง typescript https //github com/templates back4app/react native ts login google ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี แอป react native ที่สร้างขึ้นและ เชื่อมต่อกับ back4app https //www back4app com/docs/react native/parse sdk/react native sdk ทำตามคู่มือก่อนหน้านี้เพื่อให้คุณมีความเข้าใจที่ดีขึ้นเกี่ยวกับ คลาสผู้ใช้ parse https //www back4app com/docs/react native/parse sdk/working with users/react native login เป้าหมาย สร้างฟีเจอร์การเข้าสู่ระบบผู้ใช้โดยใช้ google sign in บน parse สำหรับแอป react native 1 การติดตั้ง dependencies วิธีที่ได้รับความนิยมมากที่สุดในการเปิดใช้งาน google sign in บน react native คือการใช้ \react native google signin\ เพื่อจัดการมัน เนื่องจากการกำหนดค่าของไลบรารีนี้ขึ้นอยู่กับสภาพแวดล้อมการพัฒนาของคุณ แพลตฟอร์มเป้าหมาย และความชอบของคุณ ให้ตั้งค่าตาม เอกสารอย่างเป็นทางการ https //github com/react native google signin/google signin หลังจากนั้น ให้แน่ใจว่าไฟล์หลักของแอปของคุณ ( \app js\ หรือ \app tsx\ ) กำลังเริ่มต้นและกำหนดค่า \googlesignin\ อย่างถูกต้องดังนี้ app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3	 4 // parse initialization configuration goes here 5 // 6	 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16	 17 // 2 ใช้ google sign in กับ parse ตอนนี้เรามาสร้างวิธีใหม่ภายใน \userlogin\ คอมโพเนนต์ที่เรียกโมดัลการตรวจสอบสิทธิ์ google sign in ด้วย \googlesignin signin\ หากผู้ใช้ลงชื่อเข้าใช้ด้วย google การเรียกนี้จะดึงข้อมูลผู้ใช้จาก google และคุณต้องเก็บ id, idtoken และอีเมล google สำหรับภายหลัง javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; หลังจากนั้น คุณสามารถใช้ \parse user linkwith\ บน \parse user\ ใหม่เพื่อลงทะเบียนผู้ใช้ใหม่และเข้าสู่ระบบ โปรดทราบว่าหากผู้ใช้ของคุณได้ลงทะเบียนแล้วโดยใช้การตรวจสอบสิทธิ์ google นี้ \linkwith\ จะเข้าสู่ระบบโดยใช้บัญชีที่มีอยู่ javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; เพิ่มฟังก์ชันนี้ไปยัง \usersignin\ คอมโพเนนต์ของคุณและกำหนดให้กับปุ่ม google ของคุณ \onpress\ พารามิเตอร์ ไปข้างหน้าและทดสอบฟังก์ชันใหม่ของคุณ โปรดทราบว่าผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าหลักของคุณหลังจากลงทะเบียนและ/หรือเข้าสู่ระบบสำเร็จ 3 การตรวจสอบการเข้าสู่ระบบของผู้ใช้และการสร้างเซสชัน เพื่อให้แน่ใจว่าการเข้าสู่ระบบด้วย google ทำงานได้ คุณสามารถดูที่แดชบอร์ด parse ของคุณและดู \ผู้ใช้\ ใหม่ (หากข้อมูลการตรวจสอบสิทธิ์ของ google ของคุณไม่เป็นของผู้ใช้อื่น) ซึ่งมี \authdata\ ของ google คุณยังสามารถตรวจสอบว่าเซสชันที่ถูกต้องถูกสร้างขึ้นในแดชบอร์ด ซึ่งมีการชี้ไปที่ \ผู้ใช้\ วัตถุ 4 การเชื่อมโยงผู้ใช้ที่มีอยู่กับการเข้าสู่ระบบ google อีกหนึ่ง \linkwith\ การใช้งานที่เป็นไปได้คือการเชื่อมโยงผู้ใช้ที่มีอยู่กับผู้ให้บริการการตรวจสอบสิทธิ์อื่น ในกรณีนี้คือ google เพิ่มฟังก์ชันนี้ที่เรียก \linkwith\ ในลักษณะเดียวกับที่คุณทำใน \userlogin\ ไปยัง \hellouser\ คอมโพเนนต์ของคุณหรือโดยตรงไปยังหน้าหลักของคุณ ความแตกต่างเพียงอย่างเดียวที่นี่คือแทนที่จะเรียกใช้วิธีการจาก \parse user\ , คุณจะใช้มันจากวัตถุผู้ใช้ที่เข้าสู่ระบบแล้ว javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; กำหนดฟังก์ชันนี้ให้กับปุ่ม google \onpress\ ในหน้าจอหลักของคุณ ทดสอบฟังก์ชันใหม่ของคุณ โดยสังเกตว่า \parse user\ อ็อบเจ็กต์ \authdata\ จะถูกอัปเดตด้วยข้อมูลผู้ให้บริการการรับรองใหม่ ยืนยันว่าผู้ใช้ได้อัปเดตจริงในแดชบอร์ดเซิร์ฟเวอร์ parse ของคุณ บทสรุป ในตอนท้ายของคู่มือนี้ คุณได้เรียนรู้วิธีการเข้าสู่ระบบ ลงทะเบียน หรือเชื่อมโยงผู้ใช้ parse ที่มีอยู่ใน react native โดยใช้ google sign in กับ \react native google signin\ ในคู่มือต่อไป เราจะแสดงวิธีการทำการค้นหาผู้ใช้ที่มีประโยชน์