ウェブ上でFirebase Googleログイン

導入

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

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

Capacitorのソーシャルログインプラグインは、AndroidとiOSのネイティブモバイルプラットフォーム向けに設計されており、プラットフォーム固有の認証フローを活用できます。ウェブでは、Firebaseのネイティブを使用する必要があります signInWithPopup method is:

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

セットアップ ステップ

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

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

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

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

   1. こちらのプロジェクトの概要に移動する console.cloud.google.com
   2. メニューを開く Authentication Firebase Authentication メニュー
   3. Firebase Authentication のサインイン方法 Settings 設定する
   4. 設定 Authorized domains

例の実装

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

• ウェブプラットフォーム向けに signInWithPopup ウェブプラットフォーム向けにFirebaseの
• Android/iOSプラットフォーム向けにCapacitor Social Login プラグインを使用
• プラットフォームの自動検出を行う

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

追加のリソース

• Firebase Authentication ドキュメント - Firebase Auth ドキュメントの完全版
• Firebase Google Sign-In for Web - Firebase の公式ガイド: Google Sign-In を Web で使用する
• Google Login セットアップ ガイド - 認可ドメインと OAuthConsentScreen の構成方法のガイド