Autenticazione degli utenti

I protocolli di autenticazione web utilizzano le funzionalità HTTP, ma le app di Chrome vengono eseguite all'interno del contenitore dell'app. non vengono caricati tramite HTTP e non possono eseguire reindirizzamenti o impostare cookie.

Utilizza l'API Chrome Identity per autenticare gli utenti: il getAuthToken per gli utenti che hanno eseguito l'accesso il proprio Account Google e i launchWebAuthFlow per gli utenti che hanno eseguito l'accesso a un account non Google. Se le tue utilizza il proprio server per autenticare gli utenti, dovrai utilizzare quest'ultimo.

Come funziona

Gli utenti delle app di Chrome hanno un Account Google associato al loro profilo. Le app possono ricevere token OAuth2 per questi utenti usando l'API getAuthToken.

Le app che vogliono eseguire l'autenticazione con provider di identità diversi da Google devono chiamare launchWebAuthFlow. Questo metodo utilizza un popup del browser per mostrare le pagine e le acquisizioni dei provider vengono reindirizzati a pattern URL specifici. Gli URL di reindirizzamento vengono trasmessi all'app, che estrae il token dall'URL.

Autenticazione dell'Account Google

Ecco i cinque passaggi da completare:

  1. Aggiungi autorizzazioni al file manifest e carica l'app.
  2. Copia la chiave dell'oggetto manifest.json installato nel manifest di origine, in modo che l'ID applicazione rimangono costanti durante lo sviluppo.
  3. Ottieni un ID client OAuth2 per la tua app di Chrome.
  4. Aggiorna il file manifest includendo l'ID client e gli ambiti.
  5. Recupera il token di autenticazione.

Aggiungi autorizzazioni e carica l'app

Devi assicurarti che l'autorizzazione per l'identità sia presente nel file manifest. Dopodiché potrai caricare l'app su nella pagina di gestione di app ed estensioni (vedi Pubblicazione).

"permissions": [
  "identity"
]

Copia la chiave nel manifest

Quando registri la tua applicazione nella console OAuth di Google, fornirai il codice che verrà controllato durante le richieste di token. Per questo è importante avere un insieme durante lo sviluppo.

Per mantenere costante l'ID applicazione, devi copiare la chiave nel file manifest.json installato in del file manifest di origine. Non è un'attività molto graziosa, ma ecco come funziona:

  1. Vai alla directory dei dati utente. Esempio su MacO: ~/Library/Application\ Support/Google/Chrome/Default/Extensions
  2. Elenca le app e le estensioni installate in modo che corrispondano al tuo ID app nelle app e nelle estensioni. di gestione dei segmenti di pubblico allo stesso ID qui.
  3. Vai alla directory dell'app installata (si tratta di una versione inclusa nell'ID dell'app). Apri il file installato manifest.json (pico consente di aprire rapidamente il file).
  4. Copia la "chiave" nel file manifest.json installato e incollalo nel file manifest del codice sorgente dell'app .

Recuperare l'ID client OAuth2

Per ottenere l'ID client, devi registrare la tua app nella console API di Google:

  1. Accedi alla console API di Google con lo stesso Account Google utilizzato per caricare l'app su al Chrome Web Store.
  2. Per creare un nuovo progetto, espandi il menu a discesa nell'angolo in alto a sinistra e seleziona l'icona a forma di Voce di menu Crea....
  3. Dopo aver creato e assegnato un nome, vai alla sezione "Servizi" voce del menu di navigazione e attivare qualsiasi e i servizi di cui la tua app ha bisogno.
  4. Vai alla pagina "Accesso API" dalla voce del menu di navigazione, quindi fai clic su Crea un client OAuth 2.0 Pulsante blu dell'ID.
  5. Inserisci le informazioni di branding richieste e seleziona il tipo Applicazione installata.
  6. Seleziona Chrome Application e inserisci l'ID applicazione (lo stesso ID visualizzato nelle app e pagina di gestione delle estensioni).
di Gemini Advanced.

Aggiorna il manifest con ID client OAuth2 e ambiti

Devi aggiornare il manifest in modo da includere l'ID client e gli ambiti. Ecco l'esempio "oauth2" della Nell'esempio di Gdrive:

"oauth2": {
    "client_id": "665859454684.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/drive"
    ]
  }

Ottieni token di accesso

Ora è tutto pronto per ottenere il token di autenticazione chiamando identity.getAuthToken.

chrome.identity.getAuthToken({ 'interactive': true }, function(token) {
  // Use the token.
});

Interazione utente

