react native expo에서fairebase를 사용하여 페이스북에 로그인합니다.

개요

제목처럼 여기저기 기사가 난 것 같은데 잘 안 되네요.여러 차례 총결산을 해 보았다.
expo SDK44
firebase 9.6.11
expo-facebook 12.1.1

대전제

브라우저와 QR코드를 통해 스마트폰Expo GO으로 시작한 앱은 실행할 수 없다.standalone의build 프로그램에서만 실행할 수 있음을 주의하십시오.

eas build --profile preview --platform ios

실기로 시험해 봤어요.ios 시뮬레이터를 사용하여 테스트할 때"simulator": true가 필요합니다.
나는 해 본 적이 없다expo build. 하지만 움직일 것이다.

expo build:ios

코드

// app.config.ts(app.json)
...
    facebookScheme: "fb[FACEBOOK APP ID]",
    facebookAppId: "[FACEBOOK APP ID]",
    facebookDisplayName: "[FACEBOOK APP NAME]"
  }
}

import { FacebookAuthProvider, signInWithCredential } from "firebase/auth";
import * as Facebook from 'expo-facebook';
import Constants from 'expo-constants';
import { auth } from './firebase';

<Button onPress={e => {
  Facebook.initializeAsync({appId: Constants.manifest?.facebookAppId}).then(() => {
    return Facebook.logInWithReadPermissionsAsync({ permissions: ['public_profile', 'email'] })
  }).then(result => {
    if(result.type == 'success'){
      const credential = FacebookAuthProvider.credential(result.token);
      return signInWithCredential(auth, credential)
    }

    return;
  }).catch(error => {
    console.log('error', error)
  })

}}>
  Facebookでログイン
</Button>

해설

Expo GO 시작한 애플리케이션을 통해 다음 오류가 발생합니다.

FirebaseError: Firebase: Unsuccessful debug_token response from Facebook: {"error":{"message":"(#100) The App_id in the input_token did not match the Viewing App","type":"OAuthException","code":100,"fbtrace_id":"Aw6Cd98alCiqYT9wtlw940V"}} (auth/invalid-credential).

경유Expo GO로 시작한 앱이라면 Expo GO 페이스북 앱 ID가 날아가 페이스북으로Expo GO 로그인을 시도한 것 같다.

페이스북 앱 ID와 Firebase 콘솔가 등록한 자신의 앱은 당연히 다르다The App_id in the input_token did not match the Viewing App.
구축된 앱으로 실행하면 자신의 페이스북 앱 ID는 날아가지만, 첫 번째 코드와 같은 기술app.json은 없다.

Facebook.initializeAsync({appId: "[FACEBOOK APP ID]", appName: "[[FACEBOOK APP NAME]]"})

과 initializeAsync에 맡겼지만 다음 오류로 로그인할 수 없습니다.

Error: fb[FACEBOOK APP ID] is not registered as a URL scheme. Please add it in your Info.plist

여러 차례의 구축과 시도를 거쳐 최소한의 앱.제이슨에는 다음과 같은 두 가지 설정이 필요할 것 같다.

// app.config.ts(app.json)
...
    facebookScheme: "fb[FACEBOOK APP ID]",
    facebookDisplayName: "[FACEBOOK APP NAME]"
  }
}

어쨌든app.json 필요하면 여기서 모두 관리하는 것이 좋습니다. FB와 관련된 설정을 여기로 이동하고 코드를 Facebook.initializeAsync({})로 설정해 보았지만 applId만 파라미터에 넘기지 않으면 안 됩니다.

Error: No FacebookAppId configured, required for initialization. Please ensure that you're either providing `appId` to `initializeAsync` as an argument or inside Info.plist.

에서 내보낸 응용 프로그램Info.plist은 상하문 메뉴Show package contents에서 정확한 FacebookAppId를 썼음에도 불구하고 상기 오류를 확인할 수 있습니다.이것만 initializeAsync에 전달해야 하는 매개 변수입니다.
이렇게 되자 코드가 안정되었다.
뭐랄까, 각종 오류 정보와 문서는 모두 다른 규격을 가지고 있다.왜 이렇게 귀찮아?

참조 링크

공식 문서

https://docs.expo.dev/versions/latest/sdk/facebook/
https://firebase.google.com/docs/auth/web/facebook-login
참고로 이 Firebase의 공식 사이트signInWithRedirect와 signInWithPopup는 브라우저에서만 Expo를 사용할 수 없습니다.조합expo-facebook과 FirebasesignInWithCredential로 로그인합니다.

참고 가치가 있는 신청서

https://github.com/expo/expo/issues/10024
https://qiita.com/YSTM_k/items/c3296ea02c30bb90c8be