Capacitor を使用した Google ログインの実装方法 (2026)

Capacitor アプリに Google Sign-In を追加するには、Google Cloud で Web、iOS、および 1 つ以上の Android 用 OAuth クライアント ID を作成し、次をインストールします @capgo/capacitor-social-login、呼び出し SocialLogin.initialize({ google: { webClientId, iOSClientId } })、次に SocialLogin.login({ provider: 'google' })。Android は Google の Credential Manager、iOS は Google Sign-In SDK、Web は Google Identity Services を使用します。いずれもサーバーで検証できる ID トークンを返します。

このガイドでは、2026年10月時点の Capacitor 8 について、SHA-1 フィンガープリント、Play App Signing キー、iOS の URL スキームなど、よく壊れる部分も含めて全手順を解説します。

Capacitor アプリでの Google によるログインの仕組み

Google は、埋め込み WebView 内での OAuth を disallowed_useragent エラーでブロックします。そのため、Capacitor WebView 内で Google のログインページを読み込んでも動作しません。このプラグインでは、代わりにネイティブのアカウントピッカーを使用します。

ステップ 1: Google Cloud の設定

プロジェクトと Google Auth Platform を作成

1. 開く Google Cloud Console でプロジェクトを作成するか、既存のプロジェクトを選択してください。すべてのクライアント ID は同じプロジェクトに属している必要があります。
2. 開く Google Auth プラットフォーム （以前は「OAuth 同意画面」と呼ばれていた画面）
3. 未満 ブランディングユーザーに表示されるアプリ名、サポート用メールアドレス、ドメイン、プライバシーポリシーの URL を設定します。
4. 未満 対象ユーザーを選択し、 外部 コンシューマー向けアプリ用です。アプリがテストモードの間は テスト、サインインできるのは テストユーザー に登録されているアカウントのみです。
5. 未満 データへのアクセス、必要がなければデフォルトの openid, email と profile スコープを維持してください。

基本的なスコープでは、本番環境への公開や審査に通る必要はありません。機密性の高いスコープ（Calendar、Drive、Gmail）は、一般公開前に審査が必要です。

クライアントIDの作成

以下に移動します： Google Auth Platform > クライアント (または APIとサービス > 認証情報) を作成します:

SHA-1の値を取得するには：

# Debug key and any signing config in build.gradle
cd android && ./gradlew signingReport

# From a signed APK you actually install
keytool -printcert -jarfile android/app/build/outputs/apk/release/app-release.apk

Play Storeビルドの場合は、以下からSHA-1をコピーしてください： Play Console > Test and release > App integrity > App signing key certificate。まずリリース用 keystore が必要な場合は、 Android keystore ジェネレーター がブラウザ上で作成します。当社の GoogleクライアントIDガイド コンソールの画面について詳しく説明します。

ステップ 2: プラグインのインストール

bun add @capgo/capacitor-social-login
bunx cap sync

使用しないプロバイダーを無効化し、そのSDKがバイナリに含まれないようにします:

// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        apple: true,
        facebook: false,
        twitter: false,
      },
    },
  },
};

export default config;

実行 bunx cap sync プロバイダーを変更した後。

ステップ3: iOS設定

逆転したクライアントIDのURLスキームを追加

Google CloudのiOSクライアントを開き、 iOS URLスキーム（例: com.googleusercontent.apps.1234567890-abcdef）をコピーします。これを ios/App/App/Info.plist 閉じタグの前に </dict>:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.1234567890-abcdef</string>
    </array>
  </dict>
</array>

すでに CFBundleURLTypes ディープリンク用の配列がある場合は、新しい <dict> エントリを追加し、2つ目のキーを作成しないでください。

コールバックURLはGoogle SDK に処理させます

では ios/App/App/AppDelegate.swift、SDK をインポートし、Capacitor の前にURLをルーティングします:

import GoogleSignIn // add at the top of the file

// Replace the generated application(_:open:options:) method
func application(_ app: UIApplication, open url: URL,
                 options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    if GIDSignIn.sharedInstance.handle(url) {
        return true
    }
    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

この ApplicationDelegateProxy 呼び出しても @capacitor/app 他のディープリンクは引き続き受信します。

ステップ 4: Android の設定

デフォルトのスコープでの基本的なサインインは、ネイティブの変更なしで動作します。次の場合: 追加のスコープ または オフラインモードを使用する場合、プラグインが Activity の結果を受け取る必要があるため、 MainActivity プラグインのマーカーインターフェースを実装する必要があります：

package com.example.app;

import android.content.Intent;
import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginHandle;
import ee.forgr.capacitor.social.login.GoogleProvider;
import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
import ee.forgr.capacitor.social.login.SocialLoginPlugin;

public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN
                && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
            PluginHandle handle = getBridge().getPlugin("SocialLogin");
            if (handle == null) return;
            Plugin plugin = handle.getInstance();
            if (plugin instanceof SocialLoginPlugin) {
                ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
            }
        }
    }

    @Override
    public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

