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

21min
안드로이드 앱에 Facebook 로그인을 추가하는 방법
소개
이 가이드에서는 Facebook 로그인을 사용하여 로그인하는 방법과 Parse User 클래스를 통해 Back4App을 사용하는 방법을 배웁니다. 이 튜토리얼은 Android Studio 4.1.1에서 생성된 기본 앱을 사용합니다.buildToolsVersion=30.0.3 , Compile SDK Version = 30 및 targetSdkVersion 30﻿
언제든지 이 튜토리얼로 구축된 전체 안드로이드 프로젝트에 접근할 수 있습니다. 우리의 Github 저장소에서 확인하세요.
﻿Kotlin 예제 저장소﻿
﻿Java 예제 저장소﻿
목표
Parse와 Back4App을 사용하여 안드로이드 앱에 Facebook 로그인 기능을 추가합니다.
﻿
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
﻿안드로이드 스튜디오﻿
Back4App에서 생성된 앱.
참고:  새 파스 앱 튜토리얼을 따라 Back4App에서 Parse 앱을 만드는 방법을 배우세요.
Back4App에 연결된 안드로이드 앱.
참고:  Parse SDK 설치 튜토리얼을 따라 Back4App에 연결된 안드로이드 스튜디오 프로젝트를 만드세요.
안드로이드 4.1 (젤리빈) 이상에서 실행되는 장치 (또는 가상 장치)
- 페이스북 설정
페이스북 기능을 사용하려면 다음을 수행해야 합니다:
 페이스북 개발자 웹사이트로 가서 계정과 앱을 만드세요.
페이스북의 빠른 시작 가이드를 따라 여기를 클릭하여 다음 권장 사항에 주의하세요:
다음은 Facebook의 빠른 시작 가이드에 포함된 단계입니다. Facebook이 제안하는 대로 정확히 따르지 않을 것이므로 주의 깊게 따라야 합니다.
3단계에서는 추가하는 대신
implementation 'com.facebook.android:facebook-login:[8.1)'
에서 dependencies{} 섹션에 build.gradle (Module:app), 다음 코드를 dependencies{} 섹션에 build.gradle (Module:app)﻿
  // update the versions to the latest ones
  implementation "com.github.parse-community:ParseFacebookUtils-Android:latest.version.here"
  implementation 'com.facebook.android:facebook-android-sdk:latest.version.here'
Parse Facebook Utils SDK for Android의 버전을 최신 버전으로 업데이트하는 것을 잊지 마세요. 최신 버전이 무엇인지 확인하려면 JitPack 웹사이트, 다음 단계를 따르세요:
JitPack 웹사이트에 붙여넣기 parse-community:ParseFacebookUtils-Android 에 Git repo URL 상자에.
그 작업을 수행한 후, 찾기 버튼을 클릭하세요. 그러면 다음 이미지에 표시된 대로 Android용 Parse SDK의 사용 가능한 버전을 볼 수 있어야 합니다.
﻿
4단계에서는 애플리케이션 요소에 인터넷 권한을 추가하라는 요청을 받게 됩니다. /app/manifest/AndroidManifest.xml 파일에, 하지만 이미 Parse SDK 설치 튜토리얼을 따라 하면서 추가했기 때문에 이 작업을 할 필요가 없습니다.
6단계에서는 키 해시를 제공해야 하므로 Open SSL이 설치되어 있어야 합니다. Facebook의 가이드는 Linux에서 키 해시를 생성하는 명령어를 제공하지 않지만, 그렇게 하는 것은 간단합니다. 당신이 해야 할 일은 터미널 창을 열고 다음 명령어를 실행하는 것입니다:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
페이스북의 빠른 시작 가이드의 단계를 바로 따르지 마세요 6단계.
  SHA-1이란 무엇인가 (보안 해싱 알고리즘)   
