Implementasi Login Facebook di React Native Menggunakan Parse

login facebook react native pendahuluan dalam tutorial terakhir, anda membangun fitur login/logout pengguna untuk aplikasi anda menggunakan parse user parse user kelas sekarang anda akan belajar bagaimana menggunakan facebook fbsdk login untuk mengambil data pengguna dari facebook dan masuk, mendaftar atau menghubungkan pengguna yang ada dengan itu anda juga akan menginstal dan mengonfigurasi react native fbsdk react native fbsdk lib untuk mencapai itu metode parse user linkwith 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 parse user baru atau yang ada, parse akan menyimpan sesi pengguna yang valid di perangkat anda panggilan mendatang ke metode seperti currentasync currentasync akan berhasil mengambil data pengguna anda, sama seperti dengan login biasa kapan saja, anda dapat mengakses proyek android lengkap yang dibangun dengan tutorial ini di repositori github kami https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan aplikasi react native yang dibuat dan https //www back4app com/docs/react native/parse sdk/react native sdk selesaikan panduan sebelumnya agar anda dapat memiliki pemahaman yang lebih baik tentang https //www back4app com/docs/react native/parse sdk/working with users/react native login tujuan untuk membangun fitur login pengguna menggunakan facebook fbsdk login di parse untuk aplikasi react native 1 menginstal dependensi cara paling populer untuk menambahkan login facebook di react native adalah dengan menggunakan react native fbsdk react native fbsdk untuk menanganinya karena konfigurasi pustaka ini tergantung pada lingkungan pengembangan anda, platform target, dan preferensi, atur sesuai dengan https //github com/facebook/react native fbsdk catatan jika anda mengembangkan untuk ios, pastikan bahwa proyek anda mendukung file swift, yang berisi bridging header juga, perhatikan dengan seksama di mana anda menambahkan id aplikasi facebook di dalam info plist info plist file dan jika file pods anda dihasilkan dengan benar 2 menggunakan fbsdk login dengan parse mari kita buat metode baru di dalam userlogin userlogin komponen yang memanggil modal otentikasi facebook fbsdk dengan loginmanager loginwithpermissions loginmanager loginwithpermissions , meminta izin hanya untuk mengakses email pengguna jika pengguna berhasil masuk dengan facebook, anda kemudian dapat memanggil accesstoken getcurrentaccesstoken accesstoken getcurrentaccesstoken untuk mengambil token akses pengguna dari facebook setelah itu, anda masih perlu mendapatkan id id dan email email menggunakan graphrequest graphrequest melalui 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 }; perhatikan bahwa setelah graphrequest graphrequest berhasil, fungsi ini menggunakan parse user linkwith parse user linkwith pada objek parse user parse user baru untuk mendaftarkan pengguna baru atau masuk sebagai pengguna sebelumnya dengan kredensial ini, mengirimkan data otentikasi facebook nya sesuai tambahkan fungsi ini ke usersignin usersignin komponen anda dan tetapkan ke tombol facebook anda onpress onpress parameter silakan coba fungsi baru anda, anda akan melihat bahwa pengguna akan diarahkan ke layar beranda anda setelah berhasil masuk 3 memverifikasi masuk pengguna dan pembuatan sesi untuk memastikan bahwa masuk facebook berhasil, anda dapat melihat dasbor parse anda dan melihat user user baru anda (jika data otentikasi facebook anda tidak milik pengguna lain), yang berisi parameter authdata authdata facebook anda juga dapat memverifikasi bahwa sesi yang valid telah dibuat di dasbor, yang berisi pointer ke objek user user tersebut 4 menghubungkan pengguna yang ada ke fbsdk login penggunaan lain yang mungkin adalah menghubungkan pengguna yang ada dengan penyedia otentikasi lain, dalam hal ini, facebook tambahkan fungsi ini yang memanggil linkwith linkwith dengan cara yang sama seperti yang anda lakukan di linkwith linkwith userlogin userlogin ke hellouser hellouser komponen anda atau langsung ke layar beranda anda satu satunya perbedaan di sini adalah bahwa alih alih memanggil metode dari parse user parse user yang kosong, anda akan menggunakannya dari objek pengguna yang sudah masuk 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 }; tetapkan fungsi ini ke tombol facebook onpress onpress parameter di layar utama anda uji fungsi baru anda, dengan mencatat bahwa parse user parse user nilai objek authdata akan diperbarui dengan data penyedia otentikasi baru verifikasi apakah pengguna memang telah diperbarui di dasbor server parse anda kesimpulan di akhir panduan ini, anda telah belajar bagaimana cara masuk atau mendaftar pengguna parse di react native menggunakan facebook fbsdk login dengan react native fbsdk react native fbsdk di panduan berikutnya, kami akan menunjukkan kepada anda bagaimana melakukan kueri pengguna yang berguna