API OAuth Google Integration Access error (origin-

Question

I am intgrating google Calendar with Angular UI Calendar, to get the data of events of google Calendar This is my HTML

<div ng-controller="newCalendarCtrl">
<button ng-click="handleAuthClick()">Authorize</button>
<script src="https://apis.google.com/js/client.js"></script>
</div>

And this is my JS

    angular.module('loginApp').controller('newCalendarCtrl', function ($scope, $log) {

    var clientId = '*******'
    //var apiKey = '{API KEY}';
    var scopes = 'https://www.googleapis.com/auth/calendar';

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

    $scope.handleAuthClick=function (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.calendarList.list();
            request.execute(function(resp){
                $.each( resp.items, function( key, value ) {
                    console.log(resp.items[key].id);
                });
            });
            var request1 = gapi.client.calendar.events.list({ 
                'calendarId': 'primary',
                'timeMin': '2015-12-23T04:26:52.000Z'//Suppose that you want get data after 23 Dec 2014
             }); 
            request1.execute(function(resp){
                $.each( resp.items, function( key, value ) {
                    console.log(resp.items[key].id);
                });
            });
        });
    }  

});

When I try to acces the data upon click Authorize Button then it goes to google login and login procedure proceed successfully but when response come then Error message comes on my page origin-mismatch .

Answer 1

The problem is solve . Replace JAVASCRIPT ORIGINS - https://www.example.com with JAVASCRIPT ORIGINS http://localhost:8080 And if you have your own Domain then replace it with your Domain and be specific of using https or http