페이스북 로그인

안드로이드 애플리케이션에서 다양한 방법으로 페이스북 로그인 연동 기능을 추가해보자!

본 포스팅은 MacOS 10.11.5, AndroidStudio 2.1.1 기준으로 작성되었습니다.
페이스북 로그인에 관한 자세한 사항은 페이스북 디벨로퍼를 확인하시면 됩니다.

1. App ID 추가

페이스북에 로그인 후 이곳에 들어가 새 앱 추가 버튼을 눌러 새로운 App ID를 생성합니다.


2. 안드로이드 스튜디오에서 프로젝트 설정

2-1. build.gradle 설정

Minumum SDK를 API 15 이상으로 프로젝트를 만들어줍니다. (기존 프로젝트의 경우 build.gradle에서 수정)
이제 Facebook SDK 사용을 위해 아래와 같이 build.gradle (Module: app)에 설정을(빨간글씨) 추가해줍니다.

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    repositories {
        mavenCentral()
    }

    defaultConfig {
        applicationId "com.example.ppang.newsample"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.facebook.android:facebook-android-sdk:4.+'
}

2-2.  App ID 리소스에 추가

프로젝트에 아까 생성한 App ID도 추가해줘야합니다. App ID를 생성한 페이지로 가면 App ID를 쉽게 확인할 수 있습니다.
아래와 같이 App ID를 values 폴더 - strings.xml 파일에서 string value로 만들어줍니다. (빨간글씨)

<resources>
    <string name="app_name">newSample</string>
    <string name="facebook_app_id">본인의 앱 아이디(숫자)</string>
</resources>

2-3. manifest 파일 설정

AndroidManifest.xml 파일에서 user-permission과 meta-data, 로그인을 위해 제공된 FacebookActivity를 추가해봅시다.
아래와 같은 코드를 추가하면 됩니다. (빨간글씨)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.ppang.newsample">
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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>
        <activity android:name="com.facebook.FacebookActivity"
            android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:theme="@android:style/Theme.Translucent.NoTitleBar"
            android:label="@string/app_name" />
    </application>

</manifest>

3. 해시키 생성 및 등록

3-1. 해시키 생성

페이스북과 연동된 기능을 사용하기 위해 해시키를 생성해 등록해야합니다.
MacOS 기준으로 해시키를 생성하겠습니다. 윈도우즈에서는 keystore의 경로가 다르다고 알고있습니다.

터미널에서 아래와 같은 명령을 입력합니다.
keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

본인의 경로에 맞게 입력하면되는데 MacOS에서는 일반적으로 ~/.android/debug.keystore 에 위치합니다.
즉 저는 다음과 같은 명령어로 해시키를 얻어왔습니다.
keytool -exportcert -alias releasekey  -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

명령어를 입력하고 암호를 입력하면 28자리의 해시키를 얻어올 수 있습니다. 잘 메모해두도록 합시다.

3-2. 해시키 등록

App ID를 생성한 페이지에서 해당 앱으로 들어가 설정 - 기본설정 - 플랫폼 추가 (안드로이드) 로 들어갑니다.
작업한 프로젝트의 패키지명과 방금 얻어온 해시키를 등록해줍니다.

이제 Facebook과의 연동작업이 끝났습니다. 로그인 기능을 사용해보도록 합시다.


4. 페이스북 로그인 구현

4-1. 페이스북 제공 로그인 버튼으로 로그인하기 (LoginButton)

MainActivity와 activity_main.xml 에서 구현하였습니다.
먼저 xml 파일로 가서 com.facebook.login.widget.LoginButton 을 생성합니다.

아래와 같은 버튼을 적당한 위치에 삽입해주면 됩니다.

<com.facebook.login.widget.LoginButton
    android:layout_below="@+id/label"
    android:id="@+id/login_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:layout_marginBottom="30dp" />

다음은 MainActivity에서 작업해봅시다.
제공되는 버튼을 사용하는 경우에는 반드시 아래와 같이 레이아웃이 적용되기 전에 facebookSDK를 초기화하는 작업을 해줘야합니다.
아래와 같은 코드가 없으면 레이이웃에 버튼을 추가하는 것만으로도 에러가 나니까 주의해주세요.

FacebookSdk.sdkInitialize(this.getApplicationContext());
setContentView(R.layout.activity_main);

