Integrasi Otentikasi Google di React Native Menggunakan Parse

9 mnt

masuk dengan google untuk react native pendahuluan dalam tutorial terakhir, anda membangun fitur login/logout pengguna untuk aplikasi anda menggunakan \parse user\ kelas sekarang anda akan belajar bagaimana menggunakan google sign in untuk mengambil data pengguna dari google dan masuk, mendaftar atau menghubungkan pengguna yang ada dengan itu anda juga akan menginstal dan mengonfigurasi \react native google signin\ pustaka untuk mencapai itu metode \parse user linkwith\ bertanggung jawab untuk mendaftar dan masuk pengguna menggunakan metode otentikasi pihak ketiga mana pun, selama anda mengirimkan parameter yang tepat yang diminta oleh setiap penyedia yang berbeda setelah menghubungkan data pengguna ke \parse user\ baru atau yang ada, parse akan menyimpan sesi pengguna yang valid di perangkat anda panggilan mendatang ke metode seperti \currentasync\ akan berhasil mengambil data pengguna anda, sama seperti dengan login biasa kapan saja, anda dapat mengakses proyek ini melalui repositori github kami untuk memeriksa gaya dan kode lengkapnya repositori contoh javascript https //github com/templates back4app/react native js login google repositori contoh typescript https //github com/templates back4app/react native ts login google prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan terhubung ke back4app https //www back4app com/docs/react native/parse sdk/react native sdk selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang kelas pengguna parse https //www back4app com/docs/react native/parse sdk/working with users/react native login tujuan untuk membangun fitur login pengguna menggunakan google sign in di parse untuk aplikasi react native 1 menginstal dependensi cara paling populer untuk mengaktifkan google sign in di react native adalah dengan menggunakan \react native google signin\ untuk menanganinya karena konfigurasi pustaka ini tergantung pada lingkungan pengembangan anda, platform target, dan preferensi, atur sesuai dengan dokumentasi resmi https //github com/react native google signin/google signin setelah itu, pastikan bahwa file utama aplikasi anda ( \app js\ atau \app tsx\ ) menginisialisasi dan mengonfigurasi \googlesignin\ dengan benar seperti ini 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 menggunakan google sign in dengan parse sekarang mari kita buat metode baru di dalam \userlogin\ komponen yang memanggil modal otentikasi google sign in dengan \googlesignin signin\ jika pengguna masuk dengan google, panggilan ini akan mengambil data pengguna dari google dan anda perlu menyimpan id, idtoken, dan email google untuk nanti 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 }; setelah itu, anda dapat menggunakan \parse user linkwith\ pada objek \parse user\ baru untuk mendaftar pengguna baru dan masuk perhatikan bahwa jika pengguna anda sudah mendaftar menggunakan autentikasi google ini, \linkwith\ akan masuk menggunakan akun yang ada 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 }; tambahkan fungsi ini ke \usersignin\ komponen anda dan tetapkan ke tombol google anda \onpress\ silakan uji fungsi baru anda perhatikan bahwa pengguna akan diarahkan ke layar beranda anda setelah berhasil mendaftar dan/atau masuk 3 memverifikasi masuk pengguna dan pembuatan sesi untuk memastikan bahwa masuk google berhasil, anda dapat melihat dasbor parse anda dan melihat \pengguna\ baru anda (jika data otentikasi google anda tidak milik pengguna lain), yang berisi \authdata\ parameter google anda juga dapat memverifikasi bahwa sesi yang valid telah dibuat di dasbor, yang berisi pointer ke \pengguna\ objek tersebut 4 menghubungkan pengguna yang ada ke google sign in penggunaan lain yang mungkin adalah menghubungkan pengguna yang ada dengan penyedia otentikasi lain, dalam hal ini, google tambahkan fungsi ini yang memanggil \linkwith\ dengan cara yang sama seperti yang anda lakukan di \userlogin\ ke \hellouser\ komponen anda atau langsung ke layar beranda anda satu satunya perbedaan di sini adalah bahwa alih alih memanggil metode dari \parse user\ yang kosong, anda akan menggunakannya dari objek pengguna yang sudah masuk 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 }; tetapkan fungsi ini ke tombol google \onpress\ parameter di layar beranda anda uji fungsi baru anda, dengan mencatat bahwa \parse user\ objek \authdata\ nilai akan diperbarui dengan data penyedia otentikasi baru verifikasi apakah pengguna benar benar diperbarui di dasbor server parse anda kesimpulan di akhir panduan ini, anda telah belajar bagaimana cara masuk, mendaftar atau menghubungkan pengguna parse yang ada di react native menggunakan google sign in dengan \react native google signin\ di panduan berikutnya, kami akan menunjukkan kepada anda cara melakukan kueri pengguna yang berguna