안드로이드 애플리케이션에서 다양한 방법으로 페이스북 로그인 연동 기능을 추가해보자!
본 포스팅은 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 [코딩하는 빵] |