Google Login su Android
Copia un prompt di configurazione con i passaggi di installazione e la guida markdown completa per questo plugin.
Introduzione
Sezione intitolata “Introduzione”In questo guide, imparerai a configurare l'accesso Google con Capgo Social Login per Android. Assumo che tu abbia già letto la guida di configurazione generale.
Utilizzare l'accesso Google su Android
Sezione intitolata “Utilizzo del login Google su Android”In questo capitolo, imparerai a configurare il login Google su Android.
-
Creare un ID client Android.
-
Clicca sulla barra di ricerca
-
Cerca
credentialse clicca sullaAPIs and Servicesuna (numero 2 nella schermata)
-
Clicca sulla
create credentials
-
Seleziona
OAuth client ID
-
Seleziona il
AndroidTipo di applicazione
-
Apri Android Studio
-
Alla fine della finestra di navigazione, trova la
Gradle Scripts
-
Trova
build.gradleper il moduloapp
-
Copia il
android.defaultConfig.applicationIdQuesto sarà il tuopackage namein il console di Google
-
Ora, apri il terminale. Assicurati di essere nel
androiddel tuo app e esegui./gradlew signInReport
- Scorri verso l'alto di questo comando. Dovresti vedere il seguente. Copia il
SHA1.
- Ora, torna indietro nel Console di Google. Inserisci il tuo
applicationIdcome ilPackage Namee il tuo SHA1 nella casella del certificato e cliccacreate
-
-
Creare un client web (questo è richiesto per Android)
-
Vai alla
Create credentialspagina nel Console di Google -
Imposta il tipo di applicazione su
Web
-
Clicca su
Create
-
Copia l'ID del client, utilizzerai questo come il
webClientIdin tuo JS/TS code
-
-
Modifica il tuo
MainActivity-
Per favore apri il tuo app in Android Studio. Puoi eseguire
cap open android -
Cerca
MainActivity.java-
Apre il
appcartella
-
Cerca
java
-
Cerca il tuo
MainActivity.javae clicca su di esso
-
-
Modifica
MainActivity.java. Per favore aggiungi il seguente codeimport ee.forgr.capacitor.social.login.GoogleProvider;import ee.forgr.capacitor.social.login.SocialLoginPlugin;import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;import com.getcapacitor.PluginHandle;import com.getcapacitor.Plugin;import android.content.Intent;import android.util.Log;import com.getcapacitor.BridgeActivity;// ModifiedMainActivityForSocialLoginPlugin is VERY VERY important !!!!!!public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {@Overridepublic 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 pluginHandle = getBridge().getPlugin("SocialLogin");if (pluginHandle == null) {Log.i("Google Activity Result", "SocialLogin login handle is null");return;}Plugin plugin = pluginHandle.getInstance();if (!(plugin instanceof SocialLoginPlugin)) {Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");return;}((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);}}// This function will never be called, leave it empty@Overridepublic void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}} -
Salva il file
-
-
Utilizza Google Login nel tuo'applicazione
-
Prima, importa
SocialLoginimport { SocialLogin } from '@capgo/capacitor-social-login'; -
Chiamare initialize. Questo deve essere chiamato solo una volta.
// 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',}})}) -
Chiamare
SocialLogin.login. Create a button and run the following code on click.const res = await SocialLogin.login({provider: 'google',options: {}})// handle the responseconsole.log(JSON.stringify(res))
-
-
Configura l'emulatore per il testing
-
Vai in
Device managere clicca sul pulsante plus
-
Creare un dispositivo virtuale
-
Scegli qualsiasi dispositivo con un
Play Storeicono
Evidentemente, il
pixel 8supporta iPlay Storeservizi -
Clicca
next
-
context":"Pagina/Area: Capgo Builder / prodotto di costruzione cloud nativa. Ruolo: Etichetta di navigazione breve o elemento UI. Chiave di messaggio `native_build_builder_credit_next` (Crediti del costruttore di costruzione nativa)."
Google Play. Assicurati che l'immagine del sistema sia del tipo DEVE ESSEREGoogle Play
-
Selezione dell'immagine del sistema che mostra immagini di tipo Google Play
-
Conferma il tuo dispositivo. Puoi chiamare il tuo emulatore come preferisci
-
Entrare in
Device ManagerE avviare il tuo simulatore
-
Dopo che il simulatore si è avviato, entra nelle sue impostazioni
-
Entrare in
Google Play
- Clicca
UpdateE attendi circa 60 secondi
-
-
Testa la tua applicazione
Se hai fatto tutto correttamente, dovresti vedere il flusso di login di Google che funziona correttamente:
Risolvere i problemi
Sezione intitolata “Risolvere i problemi”Se hai dei problemi, confronta per primo la configurazione della tua app con i valori del Cloud Console di Google. Le fallite di Google Sign-In su Android sono di solito causate da un nome del pacchetto, un SHA-1 o un ID client non corrispondenti.
Manager delle credenziali, SHA-1 e Firebase
Sezione intitolata “Manager delle credenziali, SHA-1 e Firebase”Sul sistema operativo Android, questo plugin utilizza il Manager delle credenziali di Google (androidx.credentials e Accedi con Google), non il legacy GoogleSignInClient API. Errore di Logcat come GetCredentialCustomException: [28444] Developer console is not set up correctly da quella pila.
Filtra Logcat con GoogleProvider o CapgoSocialLogin o webClientId per poterli confrontare con il Cloud Console di Google.
Impostazione Cloud di Google richiesta
Sottotitolo della sezione intitolata “Impostazione Cloud di Google richiesta”Avete bisogno di due tipi di ID client OAuth 2.0 nello stesso progetto Cloud di Google:
| Tipo di client | Utilizzato per | Dove va |
|---|---|---|
| Applicazione web | Server / ID token audience | webClientId in SocialLogin.initialize() |
| su Android, uno per chiave di firma | Prova che il tuo APK è autorizzato a chiamare Google | solo nel Cloud Console di Google. Non passare questo ID a webClientId |
Un errore comune è utilizzare l'ID del client Android come webClientId. Il Credential Manager richiede l'ID del client Web lì. Il client Android ha bisogno solo del nome del pacchetto corretto e della chiave SHA-1 registrata nel console.
Creare un client OAuth Android per ogni certificato che firma le build che si testano:
- Da
./gradlew signingReportper la variante di debug. - Da l'APK o AAB che si installa effettivamente.
- Da Play App Signing: da Play Console > Integrità dell'app > Chiave di firma dell'app. Questo è richiesto per le build di Play Store anche se la chiave SHA-1 di caricamento è già registrata.
Il applicationId in android/app/build.gradle deve corrispondere esattamente al nome del pacchetto Android OAuth client, compresi eventuali .debug suffisso.
Se lo schermo di consenso OAuth è in modalità Testing, aggiungi ogni account Google che testi sotto Audience > Utenti di test. La pubblicazione dell'applicazione in Produzione non è necessaria per email e profile scopi. I collegamenti di asset digitali (assetlinks.json) non sono necessari per l'accesso con Google tramite Gestore delle credenziali.
Le modifiche a Cloudflare possono richiedere fino a poche ore per propagarsi.
Errore 28444: Il console dello sviluppatore non è configurato correttamente
Sezione intitolata “Errore 28444: Il console dello sviluppatore non è configurato correttamente”Ciò accade quasi sempre quando Google rifiuta la combinazione del certificato di firma APK installato, del nome del pacchetto e webClientId. Esegui questo checklist:
- Conferma
webClientIdè il client ID dell'applicazione Web e si conclude con.apps.googleusercontent.com. - Esegui l'app, riproduci il problema e leggi Logcat per
GoogleProvider,signingSha1=, epackage=. - In Google Cloud Console > Credenziali, apri il tuo client OAuth Android e verifica il pacchetto esatto e SHA-1.
- Se stai testando una versione di rilascio, registra il SHA-1 di quella versione, non solo il keystore di debug.
- Se l'app è distribuita attraverso Play Store, registra anche il SHA-1 di firma dell'app di Play.
- Assicurati che gli client Web e Android siano presenti nello stesso progetto Google Cloud.
- Se lo schermo di consenso è in modalità di testing, conferma che l'account Google sia un utente di testing.
- Attendi e riprova dopo le modifiche al console.
USER_CANCELLED Dopo aver scelto un account su un build di debug configurato male, può ancora esserci un mismatch SHA-1 o ID del client. Correggi prima la configurazione del console sopra.
Estrai il SHA-1 dal build che installi.
Sottosezione intitolata “Estrai il SHA-1 dal build che installi”.Build di debug o locali:
cd android && ./gradlew signingReportAPK di rilascio firmata:
keytool -printcert -jarfile android/app/release/app-release.apkAggiungi quel SHA-1 a un client OAuth Android con lo stesso nome del pacchetto, reinstalla lo stesso APK firmato e prova di nuovo:
adb install android/app/release/app-release.apkLeggere il risultato di accesso
Sottosezione intitolata “Leggere il risultato di accesso”I token sono nidificati sotto result:
const login = await SocialLogin.login({ provider: 'google' });const idToken = login.result?.idToken;Per Firebase Auth, crea le credenziali con questo idToken e utilizza l'ID del client Web come webClientId in initialize.
Se non puoi ottenere il certificato SHA-1 di sviluppo, prova un keystore personalizzato. Questo commento di issue spiega come aggiungere un keystore al tuo progetto.
Continua da Google Login su Android
Sezione intitolata “Continua con Google Login su Android”Se stai utilizzando Google Login su Android per pianificare l'autenticazione e le flussi di account, connettilo con Utilizzando @capgo/capacitor-login-social per la capacità nativa in Utilizzando @capgo/capacitor-login-social @capgo/capacitor-login-social per il dettaglio di implementazione in @capgo/capacitor-login-social @capgo/capacitor-passkey per il dettaglio di implementazione in @capgo/capacitor-passkey @capgo/capacitor-biometric-nativo per il dettaglio di implementazione in @capgo/capacitor-biometric-nativo, e Autenticazione a due fattori per il dettaglio di implementazione in Autenticazione a due fattori.