OAuth 2.0: autenticare gli utenti con Google

OAuth2 è il protocollo standard di settore per l'autorizzazione. Fornisce un meccanismo che consente agli utenti di concedere alle applicazioni web e desktop l'accesso a informazioni private senza condividere nome utente, password e altre credenziali private.

Questo tutorial crea un'estensione che accede ai contatti Google di un utente utilizzando l'API Google People e l'API Chrome Identity. Poiché le estensioni non vengono caricate tramite HTTPS, non possono eseguire reindirizzamenti o impostare cookie, si basano sull'API Chrome Identity per utilizzare OAuth2.

Inizia

Inizia creando una directory e i seguenti file di avvio.

manifest.json

Aggiungi il manifest creando un file denominato manifest.json e includendo il seguente codice.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

Aggiungi il service worker dell'estensione creando un file denominato service-worker.js e includendo il seguente codice.

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

Aggiungi un file HTML denominato index.html e includi il seguente codice.

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

Mantieni un ID estensione coerente

Mantenere un singolo ID è essenziale durante lo sviluppo. Per mantenere un ID coerente, segui questi passaggi:

Carica l'estensione nella Dashboard per sviluppatori

Comprimi la directory dell'estensione in un file .zip e caricala nella Dashboard per sviluppatori di Chrome senza pubblicarla:

  1. Nella Dashboard per sviluppatori, fai clic su Aggiungi nuovo elemento.
  2. Fai clic su Sfoglia file, seleziona il file zip dell'estensione e caricalo.
  3. Vai alla scheda Pacchetto e fai clic su Visualizza chiave pubblica.
Pulsante Visualizza chiave pubblica nella scheda Pacchetto
Pulsante Visualizza chiave pubblica nella scheda Pacchetto

Quando la finestra di dialogo è aperta, segui questi passaggi:

  1. Copia il codice tra -----BEGIN PUBLIC KEY----- e -----END PUBLIC KEY-----.
  2. Rimuovi i ritorni a capo per creare una singola riga di testo.
Finestra di dialogo della chiave pubblica
Finestra di dialogo della chiave pubblica

Aggiungi il codice a manifest.json nel "key" campo. In questo modo, l'estensione utilizzerà lo stesso ID.

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

Confronta gli ID

Apri la pagina di gestione delle estensioni all'indirizzo chrome://extensions, assicurati che la modalità sviluppatore sia attivata e carica la directory dell'estensione non compressa. Confronta l'ID estensione nella pagina di gestione delle estensioni con l'ID articolo nella Dashboard per sviluppatori. Devono corrispondere.

L&#39;ID della corrispondenza dell&#39;estensione

Creare un ID client OAuth

Qualsiasi applicazione che utilizza OAuth 2.0 per accedere alle API di Google deve disporre di credenziali di autorizzazione che identifichino l'applicazione nel server OAuth 2.0 di Google. I passaggi seguenti spiegano come creare le credenziali per il tuo progetto. Le tue applicazioni possono quindi utilizzare le credenziali per accedere alle API che hai abilitato per il progetto.

Inizia andando alla console API di Google per creare un nuovo progetto, se non ne hai già uno. Segui queste istruzioni per creare un client OAuth e ottenere un ID client.

  1. Vai alla pagina Client.
    1. Fai clic su Crea client.
    2. Seleziona il tipo di applicazione Estensione di Chrome.
    3. Inserisci un nome per il client OAuth. Questo nome viene visualizzato nella pagina Client del progetto per identificare il client.
    4. Inserisci l'ID estensione nel campo ID articolo.
    5. Fai clic su Crea.

Registra OAuth nel manifest

Includi il campo "oauth2" nel manifest dell'estensione. Inserisci l'ID client OAuth generato in "client_id". Per accedere alle informazioni dell'account dell'utente, dobbiamo richiedere il pertinente "scope", "https://www.googleapis.com/auth/userinfo.email".

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

Avvia il primo flusso OAuth

Registra l'autorizzazione identity nel manifest.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Crea un file per gestire il flusso OAuth denominato oauth.js e includi il seguente codice.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

Inserisci un tag di script per oauth.js nell'intestazione di index.html.

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

Ricarica l'estensione e fai clic sull'icona del browser per aprire index.html. Apri la console e fai clic sul pulsante "FriendBlock Contacts". Nella console verrà visualizzato un token OAuth.

Visualizzare il token nella console

Abilita l'API Google People

Torna alla console API di Google e seleziona Libreria dalla barra laterale. Cerca "API Google People", fai clic sul risultato corretto e abilitala.

Abilita l&#39;API People

Aggiungi la libreria client dell'API Google People a "scopes" nel manifest dell'estensione.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

Torna alla console API di Google e torna alle credenziali. Fai clic su "Crea credenziali" e seleziona "Chiave API" dal menu a discesa.

Crea credenziali API People

Conserva la chiave API generata per un utilizzo successivo.

Crea la prima richiesta API

Ora che l'estensione dispone delle autorizzazioni e delle credenziali appropriate e può autorizzare un utente Google, può richiedere i dati tramite l'API People. Aggiorna il codice in oauth.js in modo che corrisponda a quello riportato di seguito.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

Sostituisci API_KEY con la chiave API generata dalla console API di Google. L'estensione dovrebbe registrare un oggetto JSON che include un array di people/account_id nel campo memberResourceNames.

Blocca i volti

Ora che l'estensione restituisce un elenco dei contatti dell'utente, può effettuare richieste aggiuntive per recuperare i profili e le informazioni di questi contatti . L'estensione utilizzerà memberResourceNames per recuperare le informazioni sulle foto dei contatti dell'utente. Aggiorna oauth.js in modo da includere il seguente codice.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

Ricarica e torna all'estensione. Fai clic sul pulsante FriendBlock e voilà. Goditi i volti dei contatti in un blocco.

Volti dei contatti in un blocco