SHA-1은 보안 해싱 알고리즘이라고 불리며, 가장 일반적인 암호화 알고리즘입니다. SHA-1은 미국 국가안보국(National Security Agency)에서 설계하였습니다. SHA-1 지문은 서명에 사용할 수 있는 PC를 위해 생성된 고유한 키입니다. 주로 일부 API(이 가이드에서 사용할 Facebook API와 같은)를 사용하기 위해 제출하는 데 사용됩니다. 더 자세한 내용을 알고 싶다면 SHA-1 위키백과 페이지를 방문할 수 있습니다.
Facebook의 빠른 시작 가이드에 설명된 다른 단계를 따라야 하며 여기에는 언급되지 않았습니다.
- Facebook 앱을 Back4App과 연결하기
앱 대시보드로 가서 Back4App 웹사이트 를 클릭합니다. 서버 설정.
“Facebook 로그인” 블록을 찾아서 설정. “Facebook 로그인” 블록은 다음과 같습니다:
﻿
Facebook 가이드에서 얻은 facebook_id를 string.xml에 추가해야 합니다(이전 단계에서 Facebook 가이드를 따라야 합니다). Android Studio 프로젝트로 가서 문자열 파일을 엽니다: .../app/src/main/res/values/strings.xml, facebook_app_id를 복사하여 Back4App의 마지막 페이지에 있는 Facebook appId 필드에 붙여넣습니다. 마지막으로 + 버튼을 누릅니다.
﻿
- 매니페스트 파일에 provider 요소 추가하기
Android Studio 프로젝트로 돌아가서 application 요소 안에 /app/manifest/AndroidManifest.xml 파일에서 meta data 요소 바로 뒤에 다음 코드를 추가합니다.
Java
<provider
    android:name="com.facebook.FacebookContentProvider"
    <!--don't forget to put your Facebook App ID in the following link-->
    android:authorities="com.facebook.app.FacebookContentProviderYOUR_FACEBOOK_APP_ID"
    android:exported="true" />
<provider
    android:name="com.facebook.FacebookContentProvider"
    <!--don't forget to put your Facebook App ID in the following link-->
    android:authorities="com.facebook.app.FacebookContentProviderYOUR_FACEBOOK_APP_ID"
    android:exported="true" />
﻿
위 코드에 Facebook 앱 ID를 넣는 것을 잊지 마세요.
- Parse Facebook Util SDK 초기화
Android Studio 프로젝트에서, Parse SDK를 초기화하기 위해 만든 App라는 이름의 Java 파일에서, onCreate 메서드에서, Parse.initialize() 호출 직후에, 다음 코드를 사용하여 Parse Facebook Utils SDK를 초기화하세요.
 ParseFacebookUtils.initialize(this);
이 단계에서 설명한 대로 App.java 파일이 없다면, Android용 Parse SDK 설치 문서를 참조하여 Parse SDK를 올바르게 설치하기 위해 필요한 모든 단계를 따랐는지 확인하세요. Parse SDK를 올바르게 설치하지 않으면 Parse와 함께 Facebook 로그인이 작동하지 않습니다.
- 설정하기
각 Parse 활동의 시작 부분에서 다음을 가져옵니다:
 import androidx.appcompat.app.AppCompatActivity;
 import android.app.AlertDialog;
 import android.app.ProgressDialog;
 import android.content.Intent;
 import android.os.Bundle;
 import android.widget.Button;
 import com.facebook.login.LoginManager;
 import com.parse.ParseUser;
- 로그인
로그인 활동을 구현하려면 다음을 수행하십시오:
당신의 LoginActivity, 4단계:
  import android.app.AlertDialog;
  import android.app.ProgressDialog;
  import android.content.Intent;
  import android.os.Bundle;
  import android.util.Log;
  import android.widget.Button;
  import android.widget.Toast;
  import com.facebook.AccessToken;
  import com.facebook.GraphRequest;
 import com.parse.ParseUser;
 import com.parse.facebook.ParseFacebookUtils;
 import org.json.JSONException;
 import java.util.Arrays;
 import java.util.Collection;
