Googleログインのウェブ

導入

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

Using Google login on the web

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

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

   注記

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

   1. 検索バーをクリックする

      

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

      

   3. Google Consoleのボタンをクリックしてください create credentials

      

   4. クレデンシャル作成メニューの OAuth client ID

      

   5. クレデンシャル作成画面の Application type クレデンシャル作成画面の Web application

      

   6. クレデンシャル作成画面の Create

      

   7. クレデンシャル作成画面の webClientId クレデンシャル作成画面の

      

2. Google ConsoleでWebクライアントを設定

   1. Please open the 資格情報ページ Webクライアントをクリック

      

   2. Now, please add the Authorized JavaScript origins。アプリのすべてのアドレスを含むようにしてください。私の場合は、localhostのみを使用しますが、カスタムポートを使用しているので、両方を追加する必要があります。 ONLY Page/area: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And). http://localhost Please click on http://localhost:5173

      1. Authorized JavaScript origins section with ADD URI button add URI

         

      2. URLを入力してください

         

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

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

         

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

      1. CapacitorSocialLoginプラグインを使用するページを選択してください ADD URI

         

      2. URLを入力してください ADD URL ADD URIダイアログをもう一度クリックしてください

         

   4. クリック save

      

3. ここで、JavaScript から呼び出す準備ができているはずです。 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 リダイレクトハンドリング

   Web で Google ログインを使用する場合、 必ず実行してください プラグインのリダイレクトが発生したときに、リダイレクトを処理してポップアップウィンドウを閉じるようにプラグインを初期化するために、プラグインのどの関数を呼び出すかを選択できます。どちらもリダイレクトの処理をトリガーします。 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'Cloudflare SocialLogin.login({ provider: 'google', ... }) Capacitor

   3. GitHub SocialLogin.login Capgo

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

Google Login on Webから続ける

あなたが使用している Google Login on Web 認証とアカウントフローの計画に使用している場合、Cloudflareに接続してください。 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric 2要素認証 2要素認証