Facebook OAuth는 React Native에서 Firebase 사용

이 강좌에서는 비로컬 응용 프로그램에서Firebase의 인증 모듈을 사용하여 사용자의 페이스북 계정을 인증하는 방법을 배울 것입니다.
Firebase에 대한 자세한 내용은 this link를 참조하십시오.

선결 조건

이 자습서에서는 React 및 React Native에 대한 기본 지식을 소개하지 않습니다.만약 기초 지식에 만족하지 않으신다면, 다음 단계를 계속하기 전에 자세히 검토해 보시기 바랍니다. tutorial

개술

이 문서에서는 다음 단계를 설명합니다.

Development environment .

Cloning the starter code .

Setting up the Firebase project .

Setting up Facebook App

Setting up Firebase Authentication .

Sign-in

Display authenticated screen

Sign out

Recap

개발 환경

IMPORTANT - We will not be using Expo in our project.

this documentation에 따라 개발 환경을 설정한다.
Expo CLI 가 아닌 React Native CLI 의 빠른 부팅을 따르는지 확인합니다.

클론 시작 코드

클론 시작 코드GitHub repository.
너는 여기서 최종 코드GitHub Repository를 볼 수 있다.
이것은 응용 프로그램의 폴더 구조가 될 것입니다.

나는 screens/ 디렉토리에 두 개의 스크린을 설정했습니다.

인증.js: 페이스북 로그인 단추를 사용하여 로그인 과정을 시작합니다.

인증js: 사용자가 로그인해야만 볼 수 있는 화면입니다.

Firebase 프로젝트 작성

Firebase console로 가서 계정에 로그인하고 새 프로젝트를 만듭니다.

새 항목을 만들면 대시보드가 표시됩니다.

이제 안드로이드 아이콘을 누르면Firebase 프로젝트에 안드로이드 프로그램을 추가합니다.

프로그램을 등록하려면 프로그램의 패키지 이름이 필요합니다.AndroidManifest.xml 의 android/app/src/main/ 에서 가방 이름을 찾을 수 있습니다.

다음 단계에서는 google-services.json 파일을 다운로드하여 android/app 디렉터리에 두어야 합니다.
이 파일은 프로그램이 Firebase 서비스에 접근할 수 있도록 하는 설정을 포함합니다.

다음 단계에서는 build.gradle 파일에 설정을 추가해야 합니다.
먼저 google-services 플러그인을 android/build.gradle 파일에 종속 항목으로 추가합니다.

buildscript {
  dependencies {
    // ... other dependencies
    classpath 'com.google.gms:google-services:4.3.3'
  }
}

그런 다음 android/app/build.gradle 파일에 다음 항목을 추가하여 플러그인을 실행합니다.

apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

Firebase에 대해 iOS를 구성하려면 몇 가지 추가 절차가 필요합니다.this documentation에 따라 설치합니다.
마지막으로 Firebase 설정을 완료하기 위해 응용 프로그램에 @react-native-firebase/app 패키지를 설치합니다.

npm install @react-native-firebase/app

페이스북 앱 설정

developers.facebook.com로 가서 개발자 계정을 만듭니다.
Apps 부분으로 이동하여 새 응용 프로그램을 만듭니다.

프로그램을 만들면 프로그램 계기판을 볼 수 있습니다.대시보드에서 응용 프로그램에 페이스북 로그인 제품을 추가합니다.

응용 프로그램 ID 및 응용 프로그램 비밀(다음 단계에서 필요)을 찾으려면 기본 설정으로 이동합니다.

복사본을 만든 후 Add Platform을 찾을 때까지 아래로 스크롤합니다.

클릭하면 안드로이드를 선택합니다.
가방 이름을 기입하면 AndroidManifest.xml의 android/app/src/main/에서 가방 이름을 찾을 수 있습니다.
유명에 대해서는 MainActivity로 기입해 주십시오.
키 해싱에는 openSSL를 사용하여 생성해야 합니다.당신은 Google Code Archive에서 다운로드할 수 있습니다.
K 버전을 다운로드합니다.

다운로드한 후 압축을 풀고 폴더를 복사합니다 C:/.keytool.exe를 검색하면 bin/ 디렉토리의 JDK 디렉토리에서 찾을 수 있습니다.JDK는 보통 C:\Program Files\Java\jdk1.8.0_261\bin와 같은 위치에 있다.
현재 bin/ 폴더에서 실행 중:

./keytool -exportcert -alias androiddebugkey -keystore "C:\Documents and Settings\Administrator.android\debug.keystore" | "C:\OpenSSL\bin\openssl" sha1 -binary |"C:\OpenSSL\bin\openssl" base64

