Accedi con Google con le API FedCM

Questa guida illustra l'impatto del ritiro dei cookie di terze parti sulle Libreria della piattaforma di accesso. Gli argomenti trattati includono Spostamenti e Passaggi successivi per un aggiornamento compatibile con le versioni precedenti della raccolta, come Esegui una valutazione d'impatto e verifica che l'accesso degli utenti continui a funzionino come previsto e, se necessario, le istruzioni per aggiornare l'app web. Opzioni per gestire il periodo di transizione e sapere come ricevere assistenza in cui vengono illustrati anche i problemi.

Stato della biblioteca

A tutte le nuove app web viene impedito l'utilizzo della piattaforma Accedi con Google, ritirata raccolta, mentre le app che la usano possono continuare fino a nuova comunicazione. R non è stata stabilita la data finale di ritiro (arresto) per la libreria. Per saperne di più, vedi Ritiro dell'assistenza e ritiro.

Il blocco dei cookie di terze parti di Privacy Sandbox di Chrome influisce sulle app web che usano la libreria della piattaforma Accedi con Google. Per mantenere il comportamento esistente, senza richiedere l'uso di cookie di terze parti, un aggiornamento compatibile aggiunge le API FedCM a questa libreria. Sebbene la maggior parte delle modifiche non avvenga senza problemi, l'aggiornamento introduce differenze rispetto alle richieste di consenso degli utenti, iframe permissions-policy e Criterio di sicurezza del contenuto (CSP). Queste modifiche potrebbe influire sulla tua applicazione web e richiedere modifiche al codice dell'applicazione e al sito configurazione.

Durante il periodo di transizione, un'opzione di configurazione determina se Le API FedCM vengono utilizzate durante l'accesso dell'utente.

Cronologia

Ultimo aggiornamento: luglio 2024

Di seguito sono riportate le date e le modifiche che influiscono sul comportamento di accesso degli utenti:

  • Marzo 2023 Ritiro dell'assistenza per la piattaforma Accedi con Google libreria.
  • Gennaio 2024 Chrome blocca l'1% dei cookie di terze parti, la funzionalità Accedi con Google libreria della piattaforma è concessa un'eccezione temporanea ai cookie di terze parti il blocco tramite una prova relativa al ritiro.
  • Inizio del periodo di transizione di luglio 2024 e la libreria della piattaforma Accedi con Google è stato aggiunto il supporto per le API FedCM. Per impostazione predefinita, Google controlla la percentuale di richieste di accesso degli utenti tramite FedCM durante questo periodo. Le app web possono ignorare esplicitamente questo comportamento con il parametro use_fedcm.
  • Adozione obbligatoria (data da determinare) delle API FedCM da parte di Google Libreria della piattaforma di accesso, dopodiché il parametro use_fedcm viene ignorato. e tutte le richieste di accesso degli utenti utilizzano FedCM.

Dopo il passaggio alle API FedCM, la libreria della piattaforma Accedi con Google non sarà più interessati dal blocco dei cookie di terze parti. Per aggiornamenti sui cookie di terze parti il blocco, consulta la cronologia di Privacy Sandbox di Chrome.

Passaggi successivi

Puoi scegliere di seguire tre opzioni:

  1. Esegui una valutazione dell'impatto e, se necessario, aggiorna l'app web. Questo approccio valuta se le funzionalità che richiedono modifiche all'app web vengono in uso. Le istruzioni sono disponibili nella sezione successiva di questa guida.
  2. Sposta nella libreria di Servizi di identità Google (GIS). Passiamo alla versione più recente è vivamente consigliata la libreria di accesso. Per farlo, segui queste istruzioni.
  3. Non fare niente. La tua app web verrà aggiornata automaticamente La libreria Accedi con Google verrà spostata nelle API FedCM per l'accesso degli utenti. Questo è il ma comporta il rischio che gli utenti non riescano ad accedere la tua app web.

Eseguire una valutazione d'impatto

Segui queste istruzioni per determinare se la tua app web può essere aggiornata senza problemi tramite un aggiornamento compatibile con le versioni precedenti o se sono necessarie modifiche per evitare Gli utenti non riescono ad accedere quando la libreria della piattaforma Accedi con Google è completamente adotta le API FedCM.

Configurazione

Le API del browser e l'ultima versione della libreria della piattaforma Accedi con Google sono necessari per utilizzare FedCM durante l'accesso dell'utente.

