Google Authentication 로그인 연결 ✦ Firebase 셋업 #3

안녕하세요, ARCOA의 지안입니다! 👋

 

지난 포스트에서 프로젝트 생성과 Blaze 요금제 설정을 마쳤죠. 이번 글에서는 Authentication(인증 서비스) 셋업과 Google 로그인 활성화을 진행하겠습니다.

 

Firebase Auth 설정은 최대 5분 소요됩니다.

 

 

Authentication이란?

Authentication은 사용자가 앱이나 웹 서비스에 로그인하거나 회원가입할 때 본인 인증을 처리하는 Firebase의 핵심 서비스입니다. 이메일, 전화번호, SNS 계정(Google, Apple, Facebook 등)으로 손쉽게 인증 로직을 구현할 수 있어요.

 

 

 

Step 1: Firebase Authentication 접속

1-1. Firebase 접속

• https://console.firebase.google.com 접속하여 본인의 프로젝트 선택
• 왼쪽 메뉴에서 (그림 1) ✦① 빌드 → ✦② Authentication → ✦③ 시작하기 클릭

그림 1. Firebase Authentication

 

 

 

Step 2: Google 로그인 활성화

2-1. 로그인 방법 설정

• 상단 탭의 (그림 2) ✦④ 로그인 방법/로그인 제공업체 → ✦⑤ Google 클릭

그림 2. Authentication 로그인 방법

 

2-2. Google 로그인 활성화

• (그림 3) ✦⑥ 사용 설정 토글은 ON 설정 ✅
• (그림 3) ✦⑦ 프로젝트의 공개 이름은 본인의 서비스 이름으로 수정
• (그림 3) ✦⑧ 프로젝트 지원 이메일은 Firebase 가입 이메일 또는 본인 Gmail 주소 선택 
• 하단의 선택사항 (클라이언트 ID, 웹 SDK 등)은 Skip 

그림 3. Google 로그인 사용 설정

TIP 외부 프로젝트의 클라이언트 ID 허용 목록 추가

- 프로젝트 A: arcoa-ace (Firebase)
- 프로젝트 B: arcoa-ace-test (다른 Firebase) → 같은 앱인데 두 프로젝트에서 사용

위와 같은 경우에 클라이언트 ID 허용 목록 필요 ✅
제공업체 오른쪽에 편집 연필 아이콘 생겨서, 추후 필요할 때 추가 가능하므로 지금은 Skip

TIP 웹 SDK 구성

FlutterFlow 사용 시:
- FlutterFlow가 자동으로 SDK 구성
- 웹 클라이언트 ID, 비밀번호 자동 생성해서 수동 입력 불필요 ✅

직접 코딩 시에만 필요:
- React, Vue, 순수 JavaScript 등 
- 노코드 개발로 FlutterFlow를 사용하므로 지금은 Skip

 

2-3. Google 로그인 활성 완료

• 제공 업체 Google이 (그림 4) ✦⑨ ✅ 사용 설정됨 확인
• (그림 4) ✦⑩ 연필 아이콘을 통해 외부 클라이언트/웹 SDK 등 설정 가능

그림 4. Google 로그인 사용 설정 완료

TIP SMS 다중 인증(MFA)
MFA(Multi-Factor Authentication, 다중 인증)는 계정 로그인 시 두 가지 이상의 인증(예: 비밀번호+SMS 인증코드)을 요구하는 보안 기능으로 해킹·계정 도용 위험에 도움됩니다.
금융, 보안, 기업용, 매우 민감한 서비스라면, 출시 시점에 MFA를 통해 보안을 강화하면 됩니다.

 

 

 

 

✅ 완료 체크리스트 

[  ] Firebase Authentication 활성화

[  ] 프로젝트 이름과 지원 이메일 설정
[  ] Google 로그인 사용 설정됨

 

 

 

다음 글

✦ 디자이너(비개발자)의 Firebase 셋업

├ 1 ✦ Firebase 프로젝트 생성 완료
├ 2 ✦ Blaze 요금제 완전 가이드 완료
├ 3 ✦ Google Authentication 로그인 연결 완료

├ 4 ✦ Google Auth FlutterFlow 연동 준비
└ 5 ✦ Apple Authentication 로그인 연결

 

다음은 Google Auth FlutterFlow 연동 준비를 진행하겠습니다 ✦

Google Auth FlutterFlow 연동 준비 ✦ Firebase 셋업 #5