--- title: 안드로이드 앱 Facebook 로그인 구현 튜토리얼 [개발자 가이드] slug: docs-kr/android/working-with-users/android-app-facebook-login-tutorial description: Parse와 Back4App을 사용하여 안드로이드 앱에 Facebook 로그인 기능을 추가하는 방법을 학습합니다. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-14T11:13:10.770Z --- # 안드로이드 앱에 Facebook 로그인을 추가하는 방법 ## 소개 이 가이드에서는 Facebook 로그인을 사용하여 로그인하는 방법과 `Parse User` 클래스를 통해 Back4App을 사용하는 방법을 배웁니다. 이 튜토리얼은 Android Studio 4.1.1에서 생성된 기본 앱을 사용합니다.`buildToolsVersion=30.0.3` , `Compile SDK Version = 30` 및 `targetSdkVersion 30` :::hint{type="success"} 언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다. 우리의 Github 저장소에서 확인하세요. - [Kotlin 예제 저장소](https://github.com/templates-back4app/Android-Parse-Sdk-Kotlin) - [Java 예제 저장소](https://github.com/templates-back4app/Android-Parse-Sdk-Java) ::: ## 목표 Parse와 Back4App을 사용하여 안드로이드 앱에 Facebook 로그인 기능을 추가합니다. ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/TGg2Jd2Zr3RMJsaHj8Eqk_facebook-login-v2.gif" size="50" width="405" height="880" position="center" showCaption="false"} ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - [안드로이드 스튜디오](https://developer.android.com/studio/index.html) - Back4App에서 생성된 앱. - **참고: ** [새 파스 앱 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요. - Back4App에 연결된 안드로이드 앱. - **참고: ** [Parse SDK 설치 튜토리얼](https://www.back4app.com/docs/android/parse-android-sdk)을 따라 Back4App에 연결된 안드로이드 스튜디오 프로젝트를 만드세요. - 안드로이드 4.1 (젤리빈) 이상에서 실행되는 장치 (또는[ 가상 장치](https://developer.android.com/studio/run/managing-avds.html)) ::: ## 1 - 페이스북 설정 페이스북 기능을 사용하려면 다음을 수행해야 합니다: 1. [페이스북 개발자 웹사이트](https://developers.facebook.com/)로 가서 계정과 앱을 만드세요. 2. 페이스북의 빠른 시작 가이드를 따라 [여기를 클릭하여](https://developers.facebook.com/docs/facebook-login/android) 다음 권장 사항에 주의하세요: ::::hint{type="info"} **다음은 Facebook의 빠른 시작 가이드에 포함된 단계입니다. Facebook이 제안하는 대로 정확히 따르지 않을 것이므로 주의 깊게 따라야 합니다.** - 3단계에서는 추가하는 대신 :::BlockQuote implementation 'com.facebook.android\:facebook-login:\[8.1)' ::: 에서 `dependencies{}` 섹션에 `build.gradle (Module:app)`, 다음 코드를 `dependencies{}` 섹션에 `build.gradle (Module:app)` :::BlockQuote *1 // update the versions to the latest ones* 2 implementation "com.github.parse-community\:ParseFacebookUtils-Android\:latest.version.here" 3 implementation 'com.facebook.android\:facebook-android-sdk\:latest.version.here' ::: - Parse Facebook Utils SDK for Android의 버전을 최신 버전으로 업데이트하는 것을 잊지 마세요. 최신 버전이 무엇인지 확인하려면 [JitPack 웹사이트](https://jitpack.io/), 다음 단계를 따르세요: 1. JitPack 웹사이트에 붙여넣기 `parse-community:ParseFacebookUtils-Android` 에 `Git repo URL` 상자에. 2. 그 작업을 수행한 후, `찾기` 버튼을 클릭하세요. 그러면 다음 이미지에 표시된 대로 Android용 Parse SDK의 사용 가능한 버전을 볼 수 있어야 합니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/jpJmidWu5uQY7-GKoeSS6_image.png) - 4단계에서는 `애플리케이션` 요소에 인터넷 권한을 추가하라는 요청을 받게 됩니다. `/app/manifest/AndroidManifest.xml` 파일에, 하지만 이미 [Parse SDK 설치](https://www.back4app.com/docs/android/parse-android-sdk) 튜토리얼을 따라 하면서 추가했기 때문에 이 작업을 할 필요가 없습니다. - 6단계에서는 키 해시를 제공해야 하므로 [Open SSL](https://www.openssl.org/)이 설치되어 있어야 합니다. Facebook의 가이드는 Linux에서 키 해시를 생성하는 명령어를 제공하지 않지만, 그렇게 하는 것은 간단합니다. 당신이 해야 할 일은 터미널 창을 열고 다음 명령어를 실행하는 것입니다: :::BlockQuote keytool -exportcert -alias androiddebugkey -keystore \~/.android/debug.keystore | openssl sha1 -binary | openssl base64 ::: - 페이스북의 빠른 시작 가이드의 단계를 바로 따르지 마세요 **6단계**. :::: :::hint{type="info"} [SHA-1이란 무엇인가](https://en.wikipedia.org/wiki/SHA-1) (보안 해싱 알고리즘) SHA-1은 보안 해싱 알고리즘이라고 불리며, 가장 일반적인 암호화 알고리즘입니다. SHA-1은 미국 국가안보국(National Security Agency)에서 설계하였습니다. SHA-1 지문은 서명에 사용할 수 있는 PC를 위해 생성된 고유한 키입니다. 주로 일부 API(이 가이드에서 사용할 Facebook API와 같은)를 사용하기 위해 제출하는 데 사용됩니다. 더 자세한 내용을 알고 싶다면 SHA-1 위키백과 페이지를 방문할 수 있습니다. ::: :::hint{type="danger"} Facebook의 빠른 시작 가이드에 설명된 다른 단계를 따라야 하며 여기에는 언급되지 않았습니다. ::: ## 2 - Facebook 앱을 Back4App과 연결하기 1. 앱 대시보드로 가서 [Back4App 웹사이트 ](https://www.back4app.com/)를 클릭합니다. `서버 설정`. 2. “Facebook 로그인” 블록을 찾아서 `설정`. “Facebook 로그인” 블록은 다음과 같습니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/wzY4k1lITNJdcCZ-hY9ou_image.png) 3\. Facebook 가이드에서 얻은 facebook\_id를 string.xml에 추가해야 합니다(이전 단계에서 Facebook 가이드를 따라야 합니다). Android Studio 프로젝트로 가서 문자열 파일을 엽니다: `.../app/src/main/res/values/strings.xml`, `facebook_app_id`를 복사하여 Back4App의 마지막 페이지에 있는 `Facebook appId` 필드에 붙여넣습니다. 마지막으로 `+` 버튼을 누릅니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Enivtee1WosjYCAgG3T5L_image.png) ## 3 - 매니페스트 파일에 provider 요소 추가하기 Android Studio 프로젝트로 돌아가서 `application` 요소 안에 `/app/manifest/AndroidManifest.xml` 파일에서 `meta data` 요소 바로 뒤에 다음 코드를 추가합니다. ```java 1 4 android:authorities="com.facebook.app.FacebookContentProviderYOUR_FACEBOOK_APP_ID" 5 android:exported="true" /> ``` :::hint{type="danger"} **위 코드에 Facebook 앱 ID를 넣는 것을 잊지 마세요.** ::: ## 4 - Parse Facebook Util SDK 초기화 Android Studio 프로젝트에서, Parse SDK를 초기화하기 위해 만든 `App`라는 이름의 Java 파일에서, `onCreate` 메서드에서, `Parse.initialize()` 호출 직후에, 다음 코드를 사용하여 Parse Facebook Utils SDK를 초기화하세요. :::BlockQuote **1 ParseFacebookUtils.**initialize**(this);** ::: :::hint{type="danger"} 이 단계에서 설명한 대로 `App.java` 파일이 없다면, [Android용 Parse SDK 설치](https://www.back4app.com/docs/android/parse-android-sdk) 문서를 참조하여 Parse SDK를 올바르게 설치하기 위해 필요한 모든 단계를 따랐는지 확인하세요. Parse SDK를 올바르게 설치하지 않으면 Parse와 함께 Facebook 로그인이 작동하지 않습니다. ::: ## 5 - 설정하기 각 Parse 활동의 시작 부분에서 다음을 가져옵니다: :::BlockQuote 1 import androidx.appcompat.app.AppCompatActivity**;** 2 import android.app.AlertDialog**;** 3 import android.app.ProgressDialog**;** 4 import android.content.Intent**;** 5 import android.os.Bundle**;** 6 import android.widget.Button**;** 7 import com.facebook.login.LoginManager**;** 8 import com.parse.ParseUser**;** ::: ## 6 - 로그인 로그인 활동을 구현하려면 다음을 수행하십시오: 1. 당신의 `LoginActivity`, **4단계**: :::BlockQuote 1 import android.app.AlertDialog**;** 2 import android.app.ProgressDialog**;** 3 import android.content.Intent**;** 4 import android.os.Bundle**;** 5 import android.util.Log**;** 6 import android.widget.Button**;** 7 import android.widget.Toast**;** 8 import com.facebook.AccessToken**;** 9 import com.facebook.GraphRequest**;** 10 import com.parse.ParseUser**;** 11 import com.parse.facebook.ParseFacebookUtils**;** 12 import org.json.JSONException**;** 13 import java.util.Arrays**;** 14 import java.util.Collection**;** ::: 2\. 페이스북 로그인을 구현하려면 다음 코드를 사용하세요: :::CodeblockTabs ```java 1 final ProgressDialog dialog = new ProgressDialog(this); 2 dialog.setTitle("Please, wait a moment."); 3 dialog.setMessage("Logging in..."); 4 dialog.show(); 5 Collection 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 }); ``` ```kotlin 1 val dlg = ProgressDialog(this) 2 dlg.setTitle("Please, wait a moment.") 3 dlg.setMessage("Logging in...") 4 dlg.show() 5 val permissions: Collection = 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 } ``` ::: :::hint{type="info"} 예제 프로젝트에서 이 코드는 `페이스북을 통한 로그인` 버튼 콜백 안에 배치됩니다. ::: 3\. 우리 앱에 페이스북을 통해 성공적으로 로그인한 후, 이제 기본 로그인 사용자 정보를 가져올 수 있습니다. 위 코드에는 더 많은 메서드가 포함되어 있습니다. `getUserDetailFromFB` 메서드는 사용자 세부 정보를 가져오는 역할을 합니다. 이 메서드의 코드는 다음과 같습니다: :::CodeblockTabs ```java 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 } ``` ```kotlin 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에서는 이 사용자 정보를 가져와 화면에 출력합니다. 아래 메서드가 이를 수행합니다: :::CodeblockTabs ```java 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 } ``` ```kotlin 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 계정에 연결하려면 다음과 같이 연결할 수 있습니다: :::CodeblockTabs ```java 1 Collection 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 } ``` ```kotlin 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 } ``` ::: :::hint{type="info"} 예제 프로젝트에서 이 코드는 `계정을 페이스북에 연결하기` 버튼 콜백 안에 배치됩니다. ::: 6\. 사용자의 페이스북 연결을 해제하려면, 간단히 다음과 같이 하세요: :::CodeblockTabs ```java 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 }); ``` ```kotlin 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 } ``` ::: :::hint{type="info"} 예제 프로젝트에서 이 코드는 `계정을 페이스북에서 해제하기` 버튼 콜백 안에 배치됩니다. ::: 7\. 다음을 **매우 중요합니다** 사용하여 `onCreate()` 메서드 외부에서 `LoginActivity`에 로그인 결과를 callbackManager를 통해 LoginManager에 전달하여 오류를 피하세요. :::CodeblockTabs ```java 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 } ``` ```kotlin 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 로그아웃을 구현하려면 아래에 언급된 코드를 사용하세요: :::CodeblockTabs ```java 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 }); ``` ```kotlin 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 } ``` ::: :::hint{type="info"} 예제 프로젝트에서 이 코드는 `로그 아웃` 버튼 콜백 안에 배치됩니다. ::: :::hint{type="info"} 메서드 `alertDisplayer`는 당신이`LoginActivity`에 추가한 것과 동일합니다. `Intent` 인수도 변경하는 것을 잊지 마세요. ::: ## 완료되었습니다! 이 단계에서, Parse Server의 핵심 기능을 통해 Back4App을 사용하여 Facebook으로 앱에 로그인하고, 등록하고, 로그아웃할 수 있습니다!