출력:

4iuaxR+bpCEhMEQslBTwAePpz74=

키 해싱을 생성하는 방법에 대한 자세한 내용은 StackOverflow question를 참조하십시오.

iOS 설정에 대해서는 이 가이드Quick Start를 참조하십시오.

Firebase 인증 설정

대시보드의 인증 섹션으로 이동하여 Get Started 버튼을 클릭합니다.프로젝트의 인증 모듈을 사용합니다.

그리고 로그인 방법에서 페이스북 인증을 사용합니다.활성화되면 Facebook 개발자 콘솔에서 애플리케이션 ID와 애플리케이션 기밀을 제공한 다음 Save 키를 누릅니다.

설정을 완료하려면 OAuth를 URI로 다시 지정하여 Facebook 애플리케이션 구성에 추가해야 합니다.OAuth를 복사하여 URI로 리디렉션하고 Facebook 개발자 콘솔로 이동합니다.
제품 아래에서 Facebook 로그인의 설정으로 이동합니다.클라이언트 OAuth 설정에서 유효한 OAuth 리디렉션 URI 아래 붙여넣기 리디렉션 URI.

이제 프로그램으로 돌아가서auth 모듈을 설치합시다.
응용 프로그램에 @react-native-firebase/auth 패키지를 설치합니다.

npm install @react-native-firebase/auth

Firebase Android BoM 성명android/app/build.gradle 파일에서 인증 모듈의 의존 관계를 사용합니다

dependencies {
    // Add these lines
    implementation platform('com.google.firebase:firebase-bom:26.3.0')
    implementation 'com.google.firebase:firebase-auth'
}

다음은 React 네이티브 페이스북 SDK를 설치합니다.

npm install react-native-fbsdk

android/build.gradle에 mavenCentral()의 repositories에 buildscriptandroid/app/build.gradle:

buildscript {
    repositories {
        google()
        jcenter()

        // Add this line
        mavenCentral()
    }
}

dependencies에 android/app/res/values/strings.xml에 다음을 추가합니다.

implementation 'com.facebook.android:facebook-android-sdk:[5,6)'

현재, 프로젝트의 문자열 파일에 페이스북 프로그램 ID를 AndroidManifest.xml 추가해야 합니다.

<resources>
  <string name="app_name">RNFirebaseFacebookAuth</string>
  <string name="facebook_app_id"><-- Your App ID here --></string>
</resources>

uses-permission 파일에 manifest 아래에 meta-data 요소를 추가합니다. (이미 존재하는 경우 무시)

<uses-permission android:name="android.permission.INTERNET" />

다음에 application 요소에 signIn:

<application android:label="@string/app_name" ...>
    ...
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    ...
</application>

다음 단계Getting Started Guide에 따라 iOS에 대한 SDK를 설정합니다.

로그인

응용 프로그램 내.js, 사용자가 로그인 단추를 눌렀을 때 이 함수를 호출하는 try/catch 함수를 만듭니다.로그인 프로세스에서 발생할 수 있는 모든 오류를 표시하기 위해 함수의 모든 코드를 isCancelled 블록에 포장합니다.

async function signIn() {
  try {

    // Code goes here

  } catch (error) {
    alert(error);
  }
}

로그인 관리자를 사용하여 권한으로 로그인합니다.우리는 응용 프로그램이 필요로 하는 일련의 권한을 함수에 전달해야 한다.

const result = await LoginManager.logInWithPermissions([
  'public_profile',
  'email',
]);

결과에 catch 속성이 포함되어 있으면 사용자가 이 과정을 취소한 것을 의미합니다.오류를 던진 다음 signIn 블록으로 처리합시다.

if (result.isCancelled) {
  throw 'User cancelled the login process';
}

로그인한 후에는 사용자 AccessToken을 확보해야 합니다.

const data = await AccessToken.getCurrentAccessToken();

만약 데이터가 비어 있다면, 우리는 오류를 던집니다.

if (!data) {
  throw 'Something went wrong obtaining access token';
}

현재, 우리는 방문 영패를 사용하여 증명서를 만들고, 사용자를 프로그램에 로그인해야 한다.

const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);
return auth().signInWithCredential(facebookCredential);

다음은 onAuthStateChanged 기능의 전체 코드입니다.

