Intégration de Facebook Login avec Parse dans React Native

9 min

connexion facebook avec react native introduction dans les derniers tutoriels, vous avez construit une fonctionnalité de connexion/déconnexion utilisateur pour votre application en utilisant la parse user parse user classe maintenant, vous allez apprendre à utiliser facebook fbsdk login pour récupérer les données utilisateur de facebook et vous connecter, vous inscrire ou lier des utilisateurs existants avec cela vous allez également installer et configurer la react native fbsdk react native fbsdk bibliothèque pour y parvenir la parse user linkwith parse user linkwith méthode est responsable de l'inscription et de la connexion des utilisateurs en utilisant n'importe quelle méthode d'authentification tierce, tant que vous passez les bons paramètres demandés par chaque fournisseur différent après avoir lié les données utilisateur à un nouveau ou à un parse user parse user , parse stockera une session utilisateur valide sur votre appareil les appels futurs à des méthodes comme currentasync currentasync récupéreront avec succès vos données utilisateur, tout comme avec des connexions régulières à tout moment, vous pouvez accéder au projet android complet construit avec ce tutoriel sur nos dépôts github https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java prérequis pour compléter ce tutoriel, vous aurez besoin de une application react native créée et https //www back4app com/docs/react native/parse sdk/react native sdk complétez les guides précédents afin d'avoir une meilleure compréhension de https //www back4app com/docs/react native/parse sdk/working with users/react native login objectif pour créer une fonctionnalité de connexion utilisateur en utilisant facebook fbsdk login sur parse pour une application react native 1 installation des dépendances la manière la plus populaire d'ajouter la connexion facebook sur react native est d'utiliser react native fbsdk react native fbsdk pour le gérer étant donné que la configuration de cette bibliothèque dépend de votre environnement de développement, de la plateforme cible et de vos préférences, configurez la en suivant les https //github com/facebook/react native fbsdk remarque si vous développez pour ios, assurez vous que votre projet prend en charge les fichiers swift, contenant un bridging header de plus, faites attention à l'endroit où vous ajoutez les identifiants d'application facebook dans votre info plist info plist fichier et si vos fichiers pods sont correctement générés 2 utilisation de fbsdk login avec parse créons maintenant une nouvelle méthode à l'intérieur du userlogin userlogin composant appelant la modal d'authentification facebook fbsdk avec loginmanager loginwithpermissions loginmanager loginwithpermissions , demandant la permission uniquement pour accéder à l'email de l'utilisateur si l'utilisateur se connecte avec succès via facebook, vous pouvez ensuite appeler accesstoken getcurrentaccesstoken accesstoken getcurrentaccesstoken pour récupérer le token d'accès de l'utilisateur depuis facebook après cela, vous devez encore obtenir l' id id et email email en utilisant un graphrequest graphrequest via 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	 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	 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77	 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	 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	 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77	 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 }; notez qu'après que le graphrequest graphrequest réussit, cette fonction utilise parse user linkwith parse user linkwith sur un nouvel parse user parse user objet pour enregistrer un nouvel utilisateur ou connecter un précédent avec ces identifiants, en passant ses données d'authentification facebook en conséquence ajoutez cette fonction à votre usersignin usersignin composant et assignez la à votre bouton facebook onpress onpress paramètre allez y et testez votre nouvelle fonction, vous verrez que l'utilisateur sera redirigé vers votre écran d'accueil après s'être connecté avec succès 3 vérification de la connexion de l'utilisateur et création de session pour vous assurer que la connexion facebook a fonctionné, vous pouvez consulter votre tableau de bord parse et voir votre nouvel user user (si vos données d'authentification facebook n'appartenaient pas à un autre utilisateur), contenant les authdata authdata paramètres vous pouvez également vérifier qu'une session valide a été créée dans le tableau de bord, contenant un pointeur vers cet user user objet 4 lier un utilisateur existant à fbsdk login une autre linkwith linkwith utilisation possible est de lier un utilisateur existant avec un autre fournisseur d'authentification, dans ce cas, facebook ajoutez cette fonction qui appelle linkwith linkwith de la même manière que vous l'avez fait dans userlogin userlogin à votre hellouser hellouser composant ou directement à votre écran d'accueil la seule différence ici est qu'au lieu d'appeler la méthode depuis un parse user parse user vide, vous l'utiliserez depuis l'objet utilisateur connecté 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	 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	 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69	 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	 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	 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69	 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 }; assignez cette fonction à un bouton facebook onpress onpress paramètre sur votre écran d'accueil testez votre nouvelle fonction, en notant que la parse user parse user valeur de l'objet authdata sera mise à jour avec les nouvelles données du fournisseur d'authentification vérifiez si l'utilisateur a effectivement été mis à jour dans votre tableau de bord du serveur parse conclusion à la fin de ce guide, vous avez appris comment connecter ou inscrire des utilisateurs parse sur react native en utilisant facebook fbsdk login avec react native fbsdk react native fbsdk dans le prochain guide, nous vous montrerons comment effectuer des requêtes utilisateur utiles