Prima di andare oltre:

  • Esegui l'aggiornamento all'ultima versione di Chrome per desktop. Chrome per Android richiede la release M128 o successive e non può essere testata con versioni precedenti.

  • Apri chrome://flags e imposta le seguenti funzionalità su questi valori:

    • #fedcm-authz viene attivata se il sito utilizza un criterio di sicurezza del contenuto. che blocca https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd Abilitata
    • #third-party-cookie-deprecation-trial Disattivato
    • #tpcd-metadata-grants Disattivato
    • #tpcd-heuristics-grants Disattivata

    e riavvia Chrome.

  • Imposta use_fedcm su true durante l'inizializzazione della piattaforma Accedi con Google nella tua app web. In genere, l'inizializzazione ha il seguente aspetto:

    • gapi.client.init({use_fedcm: true}), oppure
    • gapi.auth2.init({use_fedcm: true}), oppure
    • gapi.auth2.authorize({use_fedcm: true}).

  • invalida le versioni memorizzate nella cache della libreria della piattaforma Accedi con Google. In genere questo passaggio non è necessario perché è disponibile l'ultima versione della libreria scaricati direttamente nel browser includendo api.js, client.js oppure platform.js in un tag <script src> (la richiesta può utilizzare uno qualsiasi di questi i nomi dei bundle per la raccolta).

  • Conferma le impostazioni OAuth per il tuo ID client OAuth:

    1. Apri la pagina Credenziali di Google API Console

    2. Verifica che l'URI del tuo sito web sia incluso nella Origini JavaScript autorizzate. L'URI include lo schema e solo nome host completo. Ad esempio, https://www.example.com.

    3. Facoltativamente, le credenziali possono essere restituite utilizzando un reindirizzamento a un endpoint. che ospiti invece che tramite un callback JavaScript. In questo caso, Verifica che gli URI di reindirizzamento siano inclusi in URI di reindirizzamento autorizzati. Gli URI di reindirizzamento includono lo schema, il nome host completo e il percorso e deve rispettare le regole di convalida dell'URI di reindirizzamento. Ad esempio: https://www.example.com/auth-receiver.

Test

Dopo aver seguito le istruzioni nella configurazione:

Individuare la richiesta per la libreria di Accedi con Google

Controlla se le modifiche ai criteri permissions-policy e al Criterio di sicurezza del contenuto sono state necessaria esaminando la richiesta relativa alla libreria della piattaforma Accedi con Google. Per farlo, individua la richiesta utilizzando il nome e l'origine della biblioteca:

  • In Chrome, apri il riquadro Rete di DevTools e ricarica la pagina.
  • Utilizza i valori nelle colonne Dominio e Nome per individuare la libreria richiesta:
      .
    • Il dominio è apis.google.com e
    • Il nome è api.js, client.js o platform.js. Lo specifico il valore Name dipende dal bundle di libreria richiesto dal documento.

Ad esempio, filtra in base a apis.google.com nella colonna Dominio e platform.js nella colonna Nome.

Verifica delle norme relative alle autorizzazioni degli iframe

Il tuo sito potrebbe utilizzare la libreria della piattaforma Accedi con Google in un indirizzo multiorigine iframe. In questo caso, è necessario un aggiornamento.

Dopo aver seguito la richiesta Trovare la richiesta di libreria Accedi con Google istruzioni, seleziona la richiesta di libreria di Accedi con Google in DevTools Network e individua l'intestazione Sec-Fetch-Site nella Sezione Richiedi intestazioni della scheda Intestazioni. Se il valore dell'intestazione è:

  • same-siteo same-origin, i criteri multiorigine non vengono applicati e non sono necessarie modifiche.
  • Se viene utilizzato un iframe, potrebbero essere necessarie modifiche cross-origin.

Per verificare se è presente un iframe:

  • Seleziona il riquadro Elementi in Chrome DevTools.
  • Utilizza Ctrl-F per trovare un iframe nel documento.

Se viene trovato un iframe, controlla il documento per verificare la presenza di chiamate a gapi.auth2 Functions o script src che caricano la libreria di Accedi con Google. all'interno dell'iframe. In questo caso:

Ripeti questa procedura per ogni iframe del documento. Gli iframe possono essere nidificati, assicurati di aggiungere l'istruzione allow a tutti gli iframe principali circostanti.

Controlla il criterio di sicurezza del contenuto

Se il tuo sito utilizza Criteri di sicurezza del contenuto, potresti dover aggiornare il CSP per consentire l'utilizzo della libreria Accedi con Google.

Dopo aver seguito la richiesta Trovare la richiesta di libreria Accedi con Google istruzioni, seleziona la richiesta di libreria di Accedi con Google in DevTools Network e individua l'intestazione Content-Security-Policy nella Sezione Intestazioni della risposta della scheda Intestazioni.

