[Android/안드로이드] 페이스북 로그인 / Facebook Login 연동

페이스북 로그인을 하기 위해서는 페이스북에서 제공하는 SDK를 이용해야 합니다.

 

App Key 발급 및 등록

연동을 하기 위해서는 SDK외에도 App Key를 발급받아 프로젝트에 등록을 해주어야 합니다. App Key는 페이스북 개발자 홈페이지에서 받을 수 있습니다.

 

https://developers.facebook.com/docs/facebook-login/android

Android - Facebook 로그인 - 문서 - Facebook for Developers

 

 

페이스북 로그인을 하시고 중앙에 있는 '새 앱 만들기' 버튼을 클릭합니다.

 

 

앱 이름과 이메일을 입력하신 뒤, '앱 ID 만들기'버튼을 클릭합니다.

 

 

자신이 사용할 제품(Facebook 로그인)에 대해 '설정'버튼을 클릭합니다.

 

플랫폼(Android)을 선택하고 계속 다음으로 넘어가 줍니다.

 

 

3번째 탭에 '3.Android프로젝트에 대해 Facebook에 알리기' 에 자신이 사용하는 패키지 이름과 기본 액티비티 클래스 이름을 설정합니다. 여기서 기본 액티비티 클래스 이름은 딥링크를 처리할 때 사용되는데 이 부분에 대해서는 나중에 설명해드리도록 하겠습니다. 'Save'버튼을 클릭하고 '계속'버튼을 클릭해줍니다.

 

4번째 탭을 오면 키 해시를 등록하는 부분이 있습니다. 탭에서도 설명이 잘 되어있지만 이전에 쓰었던 Java코드로 키해시를 얻어올 수도 있습니다. 주의할점은 끝에 =까지 빠짐없이 써줘야합니다.

 

2019/12/16 - [Android/유용한 기술] - [Android/안드로이드] 해시키(Hash key) 가져오는 방법

[Android/안드로이드] 해시키(Hash key) 가져오는 방법

 

5번 탭에 SSO활성화는 자동 로그인기능인데 '아니요'로 하고 넘어가겠습니다.

 

다음 탭에 대해서는 설명방법이므로 읽으셔도 되구 넘어가셔도 됩니다. 저는 소스코드는 따로 준비되어있기 때문에 넘어가도록 하겠습니다.

 

설정의 기본설정으로 가시면

 

앱 아이디를 가져올 수 있습니다. 또 밑으로 더 내려보시면 

 

패키지 이름, 클래스 이름, 키해시 값을 수정하거나 플랫폼을 따로 추가할 수 있습니다.

 

이제 앱 키 준비는 완료되었고 안드로이드 스튜디오에서 프로젝트를 생성합니다.

 

종속성에 페이스북SDK를 추가합니다.

build.gradle(Module:app) 

  
  dependencies {
  
      //페이스북 SDK
      implementation 'com.facebook.android:facebook-login:[5,6)'
  }
  

 

string.xml

  <resources>
  
      //페이스북 앱 키
      <string name="facebook_app_id">앱ID</string>
      
  </resources>
    

res->values->strings.xml에 앱 키를 입력해줍니다.

 

manifest

  
  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.facebooklogin">

      <!-- 인터넷 사용 권한 -->
      <uses-permission android:name="android.permission.INTERNET" />

      <application
          android:allowBackup="true"
          android:icon="@mipmap/ic_launcher"
          android:label="@string/app_name"
          android:roundIcon="@mipmap/ic_launcher_round"
          android:supportsRtl="true"
          android:theme="@style/AppTheme">
  
          <!-- 페이스북 메타데이터 -->
          <meta-data
              android:name="com.facebook.sdk.ApplicationId"
              android:value="@string/facebook_app_id" />
  
          <activity android:name=".MainActivity">
              <intent-filter>
                  <action android:name="android.intent.action.MAIN" />
  
                  <category android:name="android.intent.category.LAUNCHER" />
              </intent-filter>
          </activity>
      </application>
  </manifest>
   

매니페스트쪽에 인터넷 사용 권한을 부여해주고, 페이스북 메타데이터에 아까 string.xml에 등록했던 앱 키를 value값으로 넣어줍니다.

 

 

로그인 버튼 구현

activity_main.xml

  
  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      tools:context=".MainActivity">
  
      <com.facebook.login.widget.LoginButton
          android:id="@+id/btn_facebook_login"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
  </LinearLayout>
  

페이스북에서 제공하는 로그인 버튼을 구현하였습니다.

Callback클래스 구현

