React native firebase 페이스북 로그인 적용하기

시작하기

firebase 적용포스트를 통해 설정을 마친 상태여야 합니다.
react-native v0.60 이상을 기준으로 작성하였습니다.

페이스북 개발자 계정설정

페이스북 개발자 홈페이지에 로그인을 합니다.

오른쪽 상단 내 앱을 선택한 후 새 앱추가를 합니다.

내 앱 생성이 완료되면 Add a product에서 페이스북 로그인을 추가합니다.

Firebase 설정

설정 > 기본설정에 접속하면 앱 아이디와 앱 시크릿 코드를 확인 할 수 있습니다.

firebase로 접속해서 Authentication > Sign-in method에 facebook을 선택해서 활성화 시켜줍니다.
다음과 같은 팝업이 나옵니다.

아까 보았던 앱 아이디와 앱 시크릿 코드를 입력해줍니다.
하단에 나와있는 OAuth 리디렉션 url은 페이스북 로그인 설정에서 추가해줍니다.

React native설정

기본적인 설정은 완료되었습니다. 이제 다음으로 react native에서 사용해보겠습니다.
react-native-fbsdk 패키지를 설치합니다.

npm install --save react-native-fbsdk

다음 ios를 선택해서 하나하나 추가 및 수정해나가도록 해봅니다.

코코아팟으로 설정하고 pod 'FBSDKLoginKit'이 부분을 /ios/Podfile에서 pod ‘~‘ 가 많은 부분 하단에 추가해줍니다.

번들 식별자는 xcode에서 확인할 수 있습니다. 다음 이미지의 두번째에 있는 텍스트가 번들 식별자입니다.

3번의 앱에 대한 sso활성화를 합니다.

뭔가 엄청나게 복잡한 값들이 나와있죠? 쉽게 할 수 있습니다.

xcode에서 info.plist를 소스코드로 열어줍니다.
그러면 다음과 같이 코드가 적혀있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    //===== 여기에 붙여넣기 4-2, 4-6
	//...
        코드들
    //...
</dict>
</plist>

페이스북 사이트에서 보았던 4-2,4-6코드를 사이에 붙여넣습니다.

앱 델리게이트 연결해야 하는 단계가 왔습니다. 하지만.. 저희 프로젝트에서는 AppDelegate.swift라는 파일이 없습니다. 그래서 다른 방법으로 델리게이트를 연결하겠습니다.

xcode에서 AppDelegate.m파일을 열어줍니다.
상단에 다음코드를 추가합니다.

#import <FBSDKCoreKit/FBSDKCoreKit.h>

그리고 AppDelegate부분에 두줄을 추가합니다.

//...
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [[FBSDKApplicationDelegate sharedInstance] application:application // 추가
  didFinishLaunchingWithOptions:launchOptions]; // 추가
//...

마지막으로 @end바로 위에 다음 코드를 추가합니다.

//...
- (BOOL)application:(UIApplication *)app
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [[FBSDKApplicationDelegate sharedInstance]application:app
                                                       openURL:url
                                                       options:options];
}

@end

xcode를 열어서 info탭 맨하단에 있는 URL schema부분에서 fb+APPID를 입력합니다. 앱아이디는 페이스북 개발자 페이지에서 확인할 수 있습니다. 예를들면 fb123456789012345이런 형식으로 스키마를 등록합니다.

버튼 등의 단계들은 react native단에서 할것이기 때문에 다음 단계들은 넘어가보도록 합니다.

사용하기

설정이 완료되었으니 이제 사용해보겠습니다.

FacebookSignIn.jsx

import React from "react";
import { Button } from "react-native";

const FacebookSignIn = ({ onFacebookButtonPress }) => {
  return <Button title="Facebook Sign-In" onPress={onFacebookButtonPress} />;
};
export default FacebookSignIn;

페이스북 로그인에 사용할 버튼을 생성합니다.

App.jsx

import React from "react";
import auth from "@react-native-firebase/auth";
import { LoginManager, AccessToken } from "react-native-fbsdk";
import FacebookSignIn from "./FacebookSignIn";

const App = () => {
  const handleFacebookButtonPress = async () => {
    try {
      const result = await LoginManager.logInWithPermissions([
        "public_profile",
        "email",
      ]);
      if (result.isCancelled) {
        throw "User cancelled the login process";
      }
      const data = await AccessToken.getCurrentAccessToken();
      if (!data) {
        throw "Something went wrong obtaining access token";
      }
      const facebookCredential = auth.FacebookAuthProvider.credential(
        data.accessToken
      );
      const {user} = auth().signInWithCredential(facebookCredential);
      console.log('user data', user);
    } catch (error) {
      console.error(error);
    }
  };
  return <FacebookSignIn onFacebookButtonPress={handleFacebookButtonPress} />;
};

이것으로 페이스북 로그인 기능을 적용해보았습니다.