Comment vous connecter avec Google à l'aide de Capacitor (2026)

Pour ajouter Google Sign-In à une application Capacitor , créez un client OAuth Web, iOS et un ou plusieurs clients OAuth Android dans Google Cloud, installez @capgo/capacitor-social-login, appelez SocialLogin.initialize({ google: { webClientId, iOSClientId } }), puis SocialLogin.login({ provider: 'google' })Android utilise le gestionnaire de jetons de Google, iOS utilise le service de connexion Google SDK, et le web utilise les services d'identité Google. Tous les trois retournent un jeton d'ID que vous vérifiez sur votre serveur.

Cette guide vous guide à travers chaque étape pour Capacitor 8 en octobre 2026, y compris les parties qui cassent généralement : les empreintes de doigt SHA-1, la clé de signature de l'application Play et le schéma d'URL iOS.

Comment Google Sign-In fonctionne dans une application Capacitor

Google bloque OAuth à l'intérieur des vues Web intégrées avec le disallowed_useragent l'erreur, c'est pourquoi le chargement de la page de connexion Google dans votre Capacitor WebView ne fonctionne pas. Le plugin utilise au lieu de cela le sélecteur de compte natif.

Étape 1 : Configurez Google Cloud

Créez un projet et la plateforme d'authentification Google

1. Ouvrez Google Console Cloud créez un projet ou sélectionnez-en un existant. Tous les identifiants de client doivent exister dans le même projet.
2. Ouvrir Plateforme d'authentification Google (l'écran anciennement appelé « écran de consentement OAuth »).
3. Sous Marque, set the app name users will see, a support email, and your domains and privacy policy URL.
4. Sous Public, choisissez Externe for consumer apps. While the app is in Test, seuls les comptes listés sous Test users peuvent s'authentifier.
5. Sous Accès aux données, maintenez les paramètres par défaut openid, email et profile sauf si vous en avez besoin.

You do not need to publish to production or pass verification for the basic scopes. Sensitive scopes (Calendar, Drive, Gmail) need verification before public release.

Créez les identifiants de client

Allez à Google Auth Platform > Clients ou APIs & Services > Identifiants) et créez :

Obtenez les valeurs 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

Pour les builds de la Play Store, copiez la valeur SHA-1 Console de Play > Test et publication > Intégrité de l'application > Clé de signature de l'application. Si vous avez besoin d'un clé de release, le Le générateur de clés Android crée une dans le navigateur. Notre Guide de l'ID client Google Étape 2 : Installer le plugin

Étape 2 : Installez le plugin

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

Éteignez les fournisseurs que vous n'utilisez pas afin que leurs SDK restent hors du binaire :

// 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;

Exécutez bunx cap sync après avoir changé de fournisseur.

après avoir changé les fournisseurs.

Étape 3 : Configuration iOS

Ouvrez l'application iOS dans Google Cloud et copiez le schéma de URL iOS, qui ressemble à com.googleusercontent.apps.1234567890-abcdefAjoutez-l’à ios/App/App/Info.plist avant la fermeture </dict>:

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

Permettez au Google __CAPGO_KEEP_0__ de gérer l'URL de rappel CFBundleURLTypes array pour les liens profonds, ajoutez un nouveau <dict> accès à elle au lieu de créer une deuxième clé.

Let the Google SDK handle the callback URL

appel ios/App/App/AppDelegate.swiftImportez SDK et routez l'URL vers elle avant Capacitor.

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)
}

appel ApplicationDelegateProxy appel @capacitor/app still receives vos autres liens profonds.

Étape 4 : Configuration Android

Basic sign-in avec les champs de saisie par défaut fonctionne sans modifications natives. Si vous demandez des champs de portée supplémentaires ou utilisez le mode hors ligne, le plugin doit recevoir les résultats d'activité, donc MainActivity il doit implémenter l'interface de marque du plugin :

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() {}
}

Sans cela, les appels avec scopes Vous ne pouvez pas utiliser les scopes sans modifier l'activité principale.

Pour l'emulateur, utilisez une image système avec le Google Play l'étiquette et la connexion à un compte Google dans les paramètres du dispositif. Images sans services Play retournent NoCredentialException.

Étape 5 : Configuration web

Ajoutez tous les origines que vous servez depuis la build web à la client Web. Les origines JavaScript autoriséesy compris le port (http://localhost:5173Appeler initialize tôt : le plugin injecte le tag de script de Google et l'authentification échoue si elle s'exécute avant que le script ne soit prêt.

La réponse en ligne contient :

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;
  }
}

La réponse en ligne contient :

Options d'affichage Android uniquement

L' options objet accepte style: 'bottom' pour l'interface de feuille de dialogue en bas, plus filterByAuthorizedAccounts et autoSelectEnabled pour les utilisateurs qui reviennent. Laissez filterByAuthorizedAccounts désactivé si vous supportez les comptes Family Link. forceRefreshToken: true demande à Android un jeton d'accès frais au lieu d'un cache.

Demande de champs de portée supplémentaires

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

N'oubliez pas le MainActivity changer sur Android, et ajoutez l'étendue sous Accès aux données Mode en ligne vs hors ligne

En ligne (par défaut)

Mode hors ligne sur iOS nécessite iOSServerClientId, et sur Android il nécessite le MainActivity changement.

Déconnexion et vérifications de session

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

Sur Android, logout également efface l'état du gestionnaire de certificats, donc le sélecteur de compte réapparaît la prochaine fois.

Étape 7 : Vérifiez le jeton d'ID sur votre serveur

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,
  };
}

Utilisez sub comme la clé utilisateur stable. N'associez qu'un compte existant par email lorsque email_verified est trueAcceptez les deux identifiants de client comme public. Cela garde les jetons de tous les plateformes valides. Émet ensuite votre propre session. Si vous utilisez un backend géré, suivez Supabase avec Capacitor Authentification sociale ou le guide Google Firebase.

Troubleshooting

Sur Android, filtrez Logcat par GoogleProviderLe plugin enregistre le nom de package, la signature SHA-1 et un masque webClientId, que vous pouvez comparer contre la console dans une minute.

Sur Android, filtrez Logcat par

Console changes can take a few hours to propagate, so do not rotate client IDs on release day. Once the native setup is in a store build, client-side changes such as scopes, error handling or the backend URL can go out through Capgo live updatesSi votre équipe n'a pas d'iMac pour les lancements iOS, Capgo Construction construit et signe le fichier binaire iOS dans le cloud.

Guides connexes

• Comment se connecter avec Apple à l'aide de Capacitor, ce que vous aurez besoin sur iOS si Google est votre principal mot de passe.
• Comment ajouter une authentification à une application Capacitor pour choisir entre l'authentification sociale, OIDC, les clés de sécurité et Better Auth.
• Page du plugin de connexion sociale et le Documentation de configuration Android Google.