Google OAuth에서 Firebase 및 React Native 사용

OAuth는 액세스 권한을 부여하는 개방 표준으로 일반적으로 인터넷 사용자 권한 수여 사이트나 응용 프로그램이 다른 사이트의 정보를 방문하는 데 사용되며 giving them the passwords이 필요하지 않다.
이 자습서에서는 비로컬 애플리케이션에서 Firebase의 인증 모듈을 사용하여 사용자의 Google 계정을 인증하는 방법을 학습합니다.
Firebase에 대한 자세한 내용은 here을 참조하십시오.

선결 조건

이 자습서에서는 React 및 React Native에 대한 기본 지식을 소개하지 않습니다.만약 기초 지식에 만족하지 않으신다면, 다음 단계를 계속하기 전에 tutorial을 보시기를 강력히 권장합니다.

개술

Development environment

Cloning the starter code

Setting up the Firebase project

Setting up Firebase Authentication

Sign-in

Display authenticated screen

Sign out

Recap

개발 환경

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

환경을 설정하고 this documentation에 따라 새 React 애플리케이션을 만들 수 있습니다.
Expo CLI 가 아닌 React Native CLI 의 빠른 부팅을 따르는지 확인합니다.

클론 시작 코드

인증 모듈에 더 많은 관심을 가지려면 GitHub에서 이 repository 클론 시작 코드를 사용하십시오.
설명은 저장소의 README을 참조하십시오.
최종 코드는 이 GitHub Repository을 참조하십시오.
저장소의 폴더 구조:
screens/ 디렉토리에 두 개의 스크린을 설치했습니다.

Authentication.js: 구글 로그인 버튼을 사용하여 로그인 과정을 시작하는 화면.

Authenticated.js: 사용자는 로그인한 후에만 이 화면을 볼 수 있습니다.

Firebase 프로젝트 작성

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

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

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

프로그램을 등록하려면 프로그램의 패키지 이름이 필요합니다.AndroidManifest.xml의 android/app/src/main/ 파일에서 패키지 이름을 찾을 수 있습니다.
Debug signing certificate SHA-1이 더 필요합니다.프로젝트 디렉터리에서 다음 명령을 실행할 수 있습니다.

cd android && ./gradlew signingReport

이것은 프로그램의 서명 인증서를 생성합니다.
다음과 같은 출력을 얻을 수 있습니다.

Task :app:signingReport
Variant: debugUnitTest
Config: debug
Store: C:\Users\Mohan\.android\debug.keystore
Alias: AndroidDebugKey
MD5: 5F:BB:9E:98:5E:E7:E6:29:19:28:61:4F:42:B9:74:AB
SHA1: 9E:61:75:0E:5C:F4:EB:B4:EB:9D:B3:13:5F:50:D6:AB:2E:4E:12:0D
SHA-256: 6C:BB:49:66:18:B9:7F:74:49:B5:56:D0:24:43:6A:1B:41:91:97:A3:2E:7C:4A:6E:59:40:8F:5C:74:6F:CC:93
Valid until: Friday, December 23, 2050

Make sure you are copying the SHA1 from Task :app:signingReport and not from any other Task.

SHA1 값을 복사하여 Firebase 콘솔에 붙여넣습니다.
이제 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

Firebase 인증 설정

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

다음은 로그인 방법에서 전화 인증을 사용해야 합니다.활성화되면 Save 키를 누릅니다.

이제 프로그램으로 돌아가서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'
}

이렇게 해서 Firebase 인증 모듈은 우리 응용 프로그램에서 구축되었다.

로그인

google-signin 라이브러리는 공식 구글 로그인 라이브러리의 포장이다.
이 라이브러리를 사용하여 자격 증명을 만들고 Firebase를 사용하여 로그인해야 합니다.
먼저 webClientId을 사용하여 Google SDK를 초기화해야 합니다. google-services.json의 android/app 파일에서 client/oauth_client/client_id 속성을 찾을 수 있습니다.
App.js에서 google-signin 라이브러리와 Firebase auth 모듈을 가져옵니다.

import auth from '@react-native-firebase/auth';
import { GoogleSignin } from '@react-native-community/google-signin';

