2014-02-11 12 views
15

Ich versuche, Kalenderinformationen von Google in Javascript zu erhalten. Ich habe 'How to' Handbücher gelesen. Sie haben nicht geholfen. Selbst dieser "hilfreiche" kopierte Code (zur Autorisierung) tat dies nicht. Würde jemand so freundlich sein, mir beizubringen, Google API zu verwenden? Vielleicht hat ja jemand ein paar BeispieleGoogle API in Javascript

Und dieser schöne js Code zu teilen:

<html> 
<button id="authorize-button" onclick='handleAuthClick()'>Authorize</button> 

<script type="text/javascript"> 
    var clientId = '***'; 
    var apiKey = '***'; 
    var scopes = 'https://www.googleapis.com/auth/plus.me'; 

    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'; 
      makeApiCall(); 
     } else { 
      authorizeButton.style.visibility = ''; 
      authorizeButton.onclick = handleAuthClick; 
     } 
    } 

    function handleAuthClick(event) { 
     // Step 3: get authorization to use private data 
     gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult); 
     return false; 
    } 

    // Load the API and make an API call. Display the results on the screen. 
    function makeApiCall() { 
     // Step 4: Load the Google+ API 
     gapi.client.load('plus', 'v1', function() { 
      // Step 5: Assemble the API request 
      var request = gapi.client.plus.people.get({ 
      'userId': 'me' 
      }); 
      // Step 6: Execute the API request 
      request.execute(function(resp) { 
      var heading = document.createElement('h4'); 
      var image = document.createElement('img'); 
      image.src = resp.image.url; 
      heading.appendChild(image); 
      heading.appendChild(document.createTextNode(resp.displayName)); 

      document.getElementById('content').appendChild(heading); 
      }); 
     }); 
    } 
</script> 

Fehlermeldung (von Console):

'Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').' 

so im auf ‚gapi stecken .auth.authorize '. nichts funktioniert nach

+0

Das sieht nicht genau wie der Code aus, den ich benutze, aber ich habe den GAPI JS-Client dazu gebracht, innerhalb eines AngularJS-Dienstes zu authentifizieren und abzufragen, also würde ich das nicht erwarten. Was ist das genaue Problem, das Sie haben? Wie weit kommst du? Wird die GAPI geladen? Erhalten Sie das Popup für Authentifizierung und Autorisierung? Wenn Sie Ihr 'authResult'' console.log', loggen Sie es ein? Was passiert, wenn Sie '' '' 'im' execute' Callback 'console.log'? Hast du das Google Login-Popup blockiert? – citizenslave

+1

in der Konsole im erhalten 'konnte nicht ausgeführt werden' postMessage 'auf' DOMWindow ': Der angegebene Zielursprung (' file: // ') stimmt nicht mit dem Ursprung des Empfängerfensters (' null ') überein.' so bin ich auf 'gapi.auth.authorize' festgefahren. Nach dieser Zeile funktioniert nichts. – user2227145

+0

Mein Ziel ist es, einen statischen Schlüssel zu verwenden, um jederzeit auf meinen Kalender zugreifen zu können. Von überall aus starte ich Javascript code – user2227145

Antwort

27

Basierend auf dem Fehler, den Sie erhalten, meine Vermutung ist, dass Sie entweder Ihren Javascript Origin nicht korrekt auf der Google API console konfiguriert haben Sie Ihre Client-ID aus, und/oder Sie versuchen, Ihr Skript auszuführen aus dem Dateisystem statt über einen Webserver, sogar einen unter localhost. Der Google API-Client, soweit ich das beurteilen konnte, akzeptiert keine Autorisierungsanfragen vom Dateisystem oder von einer Domäne, die nicht für die Autorisierung unter der angegebenen Client-ID konfiguriert wurde.

+1

Ja. Ich verwende js aus dem Dateisystem. Danke. Ich werde versuchen, laden von localhost – user2227145

+0

Ich sollte sagen, es half mir viel. Bitte stelle die gleiche HTML-Datei auf dem Server bereit. –

+0

Auf localhost habe ich immer noch den gleichen Fehler. Ich verstehe die Antwort hier nicht vollständig. Wie konfigurierst du eine Domain, um eine Autorisierung zu akzeptieren, und was ist deine Client-ID? Die Google API-Konsole funktioniert nicht. – Kokodoko

0

Google API Console Referenz:

In Client-ID für Web-Anwendung:

Javascript Origins: http://localhost:3000/


Key für Browser-Anwendungen:

Referers: http://localhost:3000/

localhost würde funktionieren 100%

+1

Wie implementieren Sie dies in einer HTML-Datei, die geladen wird ein youtube iframe? – Kokodoko

0

ich habe den gleichen Fehler und wie Sie es vorziehen, nach dem Ausführen von HTML-Datei in meinem lokalen Webserver-Problem gelöst.

i erstellt Anmeldeinformationen für die Web-Anwendung und die beiden folgenden Werte auf meinem lokalen mit "http://localhost:5000" string

"Authorized JavaScript origins" 
"Authorized redirect URIs 

i auch die JSON-Datei überprüft. Ich habe die folgende JSON-Datei als Ergebnis erhalten.

{"web": 
{ 
    "client_id":"myClientID", 
    "project_id":"my-project", 
    "auth_uri":"https://accounts.google.com/o/oauth2/auth", 
    "token_uri":"https://accounts.google.com/o/oauth2/token", 
    "auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs", 
    "client_secret":"XqXmgQGrst4xkZ2pgJh3Omxg", 
    "redirect_uris":["http://localhost:5000"], 
    "javascript_origins":["http://localhost:5000"] 
} 

}

https://developers.google.com/drive/v2/web/auth/web-client

0

Einige APIs wird gut funktionieren, wenn sie von lokalen Dateien abgefragt, aber manche nicht. Als Reaktion auf einen Fehler wie den Ihren versuchen Sie, Ihre Dateien von einem Webserver bereitzustellen. Wenn Sie einen schnellen Webserver benötigen, verwenden Sie den integrierten HTTP-Server von Python (auf Mac OS X- und Linux-Systemen ist Python bereits vorinstalliert). Dieser HTTP-Server kann jedes Verzeichnis in Ihrem System in Ihr Webserververzeichnis umwandeln. cd in Ihr Projektverzeichnis und führen Sie den folgenden Befehl aus: python -m SimpleHTTPServer 3000 Die Nummer am Ende ist die Portnummer, in der Ihr http-Server gestartet wird, und Sie können diese Portnummer ändern. In unserem Beispiel würde Ihr Verzeichnis geliefert werden von: http://localhost:3000.

Verwandte Themen