Se l'intestazione non viene trovata, non sono necessarie modifiche. Altrimenti, controlla se queste istruzioni CSP sono definite nell'intestazione CSP e le aggiornano tramite:

  • Aggiunta di https://apis.google.com/js/, https://accounts.google.com/gsi/, e https://acounts.google.com/o/fedcm/ a qualsiasi connect-src, default-src o frame-src.

  • Aggiunta a https://apis.google.com/js/bundle-name.js a script-src . Sostituisci bundle-name.js con api.js, client.js o platform.jsin base al bundle della libreria delle richieste di documenti.

Verificare la presenza di modifiche ai prompt dell'utente

Esistono alcune differenze nel comportamento dei prompt dell'utente. FedCM aggiunge una finestra di dialogo modale visualizzati dal browser e aggiornano i requisiti di attivazione degli utenti.

Immagine della finestra di dialogo modale FedCM

Esamina il layout del sito per verificare che i contenuti sottostanti possano essere sovrapposto in modo sicuro e oscurato temporaneamente dalla finestra di dialogo modale del browser. Se questo non è il caso, potresti dover regolare il layout o la posizione di alcuni elementi del tuo sito web.

Attivazione utente

FedCM include i requisiti aggiornati per l'attivazione degli utenti. La pressione di un pulsante o i clic su un link sono esempi di gesti dell'utente che consentono origini di terze parti per effettuare richieste di rete o archiviare dati. Con FedCM, il browser richiede consenso dell'utente quando:

  • un utente accede per la prima volta a un'app web utilizzando una nuova istanza del browser oppure
  • GoogleAuth.signIn viene chiamato.

Oggi, se l'utente ha eseguito l'accesso al sito web in precedenza, è possibile ottenere i dati di accesso dell'utente durante l'inizializzazione della libreria Accedi con Google utilizzando gapi.auth2.init, senza ulteriori interazioni dell'utente.

A causa del ritiro dei cookie di terze parti, questo non è più possibile a meno che l'utente ha prima eseguito il flusso di accesso a FedCM almeno una volta.

Attivando FedCM e chiamando il numero GoogleAuth.signIn, la prossima volta l'utente visita il tuo sito web, gapi.auth2.init può ottenere l'accesso dell'utente durante l'inizializzazione senza interazione da parte dell'utente.

Casi d'uso comuni

