React Native에서 Parse 및 Google Sign-In 구현하기

react native에서 google로 로그인하기 소개 지난 튜토리얼에서는 parse user parse user 클래스를 사용하여 앱에 사용자 로그인/로그아웃 기능을 추가했습니다 이제 google sign in을 사용하여 google에서 사용자 데이터를 가져오고 로그인, 가입 또는 기존 사용자와 연결하는 방법을 배울 것입니다 이를 위해 react native google signin react native google signin 라이브러리를 설치하고 구성할 것입니다 parse user linkwith parse user linkwith 메서드는 각기 다른 제공자가 요청하는 올바른 매개변수를 전달하는 한, 모든 서드파티 인증 방법을 사용하여 사용자를 가입시키고 로그인하는 역할을 합니다 사용자 데이터를 새 또는 기존 parse user parse user 에 연결한 후, parse는 장치에 유효한 사용자 세션을 저장합니다 이후 currentasync currentasync 와 같은 메서드를 호출하면 일반 로그인과 마찬가지로 사용자 데이터를 성공적으로 가져올 수 있습니다 언제든지 github 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다 https //github com/templates back4app/react native js login google https //github com/templates back4app/react native ts login google 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 react native 앱이 생성되고 https //www back4app com/docs/react native/parse sdk/react native sdk 이전 가이드를 완료하여 https //www back4app com/docs/react native/parse sdk/working with users/react native login 목표 react native 앱에서 parse를 사용하여 google sign in으로 사용자 로그인 기능을 구축합니다 1 의존성 설치 react native에서 google sign in을 활성화하는 가장 인기 있는 방법은 react native google signin react native google signin 을 사용하는 것입니다 이 라이브러리 구성은 개발 환경, 대상 플랫폼 및 선호도에 따라 다르므로, https //github com/react native google signin/google signin 를 따라 설정하세요 그 후, 앱의 주요 파일( app js app js 또는 app tsx app tsx )가 googlesignin googlesignin 을 올바르게 초기화하고 구성하고 있는지 확인하세요 app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3&#x9; 4 // parse initialization configuration goes here 5 // 6&#x9; 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16&#x9; 17 // 2 parse와 함께 google sign in 사용하기 이제 userlogin userlogin 컴포넌트 내에 google sign in 인증 모달을 호출하는 새로운 메서드를 생성해 보겠습니다 googlesignin signin googlesignin signin 사용자가 google로 로그인하면 이 호출은 google에서 사용자 데이터를 검색하고 나중에 사용할 id, idtoken 및 google 이메일을 저장해야 합니다 javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; 그 후, 새로운 parse user linkwith parse user linkwith 를 사용하여 새로운 사용자 등록 및 로그인을 할 수 있습니다 사용자가 이미 이 google 인증을 사용하여 가입한 경우, linkwith linkwith 는 기존 계정을 사용하여 그를 로그인 시킵니다 javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; 이 기능을 usersignin usersignin 컴포넌트에 추가하고 google 버튼의 onpress onpress 매개변수에 할당하세요 새 기능을 테스트해 보세요 사용자가 성공적으로 등록하고/또는 로그인한 후에 홈 화면으로 리디렉션된다는 점에 유의하세요 3 사용자 로그인 및 세션 생성 확인 google 로그인이 제대로 작동했는지 확인하려면 parse 대시보드를 확인하고 새로운 사용자 사용자 (google 인증 데이터가 다른 사용자에 속하지 않는 경우)와 함께 google authdata authdata 매개변수를 확인할 수 있습니다 대시보드에서 유효한 세션이 생성되었는지 확인할 수도 있으며, 해당 사용자 사용자 객체에 대한 포인터가 포함되어 있습니다 4 기존 사용자를 google 로그인에 연결하기 또 다른 linkwith linkwith 가능한 사용법은 기존 사용자를 다른 인증 제공자, 이 경우 google과 연결하는 것입니다 다음 기능을 추가하여 linkwith linkwith 를 호출하세요 userlogin userlogin 에서 했던 것과 같은 방식으로 당신의 hellouser hellouser 컴포넌트나 직접 홈 화면에 추가하세요 여기서 유일한 차이점은 빈 parse user parse user 에서 메서드를 호출하는 대신, 로그인한 사용자 객체에서 사용할 것이라는 점입니다 javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; 이 기능을 google 버튼 onpress onpress 매개변수로 홈 화면에 할당하세요 새로운 기능을 테스트하고, parse user parse user 객체 authdata authdata 값이 새로운 인증 제공자 데이터로 업데이트될 것임을 주의하세요 사용자가 실제로 parse 서버 대시보드에서 업데이트되었는지 확인하세요 결론 이 가이드의 끝에서, google sign in을 사용하여 react native에서 parse 사용자에 로그인하고, 가입하고, 기존 사용자를 연결하는 방법을 배웠습니다 react native google signin react native google signin 을 사용하여 다음 가이드에서는 유용한 사용자 쿼리를 수행하는 방법을 보여드리겠습니다