admin管理员组文章数量:1295315
Google introduced new Sign In JS library(gsi) a long time ago but Google Sheets documentation still shows examples using gapi. What would be the best approach to bine/replace gapi with gsi? May I have an example?
Google introduced new Sign In JS library(gsi) a long time ago but Google Sheets documentation still shows examples using gapi. What would be the best approach to bine/replace gapi with gsi? May I have an example?
- 1 Did you see this? developers.google./identity/gsi/web/guides/migration – Wakka Commented Jan 18, 2022 at 23:52
- @Wakka Of course. I have no problems using new gsi library. I'd like to know how to use gsi with Sheets API. – Kostiantyn Commented Jan 20, 2022 at 8:01
2 Answers
Reset to default 8Update 2022/02/04:
Documentation regarding Google Identity Services JavaScript SDK just became available.
In contrast with Sign In With Google, which only handles authentication (see Authentication and authorization), this library handles OAuth tokens (see Using the token model) to access Google APIs, and so can be used as a plete replacement to gapi.
Please notice though that GIS doesn't handle calling the API, and so Google suggests to keep using gapi.client for that (ref):
You can safely continue using the gapi.client module from the Google API Client Library for JavaScript, and take advantage of its automatic creation of callable JS methods from a discovery document, batching multiple API calls, and CORS management functionality.
So, after getting the access token via GIS, you can either use gapi to call the API, or call the API without any of these libraries (in the example below and in the official docs, XMLHttpRequest is used for that).
Sample 1: Use Google Identity Services:
<html>
<head>
<script src="https://accounts.google./gsi/client" onload="initClient()" async defer></script>
</head>
<body>
<script>
var client;
var access_token;
function initClient() {
client = google.accounts.oauth2.initTokenClient({
client_id: 'CLIENT_ID',
scope: 'https://www.googleapis./auth/spreadsheets.readonly',
callback: (tokenResponse) => {
access_token = tokenResponse.access_token;
},
});
}
function getToken() {
client.requestAccessToken();
}
function revokeToken() {
google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
}
function listMajors() {
var spreadsheetId = '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms';
var range = 'Class Data!A2:E';
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
xhr.open('GET', `https://sheets.googleapis./v4/spreadsheets/${spreadsheetId}/values/${range}`);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
xhr.send();
}
</script>
<h1>Google Identity Services Authorization Token model</h1>
<button onclick="getToken();">Get access token</button> <br><br>
<button onclick="listMajors();">Call Sheets API</button> <br><br>
<button onclick="revokeToken();">Revoke token</button>
</body>
</html>
Sample 2. Use GIS in bination with GAPI:
<html>
<head>
<script src="https://accounts.google./gsi/client" onload="gisInit()" async defer></script>
<script src="https://apis.google./js/api.js" onload="gapiLoad()" async defer></script>
</head>
<body>
<script>
var tokenClient;
var access_token;
function gapiStart() {
gapi.client.init({
}).then(function() {
gapi.client.load('sheets', 'v4');
}).then(function(response) {
console.log('discovery document loaded');
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function gapiLoad() {
gapi.load('client', gapiStart)
}
function gisInit() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'CLIENT_ID',
scope: 'https://www.googleapis./auth/spreadsheets.readonly',
callback: (tokenResponse) => {
access_token = tokenResponse.access_token;
},
});
}
function getToken() {
tokenClient.requestAccessToken();
}
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
console.log(range);
});
}
function revokeToken() {
google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
}
</script>
<h1>Google Identity Services Authorization and GAPI</h1>
<button onclick="getToken();">Get access token</button> <br><br>
<button onclick="listMajors();">Call Sheets API</button> <br><br>
<button onclick="revokeToken();">Revoke token</button>
</body>
</html>
Note:
Both these samples are based on the examples found in the official docs, in which Calendar API is called (see Implicit flow examples).
Reference:
- Google Identity Services JavaScript SDK
- Migrate to Google Identity Services
As addition to Iamblichus answer, you can save access_token and use it with setToken method.
<html>
<head>
<script src="https://accounts.google./gsi/client" onload="gisInit()" async defer></script>
<script src="https://apis.google./js/api.js" onload="gapiLoad()" async defer></script>
</head>
<body>
<script>
var tokenClient;
var access_token;
function gapiStart() {
gapi.client.init({
}).then(function() {
**if (access_token)**
**gapi.auth.setToken({access_token: access_token})**
gapi.client.load('sheets', 'v4');
}).then(function(response) {
console.log('discovery document loaded');
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
}
function gapiLoad() {
gapi.load('client', gapiStart)
}
function gisInit() {
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'CLIENT_ID',
scope: 'https://www.googleapis./auth/spreadsheets.readonly',
callback: (tokenResponse) => {
access_token = tokenResponse.access_token;
**window.localStorage.setItem("gtoken", tokenResponse.access_token);**
},
});
}
function getToken() {
tokenClient.requestAccessToken();
}
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
console.log(range);
});
}
function revokeToken() {
google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
}
**if (window.localStorage.getItem("gtoken"))**
**access_token = window.localStorage.getItem("gtoken")**
</script>
<h1>Google Identity Services Authorization and GAPI</h1>
<button onclick="getToken();">Get access token</button> <br><br>
<button onclick="listMajors();">Call Sheets API</button> <br><br>
<button onclick="revokeToken();">Revoke token</button>
</body>
</html>
本文标签： javascriptHow do I use new google identity JS library to work with sheetsStack Overflow
版权声明：本文标题：javascript - How do I use new google identity JS library to work with sheets? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741615685a2388512.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论