React Native의 Parse에서 Facebook FBSDK로 사용자 로그인

8 분

리액트 네이티브 페이스북 로그인 소개 지난 튜토리얼에서는 \parse user\ 클래스를 사용하여 앱에 사용자 로그인/로그아웃 기능을 추가했습니다 이제는 facebook fbsdk 로그인을 사용하여 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 목표 react native 앱에서 parse를 사용하여 facebook fbsdk 로그인을 통한 사용자 로그인 기능을 구축합니다 1 의존성 설치 react native에서 facebook 로그인을 추가하는 가장 인기 있는 방법은 \react native fbsdk\ 를 사용하는 것입니다 이 라이브러리 구성은 개발 환경, 대상 플랫폼 및 선호도에 따라 다르므로, 공식 문서 https //github com/facebook/react native fbsdk 를 따라 설정하세요 참고 ios용으로 개발하는 경우, 프로젝트에 swift 파일을 지원하는 브리징 헤더가 포함되어 있는지 확인하세요 또한, facebook 앱 id를 \info plist\ 파일에 추가하는 위치와 pods 파일이 올바르게 생성되었는지 주의 깊게 확인하세요 2 parse와 함께 fbsdk 로그인 사용하기 이제 \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 인증 데이터가 다른 사용자에게 속하지 않았다면), facebook \authdata\ 매개변수를 포함하고 있습니다 대시보드에서 유효한 세션이 생성되었는지 확인할 수도 있으며, 해당 \user\ 객체에 대한 포인터를 포함하고 있습니다 4 기존 사용자를 fbsdk 로그인에 연결하기 또 다른 \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\ 매개변수에 할당하세요 새로운 기능을 테스트하고, \parse user\ 객체의 authdata 값이 새로운 인증 제공자 데이터로 업데이트될 것임을 주의하세요 사용자가 실제로 parse 서버 대시보드에서 업데이트되었는지 확인하세요 결론 이 가이드의 끝에서, 당신은 facebook fbsdk 로그인을 사용하여 react native에서 parse 사용자를 로그인하거나 가입하는 방법을 배웠습니다 \react native fbsdk\ 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다