Inviare una richiesta autenticata da un'applicazione JavaScript

Nota: questa pagina include contenuti obsoleti. Per informazioni sulla scelta di un'opzione per consentire la gestione della tua API da parte di Cloud Endpoints, consulta l'articolo Scegliere un'opzione per gli endpoint. Per informazioni sulla gestione dell'API da Apigee, consulta la sezione Gestione dell'API Apigee.

Questa pagina descrive come inviare una richiesta autenticata da un'applicazione JavaScript in esecuzione localmente a un'API REST creata utilizzando Cloud Endpoints Frameworks. L'applicazione JavaScript mostra come utilizzare Accedi con Google e come inviare un token ID Google nella richiesta per autenticare l'utente. Quando l'applicazione JavaScript invia la richiesta, Endpoints Frameworks autentica l'utente prima di trasmettere la richiesta al codice di backend in esecuzione nell'ambiente standard di App Engine.

Prerequisiti

Per eseguire l'applicazione JavaScript di esempio:

• Devi aver eseguito il deployment dell'API di esempio da Guida introduttiva agli endpoint per Java. Assicurati di ottenere una risposta corretta quando invii una richiesta all'API, come descritto nella sezione Inviare una richiesta all'API.

• Trova l'ID progetto Google Cloud che hai creato per l'API di esempio perché devi aggiungerlo al codice JavaScript di esempio. Se hai bisogno di aiuto per trovare il tuo ID progetto, consulta Elencare i progetti.

• Per pubblicare il file index.html di esempio contenente il codice JavaScript devi avere un server web sul computer locale. Questa pagina include i passaggi per eseguire un server semplice utilizzando Python, ma puoi utilizzare qualsiasi server web.

Scarica il codice client JavaScript di esempio

1. Clona il campione sul tuo computer locale:

   git clone https://github.com/GoogleCloudPlatform/web-docs-samples
   

2. Passa alla directory che contiene il client JavaScript:

   cd web-docs-samples/endpoints-frameworks
   

Creazione di ID client OAuth 2.0

Per configurare l'autenticazione di esempio per il modello, devi configurare un ID client OAuth 2.0 nel codice JavaScript di esempio e nel codice di backend. L'app JavaScript utilizza l'ID client per ottenere un token ID Google dal server OAuth 2.0 di Google e invia il token ID di Google nella richiesta. Endpoints Frameworks utilizza l'ID client per autenticare il token ID inviato dall'app JavaScript nella richiesta.

Per creare un ID client:

1. In Google Cloud Console, vai alla pagina Credenziali.

   Vai alla pagina Credenziali

2. Dall'elenco dei progetti, seleziona il progetto creato per l'API di esempio.

3. Fai clic sul pulsante Crea credenziali, quindi seleziona ID client OAuth. Se è la prima volta che crei un ID client in questo progetto, utilizza i passaggi secondari per impostare il nome di un prodotto nella schermata di consenso; in caso contrario, vai al passaggio successivo.

   1. Fai clic sul pulsante Configura schermata di consenso.
   2. Inserisci un nome nel campo Nome applicazione.
   3. Fai clic su Salva.

4. In Application type (Tipo di applicazione), fai clic su Web application (Applicazione web).

5. Nel campo Origini JavaScript autorizzate, inserisci quanto segue:

   http://localhost:8080
   

6. Fai clic su Crea.

7. Copia il tuo ID client. L'ID client completo è simile al seguente, ma è univoco per l'applicazione web nel progetto.

   271473851874-mtll5dk2vultovbtilt31hakqbinpuvd.apps.googleusercontent.com

Per saperne di più sulla creazione degli ID client, consulta la sezione Configurare OAuth 2.0.

Configurazione del codice di backend e riesecuzione del deployment

Affinché Cloud Endpoints Frameworks possa autenticare la richiesta inviata dall'applicazione JavaScript, devi aggiungere al codice di esempio l'ID client appena creato e ripetere il deployment di un documento OpenAPI aggiornato e del codice di backend dell'applicazione.

La procedura seguente presuppone che tu abbia già eseguito il deployment dell'API di esempio da Guida introduttiva agli endpoint per Java. Prima di avviare la procedura seguente, assicurati di ottenere una risposta corretta quando invii una richiesta all'API, come descritto nella sezione Inviare una richiesta all'API.

