[Android] 페이스북 계정으로 로그인 하기

이전 카카오 계정으로 로그인하기 포스팅에 이어, 페이스북 계정으로 로그인 하는 방법을 알아보겠습니다.

전체적인 구현 방법은 비슷하니, 이전 포스팅을 읽으셨거나, 다른 계정으로 연동하는 방법을 알고 계시다면 쉽게 이해가 되실 겁니다.

---

프로젝트에 Facebook SDK 추가하기

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

페이스북 SDK는 페이스북 디벨로퍼 사이트에서 다운 받을 수 있습니다만, 간단하게 Gradle 설정으로도 가능합니다.

build.gradle (Project: - ) 파일을 열어 다음을 추가해주세요.

build.gradle (Project: - )

allprojects {

    repositories {

        jcenter()

        mavenCentral()

    }

}

build.gradle (Module : app) 의 dependencies 에 다음과 같이 추가해주세요.

build.gradle (Module: app)

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {

        exclude group: 'com.android.support', module: 'support-annotations'

    })

    compile 'com.android.support:appcompat-v7:26.+'

    compile 'com.android.support.constraint:constraint-layout:1.0.2'

    testCompile 'junit:junit:4.12'

    // 페이스북 SDK

    compile 'com.facebook.android:facebook-android-sdk:4.+'

}

App Key 발급 및 등록하기

연동을 위해서는 SDK외에도 App Key를 발급받아 프로젝트에 등록해주어야 합니다. App Key는 페이스북 디벨로퍼 사이트에서 발급 받으실 수 있습니다.

사이트에 접속하신 뒤에, 로그인을 하시고 나면 아래와 같은 화면이 나옵니다. 

우측 상단에 보이는 '앱 만들기' 버튼을 클릭 합니다.

Facebook Developer

앱 이름과 이메일을 입력하신 뒤에, '앱 ID 만들기' 버튼을 눌러주세요.

Facebook Developer > 앱 만들기

디벨로퍼에 생성 된 앱을 안드로이드 플랫폼에서 사용하기 위해서 추가적인 설정을 하도록 하겠습니다.

생성된 앱의 설정 > 기본설정 화면을 띄워주세요.

Facebook Developer > 앱 만들기

생성하신 앱의 ID를 확인하실 수 있으실텐데요. 이건 프로젝트에서 사용해야 되니 프로젝트에 저장해둡시다.

strings.xml

<resources>

// 페이스북 앱 키

<string name="facebook_app_key">(앱 ID)</string>

</resources>

다시 화면으로 돌아와서 설정을 마저 하겠습니다. 이번에는 화면의 아래쪽에 있는 '플랫폼 추가' 버튼을 눌러주세요.

추가 버튼을 누르면 플랫폼을 선택해야 하는데 당연히 'Android'를 선택해 주시면 됩니다.

플랫폼을 선택하시면, 아래 그림과 같이 플랫폼을 추가 할 수 있는 입력 폼이 보이실 겁니다.

기본 설정 > 플랫폼 추가

Google Play 패키지 이름에는 생성하신 프로젝트의 패키지 이름을 넣어주시면 됩니다. 

다음으로 키 해시 값을 넣어주어야 하는데요. 해시키 값을 구하는 방법은 아래 글을 참고해주세요.

프로젝트 해키시 구하기

http://re-build.tistory.com/10

이어서, 얻어오신 키 해시 값을 플랫폼 정보의 키 해시 값에 추가하여 주신 뒤에 '변경 내용 저장' 버튼을 누르시면 됩니다.

그럼 아까 저장해 두었던 페이스북 앱 ID를 프로젝트에 등록 시키기 위해 manifests.xml 파일을 열어 수정을 하도록 하겠습니다.

manifests.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="rebuild.com.kakaotalk_login">

    <!-- 인터넷 사용 권한 -->

    <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_key" />

        <activity android:name=".LoginActivity">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

로그인 서버와 통신을 위해 인터넷 사용 권한을 추가합니다. 또한 전에 strings.xml에 저장해두었던 페이스북 앱 ID를 메타데이터로 등록해주시면 됩니다.

Callback 클래스 구현하기

이번에는 로그인 요청에 앞서 로그인 요청 후의 결과를 받을 Callback 클래스부터 구현을 해보겠습니다.

LoginCallback.java

package rebuild.com.login_facebook.Facebook;

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();

    }

}

Callback 클래스는 FacebookCallback<LoginResult>를 상속해서 만들었습니다.

구성은 심플합니다. 로그인 성공 시에 호출되는 onSussess(), 로그인 웹뷰 화면의 닫기 버튼을 눌러 로그인을 취소하였을 때 호출되는 onCancel(), 기타 에러 상황으로 로그인에 실패하였을 경우 호출되는 onError(). 예제에서는 로그인에 성공하였을 경우, 사용자 정보를 요청하여 결과를 받도록 구성하였습니다.

사용자 정보 요청에서는 Bundle로 원하는 필드 값들을 파라미터로 넘겨준 뒤, Json 형태로 결과를 받을 수 있습니다.

로그인 버튼 구현하기

이제 실제 화면에 보여질 로그인 버튼을 구현하고, Callback 클래스와 연결하도록 하겠습니다.

로그인 버튼을 구현하는 방법도 여러가지가 있지만, 가장 기본적인 방법은 페이스북 SDK에서 제공하는 버튼을 사용하는 방법입니다.

activity_login.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="rebuild.com.login_facebook.Activity.LoginActivity">

    <com.facebook.login.widget.LoginButton

        android:id="@+id/btn_facebook_login"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</LinearLayout>

로그인 버튼을 만드셨다면, 이어서 Callback 클래스와 연결해 주는 부분이 필요합니다.

