[React Native Expo] 페이스북 로그인하기

앞서 카카오로그인, 네이버로그인은 prebuild를 사용해서 적용했다 하지만 Facebook로그인은 expo에서 공식지원한다!!!!!

근데 ㅎ발 적용하는게 왜 더 어렵지

 

https://docs.expo.dev/guides/facebook-authentication/

Use Facebook authentication

요게 공식문서 사이트

참고로 expo를 통해서  plugin을 추가해주면

prebuild를 다시 해줘야한다..

그렇다.. 그렇기에 prebuild해서 넣는 써드파티라이브러리 기능들을 마지막에 넣어야한다..

sns로그인같은경우 apple -> facebook -> 카카오,네이버 이렇게 적용해주면 편하다

참고로 얘넨 expo 기능이라 prebuild안해도 expo go에서도 적용된다

expo가 미국꺼라 긍가 facebook, apple로그인, 구글로그인 이런건 지원해준다 (카카오,네이버는 한국인들만 써서 그런가보다..)

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

일단 설치해주고

// app.json
{
  "expo": {
    "plugins": [
      [
        "react-native-fbsdk-next",
        {
          "appID": "48127127xxxxxxxx",
          "clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
          "displayName": "RN SDK Demo",
          "scheme": "fb48127127xxxxxxxx",
          "advertiserIDCollectionEnabled": false,
          "autoLogAppEventsEnabled": false,
          "isAutoInitEnabled": true,
          "iosUserTrackingPermission": "This identifier will be used to deliver personalized ads to you."
        }
      ]
    ]
  }
}

app.json에서 위 코드대로 적용해주면됨

 

그러고 페북개발자 계정에 들어가서 앱 생성해주면됨

그럼 내 앱에 들어가서 왼쪽 메뉴에

기본설정 들어가면 앱ID, 시크릿코드, ios, android 등록을 해준다

안드는 앞 sns 시리즈와 마찬가지로 키해시 넣어준다

 

https://coding-levup.tistory.com/52

[React Native Expo] 카카오로그인 prebuild하기

키해시 구하는건 카카오로그인쪽에 자세히 적어놨으니 여기서확인

  import { AccessToken, LoginManager, Profile } from "react-native-fbsdk-next";
  
  //페이스북
  const loginWithFacebook = async (): Promise<void> => {
    try {
      const data = await LoginManager.logInWithPermissions(["public_profile"]);
      setResult("성공 :" + JSON.stringify(data));
    } catch (err) {
      setResult("실패 :" + JSON.stringify(err));
    }
  };
  const getProfileFacebook = async (): Promise<void> => {
    try {
      const data = await Profile.getCurrentProfile();
      setResult("성공 :" + JSON.stringify(data));
    } catch (err) {
      setResult("실패 :" + JSON.stringify(err));
    }
  };

그러고 페북로그인 누르면

페북으로 연결된다(디바이스시에는 페북어플로 바로 연결)