통합 SNS - Twice 개발하기 (3) Facebook 개발자 등록

Intro

프로젝트 기간동안 가장 짜증을 많이 유발했고, 프로젝트의 목표를 조금 비틀어버린 '그'SNS

StackOverflow를 참고 했을때에는 될 줄 알았다고 생각했던 '그'SNS API

한국어를 지원해줘 착하지만 내가 원하는 기능은 제공을 중단한 '그'SNS

흥선대원군이 만약 현시대에 살아서 SNS를 만들었다면 '그'SNS를 만들지 않았을까 하는 각이 들게한 SNS

이번편은 Facebook 개발자에 앱을 등록하고 Login을 설정하는 편이다.

 

1. Facebook Developer에 개발자로 등록하기

사실 개발자로 등록하는건 어렵지 않다. Facebook Developer(https://developers.facebook.com/)에 들어가서 로그인만 하면 됬었던걸로 기억한다.

 

2. 새 앱 추가하기

Facebook Developers에 들어가서 새 앱 추가를 누른다. 

로그인 후 - 내 앱 - 새 앱 추가

누르면 이런 다이얼로그가 나오는데 표시이름을 만든뒤 앱 ID 만들기 버튼을 클릭한다.

원래 연락처 이메일에 자기 Facebook ID가 나온다.

보안 인증을 완료하면 해당 화면처럼 새로운 앱이 나온다.

이제 로그인을 위한 내용을 넣어보자.

 

4. Facebook 로그인 등록

왼쪽의 제품 탭 버튼을 누르면 제춤 추가 화면이 나온다. 설정을 누르면 Facebook에서 제공해주는 빠르고 친절한 Facebook Login Task를 진행할 수 있다.

Twice는 Android Application 이니까 Android를 선택한다. 로그인 등록 후에도 다른 과정을 등록할 수 있다.

 

5. Facebook Guide 따라하기

 1 .SDK 다운로드하기 - 다음

2. Gradle 수정하기

 - Gradle ( Project ) 수정

buildscript 
{ 
	repositories {
    	...
        mavenCentral() 
    }
}

 - Gradle ( App ) 수정

  현재 가이드는 [4,5)로 나오지만, 최근 업데이트로 인해 [5,6)으로 작성한다.

implementation 'com.facebook.android:facebook-android-sdk:[5,6)'

  - SDK 로드하기

  Splash 화면에서 초기화진행할 때 SDK를 로드한다.

import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

 

3. Facebook에 Package등록하기

 개발하는 앱의 Package 이름, Facebook Login을 사용하는 Activity를 넣어준다.

Save 버튼을 누르면 이런 다이얼로그가 나오는데 현재는 개발중인 단계 이므로 패키지 이름 사용 버튼을 누른다.

4. 키 해시 등록하기

내 생각에는 Login 등록중 가장 복잡한 단계가 아닐까 싶다.

먼저 keytool은 아래 경로에 존재한다.

{JDK설치위치}/bin

해당 폴더로 이동한뒤 ( CLI 환경에서 ) 아래 명령에서 'USERNAME' 부분과 같이 사용자 설정 부분을 수정한뒤

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

실행시킨다.

아래처럼 나온 키 해시들을 등록한다.

 

5. App SSO 활성화

해주자.

6. Manifest, Resource파일 수정

Strings.xml 파일 수정

<string name="facebook_app_id">APP-ID</string> 
<string name="fb_login_protocol_scheme">fb로 시작하는 무언가 값</string>

Manifest.xml 파일 수정 및 퍼미션 추가

 - 퍼미션

<uses-permission android:name="android.permission.INTERNET"/>

 - Facebook Login Activity 추가

   application에 넣어준다.

<meta-data 
	android:name="com.facebook.sdk.ApplicationId" 
    android:value="@string/facebook_app_id"/> 
<activity 
	android:name="com.facebook.FacebookActivity" 
    android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation" 
    android:label="@string/app_name" /> 
<activity 
	android:name="com.facebook.CustomTabActivity"
    android:exported="true"> 
    <intent-filter> 
    <action 
    	android:name="android.intent.action.VIEW" /> 
        <category android:name="android.intent.category.DEFAULT" /> 
        <category android:name="android.intent.category.BROWSABLE" /> 
        <data android:scheme="@string/fb_login_protocol_scheme" /> 
	</intent-filter> 
</activity>

 

7. Facebook Instance 초기화

@Override
public void onCreate() {
    super.onCreate();
    FacebookSdk.sdkInitialize(getApplicationContext());
    AppEventsLogger.activateApp(this);
}

Splash 화면의 Oncreate에 추가해준다.

 

8. Activity.xml에 Facebook Login Button을 추가해준다.

<com.facebook.login.widget.LoginButton
    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" /> 

 

9번부터는 기초 틀은 유지한채 Dialog로 처리를 받아 가이드와는 많이 다르다.

 기본적으로 Activity Result로 받는 형태는 일치하지만 Button이 Custom Dialog를 통해 작동하는 형태를 가진다.

https://github.com/GirlFriend-Yerin/Twice/blob/Develop/app/src/main/java/sysproj/seonjoon/twice/view/SNSLinkingActivity.java

GirlFriend-Yerin/Twice

 

이로써 Facebook Login에 대한 준비는 끝났다. Twitter에 비해 너무 복잡하다....