LoginActivity.java

package rebuild.com.login_facebook.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import com.facebook.CallbackManager;

import com.facebook.login.widget.LoginButton;

import rebuild.com.login_facebook.Facebook.LoginCallback;

import rebuild.com.login_facebook.R;

public class LoginActivity extends AppCompatActivity {

    private Context mContext;

    private LoginButton btn_facebook_login;

    private LoginCallback mLoginCallback;

    private CallbackManager mCallbackManager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_login);

        mContext = getApplicationContext();

        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로 넘겨주어 관리하도록 합니다. 한편, 로그인 버튼에 콜백을 등록하여 CallbackManager에 담겨진 로그인 결과를 저희가 생성한 LoginCallback으로 전달하여, 로그인 결과에 대한 처리를 할 수 있도록 합니다.

여기까지 구현하셨다면, 페이스북 계정과의 연동에 대한 기본적인 구성은 끝입니다.

하지만, 추가적으로 로그인 버튼을 커스텀하여 사용하는 방법에 대해 알아보겠습니다.

첫번째 방법은 제공되는 페이스북 로그인 버튼은 숨김 처리한 뒤, 커스텀 버튼 클릭 시에 숨겨진 페이스북 로그인 버튼에 클릭 효과를 주는 performClick() 메서드를 이용하는 방법입니다.

activity_login.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="rebuild.com.login_facebook.Activity.LoginActivity">

    <com.facebook.login.widget.LoginButton

        android:id="@+id/btn_facebook_login"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:visibility="gone" />

    <Button

        android:id="@+id/btn_custom_login"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="페이스북으로 로그인" />

</LinearLayout>

LoginActivity.java

package rebuild.com.login_facebook.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import com.facebook.CallbackManager;

import com.facebook.login.widget.LoginButton;

import rebuild.com.login_facebook.Facebook.LoginCallback;

import rebuild.com.login_facebook.R;

public class LoginActivity extends AppCompatActivity {

    private Context mContext;

    private LoginButton btn_facebook_login;

    private Button btn_custom_login;

    private LoginCallback mLoginCallback;

    private CallbackManager mCallbackManager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_login);

        mContext = getApplicationContext();

        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);

        btn_custom_login = (Button) findViewById(R.id.btn_custom_login);

        btn_custom_login.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                btn_facebook_login.performClick();

            }

        });

    }

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        mCallbackManager.onActivityResult(requestCode, resultCode, data);

        super.onActivityResult(requestCode, resultCode, data);

    }

}

임의로 생성한 버튼의 클릭 리스너 안에서 페이스북 버튼에 performClick()만 달아주면 끝입니다. 기존 버튼 위에 새로 생성한 버튼만 연결하였기에, 기본적인 동작은 동일합니다.

두번째 방법은 커스텀한 버튼에 직접 연결하여 사용하는 방법입니다.

우선 xml에는 커스텀 버튼만 남겨두겠습니다.

activity_login.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="rebuild.com.login_facebook.Activity.LoginActivity">

    <Button

        android:id="@+id/btn_custom_login"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="페이스북으로 로그인" />

</LinearLayout>

이번에는 페이스북 로그인 버튼을 사용하지 않기 때문에, LoginManager를 통해 로그인 요청, 콜백 등록 등을 수행하도록 해야합니다.

LoginActivity.java

package rebuild.com.login_facebook.Activity;

import android.content.Context;

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.widget.Button;

import com.facebook.CallbackManager;

import com.facebook.login.LoginManager;

import java.util.Arrays;

import rebuild.com.login_facebook.Facebook.LoginCallback;

import rebuild.com.login_facebook.R;

public class LoginActivity extends AppCompatActivity {

    private Context mContext;

    private Button btn_custom_login;

    private LoginCallback mLoginCallback;

    private CallbackManager mCallbackManager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_login);

        mContext = getApplicationContext();

        mCallbackManager = CallbackManager.Factory.create();

        mLoginCallback = new LoginCallback();

        btn_custom_login = (Button) findViewById(R.id.btn_custom_login);

        btn_custom_login.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                LoginManager loginManager = LoginManager.getInstance();

                loginManager.logInWithReadPermissions(LoginActivity.this, 

                                                                         Arrays.asList("public_profile", "email"));

                loginManager.registerCallback(mCallbackManager, mLoginCallback);

            }

        });

    }

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        mCallbackManager.onActivityResult(requestCode, resultCode, data);

        super.onActivityResult(requestCode, resultCode, data);

    }

}

커스텀으로 구현한 버튼의 클릭 리스너에서 LoginManager를 통해 권한 요청과 콜백을 연결만 해주면 됩니다. 

로그인 버튼을 구현해보았는데, 주의할 점이 있습니다. 페이스북 로그인 버튼은 로그인 성공 시에, 로그아웃 버튼으로 자동으로 바뀌게 됩니다. 

로그인 시에 같은 페이지에 머물게 될 경우, 커스텀 버튼의 UI도 같이 변경해주셔야 합니다.

로그아웃 하기

로그아웃 처리도 아주 간단합니다. 로그인과 마찬가지로 제공되는 버튼을 사용하실 경우 따로 구현하실 필요는 없습니다.

로그아웃도 역시 LoginManager를 통해 logout() 메서드만 호출해주시면 됩니다.

btn_custom_logout = (Button) findViewById(R.id.btn_custom_logout);

btn_custom_logout.setOnClickListener(new View.OnClickListener() {

    @Override

    public void onClick(View view) {

        LoginManager.getInstance().logOut();     

    }

});

---

이상으로 포스팅을 마치겠습니다.

잘못 된 부분이나 문의 사항은 댓글로 남겨주시기 바랍니다.