로그인 요청 후 받을 결과에 대한 Callback클래스를 구현하겠습니다.

 

LoginCallback.java

  
  package com.example.facebooklogin;
  
  import android.os.Bundle;
  import android.util.Log;
  
  import com.facebook.AccessToken;
  import com.facebook.FacebookCallback;
  import com.facebook.FacebookException;
  import com.facebook.GraphRequest;
  import com.facebook.GraphResponse;
  import com.facebook.login.LoginResult;
  
  import org.json.JSONObject;
  
  public class LoginCallback implements FacebookCallback<LoginResult> {
  
      // 로그인 성공 시 호출 됩니다. Access Token 발급 성공.
      @Override
      public void onSuccess(LoginResult loginResult) {
          Log.e("Callback :: ", "onSuccess");
          requestMe(loginResult.getAccessToken());
      }
  
      // 로그인 창을 닫을 경우, 호출됩니다.
      @Override
      public void onCancel() {
          Log.e("Callback :: ", "onCancel");
      }
  
      // 로그인 실패 시에 호출됩니다.
      @Override
      public void onError(FacebookException error) {
          Log.e("Callback :: ", "onError : " + error.getMessage());
      }
  
      // 사용자 정보 요청
      public void requestMe(AccessToken token) {
          GraphRequest graphRequest = GraphRequest.newMeRequest(token,
                  new GraphRequest.GraphJSONObjectCallback() {
                      @Override
                      public void onCompleted(JSONObject object, GraphResponse response) {
                          Log.e("result",object.toString());
                      }
                  });
  
          Bundle parameters = new Bundle();
          parameters.putString("fields", "id,name,email,gender,birthday");
          graphRequest.setParameters(parameters);
          graphRequest.executeAsync();
      }
  }
  

 

LoginCallback이라는 클래스를 새로 생성해주시고 다음 코드를 넣습니다.

LoginCallback클래스는 Facebook에서 제공하는 FacebookCallback<LoginResult>를 상속해서 만들었고,

성공 시 onSuccess()를 호출

로그인 화면을 닫아 로그인을 취소했을 시 onCancel()을 호출

에러상황으로 로그인을 실패했을 경우 onError()을 호출

이렇게 결과를 받을 수 있는 부분을 구성하였습니다.

 

Facebook 로그인 연동

이제 로그인 버튼도 만들었고, Callback 클래스도 구현을 했으니 이제 이를 연결을 해줍니다.

 

MainActicity.java

package com.example.facebooklogin;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;

  
  import com.facebook.CallbackManager;
  import com.facebook.login.widget.LoginButton;
  
  import java.util.Arrays;
  
  public class MainActivity extends AppCompatActivity {
  
      private LoginButton btn_facebook_login;
  
      private LoginCallback mLoginCallback;
      private CallbackManager mCallbackManager;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
  
          mCallbackManager = CallbackManager.Factory.create();
          mLoginCallback = new LoginCallback();
  
          btn_facebook_login = (LoginButton) findViewById(R.id.btn_facebook_login);
          btn_facebook_login.setReadPermissions(Arrays.asList("public_profile", "email"));
          btn_facebook_login.registerCallback(mCallbackManager, mLoginCallback);
      }
  
      @Override
      protected void onActivityResult(int requestCode, int resultCode, Intent data) {
          mCallbackManager.onActivityResult(requestCode, resultCode, data);
          super.onActivityResult(requestCode, resultCode, data);
      }
  }
  

페이스북은 Callbackmanager를 통해서 데이터를 주고받습니다. 로그인 버튼을 눌렀을 때 요청하는 결과 값을 onActivityResult() 메소드를 통해 들어오게 되는데 앞에서 만들어준 CallbackManager를 통해 로그인 결과를 넘겨줍니다. 

 

결과화면

페이스북에서 제공하는 기본 페이스북 로그인버튼입니다. 로그인버튼을 누르면 페이스북과 연동되어 로그인창으로 가고, 성공적으로 진행을 했을경우 세번째 사진처럼 로그아웃 버튼으로 바뀌게 됩니다. 페이스북에서 제공하는 로그인 버튼의 경우에는 로그아웃기능까지 제공해줍니다.

 

다음 강좌에서는 페이스북 로그인인데 버튼을 다르게 하고싶을 경우 Custom 로그인버튼에 대해 설명하겠습니다.

2019/12/18 - [Android/유용한 기술] - [Android/안드로이드] 안드로이드 페이스북로그인 버튼 커스텀/Facebook Login Button Custom

[Android/안드로이드] 안드로이드 페이스북로그인 버튼 커스텀/Facebook Login Button Custom