Google Login on Web

導入

このガイドでは、GoogleログインとCapgoのWebアプリケーション用のソーシャルログインを設定する方法を学びます。 既に一般的な設定ガイドを読んだと想定しています。 Web上でのGoogleログインの使用.

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

__CAPGO_KEEP_0__のインストール、同期、およびソースマークダウンガイドを含みます。

1. Using Google login on the web is rather simple. In order to use it, you have to do the following:__CAPGO_KEEP_0__

   Note

   If you have already configured Google Login for Android, you can skip this step as you’ve already created a web client. You can proceed directly to step 2.

   1. Click on the search bar

      

   2. Search for credentials and click on the APIs and Services option (number 2 on the screenshot)

      

   3. Click on the create credentials

      

   4. Select OAuth client ID

      

   5. Select the Application type as Web application

      

   6. Name your client and click Create

      

   7. Copy the client ID, you’ll use this as the webClientId in your application

      

2. Configure the web client in the Google Console

   1. Please open the 資格情報ページ とWebクライアントをクリックしてください

      

   2. ここで、 Authorized JavaScript originsあなたのアプリで使用する可能性のあるすべてのアドレスを含むように追加してください。私の場合は、localhostのみを使用しますが、カスタムポートを使用しているため、両方を追加する必要があります。 ONLY そして http://localhost をクリックしてください http://localhost:5173

      1. Authorized JavaScript originsセクションのADD URIボタン add URI

         

      2. localhostのURLが入力されたADD URIダイアログ

         

      3. Please repeat until you added all the URLs

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

         

   3. ここで、以下のいずれかを追加してください Authorized redirect URIsCapacitorSocialLogin プラグインを使用するページによって異なりますが、私の場合は http://localhost:5173/auth

      1. ここをクリックしてください ADD URI

         

      2. ADD URI ボタンをクリックしてください ADD URL URL を入力して、

         

   4. ADD URI ダイアログにリダイレクト URL を入力 save

      

3. 下部の Web クライアント設定の "保存" ボタンをクリックしてください login from JavaScript like so:

   1. First, import SocialLogin

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

   2. Then, call initialize. This should be called ONLY once.

      // 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 Redirect Handling

   When using Google login on web, you MUST call any function from the plugin when the redirect happens to initialize the plugin so it can handle the redirect and close the popup window. You can call either isLoggedIn() OR initialize() - both will trigger the redirect handling:

   // 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ログインから続けてください (Web)

If you are using Google Login on Web to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication 2要素認証の実装詳細について。