Firebase Google Login on Web

概要

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

なぜWeb上でプラグインを使用しない?

Capacitorのソーシャルログインプラグインは、AndroidとiOSのネイティブモバイルプラットフォーム向けに設計されており、プラットフォーム固有の認証フローを利用できます。Webでは、Firebaseのネイティブ signInWithPopup ✅ 信頼性が高く、サポートが良好

• ✅ ブラウザセッションストレージを自動的に管理
• ✅ エラー処理が良好
• method is:
• ✅ 追加設定不要

セットアップ手順

1. Firebase Projectの設定

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

   • 以下のサイトにアクセスしてください Firebaseコンソール
   • 認証 > サインイン方法に移動してください
   • Google Sign-Inプロバイダーを有効にします

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

   1. 以下のサイトにアクセスしてください console.cloud.google.com
   2. Open the Authentication メニュー
   3. Click on the Settings ボタン
   4. Setup the Authorized domains

例の実装

確認してください targetLanguage":"Japanese","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["authUtils.ts","","Firebaseの","webプラットフォーム向け","__CAPGO_KEEP_0__のソーシャルログインプラグインを使用するAndroid/iOSプラットフォーム向け","自動でプラットフォームの検出を行う","この例では、Firebaseの組み込みメソッドをweb向けに使用し、プラグインをnativeプラットフォーム向けに使用する方法を示している","追加リソース","追加リソースのセクション","Firebase Authentication Documentation","- Firebase Authの完全なドキュメント","Firebase Google Sign-In for Web"]} targetLanguage

• protectedTokens signInWithPopup texts
• Uses Capacitor Social Login plugin for Android/iOS platforms
• file in the example app for a complete implementation that:

Uses Firebase’s

for web platforms

• Handles platform detection automatically The example shows how to conditionally use Firebase’s built-in method for web while using the plugin for native platforms.
• Additional Resources - Firebase の公式ガイド: Web 上の Google Sign-In
• Google ログイン設定ガイド - 認可されたドメインと OAuthConsentScreen の構成ガイド

Firebase Google Login on Web から続けて

あなたが Firebase Google Login on Web を使用して認証とアカウントフローの計画を行っている場合、 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 2要素認証 2要素認証の実装詳細についてはこちらを参照してください。