ウェブ上でFirebase Googleログイン

導入

Capacitor Social Login プラグイン Webプラットフォームではサポートされていません。Webアプリケーションでは、より信頼性の高いポップアップベースの認証フローを提供するFirebaseの組み込みGoogle Sign-Inを使用する必要があります。

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

Capacitor Social Login プラグインは、AndroidおよびiOSのネイティブモバイルプラットフォーム向けに設計されており、プラットフォーム固有の認証フローを活用できます。Webでは、Firebaseのネイティブ signInWithPopup method is:

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

セットアップ手順

1. Firebase Projectの設定

   Google Sign-Inを有効にしたFirebaseプロジェクトがあります:

   • Go to Firebase Console
   • Authentication > Sign-in methodに移動してください
   • Google Sign-In を有効にする

2. 認可されたドメインを追加する

   1. console.cloud.google.com からプロジェクトの概要に移動する console.cloud.google.com
   2. メニューを開く Authentication Firebase Authentication メニュー
   3. Firebase Authentication Sign-in Method ボタン Settings 設定する
   4. __CAPGO_KEEP_0__ Authorized domains

例の実装

以下の authUtils.ts サンプルアプリのファイルで、以下の実装が完了していることを確認してください。

• Firebaseの signInWithPopup Webプラットフォーム向け
• Capacitor
• Android/iOSプラットフォーム向けのソーシャルログインプラグインを使用

プラットフォームの自動検出

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

• Firebase Authentication ドキュメント - Firebase Auth ドキュメントの完全版
• Firebase Google Sign-In for Web - Firebaseのオフィシャルガイド: Google Sign-In on web
• Google Login セットアップ ガイド - 認可ドメインとOAuth承認画面の設定ガイド