WebでのFirebase Google Login

はじめに

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

Webでプラグインを使用しない理由

Capacitor Social Loginプラグインは、プラットフォーム固有の認証フローを活用できるネイティブモバイルプラットフォーム（AndroidおよびiOS）向けに設計されています。Webの場合は、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 の Web プラットフォーム向け設定
• Android/iOSプラットフォームでは Capacitor Social Login plugin を使用します
• プラットフォームの判定は自動で行われます

この例では、ネイティブプラットフォームではプラグインを使用し、WebではFirebaseの組み込みメソッドを条件付きで使用する方法を示しています。

関連リソース

• Firebase Authentication ドキュメント - Firebase Auth の完全なドキュメント
• Web用 Firebase Google Sign-In - Webでの Google Sign-In に関する公式ガイド
• Googleログイン設定ガイド - 承認済みドメインとOAuth同意画面の設定ガイド

Firebase Googleログイン (Web) から次へ進む

〜を使用している場合 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要素認証の実装詳細についてはこちら。