web-dev-qa-db-fra.com

Google Drive Picker - Touche Developer est une erreur invalide

J'ai commencé à apprendre à Google Drive Picker API et à démarrer avec mon localhost (j'ai créé mon identifiant client et votre clé de navigateur pour le domaine http://localhost/ et mes emplacements de fichiers sont localhost/ch1.html, etc.

Voici le script que j'ai écrit dans la partie du corps de mon document:

<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')
            .build();
        picker.setVisible(true);
    }
</script>

Mais quand je gère le doc, cela ne montre rien. Est-ce que je ne peux pas utiliser l'API de lecteur sur localhost ou je devrai utiliser un bouton pour l'appeler ou quelque chose comme ça s'il vous plaît aider.

Exemple testé -

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyC4N7lg1vN6YrxcD5DDt_Iu0GXsF3QGFDU')
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }

    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
</script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

google-project-keysterminal-chromelist of image api's enabled

javascriptgoogle-drive-apigoogle-picker
21
Harshit Laddha

Vous devez activer l'API de Picker:
Go https://console.developers.google.com/ Sélectionnez votre projet, puis cliquez sur APIs & auth Rechercher Google Picker API et activez-le.
[.____] J'ajouterai .setCallback(pickerCallback) à createPicker fonction et ajoutez une nouvelle fonction (pickerCallback)
Complete code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
<script>
    function onApiLoad(){
        gapi.load('auth',{'callback':onAuthApiLoad}); 
        gapi.load('picker'); 
    }
    function onAuthApiLoad(){
        window.gapi.auth.authorize({
            'client_id':'545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
            'scope':['https://www.googleapis.com/auth/drive']
        },handleAuthResult);
    } 
    var oauthToken;
    function handleAuthResult(authResult){
        if(authResult && !authResult.error){
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    function createPicker(){    
        var picker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsUploadView())
            .addView(new google.picker.DocsView())                
            .setOAuthToken(oauthToken)
            .setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')
            .setCallback(pickerCallback)
            .build();
        picker.setVisible(true);
    }

    function pickerCallback(data) {
        var url = 'nothing';
        if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          url = doc[google.picker.Document.URL];
        }
        var message = 'You picked: ' + url;
        document.getElementById('result').innerHTML = message;
      }
</script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

enter image description here

enter image description here

52
user2511140

Je ne sais pas si Google a changé l'API depuis la réponse acceptée, mais aujourd'hui, en janvier 2015, cela a fonctionné pour moi, où les réponses ci-dessus n'ont pas:

Selon la page de références:

Accès d'API publique

L'utilisation de cette clé ne nécessite aucune action utilisateur ni consentement, n'accorde pas l'accès aux informations de compte et n'est pas utilisé pour l'autorisation.

Ailleurs, j'ai lu que la touche API/Developer/Navigateur n'est pas nécessaire si OauthToken est utilisé. Donc, j'ai modifié le code ci-dessus, en perdant simplement la ligne:

.setDeveloperKey('AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg')

Pour une exhaustivité, voici le code adressé complet, espérons que cela fonctionne pour vous:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Picker Example</title>

   <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
        <script>
            function onApiLoad() {
                gapi.load('auth', { 'callback': onAuthApiLoad });
                gapi.load('picker');
            }
            function onAuthApiLoad() {
                window.gapi.auth.authorize({
                    'client_id': '545195528713-tihc7u0hp9ihta5mrm4l0eon16fpjogi.apps.googleusercontent.com',
                    'scope': ['https://www.googleapis.com/auth/drive']
                }, handleAuthResult);
            }
            var oauthToken;
            function handleAuthResult(authResult) {
                if (authResult && !authResult.error) {
                    oauthToken = authResult.access_token;
                    createPicker();
                }
            }
            function createPicker() {
                var picker = new google.picker.PickerBuilder()
                    //.addView(new google.picker.DocsUploadView())
                    .addView(new google.picker.DocsView())
                    .setOAuthToken(oauthToken)
                    //.setDeveloperKey('AIzaSyDPs9U-dgOC9h1jRFNwOwhRtARCph8_3HM')
                    .setCallback(pickerCallback)
                    .build();
                picker.setVisible(true);
            }

            function pickerCallback(data) {
                var url = 'nothing';
                if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                    var doc = data[google.picker.Response.DOCUMENTS][0];
                    url = doc[google.picker.Document.URL];
                }
                var message = 'You picked: ' + url;
                document.getElementById('result').innerHTML = message;
            }
        </script>
  </head>
  <body>
    <div id="result"></div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>
27
HeyHeyJC

Créer et utiliser Touche API pour l'application du navigateur Au lieu de la touche API pour l'application Server telle qu'elle est effectuée dans les images fournies par vous. Cela résoudra le problème.

Merci.

1
Prakash