In questo post vediamo come risolvere un problema piuttosto comune che si verifica lavorando con le API di Google. Si tratta dell’errore che si ottiene quando si effettuano chiamate Javascript da un dominio che non è stato precedentemente autorizzato a farlo, non essendo stato aggiunto alla lista di quelle che vengono chiamate “JavaScript origins” valide.
Nel nostro esempio utilizziamo una semplice paginetta nella quale vogliamo esportare alcuni grafici di Google Analytics tramite l’utilizzo delle apposite API. Una volta che apriamo questa pagina dal browser, ci troviamo di fronte il pulsante “Access Google Analytics” che ci chiede di autenticarci con i dati dell’account di cui vogliamo recuperare le informazioni. Cliccando per inserire le credenziali di accesso otteniamo il fatidico errore:
Error: redirect_uri_mismatch error
The JavaScript origin in the request … did not match a registered Javascript origin.
L’immagine seguente mostra il risultato di quanto descritto:
Per risolvere il problema dobbiamo quindi registrare il dominio da cui arriva la richiesta JavaScript. Per farlo dobbiamo entrare nella Google Developers Console e dalla dashboard selezionare la voce relativa all’amministrazione dell’utilizzo delle API e delle relative chiavi e credenziali. Clicchiamo quindi, come evidenziato nella figura sottostante, sulla voce “Enable APIs and get credentials like keys”
A questo punto siamo entrati nella sezione API Manager e dal menu presente nella sezione di sinistra dobbiamo selezionare la voce “Credential“. Una volta fatto, nella parte centrale della pagina ci viene mostrata, sotto alla voce “OAuth 2.0 client IDs“, la lista dei client che abbiamo precedentemente creato per l’utilizzo delle varie API Google. L’immagine sottostante mostra la schermata appena descritta:
Clicchiamo quindi sul client delle API Google che stiamo utilizzando per il nostro progetto e, nel caso in cui esso sia di tipo “Web application” come nel nostro esempio, si apre una pagina di dettaglio in cui sono presenti anche informazioni sulle “Restrictions“. In questa sezione troviamo la voce che ci interessa, ovvero “Authorized JavaScript origins”. E’ infatti qui che dobbiamo andare a specificare la lista di domini autorizzati a effettuare chiamate JavaScript ai servizi esposti da Google tramite API. Nella definizione delle origini autorizzate è possibile inserire solo il dominio principale, senza utilizzare wildcard o subpath.
Aggiungiamo quindi il dominio su cui verrà deployata la nostra applicazione che effettuerà le chiamate, come evidenziato in arancione nella figura seguente. Al fine di abilitare le chiamate anche in fase di sviluppo e test, è utile inserire come dominio autorizzato anche localhost.
Ora che abbiamo autorizzato il dominio della nostra applicazione a effettuare le chiamate Javascript, possiamo tornare alla nostra pagina e provare nuovamente ad effettuare il login. Come possiamo vedere dalla figura seguente, ora che abbiamo aggiunto la nuova origine, non otteniamo più l’errore precedente e riusciamo invece a recuperare i dati dal servizio Google.
La nostra pagina contiene ora le informazioni esportate da Google Analytics tramite le relative API.