[안드로이드/Android] 안드로이드 1분이면 페이스북 로그인 연동

본 포스팅은 Window10, Android Studio 2.3 기준으로 작성되었습니다.

 

1. App 생성

 

이곳 에 들어가셔서 페이스북 로그인을 합니다.

 

 

 

1. App ID 추가

 

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

 

 

 

 

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

 

 

2-1. build.gradle 설정

 

 

Minumum SDK를 API 15 이상으로 프로젝트를 만들어줍니다. (기존 프로젝트의 경우 build.gradle에서 수정)

이제 Facebook SDK 사용을 위해 아래와 같이 build.gradle (Module: app)에 설정을 추가해줍니다.

 

android{

repositories {

mavenCentral()

}

}

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

}

 

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

 

프로젝트에 아까 생성한 App ID도 추가해줘야합니다. App ID는 이곳에서 내앱 버튼을 누르시면 확인하실 수 있습니다.

이후 아래와 같이 App ID를 values 폴더 - strings.xml 파일에서 string value로 만들어줍니다.

 

 

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

 

2-3. manifest 파일 설정

 

AndroidManifest.xml 파일에서 user-permission과 meta-data를 추가해봅시다. 아래와 같은 코드를 추가하면 됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jj.sulbusim">
    <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>
        <activity android:name=".SignUp.JoinActivity" />
        <activity android:name=".Intro.IntroActivity"></activity>

    </application>

</manifest>

 

 

 

3. openssl 설치

 

https://code.google.com/archive/p/openssl-for-windows/downloads URL에 접속해서 윈도우에 맞게 다운로드합니다.

 

4. 해시키 생성 및 등록

 

3-1. 해시키 생성

 

페이스북과 연동된 기능을 사용하기 위해 해시키를 생성해 등록해야합니다.

cmd 를 입력하여 창을 띄우고, 명령어를 실행할 위치인 자바의 bin 폴더로 이동합니다.

 

 

 

 

이제부터 조금 복잡하니 집중해주셔야 합니다.

 

 

이 경로에서 아래 명령을 실행하고 "키 저장소 비밀번호"인 android를 입력하면 Hash Key가 생성된다.

 

 

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | 

openssl 

sha1 -binary | openssl base64

 

두 파트의 초록색 글씨부분을 본인 환경에 맞춰 바꾸어 주어야 합니다.

 

4-1. ~/.android/debug.keystore

 

debug.keystore  파일은 윈도우에서 보통 C:\Users\사용자\.android 경로에 있습니다.

 

※주의!

경로를 복사하시고 debug.keystore까지 꼭 입력해주어야 합니다!

 

 

 

 

4-2. openssl

3번에서 깔았던 openssl의 경로를 넣어줍니다.

 

※주의!

경로를 복사하시고 bin 폴더의 openssl까지 꼭 입력해주어야 합니다!

 

 

 

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | 

openssl 

sha1 -binary | openssl base64

 

초록색글씨를 본인 환경에 맞추셨으면 명령을 실행하고, 그러면 키 저장소 비밀번호 입력하라고 뜹니다. 비밀번호로는 android를 입력하면 해시키를 리턴해주게 되고 해시키를 메모장을 따로 키셔서 저장해두세요.

 

해시키를 획득하셨으면 이곳에서 내앱 클릭 -> 등록한 앱 클릭 -> 왼쪽에 설정 클릭 -> 플랫폼 추가 클릭 -> Android 선택  까지 이동을 하고 작업한 프로젝트의 패키지명과 방금 얻어온 해시키를 등록해줍니다.

 

 

 

 

5. 페이스북 로그인 구현

 

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

 

MainActivity와 activity_main.xml 에서 구현하였습니다.

먼저 xml 파일로 가서 아래와 같이 com.facebook.login.widget.LoginButton 을 생성합니다.

 

 

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

 

제공되는 버튼을 사용하는 경우에는 반드시 아래와 같이 레이아웃이 적용되기 전에 facebookSDK를 초기화하는 작업을 해줘야합니다.

아래와 같은 코드가 없으면 레이이웃에 버튼을 추가하는 것만으로도 에러가 나니까 주의해주세요.

 

FacebookSdk.sdkInitialize(this.getApplicationContext());

setContentView(R.layout.activity_main);

 

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

 

package jj.sulbusim;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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);
    }
}