Google Contact Client Image Search

Question

I am collecting google contacts in webapp using the JavaScript JavaScript API and I would like to get their photos.

I am doing something like this (greatly simplified):

var token; // let admit this is available already

function getPhotoUrl(entry, cb) {
  var link = entry.link.filter(function(link) {
    return link.type.indexOf("image") === 0;
  }).shift();
  if (!link)
    return cb(null);
  var request = new XMLHttpRequest();
  request.open("GET", link.href + "?v=3.0&access_token=" + token, true);
  request.responseType = "blob";
  request.onload = cb;
  request.send();
}

function onContactsLoad(responseText) {
  var data = JSON.parse(responseText);
  (data.feed.entry || []).forEach(function(entry) {
    getPhotoUrl(e, function(a, b, c) {
      console.log("pic", a, b, c);
    });
  });
}

But I get this error in both Chrome and Firefox:

Cross-request request is blocked: a policy of the same origin prohibits reading a remote resource at https://www.google.com/m8/feeds/photos/media/ <user_email> / <some_contact_id>? v = 3.0 & access_token = <bladed>. This can be fixed by moving the resource to the same domain or by enabling CORS.

When viewing response headers from the feed / photo endpoint, I see that it is Access-Control-Allow-Origin: *not being sent, so I get a CORS error.

, Access-Control-Allow-Origin: * feeds/contacts, , .

, - ?

Answer 1

, ...

, JavaScript Google.

, API , CORS JSONP ( , JSON). JSON API access-control-allow-origin * JavaScript, .

(2015-06-16), GET, POST... (, atom/xml), API Google -allow-origin, ( 405).

, , : , , .

, , (, ); , , , Google.

, , ( jQuery).

    <button id="authorize-button" style="visibility: hidden">Authorize</button>
    <script type="text/javascript">
        var clientId = 'TAKE-THIS-FROM-CONSOLE.apps.googleusercontent.com',
            apiKey = 'TAKE-THAT-FROM-GOOGLE-DEVELOPPERS-CONSOLE',
            scopes = 'https://www.google.com/m8/feeds';
        // Use a button to handle authentication the first time.
        function handleClientLoad () {
            gapi.client.setApiKey ( apiKey );
            window.setTimeout ( checkAuth, 1 );
        }
        function checkAuth() {
            gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
        }
        function handleAuthResult ( authResult ) {
            var authorizeButton = document.getElementById ( 'authorize-button' );
            if ( authResult && !authResult.error ) {
                authorizeButton.style.visibility = 'hidden';
                var cif = {
                    method: 'GET',
                    url:  'https://www.google.com/m8/feeds/contacts/mydomain.com/full/',
                    data: {
                        "access_token": authResult.access_token,
                        "alt":          "json",
                        "max-results":  "10"
                    },
                    headers: { 
                        "Gdata-Version":    "3.0"    
                    },
                    xhrFields: {
                        withCredentials: true
                    },
                    dataType: "jsonp"
                };
                $.ajax ( cif ).done ( function ( result ) {
                        $ ( '#gcontacts' ).html ( JSON.stringify ( result, null, 3 ) );
                } );
            } else {
                authorizeButton.style.visibility = '';
                authorizeButton.onclick = handleAuthClick;
            }
        }
        function handleAuthClick ( event ) {
            gapi.auth.authorize ( { client_id: clientId, scope: scopes, immediate: false }, handleAuthResult );
            return false;
        }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
    <pre id="gcontacts"></pre>

cif.data.alt atom / cif.dataType xml, 405.

ps: cif, , ajax; -)

Answer 2

, " ", HTML, URL src <img> ( ?access_token=<youknowit> ).

. Angular.js

<img ng-src="{{contact.link[1].href + tokenForImages}}" alt="photo" />

CORS , , , , API JS , .

, .