페이스북 로그인을 구현하려면 다음 코드를 사용하세요:
Java
Kotlin
  final ProgressDialog dialog = new ProgressDialog(this);
  dialog.setTitle("Please, wait a moment.");
  dialog.setMessage("Logging in...");
  dialog.show();
  Collection<String> permissions = Arrays.asList("public_profile", "email");
  ParseFacebookUtils.logInWithReadPermissionsInBackground(this, permissions, (user, err) -> {
      dialog.dismiss();
      if (err != null) {
          Log.e("FacebookLoginExample", "done: ", err);
         Toast.makeText(this, err.getMessage(), Toast.LENGTH_LONG).show();
     } else if (user == null) {
         Toast.makeText(this, "The user cancelled the Facebook login.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "Uh oh. The user cancelled the Facebook login.");
     } else if (user.isNew()) {
         Toast.makeText(this, "User signed up and logged in through Facebook.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "User signed up and logged in through Facebook!");
         getUserDetailFromFB();
     } else {
         Toast.makeText(this, "User logged in through Facebook.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "User logged in through Facebook!");
         showAlert("Oh, you!", "Welcome back!");
     }
 });
  final ProgressDialog dialog = new ProgressDialog(this);
  dialog.setTitle("Please, wait a moment.");
  dialog.setMessage("Logging in...");
  dialog.show();
  Collection<String> permissions = Arrays.asList("public_profile", "email");
  ParseFacebookUtils.logInWithReadPermissionsInBackground(this, permissions, (user, err) -> {
      dialog.dismiss();
      if (err != null) {
          Log.e("FacebookLoginExample", "done: ", err);
         Toast.makeText(this, err.getMessage(), Toast.LENGTH_LONG).show();
     } else if (user == null) {
         Toast.makeText(this, "The user cancelled the Facebook login.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "Uh oh. The user cancelled the Facebook login.");
     } else if (user.isNew()) {
         Toast.makeText(this, "User signed up and logged in through Facebook.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "User signed up and logged in through Facebook!");
         getUserDetailFromFB();
     } else {
         Toast.makeText(this, "User logged in through Facebook.", Toast.LENGTH_LONG).show();
         Log.d("FacebookLoginExample", "User logged in through Facebook!");
         showAlert("Oh, you!", "Welcome back!");
     }
 });
﻿
예제 프로젝트에서 이 코드는 페이스북을 통한 로그인 버튼 콜백 안에 배치됩니다.
우리 앱에 페이스북을 통해 성공적으로 로그인한 후, 이제 기본 로그인 사용자 정보를 가져올 수 있습니다. 위 코드에는 더 많은 메서드가 포함되어 있습니다. getUserDetailFromFB 메서드는 사용자 세부 정보를 가져오는 역할을 합니다. 이 메서드의 코드는 다음과 같습니다:
Java
Kotlin
  private void getUserDetailFromFB() {
      GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), (object, response) -> {
          ParseUser user = ParseUser.getCurrentUser();
          try {
              if (object.has("name"))
                  user.setUsername(object.getString("name"));
              if (object.has("email"))
                  user.setEmail(object.getString("email"));
          } catch (JSONException e) {
             e.printStackTrace();
         }
         user.saveInBackground(e -> {
           if (e == null) {
               showAlert("First Time Login!", "Welcome!");
           } else
               showAlert("Error", e.getMessage());
       });
   });
19
   Bundle parameters = new Bundle();
   parameters.putString("fields", "name,email");
   request.setParameters(parameters);
   request.executeAsync();
}
  private void getUserDetailFromFB() {
      GraphRequest request = GraphRequest.newMeRequest(AccessToken.getCurrentAccessToken(), (object, response) -> {
          ParseUser user = ParseUser.getCurrentUser();
          try {
              if (object.has("name"))
                  user.setUsername(object.getString("name"));
              if (object.has("email"))
                  user.setEmail(object.getString("email"));
          } catch (JSONException e) {
             e.printStackTrace();
         }
         user.saveInBackground(e -> {
           if (e == null) {
               showAlert("First Time Login!", "Welcome!");
           } else
               showAlert("Error", e.getMessage());
       });
   });
19
   Bundle parameters = new Bundle();
   parameters.putString("fields", "name,email");
   request.setParameters(parameters);
   request.executeAsync();
}
﻿
경고 대화 상자를 표시하고 프로세스를 더 전문적으로 보이게 하는 메서드를 추가하는 것이 흥미롭습니다. 이 함수에서는 사용자 매개변수도 가져옵니다. MainActivity 페이지로 이동할 때 이 사용자 매개변수를 인텐트에 보내고, MainActivity에서는 이 사용자 정보를 가져와 화면에 출력합니다. 아래 메서드가 이를 수행합니다:
Java
Kotlin
  private void showAlert(String title, String message) {
      AlertDialog.Builder builder = new AlertDialog.Builder(this)
              .setTitle(title)
              .setMessage(message)
              .setPositiveButton("OK", (dialog, which) -> {
                  dialog.cancel();
                  Intent intent = new Intent(this, MainActivity.class);
                  intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                  startActivity(intent);
             });
     AlertDialog ok = builder.create();
     ok.show();
 }
  private void showAlert(String title, String message) {
      AlertDialog.Builder builder = new AlertDialog.Builder(this)
              .setTitle(title)
              .setMessage(message)
              .setPositiveButton("OK", (dialog, which) -> {
                  dialog.cancel();
                  Intent intent = new Intent(this, MainActivity.class);
                  intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
                  startActivity(intent);
             });
     AlertDialog ok = builder.create();
     ok.show();
 }
﻿
기존 ParseUser를 Facebook 계정에 연결하려면 다음과 같이 연결할 수 있습니다:
Java
Kotlin
  val permissions= listOf("public_profile","email")
      if (!ParseFacebookUtils.isLinked(ParseUser.getCurrentUser())){
          ParseFacebookUtils.linkWithReadPermissionsInBackground(ParseUser.getCurrentUser(),this,permissions) {
              if (ParseFacebookUtils.isLinked(ParseUser.getCurrentUser())){
                  Toast.makeText(this, "Woohoo, user logged in with Facebook.", Toast.LENGTH_LONG).show()
                  Log.d("FacebookLoginExample", "Woohoo, user logged in with Facebook!")
              }
          }
      } else {
         Toast.makeText(this, "You have already linked your account with Facebook.", Toast.LENGTH_LONG).show()
     }
 }
  val permissions= listOf("public_profile","email")
      if (!ParseFacebookUtils.isLinked(ParseUser.getCurrentUser())){
          ParseFacebookUtils.linkWithReadPermissionsInBackground(ParseUser.getCurrentUser(),this,permissions) {
              if (ParseFacebookUtils.isLinked(ParseUser.getCurrentUser())){
                  Toast.makeText(this, "Woohoo, user logged in with Facebook.", Toast.LENGTH_LONG).show()
                  Log.d("FacebookLoginExample", "Woohoo, user logged in with Facebook!")
              }
          }
      } else {
         Toast.makeText(this, "You have already linked your account with Facebook.", Toast.LENGTH_LONG).show()
     }
 }
﻿
예제 프로젝트에서 이 코드는 계정을 페이스북에 연결하기 버튼 콜백 안에 배치됩니다.
사용자의 페이스북 연결을 해제하려면, 간단히 다음과 같이 하세요:
Java
Kotlin
  ParseFacebookUtils.unlinkInBackground(ParseUser.getCurrentUser(), ex -> {
      if (ex == null) {
          Toast.makeText(this, "The user is no longer associated with their Facebook account.", Toast.LENGTH_LONG).show();
          Log.d("MyApp", "The user is no longer associated with their Facebook account.");
      } else {
          Toast.makeText(this, ex.getMessage(), Toast.LENGTH_LONG).show();
      }
  });
  ParseFacebookUtils.unlinkInBackground(ParseUser.getCurrentUser(), ex -> {
      if (ex == null) {
          Toast.makeText(this, "The user is no longer associated with their Facebook account.", Toast.LENGTH_LONG).show();
          Log.d("MyApp", "The user is no longer associated with their Facebook account.");
      } else {
          Toast.makeText(this, ex.getMessage(), Toast.LENGTH_LONG).show();
      }
  });
﻿
예제 프로젝트에서 이 코드는 계정을 페이스북에서 해제하기 버튼 콜백 안에 배치됩니다.
다음을 매우 중요합니다 사용하여 onCreate() 메서드 외부에서 LoginActivity에 로그인 결과를 callbackManager를 통해 LoginManager에 전달하여 오류를 피하세요.
Java
Kotlin
 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);
     ParseFacebookUtils.onActivityResult(requestCode, resultCode, data);
 }
 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);
     ParseFacebookUtils.onActivityResult(requestCode, resultCode, data);
 }
