WebでのGoogle Login

はじめに

このガイドでは、Webアプリケーションで Capgo Social Login を使用して Google Login をセットアップする方法を説明します。 事前に以下の内容を確認済みであることを前提としています。 一般的なセットアップガイド.

WebでGoogleログインを使う

Webでの Google Login の利用は非常に簡単です。 利用するには、以下の手順を行ってください。

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

   注意

   Android向けにGoogle Loginの設定が完了している場合は、すでにWebクライアントが作成されているため、このステップをスキップして直接ステップ2に進むことができます。

   1. 検索バーをクリックします

      

   2. を検索し、 credentials 次をクリックします： APIs and Services オプション（スクリーンショットの2番）

      

   3. 次の create credentials

      

   4. 選択します OAuth client ID

      

   5. 次の Application type として Web application

      

   6. クライアント名を入力してクリックします Create

      

   7. クライアントIDをコピーしてください。これは以下の用途で使用します： webClientId アプリケーション内での使用

      

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

   1. 以下を開いてください： 認証情報（credentials）ページ 対象のWebクライアントをクリックします

      

   2. 次に、以下を追加してください： Authorized JavaScript originsこれには、アプリで使用する可能性のあるすべてのURLを含めます。今回の例では、 のみ localhostを使用しますが、カスタムポートを使用しているため、両方を追加する必要があります。 http://localhost と http://localhost:5173

      1. 以下をクリックしてください： add URI

         

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

         

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

      4. 完了すると、画面は以下のようになります

         

   3. 次に、以下を追加してください： Authorized redirect URIsこれは CapacitorSocialLogin プラグインを使用するページによって異なります。今回は、 http://localhost:5173/auth

      1. 以下をクリックしてください： ADD URI

         

      2. URL を入力して、 ADD URL を再度クリックします

         

   4. クリック save

      

3. これで、準備が整いました。以下のように login から JavaScript で呼び出せます：

   1. まず、 SocialLogin

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

   2. 次に、initialize を呼び出します。これは必ず一度だけ呼び出すようにしてください。

      // 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',
         }
       })
      })

   Web リダイレクトの処理

   WebでGoogleログインを使う場合、 必ず リダイレクトが発生したタイミングでプラグインの関数を呼び出してプラグインを初期化してください。これにより、プラグインがリダイレクトを処理し、ポップアップウィンドウを閉じることができます。呼び出す関数は次のいずれかです： 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 tokenが必要な場合は、 SocialLogin.login({ provider: 'google', ... }) を再度呼び出してください。

   3. クリック時に SocialLogin.login を呼び出すログインボタンを作成してください。

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

WebでのGoogle Loginの続き

使用している場合 WebでのGoogle Login 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。