La documentazione per gli sviluppatori relativa alla libreria Accedi con Google include guide e codice esempi per casi d'uso comuni. Questa sezione illustra come FedCM influisce sui loro comportamento degli utenti.

  • Integrazione di Accedi con Google nell'app web

    In questa demo, un elemento <div> e una classe eseguono il rendering del pulsante, e per gli utenti che hanno già eseguito l'accesso, l'evento della pagina onload restituisce l'utente e credenziali. È necessaria l'interazione dell'utente per accedere e stabilire un nuovo durante la sessione.

    L'inizializzazione della libreria viene eseguita dalla classe g-signin2 che chiama gapi.load e gapi.auth2.init.

    Un gesto dell'utente, un evento onclick dell'elemento <div>, chiama auth2.signIn durante l'accesso o auth2.signOut all'uscita.

  • Creazione di un pulsante Accedi con Google personalizzato

    Nella demo uno, gli attributi personalizzati vengono utilizzati per controllare l'aspetto dei il pulsante di accesso e, per gli utenti che hanno già eseguito l'accesso, l'evento pagina onload restituisce le credenziali utente. È richiesta l'interazione dell'utente per accedere e stabilire una nuova sessione.

    L'inizializzazione della libreria viene eseguita tramite un evento onload per raccolta platform.js e il pulsante viene visualizzato da gapi.signin2.render.

    Un gesto dell'utente, quando preme il pulsante di accesso, chiama il numero auth2.signIn.

    Nella demo due, un elemento <div>, gli stili CSS e un'immagine personalizzata vengono utilizzato per controllare l'aspetto del pulsante di accesso. L'interazione dell'utente è per effettuare l'accesso e stabilire una nuova sessione.

    L'inizializzazione della libreria viene eseguita al caricamento del documento utilizzando una funzione di avvio che chiama gapi.load, gapi.auth2.init e gapi.auth2.attachClickHandler.

    Un gesto dell'utente, un evento onclick dell'elemento <div>, chiama auth2.signIn utilizzando auth2.attachClickHandler durante l'accesso oppure auth2.signOut su esci dall'account.

  • Monitorare lo stato della sessione dell'utente

    In questa demo, viene utilizzata la pressione del pulsante per l'accesso e la disconnessione degli utenti. È richiesta l'interazione dell'utente per accedere e stabilire una nuova sessione.

    L'inizializzazione della libreria viene eseguita chiamando direttamente gapi.load, gapi.auth2.init e gapi.auth2.attachClickHandler() in seguito platform.js caricato utilizzando script src.

    Un gesto dell'utente, un evento onclick dell'elemento <div>, chiama auth2.signIn utilizzando auth2.attachClickHandler durante l'accesso oppure auth2.signOut su esci dall'account.

  • Richiedere autorizzazioni aggiuntive

    In questa demo, viene utilizzata la pressione di un pulsante per richiedere OAuth 2.0 aggiuntivo gli ambiti, ottenere un nuovo token di accesso e, per gli utenti che hanno già effettuato l'accesso, pagina onload restituisce le credenziali utente. L'interazione dell'utente è obbligatoria per accedere e stabilire una nuova sessione.

    L'inizializzazione della libreria viene eseguita dall'evento onload per raccolta di platform.js tramite una chiamata al numero gapi.signin2.render.

    Il gesto di un utente, quando fa clic su un elemento <button>, attiva una richiesta per ambiti OAuth 2.0 aggiuntivi che utilizzano googleUser.grant o auth2.signOut all'uscita.

  • Integrazione di Accedi con Google tramite listener

    In questa demo, per gli utenti che hanno già eseguito l'accesso, l'evento onload della pagina restituisce le credenziali utente. È richiesta l'interazione dell'utente per accedere e stabilire una nuova sessione.

    L'inizializzazione della libreria viene eseguita al caricamento del documento utilizzando una funzione di avvio che chiama gapi.load, gapi.auth2.init e gapi.auth2.attachClickHandler. Poi, auth2.isSignedIn.listen e auth2.currentUser.listen vengono utilizzati per configurare la notifica delle modifiche a stato della sessione. Infine, auth2.SignIn viene chiamato per restituire le credenziali per utenti che hanno eseguito l'accesso.

    Un gesto dell'utente, un evento onclick dell'elemento <div>, chiama auth2.signIn utilizzando auth2.attachClickHandler durante l'accesso oppure auth2.signOut su esci dall'account.

  • Accedi con Google per le app lato server

    In questa demo, viene utilizzato un gesto dell'utente per richiedere un codice di autorizzazione OAuth 2.0 e un callback JS effettua una chiamata AJAX per inviare la risposta al backend server per la verifica.

    L'inizializzazione della libreria viene eseguita utilizzando un evento onload per platform.js che utilizza una funzione start per chiamare gapi.load e gapi.auth2.init.

    Il gesto di un utente, quando fa clic su un elemento <button>, attiva una richiesta per un codice di autorizzazione chiamando auth2.grantOfflineAccess.

  • SSO multipiattaforma

    FedCM richiede il consenso per ogni istanza del browser, anche se gli utenti Android hanno già effettuato l'accesso, è necessario un consenso una tantum.

Gestire il periodo di transizione

Durante il periodo di transizione una percentuale di accessi degli utenti potrebbe utilizzare FedCM, la percentuale esatta può variare e cambiare nel tempo. Per impostazione predefinita, Google controlla quante richieste di accesso utilizzano FedCM, ma puoi scegliere di attivare o disattivare utilizzare FedCM durante il periodo di transizione. Al termine del periodo di transizione FedCM diventa obbligatorio e viene utilizzato per tutte le richieste di accesso.

L'attivazione comporta l'indirizzamento dell'utente attraverso il flusso di accesso a FedCM, mentre la scelta la disattivazione indirizza gli utenti attraverso il flusso di accesso esistente. Questo comportamento è viene controllata usando il parametro use_fedcm.

Attiva

Potrebbe essere utile controllare se tutti o alcuni tentativi di accesso al tuo sito utilizzano API FedCM. Per farlo, imposta use_fedcm su true durante l'inizializzazione libreria della piattaforma. In questo caso, la richiesta di accesso dell'utente utilizza le API FedCM.

Disattiva

Durante il periodo di transizione, una percentuale di tentativi di accesso al tuo sito da parte degli utenti utilizzerà le API FedCM per impostazione predefinita. Se è necessario più tempo per apportare modifiche alle puoi disattivare temporaneamente l'utilizzo delle API FedCM. A questo scopo, imposta Da use_fedcm a false durante l'inizializzazione della libreria della piattaforma. L'accesso dell'utente non userà le API FedCM in questo caso.

Dopo l'adozione obbligatoria, qualsiasi impostazione di use_fedcm viene ignorata dal Libreria della piattaforma Accedi con Google.

Ricevi assistenza

Cerca o poni domande su StackOverflow utilizzando il tag google-signin.