gpt4 book ai didi

javascript - 如何使用新的 google identity JS 库来处理工作表?

转载 作者:行者123 更新时间:2023-12-05 02:34:59 25 4
gpt4 key购买 nike

Google 很久以前就推出了新的 Sign In JS 库 (gsi),但 Google 表格文档仍然显示使用 gapi 的示例。将 gapi 与 gsi 结合/替换的最佳方法是什么?我可以举个例子吗?

最佳答案

2022/02/04 更新:

关于 Google Identity Services JavaScript SDK 的文档刚刚可用。

对比Sign In With Google ,仅处理身份验证(参见 Authentication and authorization ),此库处理 OAuth token (参见 Using the token model )以访问 Google API,因此可以用作 gapi 的完全替代品。

请注意,GIS 不处理 API 调用,因此 Google 建议为此继续使用 gapi.client (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.

因此,在通过GIS 获取访问 token 后,您可以使用gapi 调用API,或者在没有任何这些库的情况下调用API(在示例中在下面和官方文档中,XMLHttpRequest 用于此)。

示例 1:使用 Google 身份服务:

<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>

示例 2. 将 GIS 与 GAPI 结合使用:

<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(参见 Implicit flow examples)。

引用:

关于javascript - 如何使用新的 google identity JS 库来处理工作表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70646216/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com