Firebase Google Login on Web

導入

「Capacitor」Social Login プラグイン ウェブプラットフォームをサポートしていません。ウェブアプリケーションでは、Firebaseの組み込みGoogle Sign-Inを直接使用することをお勧めします。これにより、より信頼性の高いポップアップベースの認証フローが提供されます。

ウェブ上でプラグインを使用しない理由

「Capacitor」Social Login プラグインは、ネイティブモバイルプラットフォーム (Android と iOS) に特化しており、プラットフォーム固有の認証フローを活用できます。ウェブでは、Firebaseのネイティブ signInWithPopup 方法

• ✅ 信頼性が高く、サポートが良好
• ✅ ブラウザセッションストレージを自動的に管理
• ✅ エラー処理が改善されています
• ✅ 追加の設定が必要ありません

セットアップ ステップ

1. Firebase Project の設定

   Firebase プロジェクトで Google Sign-In を有効にしてください:

   • 以下の手順に従ってください Firebase コンソール
   • 以下の手順に従ってください
   • 認証 > サインイン方法

2. Google Sign-In プロバイダーを有効にします

   1. 認可されたドメインを追加します。以下の手順に従ってください console.cloud.google.com
   2. Open the Authentication メニュー
   3. Click on the Settings ボタン
   4. Setup the Authorized domains

Example Implementation

Googleアカウントを使用したFirebaseのソーシャルログイン authUtils.ts サンプルアプリのファイルを参照してください。完全な実装が含まれています。

• Firebaseの signInWithPopup Webプラットフォーム向け
• Capacitor Android/iOSプラットフォーム向けのソーシャルログインプラグインを使用します。
• プラットフォームの自動検出

サンプルでは、Web向けにFirebaseの組み込みメソッドを使用しながら、ネイティブプラットフォーム向けにプラグインを使用する方法を示しています。

追加リソース

• Firebase Authentication Documentation - Firebase Authの完全なドキュメント
• Firebase Google Sign-In for Web - Firebase Google Sign-In on webの公式ガイド
• Google Login セットアップ ガイド - Google Login の認可されたドメインと OAuthConsent スクリーンを設定するためのガイド

Firebase Google Login on Web から続けて

Firebase Google Login on Webを使用している場合 Firebase Google Login on Webを使用して 認証とアカウントフローの計画と実行に使用する場合、Firebase Google Login on Webを Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-loginの実装詳細については @capgo/capacitor-passkey Capacitorの@capgo/capacitor-passkeyの実装詳細については @capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometricの実装詳細については、 2要素認証 Capacitorの2要素認証の実装詳細については