Per configurare il codice di backend e ripetere il deployment:

1. Nella directory in cui hai clonato il repository di java-docs-samples, passa alla directory che contiene l'esempio di Java:

   cd YOUR_WORKING_DIRECTORY/java-docs-samples/appengine-java8/endpoints-v2-backend
   

2. Apri il file src/main/java/com/example/echo/Echo.java in un editor di testo.

3. Nell'annotazione @ApiMethod per il metodo getUserEmail, sostituisci YOUR_OAUTH_CLIENT_ID negli attributi audiences e clientIds con l'ID client che hai creato.

   appengine-java8/endpoints-v2-backend/src/main/java/com/example/echo/Echo.java

   Visualizza su GitHub
   @ApiMethod(
       httpMethod = ApiMethod.HttpMethod.GET,
       authenticators = {EspAuthenticator.class},
       audiences = {"YOUR_OAUTH_CLIENT_ID"},
       clientIds = {"YOUR_OAUTH_CLIENT_ID"}
   )
   public Email getUserEmail(User user) throws UnauthorizedException {
     if (user == null) {
       throw new UnauthorizedException("Invalid credentials");
     }
   
     Email response = new Email();
     response.setEmail(user.getEmail());
     return response;
   }

4. Salva il file Echo.java.

5. Pulisci il progetto e quindi crea la tua API:

   Maven

   mvn clean package

   Gradle

         gradle clean
         gradle build

6. Rigenera il documento OpenAPI, openapi.json, in modo che contenga l'ID client.

   Maven

   mvn endpoints-framework:openApiDocs

   Gradle

   gradle endpointsOpenApiDocs

7. Assicurati che l'interfaccia a riga di comando di Google Cloud (gcloud) sia autorizzata ad accedere ai tuoi dati e servizi su Google Cloud:

   gcloud auth login
   

8. Imposta il progetto predefinito per l'interfaccia a riga di comando di Google Cloud. Sostituisci YOUR_PROJECT_ID con l'ID progetto che hai creato per l'API di esempio:

   gcloud config set project YOUR_PROJECT_ID
   

9. Esegui il deployment del documento OpenAPI aggiornato:

   gcloud endpoints services deploy target/openapi-docs/openapi.json
   

10. Attendi il completamento del comando e quindi esegui nuovamente il deployment della tua applicazione:

    Maven

    mvn appengine:deploy

    Gradle

    gradle appengineDeploy

Configurazione del codice JavaScript

Per configurare il codice JavaScript:

1. Nella directory web-docs-samples/endpoints-frameworks, apri il file main.js in un editor di testo.

2. Nella funzione initGoogleAuth, sostituisci YOUR_CLIENT_ID con l'ID client che hai creato.

   endpoints-frameworks/main.js

   Visualizza su GitHub
   function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
     gapi.auth2.init({
       client_id: clientId,
       scope: 'https://www.googleapis.com/auth/userinfo.email'
     }).then(() => {
       document.getElementById('sign-in-btn').disabled = false;
     }).catch(err => {
       console.log(err);
     });
   }

3. Nella funzione sendSampleRequest, sostituisci YOUR_PROJECT_ID con l'ID progetto che hai creato per l'API di esempio.

   endpoints-frameworks/main.js

   Visualizza su GitHub
   function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
     var user = gapi.auth2.getAuthInstance().currentUser.get();
     var idToken = user.getAuthResponse().id_token;
     var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
     var xhr = new XMLHttpRequest();
     xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
     xhr.onreadystatechange = function () {
       if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
         window.alert(xhr.responseText);
       }
     };
     xhr.send();
   }

Invio di una richiesta autenticata

1. Nella directory in cui hai clonato il repository di web-docs-samples, passa alla directory che contiene l'esempio di JavaScript:

   cd YOUR_WORKING_DIRECTORY/web-docs-samples/endpoints-frameworks
   

2. Avvia il tuo server web sulla base della porta index.html sulla porta 8080. L'esempio seguente utilizza il server semplice di Python.

   python -m http.server 8080
   

3. Nel browser, inserisci localhost:8080.

   L'applicazione JavaScript mostra due pulsanti.

   

