React Native: Facebook-Anmeldung mit Parse-Integration

react native facebook anmeldung einführung in den letzten tutorials haben sie eine benutzeranmelde /abmeldefunktion für ihre app mit der parse user parse user klasse erstellt jetzt lernen sie, wie sie die facebook fbsdk anmeldung verwenden, um benutzerdaten von facebook abzurufen und sich anzumelden, zu registrieren oder bestehende benutzer damit zu verknüpfen sie werden auch die react native fbsdk react native fbsdk bibliothek installieren und konfigurieren, um dies zu erreichen die parse user linkwith parse user linkwith methode ist verantwortlich für die registrierung und anmeldung von benutzern mit jeder authentifizierungsmethode eines drittanbieters, solange sie die richtigen parameter übergeben, die von jedem verschiedenen anbieter angefordert werden nachdem die benutzerdaten mit einem neuen oder bestehenden parse user parse user , speichert parse eine gültige benutzersitzung auf ihrem gerät zukünftige aufrufe von methoden wie currentasync currentasync werden erfolgreich ihre benutzerdaten abrufen, genau wie bei regulären anmeldungen zu jeder zeit können sie das vollständige android projekt, das mit diesem tutorial erstellt wurde, in unseren github repositories aufrufen kotlin beispiel repository java beispiel repository voraussetzungen um dieses tutorial abzuschließen, benötigen sie eine react native app, die erstellt und mit back4app verbunden ist schließen sie die vorherigen anleitungen ab, damit sie ein besseres verständnis von der parse benutzerklasse ziel um eine benutzeranmeldungsfunktion mit facebook fbsdk login auf parse für eine react native app zu erstellen 1 abhängigkeiten installieren die beliebteste methode, um facebook login in react native hinzuzufügen, ist die verwendung von react native fbsdk react native fbsdk , um dies zu handhaben da die konfiguration dieser bibliothek von ihrer entwicklungsumgebung, der zielplattform und ihren vorlieben abhängt, richten sie sie gemäß den offiziellen dokumenten https //github com/facebook/react native fbsdk ein hinweis wenn sie für ios entwickeln, stellen sie sicher, dass ihr projekt unterstützung für swift dateien hat, die einen bridging header enthalten achten sie auch genau darauf, wo sie die facebook app ids in ihre info plist info plist datei hinzufügen und ob ihre pods dateien korrekt generiert wurden 2 verwendung von fbsdk login mit parse lass uns jetzt eine neue methode innerhalb der userlogin userlogin komponente erstellen, die das facebook fbsdk authentifizierungsmodal mit loginmanager loginwithpermissions loginmanager loginwithpermissions , anruft und nur die berechtigung anfordert, um auf die e mail des benutzers zuzugreifen wenn der benutzer sich erfolgreich mit facebook anmeldet, kannst du dann accesstoken getcurrentaccesstoken accesstoken getcurrentaccesstoken aufrufen, um das benutzerzugangstoken von facebook abzurufen danach musst du immer noch die id id und e mail e mail mit einer graphrequest graphrequest über fbsdk graphrequestmanager graphrequestmanager abrufen 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 }; beachten sie, dass nach dem graphrequest graphrequest erfolgreich ist, diese funktion parse user linkwith parse user linkwith auf einem neuen parse user parse user objekt verwendet wird, um einen neuen benutzer zu registrieren oder einen vorherigen mit diesen anmeldeinformationen anzumelden, indem die facebook authentifizierungsdaten entsprechend übergeben werden fügen sie diese funktion zu ihrem usersignin usersignin komponente hinzu und weisen sie sie ihrem facebook button onpress onpress parameter zu testen sie ihre neue funktion, sie werden sehen, dass der benutzer nach erfolgreichem anmelden auf ihren startbildschirm umgeleitet wird 3 überprüfung der benutzeranmeldung und erstellung der sitzung um sicherzustellen, dass die facebook anmeldung funktioniert hat, können sie ihr parse dashboard überprüfen und ihren neuen user user sehen (wenn ihre facebook authentifizierungsdaten nicht zu einem anderen benutzer gehörten), der die facebook authdata authdata parameter enthält sie können auch überprüfen, ob eine gültige sitzung im dashboard erstellt wurde, die einen verweis auf dieses user user objekt enthält 4 verknüpfung eines bestehenden benutzers mit fbsdk login eine weitere linkwith linkwith mögliche verwendung besteht darin, einen bestehenden benutzer mit einem anderen authentifizierungsanbieter zu verknüpfen, in diesem fall facebook fügen sie diese funktion hinzu, die linkwith linkwith auf die gleiche weise aufruft, wie sie es in userlogin userlogin zu ihrem hellouser hellouser komponente oder direkt zu ihrem startbildschirm hinzufügen der einzige unterschied besteht darin, dass sie anstelle des aufrufs der methode von einem leeren parse user parse user , es von dem angemeldeten benutzerobjekt verwenden 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 }; weisen sie diese funktion einem facebook button onpress onpress parameter auf ihrem startbildschirm zu testen sie ihre neue funktion und beachten sie, dass der parse user parse user objekt authdata wert mit den neuen authentifizierungsanbieterdaten aktualisiert wird überprüfen sie, ob der benutzer tatsächlich in ihrem parse server dashboard aktualisiert wurde fazit am ende dieses leitfadens haben sie gelernt, wie sie parse benutzer in react native mit facebook fbsdk login einloggen oder registrieren können, mit react native fbsdk react native fbsdk im nächsten leitfaden zeigen wir ihnen, wie sie nützliche benutzerabfragen durchführen