Dede Blog: just another Software Development Engineer

In this post we see how to solve a common problem that occurs working with Google API. This is the error we get when we make JavaScript calls from a domain that has not been previously authorized to do so, not having been added to the list of what are called valid “JavaScript origins “. In our example we use a simple web page in which we want to export some Google Analytics reports using the appropriate API. Once we open this page from the browser, the “Access Analytics” button appears and it asks us to authenticate with the credential of the Google account we want to retrieve the data from. When we click to enter login credentials we get the error:

Error: redirect_uri_mismatch error
The JavaScript origin in the request … did not match a registered Javascript origin.

The following image shows the result of what we just described:

To solve this problem we must register the domain from which the JavaScript request comes from. To do that we must go to the Google Developers Console and, from its dashboard, select the menu item for the administration of API and they associated keys and credentials. So we must click, as shown in the figure below, on the item “ Enable APIs and get credentials like keys ”

At this point we are in the API Manager page and from the menu in the left section we must select the “Credential” item. Once done, in the central part of the page we can see, under the heading “ OAuth 2.0 client IDs “, the list of clients we have previously created for the use of the APIs.
The image below shows the page just described:

Now, we click on the Google API client that we are using for our project and, if it is of type “Web application” as in our example, a detail page will appear. Here we can find information about “Restrictions“. In this section we find the item that interests us, that is, “Authorized JavaScript origins” . In fact, here is where we have to specify the list of domains authorized to make JavaScript calls to services exposed by Google via API. When we define the authorized origins we can only enter the main domain, without using wildcards or subpath.
So, let’s add the domain where our application will be deployed as highlighted in orange below. In order to be able to making calls also in development and testing mode, it is useful to include localhost as well as authorized domain.

Now that we have authorized the domain of our application to make JavaScript calls, we can go back to our page and try to log in again. As we can see from the figure below, now that we have added the new origin, we don’t get anymore the previous error, and we can instead retrieve data from the Google service.

Our page now contains the information exported from Google Analytics via APIs.