Googleログインのウェブ

このプラグインのセットアップ手順とフルマークダウンガイドをコピーします。

導入

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

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

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

Android用のGoogleログインをすでに設定している場合は、このステップをスキップできます。ウェブクライアントを作成済みなので、ステップ2に直接進みます。
1. 検索バーをクリックする
2. で credentials オプション（スクリーンショットの2番目）をクリックする APIs and Services APIsとサービスが強調表示されたクレデンシャルオプションを表示する検索結果
3. をクリックしてください create credentials
4. を選択してください OAuth client ID
5. を選択してください Application type の選択肢でWebオプションが強調表示されています Web application
6. のフォームに名前のフィールドが強調表示されています Create
7. の詳細を表示してください webClientId の詳細を表示してください
Google ConsoleでWebクライアントを設定してください。
1. Google Consoleを開いてください。資格情報ページ Webクライアントをクリックしてください。
2. 資格情報ページに追加してください。 Authorized JavaScript originsすべてのアプリで使用する可能性のあるアドレスを含むようにしてください。私の場合は、localhostのみを使用しますが、カスタムポートを使用しているので、両方を追加する必要があります。のみ Webクライアントの資格情報ページ http://localhost 資格情報ページに追加してください。 http://localhost:5173
  1. 認可済みJavaScriptオリジンセクションのADD URIボタンをクリックしてください。 add URI
  2. URLを入力してください
  3. URLをすべて追加するまで、繰り返してください
  4. 完了したら、画面は次のようになります
3. 次に、以下のものを追加してください Authorized redirect URIsCapacitorSocialLoginプラグインを使用するページに応じて、内容は異なります。私の場合は、以下のページを使用します http://localhost:5173/auth
  1. 以下のボタンをクリックしてください ADD URI
  2. URLを入力してください ADD URL 再度クリックしてください
4. クリック save
ここで、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リダイレクトハンドリング
GoogleログインをWeb上で使用する場合、 必ずしも プラグインのリダイレクトが発生したときに、リダイレクトを処理してポップアップウィンドウを閉じるようにプラグインを初期化することができます。どちらかを呼び出すことができます。 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' を使用している場合でも、もし必要なら SocialLogin.login({ provider: 'google', ... }) を呼び出してください。
1. Web上で新しいGoogleトークンが必要な場合、再度 SocialLogin.login を呼び出してください。
```
const res = await SocialLogin.login({
 provider: 'google',
 options: {}
})
// Handle the response
console.log(JSON.stringify(res));
```

あなたが使用している場合 Google Login on Web 認証とアカウントフローの計画に使用している場合 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 for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細については

Googleログインのウェブ

導入

general setup guide

Google Login on Webから続ける