Web에서 Firebase Google Login

소개

Capacitor Social Login 플러그인은 웹 플랫폼을 지원하지 않습니다. 웹 애플리케이션의 경우, 팝업 기반의 더 안정적인 인증 흐름을 제공하는 Firebase 내장 Google Sign-In을 직접 사용하는 것이 좋습니다.

웹에서 플러그인을 사용하지 않는 이유

Capacitor Social Login 플러그인은 플랫폼별 인증 흐름을 활용할 수 있는 네이티브 모바일 플랫폼(Android 및 iOS)을 위해 설계되었습니다. 웹의 경우, Firebase의 네이티브 signInWithPopup 방식은 다음과 같습니다:

• ✅ 더 안정적이며 지원이 원활함
• ✅ 브라우저 세션 스토리지를 자동으로 처리
• ✅ 더 나은 에러 핸들링 제공
• ✅ 추가 설정 불필요

설정 단계

1. Firebase 프로젝트 설정

   Firebase 프로젝트에서 Google Sign-In이 활성화되어 있는지 확인하세요:

   • 다음으로 이동: Firebase Console
   • Authentication > Sign-in method로 이동
   • Google Sign-In 제공업체 활성화

2. 승인된 도메인 추가

   1. 다음 페이지에서 프로젝트 개요로 이동하세요: console.cloud.google.com
   2. 다음 메뉴를 여세요: Authentication 메뉴
   3. 다음을 클릭하세요: Settings 버튼을 클릭하세요
   4. 다음을 설정하세요: Authorized domains

구현 예시

참고하세요: 예제 앱의 authUtils.ts 파일에는 전체 구현이 있습니다. 이 구현은:

• 웹 플랫폼에서는 Firebase의 signInWithPopup 을 사용합니다
• Android/iOS 플랫폼에는 Capacitor Social Login 플러그인을 사용합니다
• 플랫폼 감지를 자동으로 처리합니다

네이티브 플랫폼에서는 플러그인을 사용하고, 웹에서는 Firebase 내장 메서드를 조건부로 사용하는 방법을 보여줍니다.

추가 리소스

• Firebase Authentication 문서 - Firebase Auth 전체 문서
• 웹용 Firebase Google Sign-In - 웹 Google Sign-In 공식 Firebase 가이드
• Google 로그인 설정 가이드 - 승인된 도메인 및 OAuth 동의 화면 구성 가이드

웹 Firebase Google 로그인 다음 단계로 이동

사용 중이라면 Web에서 Firebase Google Login 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login 사용 시 네이티브 기능 구현을 위해, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는