javascript - files - google drive json api
Google Drive Picker: la clave de desarrollador no es válida (4)
Compruebe que no se estén bloqueando las ventanas emergentes (debería haber una ventana emergente que le permita autorizar la aplicación cliente)
Comencé a aprender Google Drive Picker API y comencé con mi localhost (he creado mi ID de cliente y la clave del navegador para el dominio http://localhost/ y las ubicaciones de mis archivos son localhost / ch1.html, etc.
Aquí está el guión que escribí en la parte del cuerpo de mi documento:
<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>
Pero cuando ejecuto el documento no muestra nada. Es como si no pudiera usar el api de unidad en localhost o tendré que usar algún botón para llamarlo o algo así, por favor ayuda.
Ejemplo probado
<!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>
Cree y use la clave de API para la aplicación de navegador en lugar de la clave de API para la aplicación de servidor, tal como se hace en las imágenes proporcionadas por usted. Eso solucionará el problema.
Gracias.
Debe habilitar el api del selector:
Vaya a https://console.developers.google.com/ seleccione su proyecto, luego haga clic en APIs & auth encontrar la Google Picker API y habilítelo.
Añado .setCallback(pickerCallback) a la función createPicker y añado una nueva función ( pickerCallback )
código completo:
<!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>
No sé si Google ha cambiado las API desde la respuesta aceptada, pero hoy, en enero de 2015, esto funcionó para mí, donde las respuestas anteriores no lo hicieron:
Según la página de Credenciales:
Acceso público a la API
El uso de esta clave no requiere ninguna acción o consentimiento del usuario, no otorga acceso a ninguna información de la cuenta y no se utiliza para la autorización.
En otros lugares, leí que la clave API / Developer / Browser no es necesaria si se usa oAuthToken. Entonces, modifiqué el código anterior, simplemente perdiendo la línea:
.setDeveloperKey(''AIzaSyB3I3JOepScrZgySA9tBWL9pXAUaLJ-NFg'')
Para completar, aquí está el código modificado completo, espero que funcione para usted:
<!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>