파이어베이스 (인증) - 구글 OAuth

파이어베이스의 인증 서비스는 전통적인 아이디와 비밀번호를 활용하는 방법 외에도 다양한 인증 수단을 제공합니다. 오늘은 구글이나 페이스북 등에 저장된 사용자 정보를 통해 인증하는 방식에 대해서 알아보겠습니다.

목차

• 파이어베이스에서 설정하기
• 애플리케이션에서 서비스 활용하기
  • 애플리케이션과 파이어베이스 연결
  • 앵귤러
  • 리액트

파이어베이스에서 설정하기

좌측메뉴에서 Build -> Authentication 순으로 선택

Get started 선택

Google 선택

Enable 버튼 켜고 저장

생성완료

애플리케이션에서 서비스 활용하기

애플리케이션과 파이어베이스 연결

파이어베이스 - 연결하기 (앵귤러, 리액트)

앵귤러

파이어베이스를 애플리케이션과 연동한 뒤 아래와 같이 auth모듈을 추가합니다.

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/auth/login/login.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule, // Auth module
  ],
  providers: [
    
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

리액트

로그인에 필요한 서비스들 가져오기

import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth'

인증 초기화

const auth = getAuth()

구글 프로바이더 초기화

const provider = new GoogleAuthProvider()

로그인 함수 실행

const result = await signInWithPopup(auth, provider)

---

데이터베이스에서 유저를 참고할 필요가 있는 경우 유저 테이블을 데이터베이스에 만들어 주어야 합니다.

 

예를 들어, 파이어스토어를 활용한다면 아래처럼 파이어베이스 구성 파일, 다큐먼트 등 필요한 기능들을 가져오고

import { db } from '../firebase.config'
import { doc, setDoc, getDoc } from 'firebase/firestore'

데이터베이스 다큐먼트에 저장. 주의할 점은 일반 인증서비스처럼 기본적으로 생성되는 데이터가 없기 때문에 데이터베이스에 해당 유저가 있는지 확인 후 저장합니다.

await setDoc(doc(db, '<collectionName>', <user>.uid), <newUser>)

이상으로 파이어베이스 구글로그인에 대해서 알아보았습니다.