Google Webでログイン

概要

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

ウェブアプリケーションでGoogleログインを使用する

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

1. 注

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

   検索バーをクリックする

   1. search bar

      

   2. 検索して credentials そして APIs and Services オプション (スクリーンショットの 2 番目の番号)

      

   3. Google Console の create credentials

      

   4. OAuth クライアント ID オプションを選択 OAuth client ID

      

   5. Web オプションを選択した Application type アプリケーションタイプの選択 Web application

      

   6. クライアント名を入力してください Create

      

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

      

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

   1. Google Consoleを開いてください 資格情報ページ 資格情報リスト

      

   2. アプリケーションで使用する可能性のあるすべてのアドレスを含めてください。 Authorized JavaScript origins私の場合は localhost以外のURLを使用してくださいが、自宅サーバーを使用している場合は、カスタムポートを使用する必要があるため、両方を追加する必要があります。 カスタムポートを使用している場合は、カスタムポートを使用しているURLを追加する必要があります。 http://localhost 以下のボタンをクリックしてください。 http://localhost:5173

      1. Authorized JavaScript originsセクションのADD URIボタンをクリックしてください。 add URI

         

      2. ADD URIダイアログにlocalhostのURLを入力してください。

         

      3. 完了すると、画面が次のようになります。

      4. Authorized JavaScript originsセクションに複数のlocalhostのURLが追加されている場合。

         

   3. CapacitorSocialLoginプラグインを使用するページによって異なりますが、私の場合は、以下のページを使用する予定です。 Authorized redirect URIsCapacitorSocialLoginプラグインを使用するページを選択してください。 http://localhost:5173/auth

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

         

      2. URL を入力してください。ここに表示される URL をクリックしてください。 ADD URL もう一度

         

   4. クリック save

      

3. JavaScript から呼び出す準備ができました。 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 ログインを使用する場合、 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
   });

   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 - both will trigger the redirect handling:

   Caution On Web, SocialLogin.refresh({ provider: 'google' }) 実装されていません。Webで使用しても。 google.mode: 'online'. Googleのトークンを再取得する必要がある場合は、Webで 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ログインから続ける

「Web上のGoogleログイン」を使用している場合 GoogleログインをWeb上で使用して、認証とアカウントフローの計画に接続する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を使用 Using @capgo/capacitor-social-login native機能の使用にあたっては、@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要素認証 2要素認証の実装詳細については、