﻿
- 로그아웃
Facebook 로그아웃을 구현하려면 아래에 언급된 코드를 사용하세요:
Java
Kotlin
   final ProgressDialog dialog = new ProgressDialog(this);
   dialog.setTitle("Please, wait a moment.");
   dialog.setMessage("Logging out...");
   dialog.show();
   LoginManager.getInstance().logOut();
   ParseUser.logOutInBackground(e -> {
       if (e == null)
           showAlert("So, you're going...", "Ok...Bye-bye then", true);
       else
          showAlert("Error...", e.getMessage(), false);
  });
   final ProgressDialog dialog = new ProgressDialog(this);
   dialog.setTitle("Please, wait a moment.");
   dialog.setMessage("Logging out...");
   dialog.show();
   LoginManager.getInstance().logOut();
   ParseUser.logOutInBackground(e -> {
       if (e == null)
           showAlert("So, you're going...", "Ok...Bye-bye then", true);
       else
          showAlert("Error...", e.getMessage(), false);
  });
﻿
예제 프로젝트에서 이 코드는 로그 아웃 버튼 콜백 안에 배치됩니다.
메서드 alertDisplayer는 당신이LoginActivity에 추가한 것과 동일합니다. Intent 인수도 변경하는 것을 잊지 마세요.
완료되었습니다!
이 단계에서, Parse Server의 핵심 기능을 통해 Back4App을 사용하여 Facebook으로 앱에 로그인하고, 등록하고, 로그아웃할 수 있습니다!
안드로이드 앱 사용자 등록 및 로그인 구현 튜토리얼
안드로이드 앱 Twitter 로그인 구현 방법 가이드
안드로이드 앱 Facebook 로그인 구현 튜토리얼 [개발자 가이드]

안드로이드 앱에 Facebook 로그인을 추가하는 방법

소개

목표

전제 조건

1 - 페이스북 설정

2 - Facebook 앱을 Back4App과 연결하기

3 - 매니페스트 파일에 provider 요소 추가하기

4 - Parse Facebook Util SDK 초기화

5 - 설정하기

6 - 로그인

7 - 로그아웃

완료되었습니다!
