Home/ Questions/Q 8675621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:59:41+00:00

I am attempting to follow this tutorial (http://googleappsdeveloper.blogspot.co.uk/2011/12/using-new-js-library-to-unlock-power-of.html) to implement Google Calender using JavaScipt

  • 0

I am attempting to follow this tutorial

(http://googleappsdeveloper.blogspot.co.uk/2011/12/using-new-js-library-to-unlock-power-of.html)

to implement Google Calender using JavaScipt but I am getting the following error:

Error: origin_mismatch

Request Details
scope=https://www.googleapis.com/auth/calendar
response_type=token
access_type=online
redirect_uri=postmessage
proxy=oauth2relay874729177
origin=http://localhost
state=538915583
display=page
client_id=553681888475.apps.googleusercontent.com
authuser=0

My JS file:

var clientId = '553681888475.apps.googleusercontent.com';
var apiKey = 'AIzaSyCh86BTa79UfqU3I_Y0jiWv2g3eXvMh6XY';
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);
      }
    });
  });
}

HTML:

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

    <script src="../Controller/Cal.js">
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I had to clear the contents in the “Authorized Redirect URIs” box. (When using JavaScript, do not specify any redirects.)

    In the “Authorized JavaScript Origins” box, you have to enter the domain name of your site which in this case was just localhost as I am using XAMPP.

    • 0