Вход в систему с Facebook в React Native с Parse SDK

9 мин

вход через facebook в react native введение в последних уроках вы создали функцию входа/выхода пользователя в ваше приложение, используя класс \parse user\ теперь вы узнаете, как использовать facebook fbsdk login для получения данных пользователя из facebook и входа, регистрации или связывания существующих пользователей с ним вы также установите и настроите библиотеку \react native fbsdk\ , чтобы достичь этого метод \parse user linkwith\ отвечает за регистрацию и вход пользователей, используя любой метод аутентификации третьих сторон, при условии, что вы передаете правильные параметры, запрашиваемые каждым различным провайдером после связывания данных пользователя с новым или существующим \parse user\ , parse сохранит действительную сессию пользователя на вашем устройстве будущие вызовы методов, таких как \currentasync\ , успешно извлекут данные вашего пользователя, так же как и при обычных входах в любое время вы можете получить доступ к полному проекту android, созданному с помощью этого руководства, в наших репозиториях на github репозиторий примера на kotlin https //github com/templates back4app/android parse sdk kotlin репозиторий примера на java https //github com/templates back4app/android parse sdk java предварительные требования чтобы завершить это руководство, вам потребуется приложение react native, созданное и подключенное к back4app https //www back4app com/docs/react native/parse sdk/react native sdk завершите предыдущие руководства, чтобы лучше понять класс parse user https //www back4app com/docs/react native/parse sdk/working with users/react native login цель создание функции входа пользователя с использованием facebook fbsdk login на parse для приложения react native 1 установка зависимостей самый популярный способ добавить вход через facebook в react native это использовать \react native fbsdk\ , чтобы с этим справиться поскольку конфигурация этой библиотеки зависит от вашей среды разработки, целевой платформы и предпочтений, настройте её, следуя официальной документации https //github com/facebook/react native fbsdk примечание если вы разрабатываете для ios, убедитесь, что ваш проект поддерживает файлы swift, содержащие bridging header также обратите особое внимание на то, куда вы добавляете идентификаторы приложений facebook в вашем \info plist\ файле и правильно ли сгенерированы ваши файлы pods 2 использование fbsdk входа с parse теперь давайте создадим новый метод внутри \userlogin\ компонента, вызывающего модальное окно аутентификации facebook fbsdk с \loginmanager loginwithpermissions\ , запрашивая разрешение только на доступ к электронной почте пользователя если пользователь успешно войдет в систему через facebook, вы можете затем вызвать \accesstoken getcurrentaccesstoken\ для получения токена доступа пользователя от facebook после этого вам все еще нужно получить \id\ и \email\ с помощью \graphrequest\ через fbsdk \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 }; обратите внимание, что после того как \graphrequest\ выполнится успешно, эта функция использует \parse user linkwith\ на новом \parse user\ объекте для регистрации нового пользователя или входа в систему предыдущего с этими учетными данными, передавая его данные аутентификации facebook соответственно добавьте эту функцию в ваш \usersignin\ компонент и назначьте ее вашей кнопке facebook \onpress\ продолжайте и протестируйте вашу новую функцию, вы увидите, что пользователь будет перенаправлен на ваш главный экран после успешного входа 3 проверка входа пользователя и создания сессии чтобы убедиться, что вход в facebook сработал, вы можете посмотреть на вашу панель управления parse и увидеть вашего нового \user\ (если ваши данные аутентификации facebook не принадлежали другому пользователю), содержащего параметры \authdata\ вы также можете проверить, что действительная сессия была создана на панели управления, содержащей указатель на этот \user\ объект 4 связывание существующего пользователя с fbsdk login другой \linkwith\ возможный вариант использования это связать существующего пользователя с другим провайдером аутентификации, в данном случае, с facebook добавьте эту функцию, которая вызывает \linkwith\ так же, как вы сделали в \userlogin\ в ваш \hellouser\ компонент или непосредственно на ваш главный экран единственное отличие здесь в том, что вместо вызова метода из пустого \parse user\ , вы будете использовать его из объекта вошедшего в систему пользователя 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 }; назначьте эту функцию кнопке facebook \onpress\ в вашем домашнем экране протестируйте вашу новую функцию, отметив, что значение authdata объекта \parse user\ будет обновлено с новыми данными провайдера аутентификации проверьте, действительно ли пользователь обновился в вашей панели управления parse сервером заключение в конце этого руководства вы узнали, как войти в систему или зарегистрировать пользователей parse на react native, используя facebook fbsdk login с \react native fbsdk\ в следующем руководстве мы покажем вам, как выполнять полезные запросы пользователей