안드로이드/android 페이스북 연동하기!

안녕하세요! 오늘은 어플 개발을 개발 할 때 안드로이드 스튜디오에서 페이스북을 연동하는 법을 알아보겠습니다.

먼저 페이스 북 개발자 페이지(facebook for developers)에 가서 개발자 등록을 하고 새 앱 ID를 만들기를 해야합니다.!

아이디를 등록했다면 다양한 기능들을 사용 할 수 있습니다.

그 후엔 Android용 Facebook SDK를 설치해야 합니다,

Maven과 함께 프로젝트의 구성 요소 SDK 중 하나에 연결하려면 다음 구현 문 중 하나를 빌드 스크립트에 추가합니다.

프로젝트에서 your_app | Gradle Scripts | build.gradle (Project)을 연 후 

1. buildscript { repositories {}} 섹션에 다음 저장소를 추가하여 Maven Central Repository에서 SDK를 다운로드합니다:

   mavenCentral() 

2. 프로젝트에서 your_app | Gradle Scripts | build.gradle (Module: app)을 연 후 dependencies{} 섹션에 하나 이상의 구현 문을 추가합니다.
3. 프로젝트를 빌드합니다.

위 과정을 다했다면 해시키 생성이 필요합니다!

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

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자리의 해시키를 얻어올 수 있습니다.  잘 메모해두도록 합니다!

그 후엔 페이스북 앱개발 기본 설정에 가서 얻은 해시키를 입력하고 저장 하도록 합니다!!.

해시 키 까지 했다면 거의 다왔다고 생각하시면 됩니다.

페이스북 로그인 구현

 페이스북 제공 로그인 버튼으로 로그인하기 (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 버튼으로 바뀌는 모습을 볼 수 있습니다.

티스토리 코딩하는 빵님 블로그를 참조하였습니다!