これがない場合、スコープを使用した呼び出しは scopes “You CANNOT use scopes without modifying the main activity” で拒否されます。

エミュレーターでは、次を含むシステムイメージを使用してください： Google Play ラベルを確認し、デバイスの設定で Google アカウントにサインインしてください。Play services のないイメージは返します NoCredentialException.

ステップ 5: Web 設定

Web ビルドを配信するすべてのオリジンを、Web クライアントの 承認済みの JavaScript 生成元、ポート番号を含めて（http://localhost:5173）。呼び出しは initialize 早めに: プラグインが Google の script タグを注入するため、スクリプトの準備ができる前に実行するとログインに失敗します。

ステップ 6: 初期化とサインイン

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

const WEB_CLIENT_ID = '1234567890-web.apps.googleusercontent.com';
const IOS_CLIENT_ID = '1234567890-ios.apps.googleusercontent.com';

export async function initAuth() {
  await SocialLogin.initialize({
    google: {
      webClientId: WEB_CLIENT_ID, // Android + web
      iOSClientId: IOS_CLIENT_ID, // iOS
      iOSServerClientId: WEB_CLIENT_ID, // same as webClientId, required for offline mode on iOS
      mode: 'online',
    },
  });
}

export async function signInWithGoogle() {
  try {
    const { result } = await SocialLogin.login({
      provider: 'google',
      options: {},
    });

    if (result.responseType !== 'online' || !result.idToken) {
      throw new Error('Expected an ID token from Google');
    }

    const res = await fetch('https://api.example.com/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ idToken: result.idToken }),
    });
    return res.json();
  } catch (error: any) {
    if (error?.code === 'USER_CANCELLED') return null;
    throw error;
  }
}

オンラインレスポンスには以下が含まれます:

Android専用の表示オプション

この options object を受け取ります style: 'bottom' ボトムシート UI に、さらに filterByAuthorizedAccounts と autoSelectEnabled 既存ユーザー向けです。 filterByAuthorizedAccounts Family Link アカウントをサポートする場合はオフにしてください。 forceRefreshToken: true Android にキャッシュされたトークンではなく、新しいアクセストークンを要求します。

追加スコープの要求

const { result } = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['https://www.googleapis.com/auth/calendar.readonly'],
  },
});

を覚えておいてください MainActivity Android での変更、およびスコープの追加 データへのアクセス Google Cloud 内

オンラインモード vs オフラインモード

iOSのオフラインモードには iOSServerClientId、Androidでは次の MainActivity 変更が必要です。

ログアウトとセッション確認

await SocialLogin.isLoggedIn({ provider: 'google' }); // { isLoggedIn: boolean }
await SocialLogin.logout({ provider: 'google' });

Androidの場合、 logout Credential Managerの状態もクリアされるので、次回もアカウント選択画面が表示されます。

ステップ 7: サーバー側でIDトークンを検証する

import { OAuth2Client } from 'google-auth-library';

const client = new OAuth2Client();

export async function verifyGoogleToken(idToken: string) {
  const ticket = await client.verifyIdToken({
    idToken,
    audience: [
      '1234567890-web.apps.googleusercontent.com',
      '1234567890-ios.apps.googleusercontent.com',
    ],
  });
  const payload = ticket.getPayload();
  if (!payload) throw new Error('Empty token payload');

  return {
    googleUserId: payload.sub,
    email: payload.email,
    emailVerified: payload.email_verified === true,
    name: payload.name,
  };
}

使用する sub を安定したユーザーキーとして使用します。既存のアカウントをメールで紐付けるのは、次の場合のみです: email_verified が true両方のクライアントIDをaudienceとして受け入れることで、全プラットフォームのトークンが有効になります。その後、独自のセッションを発行してください。マネージドバックエンドを使っている場合は、こちらに従ってください。 Supabase と Capacitor Social Login または Firebase Google ガイド. Neon Auth はOAuthリダイレクト経由でGoogleを処理し、 @capgo/capacitor-neon ネイティブで動作します。

トラブルシューティング

Android では、Logcat を以下でフィルタリングします GoogleProvider。プラグインはパッケージ名、署名用 SHA-1、およびマスクされた値をログに出力します webClientId。これはコンソールとすぐに比較できます。

リリースとメンテナンス

コンソールの変更は反映に数時間かかることがあるため、リリース日にクライアント ID をローテーションしないでください。ネイティブ設定がストアビルドに含まれれば、スコープ、エラー処理、バックエンド URL などのクライアント側の変更は配信できます Capgo Live Updates。iOS リリース用の Mac がチームにない場合、 Capgo のビルド クラウドで iOS バイナリをビルドして署名します。

関連ガイド

• Capacitor を使って Apple でサインインする方法、Google を主なログイン方法にする場合、iOS ではこれが必要になります。
• Capacitorアプリに認証を追加する方法 ソーシャルログイン、OIDC、パスキー、Better Auth の選択に役立ちます。
• Social Login プラグインのページ および Google Android セットアップドキュメント.