async function signIn() {
  try {
    // Login the User and get his public profile and email id.
    const result = await LoginManager.logInWithPermissions([
      'public_profile',
      'email',
    ]);

    // If the user cancels the login process, the result will have a 
    // isCancelled boolean set to true. We can use that to break out of this function.
    if (result.isCancelled) {
      throw 'User cancelled the login process';
    }


    // Get the Access Token 
    const data = await AccessToken.getCurrentAccessToken();

    // If we don't get the access token, then something has went wrong.
    if (!data) {
      throw 'Something went wrong obtaining access token';
    }

    // Use the Access Token to create a facebook credential.
    const facebookCredential = auth.FacebookAuthProvider.credential(data.accessToken);

    // Use the facebook credential to sign in to the application.
    return auth().signInWithCredential(facebookCredential);

  } catch (error) {
    alert(error);
  }
}

인증 화면 표시

사용자의 인증 상태가 응용 프로그램에서 변경될 때마다 user 이벤트를 터치합니다.
이 탐지기에 이벤트 처리 프로그램을 설정할 수 있습니다.이 프로세서는 user 대상을 받을 것입니다.null 객체가 auth().currentUser인 경우 사용자가 로그아웃되었음을 나타내고 그렇지 않으면 사용자가 로그인되었음을 나타냅니다.displayName 애플리케이션의 모든 위치에서 현재 검증된 사용자의 세부 정보를 액세스할 수 있습니다.사용자 대상은 페이스북에서Firebase로 복제된email,photoURL과false를 포함한다.
사용자 객체에 대한 자세한 내용은 documentation를 참조하십시오.
사용자가 인증을 받았는지 추적할 상태를 만듭니다.기본값을 authenticated로 설정해야 합니다.

const [authenticated, setAutheticated] = useState(false);

true 대상이 user 프로세서에 없으면 null 상태onAuthStateChanged를 auth().currentUser로 설정합니다.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAutheticated(true);
  }
})

사용자가 인증을 통과한 경우 인증 화면을 표시해야 합니다.

if (authenticated) {
  return <Authenticated />;
}
return <Authentication signIn={signIn} />;

인증 화면에서 이메일 ID, 이름 및 사용자의 프로필 이미지를 표시하려면 signOut를 사용합니다.

const user = auth().currentUser;
return (
  <View style={styles.screen}>
    <Text style={styles.title}>You're Logged In</Text>
    <Image source={{ uri: user?.photoURL }} style={styles.image} />
    <Text style={styles.text}>{user?.displayName}</Text>
    <Text style={styles.text}>{user?.email}</Text>
    <View style={{ marginTop: 30 }}>
      <Button title="Signout" onPress={() => auth().signOut()} />
    </View>
  </View>
);

퇴장하다

우리는 auth 모듈의 auth 방법을 사용하여 사용자를 응용 프로그램에서 로그아웃해야 한다.
인증 방식으로 signOut 모듈을 가져옵니다.js.

import auth from '@react-native-firebase/auth';

사용자가 로그아웃 단추를 눌렀을 때 onAuthStateChanged 방법을 사용하도록 하겠습니다.

<Button title="Signout" onPress={() => auth().signOut()} />

현재, 사용자가 단추를 눌렀을 때,auth 모듈은 사용자를 프로그램에서 로그아웃합니다.이것은 탐지기 null 를 촉발할 것이다.처리 프로그램은 user 대상이 아니라 false 대상을 받을 것이다.
따라서 null를 받으면 인증 상태를 build.gradle로 설정해야 합니다.

auth().onAuthStateChanged((user) => {
  if(user) {
    setAuthenticated(true);
  } else {
    setAuthenticated(false);
  }
})

한번 되돌아보도록 하겠습니다.

우리는 개발 환경을 설정하고 React 원본 응용 프로그램을 만들었다.

우리는 시작 코드를 복제했다.

개발자 계정이 있는 페이스북 앱을 만들고 이 앱에 페이스북 로그인을 사용했습니다.

Firebase 프로젝트를 만들었고 프로젝트에서 App ID와 App Secret을 사용하여 페이스북 인증을 사용했습니다.

필요한 의존항(914)과 필요한 의존항(914)을 패키지(914)에 추가했습니다.

우리는 strings.xml 파일에 응용 ID를 추가했고 AndroidManifest.xml 파일에 몇 가지 설정을 추가했다.

페이스북 SDK를 사용하여 사용자의 페이스북 액세스 영패를 사용하여 로그인하는 함수를 작성했습니다.

사용자의 인증 상태를 추적하고 onAuthStateChanged 프로세서로 상태를 업데이트하는 상태를 만들었습니다.

사용자가 인증을 통과했을 때 인증된 화면을 보여 줍니다.

인증 화면에서 사용자를 로그아웃하려면 auth 모듈을 사용합니다.

축하해,🥳 해냈어.
읽어주셔서 감사합니다.
즐거운 코딩!