4. Fai clic su Sign In (Accedi). Viene visualizzata la pagina Accedi con Google.

5. Dopo aver eseguito l'accesso, fai clic sul pulsante Invia richiesta di esempio. La prima volta che invii una richiesta, potresti riscontrare un ritardo di circa 20 secondi all'avvio di App Engine. Endpoints Frameworks intercetta le richieste e utilizza l'ID client configurato nel codice di backend per autenticare la richiesta. Se l'autenticazione è riuscita:

   1. Endpoints Frameworks trasmette la richiesta al backend di esempio in esecuzione su App Engine.

   2. Nel codice di backend, il metodo getUserEmail restituisce l'indirizzo email dell'account utente utilizzato per accedere.

   3. Il client JavaScript mostra una finestra di dialogo con l'indirizzo email.

Panoramica del client JavaScript

Il client JavaScript utilizza l'opzione Accedi con Google, che gestisce il flusso OAuth 2.0. Questa sezione fornisce una breve panoramica del codice client JavaScript.

Configurazione di Auth

1. Carica la libreria Google Platform Platform per creare l'oggetto gapi:

   endpoint-frameworks/index.html

   Visualizza su GitHub
     <script src="https://apis.google.com/js/platform.js?onload=loadAuthClient" async defer></script>
   </head>

2. Dopo il caricamento della libreria Google Platform Platform, carica la libreria auth2:

   endpoints-frameworks/main.js

   Visualizza su GitHub
   function loadAuthClient () {
     gapi.load('auth2', initGoogleAuth);
   }

3. Inizializza l'oggetto GoogleAuth:

   endpoints-frameworks/main.js

   Visualizza su GitHub
   function initGoogleAuth (clientId = 'YOUR_CLIENT_ID') {
     gapi.auth2.init({
       client_id: clientId,
       scope: 'https://www.googleapis.com/auth/userinfo.email'
     }).then(() => {
       document.getElementById('sign-in-btn').disabled = false;
     }).catch(err => {
       console.log(err);
     });
   }

Quando inizializzi l'oggetto GoogleAuth, devi configurare l'oggetto con il tuo ID client OAuth 2.0 e le eventuali opzioni aggiuntive che vuoi specificare. In genere, specifichi l'ambito dell'accesso. Gli ambiti consentono all'applicazione di richiedere l'accesso solo alle risorse necessarie, consentendo al tempo stesso agli utenti di controllare il livello di accesso da loro concesso all'applicazione. Prima di iniziare a implementare l'autorizzazione OAuth 2.0, ti consigliamo di identificare gli ambiti a cui la tua applicazione ha bisogno dell'autorizzazione. In questo esempio viene richiesto l'accesso all'ambito https://www.googleapis.com/auth/userinfo.email, che concede l'accesso per visualizzare l'indirizzo email dell'utente.

Accedi

Dopo aver inizializzato l'oggetto GoogleAuth, puoi chiedere all'utente di accedere chiamando la funzione signIn dell'oggetto GoogleAuth:

endpoints-frameworks/main.js

Visualizza su GitHub

function signIn () {
  gapi.auth2.getAuthInstance().signIn().then(() => {
    document.getElementById('sign-in-btn').hidden = true;
    document.getElementById('sign-out-btn').hidden = false;
    document.getElementById('send-request-btn').disabled = false;
  }).catch(err => {
    console.log(err);
  });
}

Fai una richiesta con il token ID

Quando l'utente completa l'accesso, invia una richiesta con un'intestazione Authorization con il token ID dell'utente:

endpoints-frameworks/main.js

Visualizza su GitHub

function sendSampleRequest (projectId = 'YOUR_PROJECT_ID') {
  var user = gapi.auth2.getAuthInstance().currentUser.get();
  var idToken = user.getAuthResponse().id_token;
  var endpoint = `https://${projectId}.appspot.com/_ah/api/echo/v1/email`;
  var xhr = new XMLHttpRequest();
  xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
  xhr.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      window.alert(xhr.responseText);
    }
  };
  xhr.send();
}

Passaggi successivi

• Per maggiori informazioni su Accedi con Google, consulta la pagina di riferimento sul client per l'opzione Accedi con Google.