コンテンツへスキップ
Capgo

WebでのFirebase Googleログイン

はじめに

Section titled “はじめに”

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

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

Section titled “WebでプラグインをWebで使用しない理由”

Capacitor Social Loginプラグインは、プラットフォーム固有の認証フローを活用できるネイティブモバイルプラットフォーム（AndroidとiOS）向けに設計されています。Webの場合、FirebaseのネイティブsignInWithPopupメソッドは次の点で優れています:

  • ✅ より信頼性が高く、よりサポートされている
  • ✅ ブラウザセッションストレージを自動的に処理
  • ✅ より良いエラー処理を提供
  • ✅ 追加の設定が不要

設定手順

Section titled “設定手順”

  1. Firebaseプロジェクトを設定する

    FirebaseプロジェクトでGoogleサインインが有効になっていることを確認してください:

    • Firebase Consoleにアクセスします
    • Authentication > Sign-in methodに移動します
    • Googleサインインプロバイダーを有効にします

  2. 承認済みドメインを追加します

    1. console.cloud.google.comでプロジェクト概要に移動します Firebase Project Overview
    2. Authenticationメニューを開きます Firebase Authentication Menu
    3. Settingsボタンをクリックします Firebase Authentication Sign-in Method Button
    4. Authorized domainsを設定します Firebase Authentication Settings Authorized Domains

実装例

Section titled “実装例”

サンプルアプリのauthUtils.tsファイルで、次を実行する完全な実装を参照してください:

  • Webプラットフォーム用にFirebaseのsignInWithPopupを使用
  • Android/iOSプラットフォーム用にCapacitor Social Loginプラグインを使用
  • プラットフォーム検出を自動的に処理

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

追加リソース

Section titled “追加リソース”