A previous question here got me most of the way (hopefully) to getting this working, but I can't seem to get a Google API working from TypeScript. I'm basically following this example: https://developers.google.com/api-client-library/javascript/samples/samples
I'm not seeing an error, the method to run the API call just isn't getting fired.
I've installed the typings for gapi and gapi.auth. initClient() doesn't throw any errors, it just never seems to complete. The current user is signed in as a Google user, but not authorized for the API call yet. That's the next thing I was going to deal with, but right now the call isn't even being made. As you can see below, I added a logging line at the beginning of the method that isn't being called.
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
...
}
Change
.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());
});
to
.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());
});
if you use function your this will not refer to your component and passing a function as a parameter like .listen(this.updateSigninStatus); will also make the outer this to be binded to this function.
I suggest you to read: How to access the correct `this` context inside a callback?
After messing around with this, I found that a better sample for my use case was this one: https://cloud.google.com/compute/docs/tutorials/javascript-guide
Note that I am using the first suggestion as well:
gapi.auth2.getAuthInstance().isSignedIn.listen(status => this.updateSigninStatus(status));
I was able to get everything working after I realized that I had to init gapi.auth with everything I wanted the first time--I thought I could just authorize again later with different scopes. I'm now doing it in index.html like this:
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');
}
}
);
}