Google ログイン

インストール手順とこのプラグインの全マークダウンガイドを含む設定プロンプトをコピーします。

導入

Capgoのソーシャルログインを使用したウェブアプリケーションの設定方法を学びます。 Capgoのソーシャルログインの一般的な設定ガイドをすでに読んだと想定しています。ウェブ上でのGoogleログインの使用.

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

Google Consoleでウェブクライアントを作成

Android向けGoogleログインをすでに設定している場合は、このステップをスキップできます。ウェブクライアントはすでに作成されています。ステップ2に直接進みます。
1. 検索バーをクリック
2. を検索 credentials と APIs and Services オプション（スクリーンショットの2番目）をクリック
3. をクリック create credentials
4. Select OAuth client ID
5. Select the Application type as Web application
6. Name your client and click Create
7. Copy the client ID, you’ll use this as the webClientId in your application
Configure the web client in the Google Console
1. Please open the 資格情報ページとWebクライアントをクリックしてください
2. まず、以下のすべてのアドレスを含むように、以下のアドレスを追加してください。 Authorized JavaScript origins必要に応じて、localhost以外のアドレスも追加してください。 例えば、localhost以外のアドレスを使用する場合、以下のアドレスを追加してください。 localhost以外のアドレスを使用する場合は、以下のアドレスを追加してください。 http://localhost Authorized JavaScript originsセクションのADD URIボタンをクリックしてください http://localhost:5173
  1. URLを入力してください add URI
  2. ADD URIダイアログにURLを入力してください
  3. URLをすべて追加するまで繰り返してください
  4. 完了したら、画面は次のようになります
3. ここから始めましょう Authorized redirect URIsCapacitorSocialLoginプラグインを使用するページによって異なりますが、 http://localhost:5173/auth
  1. CapacitorSocialLoginプラグインを使用するページを選択してください ADD URI
  2. URLを入力して ADD URL ADD URIダイアログのredirect URL
4. ADD URIダイアログのredirect URL save

Now, you should be ready to call login from JavaScript like so:

First, import SocialLogin

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

Then, call initialize. This should be called ONLY once.

// 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',
   }
 })
})

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 isLoggedIn() OR 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));

Capgo を使用している場合 Google Login on Web を認証とアカウントフローの計画に使用し、Cloudflare の @capgo/capacitor-social-login for the native capability in Using @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, Two-factor authentication Two-factor authenticationの実装詳細

Google ログイン

導入

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

__CAPGO_KEEP_0__

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