아래 전체 코드에서는 콜백매니저를 이용하여 로그인 성공시 유저 프로필까지 받아오고 있습니다.
★코드는 이곳에서 참고하였습니다.

package com.example.ppang.newsample;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;

import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;

import org.json.JSONObject;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    private CallbackManager callbackManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FacebookSdk.sdkInitialize(this.getApplicationContext());
        setContentView(R.layout.activity_main);

        callbackManager = CallbackManager.Factory.create();

        LoginButton loginButton = (LoginButton) findViewById(R.id.login_button);
        loginButton.setReadPermissions(Arrays.asList("public_profile", "email"));
        loginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                GraphRequest graphRequest = GraphRequest.newMeRequest(loginResult.getAccessToken(), new GraphRequest.GraphJSONObjectCallback() {
                    @Override
                    public void onCompleted(JSONObject object, GraphResponse response) {
                        Log.v("result",object.toString());
                    }
                });

                Bundle parameters = new Bundle();
                parameters.putString("fields", "id,name,email,gender,birthday");
                graphRequest.setParameters(parameters);
                graphRequest.executeAsync();
            }

            @Override
            public void onCancel() {

            }

            @Override
            public void onError(FacebookException error) {
                Log.e("LoginErr",error.toString());
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }
}

이제 실행하면 아래와 같이 내 애플리케이션에 연동된 페이스북 로그인 기능을 이용할 수 있습니다.
로그인에 성공하면 Login 버튼이 자동으로 Logout 버튼으로 바뀌는 모습을 볼 수 있습니다.


로그인 성공시 찍히는 로그

4-2. 커스텀 버튼으로 로그인하기 (LoginManager)

저는 새로 프로젝트를 파서 작업해서 패키지명이 다릅니다. 참고해주세요.
프로젝트를 새로 생성하면 마찬가지로 App ID 등록부터 다시 하던지 등록 된 패키지명을 바꾸던가 해야합니다.

xml 에서 적당한 위치에 button(LoginButton 아닙니다.) 하나를 만들어주고 바로 MainActivity로 갑니다.
이번 코드에서는 클래스하나를 만들어서 로그인 성공시 해당 클래스를 호출하도록 했습니다.
이제는 LoginButton 이 없으니 LoginManager를 이용해 콜백매니저를 불러야합니다.

public void 함수이름 (View v) 형태로 함수를 만들어 위에서 만든 버튼의 onClick 속성에 추가해주도록 합시다.
android:onClick="함수이름"
이렇게요.

onClickListner를 따로 구현하셔도 상관없습니다.

★코드는 같은곳에서 데려왔습니다.

package com.example.ppang.facebookloginex;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;

import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.GraphRequest;
import com.facebook.GraphResponse;
import com.facebook.login.LoginManager;
import com.facebook.login.LoginResult;

import org.json.JSONObject;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    private CallbackManager callbackManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        callbackManager.onActivityResult(requestCode, resultCode, data);
    }

    public void facebookLoginOnClick(View v){
        FacebookSdk.sdkInitialize(getApplicationContext());
        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().logInWithReadPermissions(MainActivity.this,
                Arrays.asList("public_profile", "email"));
        LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() {

            @Override
            public void onSuccess(final LoginResult result) {

                GraphRequest request;
                request = GraphRequest.newMeRequest(result.getAccessToken(), new GraphRequest.GraphJSONObjectCallback() {

                    @Override
                    public void onCompleted(JSONObject user, GraphResponse response) {
                        if (response.getError() != null) {

                        } else {
                            Log.i("TAG", "user: " + user.toString());
                            Log.i("TAG", "AccessToken: " + result.getAccessToken().getToken());
                            setResult(RESULT_OK);

                            Intent i = new Intent(MainActivity.this, SampleActivity.class);
                            startActivity(i);
                            finish();
                        }
                    }
                });
                Bundle parameters = new Bundle();
                parameters.putString("fields", "id,name,email,gender,birthday");
                request.setParameters(parameters);
                request.executeAsync();
            }

            @Override
            public void onError(FacebookException error) {
                Log.e("test", "Error: " + error);
                //finish();
            }

            @Override
            public void onCancel() {
                //finish();
            }
        });
    }

}
한번 로그인 했더니 이렇게 뜨네요. 따로 로그아웃하지 않아서 자동로그인이 되고있습니다.


커스텀에서 로그아웃은 따로 만들지 않았습니다.

출처:http://yucaroll.tistory.com/2