이오닉 앱에 페이스북 로그인을 연동하는 방법 기술 가이드

11 분

이오닉 앱에 페이스북 로그인을 추가하는 방법 소개 이 섹션에서는 페이스북 로그인을 사용하여 사용자 등록이 가능한 앱을 만드는 방법과 parse server의 핵심 기능 https //www back4app com/product/parse server 을 통해 back4app을 사용하는 방법을 설명합니다 이 튜토리얼을 따라하면 다음과 같은 작업을 수행할 수 있습니다 언제든지 이 튜토리얼로 구축된 전체 이오닉 프로젝트에 접근할 수 있습니다 github 리포지토리 https //github com/back4app/ionic email verification 이 빠른 시작을 완료하려면 다음이 필요합니다 비주얼 스튜디오 코드 https //code visualstudio com/download (또는 원하는 웹 ide) 이오닉 프레임워크 https //ionicframework com/getting started/ back4app에서 생성된 앱 다음 새 파스 앱 튜토리얼 https //www back4app com/docs/get started/new parse app 을 따라 back4app에서 파스 앱을 만드는 방법을 배우세요 앱 생성을 위한 페이스북 https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f 계정 1 페이스북 설정 페이스북 기능을 사용하려면 다음을 수행해야 합니다 웹사이트로 이동하여 facebook 개발자 https //developers facebook com/ 계정을 만들고 로그인하세요 내 앱 https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f 으로 이동하여 \새 앱 추가\ 왼쪽 패널에서 \설정\ > \기본\ 이 페이지에서 당신의 \앱 id\ \개인정보 보호 정책 url\ \카테고리\ 아래로 스크롤하여 \변경 사항 저장\ 4\ 같은 페이지 상단에서 \끄기\ 버튼을 클릭하고 확인 하여 앱을 활성화하세요 5\ 같은 페이지에서 아래로 스크롤하고 \플랫폼 추가\ 를 클릭하세요 이 튜토리얼에서는 안드로이드 을 선택합시다 당신의 \구글 플레이 패키지 이름\ 을 추가하세요 우리 경우는 com back4app myapp입니다 당신의 \키 해시\ 를 추가하세요 (당신의 키 해시를 찾으려면 \keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\ 를 실행하세요) \변경 사항 저장\ 6\ 왼쪽 패널에서 \대시보드\ , 아래로 스크롤하고 \페이스북 로그인\ 을 클릭하세요 2 facebook 앱을 back4app과 연결하기 앱 대시보드로 이동하여 back4app 웹사이트 https //www back4app com/ 를 클릭합니다 \서버 설정\ “facebook 로그인” 블록을 찾아 \설정\ “facebook 로그인” 블록은 다음과 같습니다 3\ 이전 단계에서 기록한 facebook \앱 id\ 를 추가합니다 3 설정하기 이 튜토리얼에서는 이전 이메일 인증을 통한 사용자 등록 https //www back4app com/docs/ionic/user registration email verification 에서 중단한 지점부터 시작합니다 4 facebook 로그인 먼저 facebook cordova 플러그인을 설치합시다 $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook 이제 \facebooklogin()\ 메서드를 구현해 보겠습니다 login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } 마지막으로, \로그인\ 페이지에 버튼을 추가하고 방금 만든 메서드를 호출하도록 하겠습니다 login html 1 2 3 log in with facebook 4 5 5 앱 테스트하기 facebook 로그인이 브라우저에서 작동하지 않으므로, \ionic cordova run android\ 로 앱을 테스트하세요 다음에서 로그인하세요 back4app 웹사이트 https //www back4app com/ 앱을 찾아서 \대시보드\ > \코어\ > \브라우저\ > \사용자\ 를 클릭하여 생성한 사용자를 확인하세요! 완료되었습니다! 이 단계에서, back4app을 통해 parse server의 핵심 기능을 사용하여 facebook으로 앱에 로그인하고, 등록하고, 로그아웃할 수 있습니다!