Google ログイン

導入

CapgoのWebアプリケーション用Social Loginの設定方法を学びます。このガイドでは、Googleログインの設定方法について説明します。一般的な設定ガイドをすでに読んだことを前提としています。 Web上でのGoogleログインの使用.

「Web上でのGoogleログインの使用」のセクション

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

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

   注意

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

   1. 検索バーをクリック

      

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

      

   3. Google Consoleのクレデンシャルを作成するボタンをクリック 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のみを使用しますが、カスタムポートを使用しているため、両方を追加する必要があります。 localhost と http://localhost をクリックしてください http://localhost:5173

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

         

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

         

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

      4. 完了したら、画面はこのように表示されます

         

   3. ここから始めましょう Authorized redirect URIsCapacitorSocialLoginプラグインを使用するページによって異なりますが、 http://localhost:5173/auth

      1. 私の場合はCapacitorSocialLoginプラグインを使用するページは ADD URI

         

      2. Authorized redirect URIsセクションのADD URIボタン ADD URL URLを入力してクリックしてください

         

   4. もう一度 save

      

3. Now, you should be ready to call 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() - どちらもリダイレクトハンドリングをトリガーします:

   // 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'が使用されても。 SocialLogin.login({ provider: 'google', ... }) Googleの新しいトークンが必要な場合は、Web上では

   3. を再度呼び出してください。 SocialLogin.login クリックされたときに

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

クリップボードにコピーしてください。

Capgo を使用している場合 Google Login on Web を使用して、認証とアカウントフローの計画をし、Cloudflare と接続する Capacitor の @capgo/capacitor-social-login Capacitor の @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要素認証 __CAPGO_KEEP_0__の実装詳細について