Google Web でログイン

はじめに

このガイドでは、Web アプリケーションの Google ログイン、Capgo ソーシャルログインを設定する方法を学習します。一般セットアップガイドはすでにお読みになっていると思います。

ウェブ上で Google ログインを使用する

ウェブ上で Google ログインを使用するのは非常に簡単です。これを使用するには、次のことを行う必要があります。

Google コンソールで Web クライアントを作成します

:::メモ Android の Google ログインをすでに構成している場合は、Web クライアントをすでに作成しているため、この手順をスキップできます。ステップ 2 に直接進むことができます。 :::
1. 検索バーをクリックします
2. credentials を検索し、「API とサービス」オプションをクリックします (スクリーンショットの 2 番)。
3. 「資格情報の作成」をクリックします。
4. OAuth client ID を選択します
5. 「アプリケーションの種類」として「Web アプリケーション」を選択します。
6. クライアントに名前を付けて、Create をクリックします。
7. クライアント ID をコピーします。これをアプリケーションで webClientId として使用します。
Google コンソールで Web クライアントを設定する
1. 認証情報ページを開いて、Web クライアントをクリックしてください。
2. 次に、Authorized JavaScript origins を追加してください。これには、アプリに使用する可能性のあるすべてのアドレスが含まれている必要があります。場合によっては、localhost のみを使用しますが、カスタムポートを使用するため、http://localhost と http://localhost:5173 の両方を追加する必要があります。
  1. 「URIの追加」をクリックしてください。
  2. URL を入力してください
  3. すべての URL を追加するまで繰り返してください
  4. 完了すると、画面は次のようになります。
3. ここで、いくつかの「承認されたリダイレクト URI」を追加してください。これは、CapacitorSocialLogin プラグインを使用するためにどのページに依存するかによって異なります。私の場合、http://localhost:5173/auth で使用する予定です
  1. 「URIの追加」をクリックしてください。
  2. URLを入力し、もう一度「URLを追加」をクリックします。
4. [save] をクリックします。

これで、次のように JavaScript から login を呼び出す準備が整いました。

まず、SocialLogin をインポートします

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

次に、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 ログインを使用する場合、リダイレクトが発生してプラグインが初期化されたときにプラグインから関数を呼び出す必要があります**。これにより、プラグインがリダイレクトを処理してポップアップウィンドウを閉じることができます。 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
});

クリックすると SocialLogin.login を呼び出すログインボタンを作成します。

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