J'essaie d'utiliser l'api OAuth de Google avec Vue.js. J'utilise et modifie l'exemple de code fourni par Google. Mais quand je clique sur le bouton "Authorize", la console renvoie :
Erreur de Type Non Rattrapée : Impossible de lire la propriété 'init' d'undefined.
at Vue$3.initClient (vueAuth.js:24)
at Vue$3.boundFn [as initClient] (vue.js:196)
at Vue$3.handleClientLoad (vueAuth.js:20)
at boundFn (vue.js:196)
at invoker (vue.js:2006)
at HTMLButtonElement.fn._withTask.fn._withTask (vue.js:1804)
Voici mon code
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>管理画面</title>
</head>
<body>
<p>Google Sheets API Quickstart</p>
<!--Add buttons to initiate auth sequence and sign out-->
<div id="app">
<button @click="handleClientLoad">Authorize</button>
{{ memberlist }}
</div>
<script async defer src="https://apis.google.com/js/api.js"></script>
<script src="https://unpkg.com/vue"></script>
<!-- vueAuth.js is my code -->
<script src="vueAuth.js"></script>
</body>
</html>vueAuth.js
// Client ID and API key from the Developer Console
const CLIENT_ID = '/*my client id */';
// Array of API discovery doc URLs for APIs used by the quickstart
const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
const SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";
let vm = new Vue({
el: '#app',
data: {
memberlist: ''
},
methods: {
handleClientLoad: function () {
gapi.load('client:auth2', this.initClient(this));
},
initClient: function (vue) {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(vue.updateSigninStatus);
// Handle the initial sign-in state.
vue.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
vue.handleAuthClick();
});
},
updateSigninStatus: function (isSignedIn) {
if (isSignedIn) {
this.loadSheetsApi();
} else {
return;
}
},
handleAuthClick: function (event) {
gapi.auth2.getAuthInstance().signIn();
},
handleSignoutClick: function (event) {
gapi.auth2.getAuthInstance().signOut();
},
loadSheetsApi: function () {
var discoveryUrl =
'https://sheets.googleapis.com/$discovery/rest?version=v4';
gapi.client.load(discoveryUrl).then(this.listMajors);
},
listMajors: function () {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '/* my sheet id */',
range: '/* target range */',
}).then(function (response) {
this.memberlist = response.result;
})
}
}
})Je me demande pourquoi gapi.client.init n'est pas disponible. Comment dois-je modifier mon code pour activer gapi ?
