[Facebook] Facebook Login을 위해 프로젝트에 Android, iOS 연결하기

Facebook Login을 위해 프로젝트에 Android, iOS 연결하기

페이스북 프로젝트에 안드로이드, iOS 프로젝트를 등록하고 의존성을 관리해보자.

---

선행 작업

이 글은 페이스북 프로젝트 생성 절차를 마친 이후의 작업을 다루므로 페이스북 프로젝트를 생성하지 않았다면 아래 링크에서 먼저 작업을 완료해야한다.

[Facebook] Facebook 프로젝트 생성하기

---

Android 프로젝트 등록

페이스북 프로젝트 대시보드에서 "Facebook 로그인" 메뉴를 선택한다.

 

Android 선택

 

안드로이드 앱 등록 절차는 총 10단계인데 필수로 진행해야하는 항목은 2, 3, 4, 6, 7 총 5개 항목이다.

SDK는 gradle에서 추가해주면 되니 다운받을 필요 없다.

 

4번과 같이 app 레벨의 build.gradle에 의존성을 추가한다.

SDK의 최신 버전은 아래 링크에서 확인할 수 있다.

Maven Repository: com.facebook.android » facebook-android-sdk

 

위쪽에는 등록하고 싶은 안드로이드 프로젝트의 패키지명을 적어주고, 아래쪽은 앱에서 딥링크를 처리할 액티비티 클래스명을 적어준다.

 

(flutter 프로젝트에 등록하고 싶으면 기본 패키지명.MainActivity를 등록하면 된다.)

 

아직 플레이스토어에 등록하지 않은 앱인 경우 위와 같은 알림이 뜨는데 무시하고 넘어가자.

 

다음은 안드로이드 서명 키 해시를 등록해야한다. 여러 개를 등록할 수 있다.

 

키 해시를 얻는 방법은 아래 링크에서 찾을 수 있다.

시작하기 - Android SDK - 문서 - Facebook for Developers

여기까지가 웹 페이지에서 등록하는 과정이다.

 

제일 중요한 항목이다.

strings.xml과 AndroidManifest.xml에 페이스북 로그인 기능에서 사용할 값들을 넣어주어야한다.

 

// strings.xml

<string name="facebook_app_id">your facebook app id</string>
<string name="fb_login_protocol_scheme">your fb login protocol scheme</string>

strings.xml에는 위와 같이 두 값을 넣어준다.

facebook_app_id는 해당 안드로이드 앱이 페이스북 콘솔에 등록된 앱인지 검증하는 값이고,

fb_login_protocol_scheme은 웹 브라우저가 해당 안드로이드 앱의 딥링크를 열 때 사용하는 커스텀 URL을 식별하는 값인 것 같다.

 

// AndroidManifest.xml

<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>
</application>

AndroidManifest.xml에는 application 태그 안쪽에 위와 같이 넣어준다.

공식문서에는 @string/app_name을 쓰게 되있는데 strings.xml에 정의해도 되고 label값을 그냥 하드코딩해도 된다.

 

AndroidManifest.xml에 적용한 모습

마지막 필수 항목이다. FacebookSdk를 실행하기 전에 초기화하는 방법에 대해 서술하고 있다.

일반 안드로이드 프로젝트라면 위처럼 작성하고, flutter 안드로이드 프로젝트라면 그냥 넘어가도록 하자.

 

여기까지 진행했다면 페이스북 로그인 API에 안드로이드 앱이 성공적으로 등록된 것이다.

---

iOS 프로젝트 등록

iOS 선택

 

iOS 앱 등록 절차는 총 9단계인데 필수로 진행해야하는 항목은 1, 2, 4, 5 총 4개 항목이다.

일반 iOS 프로젝트는 위 사진에 나온 것처럼 Podfile에 FBSDKLoginKit을 추가하면되고, flutter iOS 프로젝트라면 그냥 넘어가자.

 

번들 ID를 추가한다. 웹 페이지에서 등록하는 과정은 여기가 끝이다.

 

iOS 프로젝트 폴더로 돌아와서 Info.plist에 값을 추가해야한다.

 

// Info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>your fbFacebookAppID</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>your FacebookAppID</string>
<key>FacebookDisplayName</key>
<string>your FacebookAppName</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

 

위와 같이 FacebookAppID, FacebookAppName를 입력하고 CFBundleURLSchemes 안쪽에는 "fb" +  FacebookAppID를 합한 문자열을 넣어준다.

FacebookAppID가 123456789면 fb123456789를 넣어주면 된다.

 

마지막 필수 항목이다. FacebookSdk를 실행하기 전에 초기화하는 방법에 대해 서술하고 있다.

일반 iOS 프로젝트라면 위처럼 작성하고, flutter iOS 프로젝트라면 그냥 넘어가도록 하자.