안드로이드 앱 Facebook 로그인 구현 튜토리얼 [개발자 가이드]

안드로이드 앱에 facebook 로그인을 추가하는 방법 소개 이 가이드에서는 facebook 로그인을 사용하여 로그인하는 방법과 parse user parse user 클래스를 통해 back4app을 사용하는 방법을 배웁니다 이 튜토리얼은 android studio 4 1 1에서 생성된 기본 앱을 사용합니다 buildtoolsversion=30 0 3 buildtoolsversion=30 0 3 , compile sdk version = 30 compile sdk version = 30 및 targetsdkversion 30 targetsdkversion 30 언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다 우리의 github 저장소에서 확인하세요 kotlin 예제 저장소 java 예제 저장소 목표 parse와 back4app을 사용하여 안드로이드 앱에 facebook 로그인 기능을 추가합니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 안드로이드 스튜디오 back4app에서 생성된 앱 참고 새 파스 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 back4app에 연결된 안드로이드 앱 참고 parse sdk 설치 튜토리얼 을 따라 back4app에 연결된 안드로이드 스튜디오 프로젝트를 만드세요 안드로이드 4 1 (젤리빈) 이상에서 실행되는 장치 (또는 가상 장치 ) 1 페이스북 설정 페이스북 기능을 사용하려면 다음을 수행해야 합니다 페이스북 개발자 웹사이트 로 가서 계정과 앱을 만드세요 페이스북의 빠른 시작 가이드를 따라 여기를 클릭하여 다음 권장 사항에 주의하세요 다음은 facebook의 빠른 시작 가이드에 포함된 단계입니다 facebook이 제안하는 대로 정확히 따르지 않을 것이므로 주의 깊게 따라야 합니다 3단계에서는 추가하는 대신 에서 dependencies{} dependencies{} 섹션에 build gradle (module\ app) build gradle (module\ app) , 다음 코드를 dependencies{} dependencies{} 섹션에 build gradle (module\ app) build gradle (module\ app) parse facebook utils sdk for android의 버전을 최신 버전으로 업데이트하는 것을 잊지 마세요 최신 버전이 무엇인지 확인하려면 jitpack 웹사이트 , 다음 단계를 따르세요 jitpack 웹사이트에 붙여넣기 parse community\ parsefacebookutils android parse community\ parsefacebookutils android 에 git repo url git repo url 상자에 그 작업을 수행한 후, 찾기 찾기 버튼을 클릭하세요 그러면 다음 이미지에 표시된 대로 android용 parse sdk의 사용 가능한 버전을 볼 수 있어야 합니다 4단계에서는 애플리케이션 애플리케이션 요소에 인터넷 권한을 추가하라는 요청을 받게 됩니다 /app/manifest/androidmanifest xml /app/manifest/androidmanifest xml 파일에, 하지만 이미 parse sdk 설치 튜토리얼을 따라 하면서 추가했기 때문에 이 작업을 할 필요가 없습니다 6단계에서는 키 해시를 제공해야 하므로 open ssl 이 설치되어 있어야 합니다 facebook의 가이드는 linux에서 키 해시를 생성하는 명령어를 제공하지 않지만, 그렇게 하는 것은 간단합니다 당신이 해야 할 일은 터미널 창을 열고 다음 명령어를 실행하는 것입니다 페이스북의 빠른 시작 가이드의 단계를 바로 따르지 마세요 6단계 sha 1이란 무엇인가 (보안 해싱 알고리즘) sha 1은 보안 해싱 알고리즘이라고 불리며, 가장 일반적인 암호화 알고리즘입니다 sha 1은 미국 국가안보국(national security agency)에서 설계하였습니다 sha 1 지문은 서명에 사용할 수 있는 pc를 위해 생성된 고유한 키입니다 주로 일부 api(이 가이드에서 사용할 facebook api와 같은)를 사용하기 위해 제출하는 데 사용됩니다 더 자세한 내용을 알고 싶다면 sha 1 위키백과 페이지를 방문할 수 있습니다 facebook의 빠른 시작 가이드에 설명된 다른 단계를 따라야 하며 여기에는 언급되지 않았습니다 2 facebook 앱을 back4app과 연결하기 앱 대시보드로 가서 back4app 웹사이트 를 클릭합니다 서버 설정 서버 설정 “facebook 로그인” 블록을 찾아서 설정 설정 “facebook 로그인” 블록은 다음과 같습니다 3\ facebook 가이드에서 얻은 facebook id를 string xml에 추가해야 합니다(이전 단계에서 facebook 가이드를 따라야 합니다) android studio 프로젝트로 가서 문자열 파일을 엽니다 /app/src/main/res/values/strings xml /app/src/main/res/values/strings xml , facebook app id facebook app id 를 복사하여 back4app의 마지막 페이지에 있는 facebook appid facebook appid 필드에 붙여넣습니다 마지막으로 + + 버튼을 누릅니다 3 매니페스트 파일에 provider 요소 추가하기 android studio 프로젝트로 돌아가서 application application 요소 안에 /app/manifest/androidmanifest xml /app/manifest/androidmanifest xml 파일에서 meta data meta data 요소 바로 뒤에 다음 코드를 추가합니다 1 \<provider 2 android\ name="com facebook facebookcontentprovider" 3 \<! don't forget to put your facebook app id in the following link > 4 android\ authorities="com facebook app facebookcontentprovideryour facebook app id" 5 android\ exported="true" /> 위 코드에 facebook 앱 id를 넣는 것을 잊지 마세요 4 parse facebook util sdk 초기화 android studio 프로젝트에서, parse sdk를 초기화하기 위해 만든 app app 라는 이름의 java 파일에서, oncreate oncreate 메서드에서, parse initialize() parse initialize() 호출 직후에, 다음 코드를 사용하여 parse facebook utils sdk를 초기화하세요 이 단계에서 설명한 대로 app java app java 파일이 없다면, android용 parse sdk 설치 https //www back4app com/docs/android/parse android sdk 문서를 참조하여 parse sdk를 올바르게 설치하기 위해 필요한 모든 단계를 따랐는지 확인하세요 parse sdk를 올바르게 설치하지 않으면 parse와 함께 facebook 로그인이 작동하지 않습니다 5 설정하기 각 parse 활동의 시작 부분에서 다음을 가져옵니다 6 로그인 로그인 활동을 구현하려면 다음을 수행하십시오 당신의 loginactivity loginactivity , 4단계 2\ 페이스북 로그인을 구현하려면 다음 코드를 사용하세요 1 final progressdialog dialog = new progressdialog(this); 2 dialog settitle("please, wait a moment "); 3 dialog setmessage("logging in "); 4 dialog show(); 5 collection\<string> permissions = arrays aslist("public profile", "email"); 6 parsefacebookutils loginwithreadpermissionsinbackground(this, permissions, (user, err) > { 7 dialog dismiss(); 8 if (err != null) { 9 log e("facebookloginexample", "done ", err); 10 toast maketext(this, err getmessage(), toast length long) show(); 11 } else if (user == null) { 12 toast maketext(this, "the user cancelled the facebook login ", toast length long) show(); 13 log d("facebookloginexample", "uh oh the user cancelled the facebook login "); 14 } else if (user isnew()) { 15 toast maketext(this, "user signed up and logged in through facebook ", toast length long) show(); 16 log d("facebookloginexample", "user signed up and logged in through facebook!"); 17 getuserdetailfromfb(); 18 } else { 19 toast maketext(this, "user logged in through facebook ", toast length long) show(); 20 log d("facebookloginexample", "user logged in through facebook!"); 21 showalert("oh, you!", "welcome back!"); 22 } 23 });1 val dlg = progressdialog(this) 2 dlg settitle("please, wait a moment ") 3 dlg setmessage("logging in ") 4 dlg show() 5 val permissions collection\<string> = listof("public profile", "email") 6 parsefacebookutils loginwithreadpermissionsinbackground(this, permissions) { user parseuser?, err parseexception? > 7 dlg dismiss() 8 when { 9 err != null > { 10 log e("facebookloginexample", "done ", err) 11 toast maketext(this, err message, toast length long) show() 12 } 13 user == null > { 14 toast maketext(this, "the user cancelled the facebook login ", toast length long) show() 15 log d("facebookloginexample", "uh oh the user cancelled the facebook login ") 16 } 17 user isnew > { 18 toast maketext(this, "user signed up and logged in through facebook ", toast length long) show() 19 log d("facebookloginexample", "user signed up and logged in through facebook!") 20 getuserdetailfromfb() 21 } 22 else > { 23 toast maketext(this, "user logged in through facebook ", toast length long) show() 24 log d("facebookloginexample", "user logged in through facebook!") 25 showalert("oh, you!", "welcome back!") 26 } 27 } 28 } 예제 프로젝트에서 이 코드는 페이스북을 통한 로그인 페이스북을 통한 로그인 버튼 콜백 안에 배치됩니다 3\ 우리 앱에 페이스북을 통해 성공적으로 로그인한 후, 이제 기본 로그인 사용자 정보를 가져올 수 있습니다 위 코드에는 더 많은 메서드가 포함되어 있습니다 getuserdetailfromfb getuserdetailfromfb 메서드는 사용자 세부 정보를 가져오는 역할을 합니다 이 메서드의 코드는 다음과 같습니다 1 private void getuserdetailfromfb() { 2 graphrequest request = graphrequest newmerequest(accesstoken getcurrentaccesstoken(), (object, response) > { 3 parseuser user = parseuser getcurrentuser(); 4 try { 5 if (object has("name")) 6 user setusername(object getstring("name")); 7 if (object has("email")) 8 user setemail(object getstring("email")); 9 } catch (jsonexception e) { 10 e printstacktrace(); 11 } 12 user saveinbackground(e > { 13 if (e == null) { 14 showalert("first time login!", "welcome!"); 15 } else 16 showalert("error", e getmessage()); 17 }); 18 }); 19 20 bundle parameters = new bundle(); 21 parameters putstring("fields", "name,email"); 22 request setparameters(parameters); 23 request executeasync(); 24 }1 private fun getuserdetailfromfb() { 2 val request = 3 graphrequest newmerequest(accesstoken getcurrentaccesstoken()) { `object` jsonobject, graphresponse? > 4 val user = parseuser getcurrentuser() 5 try { 6 user username = `object` getstring("name") 7 } catch (e jsonexception) { 8 e printstacktrace() 9 } 10 try { 11 user email = `object` getstring("email") 12 } catch (e jsonexception) { 13 e printstacktrace() 14 } 15 user saveinbackground { 16 if (it == null) 17 showalert("first time login!", "welcome!") 18 else 19 showalert("error", it message) 20 } 21 } 22 val parameters = bundle() 23 parameters putstring("fields", "name,email") 24 request parameters = parameters 25 request executeasync() 26 } 4\ 경고 대화 상자를 표시하고 프로세스를 더 전문적으로 보이게 하는 메서드를 추가하는 것이 흥미롭습니다 이 함수에서는 사용자 매개변수도 가져옵니다 mainactivity 페이지로 이동할 때 이 사용자 매개변수를 인텐트에 보내고, mainactivity에서는 이 사용자 정보를 가져와 화면에 출력합니다 아래 메서드가 이를 수행합니다 1 private void showalert(string title, string message) { 2 alertdialog builder builder = new alertdialog builder(this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok", (dialog, which) > { 6 dialog cancel(); 7 intent intent = new intent(this, mainactivity class); 8 intent addflags(intent flag activity clear task | intent flag activity new task); 9 startactivity(intent); 10 }); 11 alertdialog ok = builder create(); 12 ok show(); 13 }1 private fun showalert(title string, message string?) { 2 val builder = alertdialog builder(this) 3 settitle(title) 4 setmessage(message) 5 setpositivebutton("ok") { dialog dialoginterface, which int > 6 dialog cancel() 7 val intent = intent(this\@loginactivity, mainactivity class java) 8 intent addflags(intent flag activity clear task or intent flag activity new task) 9 startactivity(intent) 10 } 11 val ok = builder create() 12 ok show() 13 } 5\ 기존 parseuser를 facebook 계정에 연결하려면 다음과 같이 연결할 수 있습니다 1 collection\<string> permissions = arrays aslist("public profile", "email"); 2 if (!parsefacebookutils islinked(parseuser getcurrentuser())) { 3 parsefacebookutils linkwithreadpermissionsinbackground(parseuser getcurrentuser(), this, permissions, ex > { 4 if (parsefacebookutils islinked(parseuser getcurrentuser())) { 5 toast maketext(this, "woohoo, user logged in with facebook ", toast length long) show(); 6 log d("facebookloginexample", "woohoo, user logged in with facebook!"); 7 } 8 }); 9 } else { 10 toast maketext(this, "you have already linked your account with facebook ", toast length long) show(); 11 }1 val permissions= listof("public profile","email") 2 if (!parsefacebookutils islinked(parseuser getcurrentuser())){ 3 parsefacebookutils linkwithreadpermissionsinbackground(parseuser getcurrentuser(),this,permissions) { 4 if (parsefacebookutils islinked(parseuser getcurrentuser())){ 5 toast maketext(this, "woohoo, user logged in with facebook ", toast length long) show() 6 log d("facebookloginexample", "woohoo, user logged in with facebook!") 7 } 8 } 9 } else { 10 toast maketext(this, "you have already linked your account with facebook ", toast length long) show() 11 } 12 } 예제 프로젝트에서 이 코드는 계정을 페이스북에 연결하기 계정을 페이스북에 연결하기 버튼 콜백 안에 배치됩니다 6\ 사용자의 페이스북 연결을 해제하려면, 간단히 다음과 같이 하세요 1 parsefacebookutils unlinkinbackground(parseuser getcurrentuser(), ex > { 2 if (ex == null) { 3 toast maketext(this, "the user is no longer associated with their facebook account ", toast length long) show(); 4 log d("myapp", "the user is no longer associated with their facebook account "); 5 } else { 6 toast maketext(this, ex getmessage(), toast length long) show(); 7 } 8 });1 parsefacebookutils unlinkinbackground(parseuser getcurrentuser()) { 2 if (it == null) { 3 toast maketext(this,"the user is no longer associated with their facebook account ",toast length long) show() 4 log d("myapp", "the user is no longer associated with their facebook account ") 5 } else { 6 toast maketext(this, it message, toast length long) show() 7 } 8 } 예제 프로젝트에서 이 코드는 계정을 페이스북에서 해제하기 계정을 페이스북에서 해제하기 버튼 콜백 안에 배치됩니다 7\ 다음을 매우 중요합니다 사용하여 oncreate() oncreate() 메서드 외부에서 loginactivity loginactivity 에 로그인 결과를 callbackmanager를 통해 loginmanager에 전달하여 오류를 피하세요 1 @override 2 protected void onactivityresult(int requestcode, int resultcode, intent data) { 3 super onactivityresult(requestcode, resultcode, data); 4 parsefacebookutils onactivityresult(requestcode, resultcode, data); 5 }1 override fun onactivityresult(requestcode int, resultcode int, data intent?) { 2 super onactivityresult(requestcode, resultcode, data) 3 parsefacebookutils onactivityresult(requestcode, resultcode, data) 4 } 7 로그아웃 facebook 로그아웃을 구현하려면 아래에 언급된 코드를 사용하세요 1 final progressdialog dialog = new progressdialog(this); 2 dialog settitle("please, wait a moment "); 3 dialog setmessage("logging out "); 4 dialog show(); 5 loginmanager getinstance() logout(); 6 parseuser logoutinbackground(e > { 7 if (e == null) 8 showalert("so, you're going ", "ok bye bye then", true); 9 else 10 showalert("error ", e getmessage(), false); 11 });1 val dlg = progressdialog(this) 2 dlg settitle("please, wait a moment ") 3 dlg setmessage("logging out ") 4 dlg show() 5 loginmanager getinstance() logout() 6 parseuser logoutinbackground { e > 7 if (e == null) 8 showalert("so, you're going ", "ok bye bye then", true) 9 else 10 showalert("error ", e message, false) 11 } 예제 프로젝트에서 이 코드는 로그 아웃 로그 아웃 버튼 콜백 안에 배치됩니다 메서드 alertdisplayer alertdisplayer 는 당신이 loginactivity loginactivity 에 추가한 것과 동일합니다 intent intent 인수도 변경하는 것을 잊지 마세요 완료되었습니다! 이 단계에서, parse server의 핵심 기능을 통해 back4app을 사용하여 facebook으로 앱에 로그인하고, 등록하고, 로그아웃할 수 있습니다!