Quando chiami getAuthToken, puoi passare un flag ('interactive': true nell'esempio precedente) che indica se vuoi che l'API venga chiamata in modalità interattiva o silenziosa. Se richiami all'API in modalità interattiva, all'utente viene mostrata un'interfaccia utente di accesso e/o approvazione quando necessario, come illustrato nello screenshot seguente:

screenshot che mostra la UI quando un'app utilizza l'API Identity per autenticare un Account Google

Se richiami l'API in modalità silenziosa, l'API restituirà un token solo se è possibile generare senza mostrare alcuna UI. Ciò è utile nei casi in cui un'app esegue il flusso all'avvio, ad esempio, o in generale nei casi in cui non sia previsto alcun gesto dell'utente.

La best practice che suggeriamo è di utilizzare la modalità silenziosa quando l'utente non esegue un gesto e utilizza modalità interattiva se è stato eseguito un gesto dell'utente (ad esempio, l'utente ha fatto clic sul pulsante Accedi la tua app). Tieni presente che non applichiamo alcun requisito relativo ai gesti.

Memorizzazione nella cache

Chrome dispone di una cache in memoria per i token di accesso, quindi puoi chiamare getAuthToken in qualsiasi momento utilizzare un token. La scadenza del token viene gestita automaticamente dalla cache.

Puoi visualizzare lo stato attuale della cache dei token su chrome://identity-internals.

In alcuni casi, ad esempio quando l'utente cambia la password, quando i token di accesso non sono scaduti smetterà di funzionare. Le chiamate API che utilizzano il token inizieranno a tornare con un codice di stato HTTP 401. Se noti che è successo, puoi rimuovere il token non valido dalla cache di Chrome richiamando identity.removeCachedAuthToken.

Esempio di utilizzo di removeCachedAuthToken:

// callback = function (error, httpStatus, responseText);
function authenticatedXhr(method, url, callback) {
  var retry = true;
  function getTokenAndXhr() {
    chrome.identity.getAuthToken({/* details */},
                                 function (access_token) {
      if (chrome.runtime.lastError) {
        callback(chrome.runtime.lastError);
        return;
      }

      var xhr = new XMLHttpRequest();
      xhr.open(method, url);
      xhr.setRequestHeader('Authorization',
                           'Bearer ' + access_token);

      xhr.onload = function () {
        if (this.status === 401 && retry) {
          // This status may indicate that the cached
          // access token was invalid. Retry once with
          // a fresh token.
          retry = false;
          chrome.identity.removeCachedAuthToken(
              { 'token': access_token },
              getTokenAndXhr);
          return;
        }

        callback(null, this.status, this.responseText);
      }
    });
  }
}

Autenticazione tramite Account non Google

Ecco i tre passaggi da completare:

  1. Registrati con il provider.
  2. Aggiungi le autorizzazioni per le risorse del provider a cui avrà accesso la tua app.
  3. Recupera il token di autenticazione.

Registrati con il provider

Devi registrare un ID client OAuth2 con il provider e configurare l'ID client come sito web. Per inserire l'URI di reindirizzamento durante la registrazione, utilizza l'URL del modulo: https://<extension-id>.chromiumapp.org/<anything-here>

Ad esempio, se il tuo ID app è abcdefghijklmnopqrstuvwxyzabcdef e vuoi che provider_cb sia nel percorso, per distinguerlo con gli URI di reindirizzamento di altri provider, devi utilizzare: https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb

Aggiungi autorizzazioni per il fornitore

Per creare XHR multiorigine per gli endpoint API del provider, devi inserire nella lista consentita pattern nelle autorizzazioni:

"permissions": [
  ...
  "https://www.website-of-provider-with-user-photos.com/photos/*"
]

Recupera il token

Per ottenere il token:

chrome.identity.launchWebAuthFlow(
  {'url': '<url-to-do-auth>', 'interactive': true},
  function(redirect_url) { /* Extract token from redirect_url */ });

<url-to-do-auth> è l'URL utilizzato per autenticare il provider da un sito web. Ad esempio: supponiamo che tu stia eseguendo un flusso OAuth2 con un provider e che tu abbia registrato la tua app con l'ID client 123456789012345 e vuoi accedere alle foto dell'utente sul sito web del provider: https://www.website-of-provider-with-user-photos.com/dialog/oauth?client_id=123456789012345& redirect_uri=https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb&response_type=token&scope=user_photos

Il provider eseguirà l'autenticazione e, se opportuno, mostrerà l'interfaccia utente di accesso e/o approvazione ai per l'utente. Verrà quindi reindirizzato https://abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/provider_cb#authToken=<auth-token>

Chrome lo acquisirà e richiama il callback dell'app con l'URL di reindirizzamento completo. L'app dovrebbe estrarre il token dall'URL.

Confronto tra modalità interattiva e modalità silenziosa

Quando chiami launchWebAuthFlow, puoi passare un flag ('interactive': true nell'esempio precedente) che indica se vuoi che l'API venga chiamata in modalità interattiva o meno (ovvero in modalità silenziosa). Se richiami l'API in modalità interattiva, all'utente viene mostrata l'interfaccia utente, se necessario, per ottenere il token (accesso UI e/o interfaccia utente di approvazione; o per qualsiasi interfaccia utente specifica del provider).

Se richiami l'API in modalità silenziosa, l'API restituirà un token solo se il provider è in grado di fornire un token senza mostrare alcuna UI. Ciò è utile nei casi in cui un'app esegue il flusso nell'app all'avvio, ad esempio o in generale nei casi in cui non venga utilizzato un gesto dell'utente.

La best practice che suggeriamo è di utilizzare la modalità silenziosa quando l'utente non esegue un gesto e utilizza modalità interattiva se è stato eseguito un gesto dell'utente (ad esempio, l'utente ha fatto clic sul pulsante Accedi la tua app). Tieni presente che non applichiamo il requisito relativo ai gesti.