[React Native] Facebook 연동 Login 적용하기 in 안드로이드

2021년 1월 19일부로 Facebook SDK에 대한 페이스북의 공식 support가 종료되었습니다.

이제부터는 커뮤니티에서 관리를 하고 있습니다. 아래

링크에서 확인할 수 있습니다.

www.npmjs.com/package/react-native-fbsdk-next

react-native-fbsdk-next

 

설치부터 따라서 진행해보도록 하겠습니다. 이 글에서 설명하는 내용은 모두 android 환경 기준입니다!

 

1. 설치

yarn add react-native-fbsdk-next

npm install --save react-native-fbsdk-next

 

2. 링크

React native 0.60 버전 이상이면 오토링크가 됩니다.

 

3. 설정

페이스북 developer 페이지를 따라서 프로젝트 설정을 해줘야 합니다.

developers.facebook.com/docs/facebook-login/android

Android - Facebook 로그인 - 문서 - Facebook for Developers

 

드롭다운 메뉴에서 미리 등록해둔 앱을 선택하거나 새로운 앱을 만듭니다. 선택한 후에는 앱 ID가 표시된 것을 확인할 수 있습니다.

그 후 페이지에서 설명하는 내용들을 전부 프로젝트 내에 추가해줍니다. 

build.gradle, strings.xml, AndroidManifest.xml 파일등이 수정됩니다. 문서 내의 4번 항목 (리소스 및 메니페스트 수정) 까지 진행하면 됩니다.

 

패키지 이름은 위처럼 AndroidManifest.xml 파일 내에서 확인할 수 있고, 기본 액티비티 클래스 이름의 경우 com.[패키지 이름].MainActivity와 같이 입력하면 됩니다.

 

다음 6번 항목은 키 발급입니다.

JDK의 keytool과 openssl이 필요합니다.

code.google.com/archive/p/openssl-for-windows/downloads       

Google Code Archive - Long-term storage for Google Code Project Hosting.

JDK 폴더로 이동한 후, cmd창에서 다음 명령어를 실행해 줍니다.

keytool -exportcert -alias androiddebugkey -keystore "프로젝트경로\android\app\debug.keystore" | "openssl경로\openssl-0.9.8k_X64\bin\openssl" sha1 -binary | "openssl경로\openssl-0.9.8k_X64\bin\openssl" base64

그러면 28자리의 해시된 키가 생성됩니다. 페이지 내에 입력하면 드디어 준비 끝입니다.

---

 

4. 코드 작성

react-native-fbsdk-next 에서 제공하고 있는 기본적인 로그인 예제 코드로 테스트 해 봅시다.

import React, { Component } from 'react';
import { View } from 'react-native';
import { LoginButton, AccessToken } from 'react-native-fbsdk-next';

export default class Login extends Component {
  render() {
    return (
      <View>
        <LoginButton
          onLoginFinished={
            (error, result) => {
              if (error) {
                console.log("login has error: " + result.error);
              } else if (result.isCancelled) {
                console.log("login is cancelled.");
              } else {
                AccessToken.getCurrentAccessToken().then(
                  (data) => {
                    console.log(data.accessToken.toString())
                  }
                )
              }
            }
          }
          onLogoutFinished={() => console.log("logout.")}/>
      </View>
    );
  }
};

실제로 실행시켜보면 미리 디자인까지 되어 있는 로그인 버튼을 확인할 수 있습니다.

로그인이 성공적으로 되는 것을 확인했다면 사용자 프로필은 다음과 같이 가져올 수 있습니다.

mport { Profile } from "react-native-fbsdk-next";

// ...

const currentProfile = Profile.getCurrentProfile().then(
  function(currentProfile) {
    if (currentProfile) {
      console.log("The current logged user is: " +
        currentProfile.name
        + ". His profile id is: " +
        currentProfile.userID
      );
    }
  }
);