SDK를 초기화하려면 GoogleSignin.configure 호출 방법을 사용해야 합니다.webClientId 함수 이외에 이 동작을 실행해야 합니다.

GoogleSignin.configure({
  webClientId:
    '260759292128-4h94uja4bu3ad9ci5qqagubi6k1m0jfv.apps.googleusercontent.com',
});

이제 Google SDK를 초기화하여 사용자를 확인합니다.
프로그램 코드에서, 나는 App() 파일에 onGoogleButtonPress이라는 함수를 설정했다.이 함수는 App.js으로 Authentication 화면에 전달된 후 구글 로그인 버튼의 prop 속성으로 설정됩니다.
따라서 사용자가 구글 로그인 버튼을 누르면 onPress 파일의 이 함수를 호출한다.
코드를 작성하여 App.js 함수에 사용자를 로그인합시다.

async function onGoogleButtonPress() {
  // Sign-in Process here
}

우선 onGoogleButtonPress 방법으로 구글에서 사용자의 idToken을 얻어야 한다.이것은 비동기 함수이기 때문에 GoogleSignin.signIn() 키워드를 사용하여 약속이 해결되기를 기다리겠습니다.

// Get the users ID token
const { idToken } = await GoogleSignin.signIn();

현재 우리는 await을 사용하여 구글 증명서를 만들어야 한다.

const googleCredential = auth.GoogleAuthProvider.credential(idToken);

사용자를 위한 Google 자격 증명을 사용하려면 Firebase auth 모듈의 idToken 방법을 사용하여 사용자를 응용 프로그램에 로그인해야 합니다.

return auth().signInWithCredential(googleCredential);

이것은 signInWithCredential 함수의 전체 코드다.

async function onGoogleButtonPress() {
  const { idToken } = await GoogleSignin.signIn();
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  return auth().signInWithCredential(googleCredential);
}

인증 화면 표시

사용자의 인증 상태가 응용 프로그램에서 변경되면 onGoogleButtonPress 이벤트가 터치됩니다.
이 탐지기에 이벤트 처리 프로그램을 설정할 수 있습니다.이 프로세서는 onAuthStateChanged 객체를 수신합니다.user 객체가 user이면 로그아웃된 사용자이고 그렇지 않으면 로그인한 사용자입니다.
애플리케이션의 어느 곳에서든 null을 사용하여 현재 검증된 사용자의 세부 정보를 액세스할 수 있습니다.사용자 객체에는 Google에서 Firebase로 복제된 auth().currentUser, displayName 및 email이 포함됩니다.
사용자 객체에 대한 자세한 내용은 documentation을 참조하십시오.
사용자가 인증을 받았는지 추적할 상태를 만듭니다.기본값을 photoURL으로 설정해야 합니다.

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

만약에 false 대상이 authenticated 처리 프로그램에서 true이 아니라면 user 상태를 null으로 설정합니다.

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

사용자가 인증을 거치면 onAuthStateChanged 화면 구성 요소를 표시해야 합니다.

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

return <Authentication onGoogleButtonPress={onGoogleButtonPress} />;

나는 Authenticated 화면에서 auth().currentUser을 사용하여 이메일 주소, 이름과 사용자의 개인 정보 그림을 표시한다.

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 모듈의 Authenticated 방법을 사용하여 사용자를 응용 프로그램에서 로그아웃해야 한다.signOut 모듈을 인증 방식으로 가져옵니다.js.

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

사용자가 로그아웃 단추를 눌렀을 때, 우리는 auth 방법을 호출했다.

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

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

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

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

개발 환경을 설정하고 React 네이티브 애플리케이션을 만들었습니다.

시작 코드를 복제했습니다.

Firebase 프로젝트를 만들고 Google 인증을 사용합니다.

필요한 패키지를 설치하고 null 파일에 의존 항목을 추가했습니다.

Google SDK를 구성하고 사용자가 Google 로그인 버튼을 누를 때 로그인합니다.

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

사용자가 인증을 통과하면 onAuthStateChanged 화면이 표시됩니다.

Authenticated 모듈을 사용하여 auth 화면에서 사용자를 로그아웃했습니다.

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