ウェブ上のGoogleログイン

導入

このガイドでは、Capgo Social Loginを使用したウェブアプリケーションでGoogleログインを設定する方法を学びます。 既読の「一般的なセットアップガイド」を読んだことを前提としています。 一般的なセットアップガイド.

ウェブ上でのGoogleログインの使用

Googleコンソールでウェブクライアントを作成する

1. 注記

   AndroidでGoogleログインを設定済みの場合は、このステップをスキップできます。ウェブクライアントを作成済みなので、直接ステップ2に進みます。

   protectedTokens

   1. 検索バーをクリックしてください

      

   2. を検索してください credentials クリックしてください APIs and Services オプション（スクリーンショットの2番目）

      

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

      

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

      

   5. を選択してください Application type アプリケーション名 Web application

      

   6. クライアントの名前を入力し、クリックしてください Create

      

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

      

2. GoogleコンソールでWebクライアントを設定してください

   1. 以下の画面を開いてください クレデンシャルページ クレデンシャルリスト画面（Webクライアントをクリック）

      

   2. クレデンシャルリスト画面（Webクライアントをクリック） Authorized JavaScript origins. このアプリで使用するすべてのアドレスを含める必要があります。私の場合は、localhostのみを使用しますが、カスタムポートを使用しているため、両方を追加する必要があります。 ONLY localhostの場合、カスタムポートを使用しているため、両方を追加する必要があります。 http://localhost と http://localhost:5173

      1. Please click on add URI

         

      2. Please type your URL

         

      3. Please repeat until you added all the URLs

      4. すべてのURLを追加した後、画面が次のようになります。

         

   3. Now, please add some 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を呼び出してください。この呼び出しは、1度だけ行う必要があります。

      // 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 リダイレクト処理

   Google ログインを使用する場合、Web 上で、 MUST リダイレクトが発生したときにプラグインから任意の関数を呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらか、または両方の呼び出しを行うと、リダイレクト処理がトリガーされます: isLoggedIn() __CAPGO_KEEP_0__ 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
   });

   __CAPGO_KEEP_0__

   On 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));

クリップボードにコピー

Google Login on Web を使用している場合 Google Login on Web を使用して、認証とアカウントフローの計画を行っている場合 を接続してください。 @capgo/capacitor-social-login native capability in @capgo/capacitor-social-login @capgo/capacitor-social-login implementation detail in @capgo/capacitor-social-login @capgo/capacitor-passkey implementation detail in @capgo/capacitor-passkey @capgo/capacitor-native-biometric implementation detail in @capgo/capacitor-native-biometric、 2要素認証 implementation detail in 2要素認証。