Kos*_*tyn 3 javascript google-sheets google-api-js-client google-identity
gsiGoogle很久以前就引入了新的 Sign In JS 库( )，但 Google Sheets 文档仍然显示了使用gapi. 将gapi 与gsi 结合/替换的最佳方法是什么？我可以举个例子吗？
有关Google Identity Services JavaScript SDK 的文档刚刚发布。
与仅处理身份验证（请参阅身份验证和授权）的Sign In With Google相比，此库处理 OAuth 令牌（请参阅使用令牌模型）来访问 Google API，因此可以用作.gapi
请注意，尽管这GIS不能处理调用 API，因此 Google 建议继续使用gapi.client它（参考）：
您可以安全地继续使用适用于 JavaScript 的 Google API 客户端库中的gapi.client 模块，并利用其从发现文档自动创建可调用 JS 方法、批处理多个 API 调用以及 CORS 管理功能。
因此，通过 获取访问令牌后GIS，您可以使用gapi来调用 API，也可以在不使用任何这些库的情况下调用 API（在下面的示例和官方文档中，使用XMLHttpRequest ）。
<html>
<head>
<script src="https://accounts.google.com/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.com/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.com/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>
<html>
<head>
<script src="https://accounts.google.com/gsi/client" onload="gisInit()" async defer></script>
<script src="https://apis.google.com/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.com/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>
这两个示例均基于官方文档中的示例，其中调用了 Calendar API（请参阅隐式流程示例）。
| 归档时间： |
|
| 查看次数： |
5156 次 |
| 最近记录： |