web-dev-qa-db-fra.com

API Google en Javascript

J'essaie d'obtenir des informations d'agenda à partir de Google en javascript. J'ai lu les manuels "Comment faire". Ils n'ont pas aidé. Même ce code «utile» copypasté (autoriser) ne l’a pas été. Quelqu'un aurait-il la gentillesse de m'apprendre à utiliser Google Api? Peut-être que quelqu'un a des échantillons à partager

Et ce beau code js: 

<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>

Message d'erreur (de la console):

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

donc je suis bloqué sur 'gapi.auth.authorize'. rien ne fonctionne après 

javascriptgoogle-api
17
user2227145

D'après l'erreur que vous recevez, mon hypothèse est que vous n'avez pas correctement configuré Javascript Origin sur la console API Google vous avez obtenu votre ID client et/ou vous essayez d'exécuter votre script système de fichiers au lieu de passer par un serveur Web, même un fonctionnant sur localhost. Le client API Google, comme je l'ai pu le dire, n'accepte pas les demandes d'autorisation du système de fichiers ni des domaines non configurés pour demander une autorisation sous l'ID client fourni.

28
citizenslave

Certaines API fonctionnent correctement lorsqu'elles sont interrogées à partir de fichiers locaux, mais d'autres non ... .. En réponse à une erreur telle que la vôtre, essayez de servir vos fichiers à partir d'un serveur Web. Si vous avez besoin d'un serveur Web rapide, utilisez le serveur HTTP intégré de Python (les systèmes Mac OSX et Linux ont pré-installé Python). Ce serveur HTTP peut transformer n'importe quel répertoire de votre système en répertoire de votre serveur Web. cd dans le répertoire de votre projet et exécutez la commande suivante: python -m SimpleHTTPServer 3000 Le numéro à la fin est le numéro de port de votre serveur http et vous pourrez le modifier. Dans notre exemple, votre répertoire serait servi à partir de: http://localhost:3000.

0
MarckK

Référence de la console Google API:

Dans ID client pour application Web:

Origines du Javascript: http://localhost:3000/

Clé pour les applications de navigateur:

Référents: http://localhost:3000/

localhost fonctionnerait à 100%

0
Parthasarathy B

j'ai eu la même erreur et comme vous avez préféré, après avoir exécuté le fichier html dans mon problème de serveur web local résolu. 

j'ai créé les informations d'identification de l'application Web et défini les valeurs suivantes sur mon adresse locale avec " http: // localhost: 5000 "

"Authorized JavaScript origins" 
"Authorized redirect URIs

j'ai aussi vérifié le fichier json. J'ai obtenu le fichier JSON suivant à la suite.

{"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
mehmet riza oz