CODEWITHSUNDEEP
javascriptoauthgoogle-calendar-api
HanadiWali
HanadiWali

Reputation: 51

Google Calendar API javascript Error:Origin Mismatch

I'm working on a simple javascript code I found here: http://googleappsdeveloper.blogspot.com/2011/12/using-new-js-library-to-unlock-power-of.html

It basically acquires authentication to a google Calendar and retrieves the list of events contained in it. I have registered my web application and obtained a client ID and API Key.

I'm facing this error: "Error: Origin mismatch", I'm running the javascript locally using localhost and I set my homepage in the google application registration to localhost as well.

any help would be immensely appreciated.

the code: 

<html>
  <body>
    <div id='content'>
      <h1>Events</h1>
      <ul id='events'></ul>
    </div>
    <a href='#' id='authorize-button' onclick='handleAuthClick();'>Login</a>

    <script>
    var clientId = '506979856128.apps.googleusercontent.com';
var apiKey = 'AIzaSyAGbQAZQU0YNL8hK5EU69exIg7_sOg3JoA';
var scopes = 'https://www.googleapis.com/auth/calendar';

      function handleClientLoad() {
  gapi.client.setApiKey(apiKey);
  window.setTimeout(checkAuth,1);
  checkAuth();
}

function checkAuth() {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true},
      handleAuthResult);
}

function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult) {
    authorizeButton.style.visibility = 'hidden';
    makeApiCall();
  } else {
    authorizeButton.style.visibility = '';
    authorizeButton.onclick = handleAuthClick;
   }
}

function handleAuthClick(event) {
  gapi.auth.authorize(
      {client_id: clientId, scope: scopes, immediate: false},
      handleAuthResult);
  return false;
}

function makeApiCall() {
  gapi.client.load('calendar', 'v3', function() {
    var request = gapi.client.calendar.events.list({
      'calendarId': 'primary'
    });

    request.execute(function(resp) {
      for (var i = 0; i < resp.items.length; i++) {
        var li = document.createElement('li');
        li.appendChild(document.createTextNode(resp.items[i].summary));
        document.getElementById('events').appendChild(li);
      }
    });
 });
}
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad">                 </script>
</body>
</html>

Upvotes: 5

Views: 6961

Answers (2)

Saurabh Chaturvedi
Saurabh Chaturvedi

Reputation: 169

The problem of origin mismatch can be solved by taking care for Redirect URIs and Javascript Origins when creating Client ID in Google Developers Console.

The Javascript Origins should not end with /.

Example: http://example.com/ --> The correct format will be http://example.com.

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82231

I got the same error origin mismatch today.after bit of search i got the reason.

While creating the Google Api Access,we have to specify Authorized Redirect URIs and Authorized Redirect URIs.

Now if you call the Login from URIs other than specified in Authorized Redirect URIs, error:Unknown Origin is thrown

FYI:I have seen that you are running the javascript locally using localhost. It means that You have not added localhost uri to Authorized Redirect URIs.

But Don't waste your time doing that.Authorized Redirect URIs will not accept localhost uri.It's due to Chrome's same origin policy.and If you run chrome with the disable-web-security flag, it'll work locally too.

Upvotes: 2

Related Questions