Google Webでログイン

導入

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

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

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

1. Googleコンソールでウェブクライアントを作成します。

   注意

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

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

      

   2. で検索します。 credentials 検索結果を表示します。 APIs and Services APIsとServicesが強調表示されているクレデンシャルオプションをクリックします。

      

   3. (スクリーンショットの2番目) create credentials

      

   4. 選択 OAuth client ID

      

   5. 選択する Application type as Web application

      

   6. クライアントに名前を付け、クリック Create

      

   7. __CAPGO_KEEP_0__をアプリケーションにコピー webClientId __CAPGO_KEEP_0__の詳細を表示

      

2. Google Console でウェブクライアントを設定する

   1. Googleアカウントを使用したログイン 認証情報のページを開いてください Webクライアントをクリックしてください

      

   2. Googleアカウントを追加してください Authorized JavaScript originsこの設定には、すべてのアプリで使用する可能性のあるアドレスを含める必要があります。 ONLY そして http://localhost and http://localhost:5173

      1. URLを入力してください add URI

         

      2. 認可されたJavaScriptオリジンのセクションにADD URIボタンをクリックしてください

         

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

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

         

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

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

         

      2. URLを入力して、以下のボタンをクリックしてください ADD URL 再度

         

   4. Click save

      

3. ここで、Google のログインを呼び出す準備ができているはずです。 login JavaScript から呼び出すようにしてください。

   1. 最初に、次のコードをインポートしてください。 SocialLogin

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

   2. 次に、initialize を呼び出してください。この関数は、Web クライアント設定の下部の保存ボタンを押したときにのみ呼び出してください。

      // 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上でGoogleログインを使用する場合、 MUST 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 Webから続ける

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