Googleログインのウェブ

導入

このガイドでは、Webアプリケーション用にGoogleログインを設定する方法を学びます。 Capgo Social Loginのセットアップ手順を実行する前には、一般的なセットアップガイドをすでに読んだことを前提としています。 一般的なセットアップガイド.

Web上でGoogleログインを使用する

ウェブ上でGoogleログインを使用することは比較的簡単です。 使用するには、以下の手順を実行する必要があります。

1. Google Consoleでウェブクライアントを作成する

   注記

   AndroidでGoogleログインを設定済みの場合は、このステップをスキップできます。ウェブクライアントはすでに作成されているため、直接ステップ2に進むことができます。

   1. 検索バーをクリックする

      

   2. で検索する credentials オプション（スクリーンショットの2番目）をクリックする APIs and Services APIsとServicesが強調表示されたクレデンシャルオプションを表示する検索結果

      

   3. クリックしてください create credentials

      

   4. 選択してください OAuth client ID

      

   5. 選択してください Application type オプション Web application

      

   6. 名前を付け、クリックしてください Create

      

   7. クライアントIDをコピーしてください webClientId アプリケーション内で使用します

      

2. Google ConsoleでWebクライアントを設定

   1. Google Consoleを開いてください 資格情報ページ Webクライアントをクリック

      

   2. 資格情報ページに追加してください Authorized JavaScript originsこの設定には、すべてのアプリで使用する可能性のあるアドレスを含める必要があります。 この場合、ローカルホストのみを使用しますが、カスタムポートを使用しているため、両方のアドレスを追加する必要があります。 次に、 http://localhost 資格情報ページを開いてください http://localhost:5173

      1. JavaScriptオリジンが承認されたセクションにADD URIボタンをクリックしてください add URI

         

      2. URLを入力してください

         

      3. URLをすべて追加するまで、繰り返してください

      4. 完了したら、画面は次のようになります

         

   3. 次に、以下のものを追加してください Authorized redirect URIsCapacitorSocialLoginプラグインを使用するページに応じて、必要なものが異なります。私の場合は、以下のページを使用する予定です http://localhost:5173/auth

      1. 以下のボタンをクリックしてください ADD URI

         

      2. URLを入力してください ADD URL ADD URIダイアログ

         

   4. クリック save

      

3. ここで、JavaScriptから呼び出す準備ができているはずです。 login importするようにしてください。

   1. クリップボードにコピー SocialLogin

      import { SocialLogin } from '@capgo/capacitor-social-login';

   2. クリップボードにコピー

      // onMounted is Vue specific
      // webClientId is the client ID you got in the web client creation step not the android client ID.
      onMounted(() => {
       SocialLogin.initialize({
         google: {
           webClientId: '673324426943-avl4v9ubdas7a0u7igf7in03pdj1dkmg.apps.googleusercontent.com',
         }
       })
      })

   GoogleログインをWebで使用する場合、

   必ずしも MUST プラグインから呼び出された関数を、リダイレクトが発生したときに呼び出すことで、プラグインを初期化し、リダイレクトとポップアップウィンドウのクローズを処理できるようにします。どちらかを呼び出すことができます。 isLoggedIn() または initialize() - 両方をトリガーすると、リダイレクト処理が発生します:

   // Option 1: Call isLoggedIn when the redirect page loads
   SocialLogin.isLoggedIn({ provider: 'google' }).catch(() => {
     // Ignore the result, this is just to initialize the plugin
   });
   
   // Option 2: Call initialize when the redirect page loads
   SocialLogin.initialize({
     google: {
       webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
     }
   }).catch(() => {
     // Ignore any errors, this is just to handle the redirect
   });

   注意

   Web上では、 SocialLogin.refresh({ provider: 'google' }) が実装されていません。 google.mode: 'online'Web上で新しいGoogleトークンが必要な場合は、再度 SocialLogin.login({ provider: 'google', ... }) を呼び出してください。

   3. ログインボタンを作成し、クリックされたときに SocialLogin.login を呼び出します。

      const res = await SocialLogin.login({
       provider: 'google',
       options: {}
      })
      // Handle the response
      console.log(JSON.stringify(res));

Google Login on Webから続ける

あなたが使用している場合 Google Login on Web 認証とアカウントフローの計画に使用している場合 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について