Una pregunta anterior aquí me ayudó la mayor parte del camino (con suerte) para que esto funcione, pero parece que no puedo hacer que una API de Google funcione desde TypeScript. Básicamente estoy siguiendo este ejemplo: https://developers.google.com/api-client-library/javascript/samples/samples
No veo un error, el método para ejecutar la llamada a la API simplemente no se activa.
He instalado los tipos de gapi y gapi.auth. initClient() no arroja ningún error, simplemente parece que nunca se completa. El usuario actual inició sesión como usuario de Google, pero aún no está autorizado para la llamada a la API. Eso es lo siguiente con lo que me iba a ocupar, pero en este momento ni siquiera se está haciendo la llamada. Como puede ver a continuación, agregué una línea de registro al comienzo del método que no se llama.
initGapiClient() { gapi.load('client:auth2', this.initClient); } initClient() { gapi.client.init({ apiKey: '', discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest'], clientId: 'xxxxxx.apps.googleusercontent.com', scope: 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly' }).then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }); } updateSigninStatus(isSignedIn) { if (isSignedIn) { this.listPlaylists(); } else { alert("Can't sign in"); } } listPlaylists() { console.log("Called listPlaylists"); ... API call here ... }Cambio
.then(function () { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); });a
.then(()=> { // Listen for sign-in state changes. gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus.bind(this)); // Handle the initial sign-in state. this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); }); si usa la función, this no se referirá a su componente y pasará una función como parámetro como .listen(this.updateSigninStatus); también hará que el exterior this se una a esta función.
Le sugiero que lea: ¿Cómo acceder al contexto `this` correcto dentro de una devolución de llamada?
Después de jugar con esto, descubrí que una mejor muestra para mi caso de uso era esta: https://cloud.google.com/compute/docs/tutorials/javascript-guide
Tenga en cuenta que también estoy usando la primera sugerencia:
gapi.auth2.getAuthInstance().isSignedIn.listen(status => this.updateSigninStatus(status));Pude hacer que todo funcionara después de darme cuenta de que tenía que iniciar gapi.auth con todo lo que quería la primera vez; pensé que podría autorizar nuevamente más tarde con diferentes ámbitos. Ahora lo estoy haciendo en index.html así:
var PROJECT_ID = 'projectname'; var CLIENT_ID = 'xxxx.apps.googleusercontent.com'; var API_KEY = '1234'; var SCOPES = 'https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.readonly'; /** * Authorize Google Compute Engine API. */ function authorization() { gapi.client.setApiKey(API_KEY); gapi.auth.authorize({ client_id: CLIENT_ID, scope: SCOPES, immediate: false }, function(authResult) { if (authResult && !authResult.error) { window.alert('Auth was successful!'); } else { window.alert('Auth was not successful'); } } ); }