1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > Sheets API Quickstart</ title >
5+ < meta charset ="utf-8 " />
6+ </ head >
7+ < body >
8+ < p > Sheets API Quickstart</ p >
9+
10+ <!--Add buttons to initiate auth sequence and sign out-->
11+ < button id ="authorize_button " onclick ="handleAuthClick() "> Authorize</ button >
12+ < button id ="signout_button " onclick ="handleSignoutClick() "> Sign Out</ button >
13+
14+ < pre id ="content " style ="white-space: pre-wrap; "> </ pre >
15+
16+ < script type ="text/javascript ">
17+ /* exported gapiLoaded */
18+ /* exported gisLoaded */
19+ /* exported handleAuthClick */
20+ /* exported handleSignoutClick */
21+
22+ // TODO(developer): Set to client ID and API key from the Developer Console
23+ const CLIENT_ID = '104110416687117444034' ;
24+ const API_KEY = 'MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDSlr3AV53VlaJI\nrNOaEoKzXBJZKHVv5mWcpE7TX+Rry8jA7d4QXalI60SWLLwnl+2QLAlvTbq+kyOX\nASpitNTy0YEAqScUgBS+AyOg/IpKPtxJ+NDAbqZBtG4PkdyBeZecU1Vuvj9bBLaC\n02FO49+x80FlvE1Q9MjA7h3nVTu3HUmtoPAPYi8K5lIkLwWvBTIevT8sdF7Jw1r4\n8oXZ8gzXSGbAsYjsrVeKzGG4qc/8qmeOFLScSVaeOg5kABfJ5vvgQ/YNXoIJ9zT+\nzC2mEtLcRNLX/067WHR8BhwBuRKLg7D8z9YUzpl83/WxHl7Zyu+6ZXf/aKUy+t2k\nN25l8L13AgMBAAECgf94a2UWF66pgfV1RAlKWEtk0xbHVr7tL8Qj+SY2f8m69tr/\n6XcEATWhix/0Ti6e5zNxaGfD2ktSkkK5ejhCjpb90SSP2JwAR68i+IwgAoH1K6eT\nT8K51W+SBnA+k3EEJucnp9TO/sI7ydmwLqFLiZDg6fHfEGq0CwzBDS+3CqKbBAyB\njVhnpKbbDJVZW+AbB1OQJ3qYp5cEYLIHuJ4zbaMgJ1PLEWQtJ2NDFOO4mvVC24T5\n3W/MXcefQ+UJtEuKY69oDRREd2V81B1PqRrX/mmvCsvO7A8kMN1P3YnDFDU5y97R\nEWYNpylAEwjxfzPgNZbJlxTxjNg37ta+fYrC3Z0CgYEA71J0Oboyv2UBti/QE6ZU\nrN9mJxyN6C6naPzJNknb2KURfQcnVHmwOc3Psq9gej3qxHXa6whz+Y4wCSZb6+dg\nlm4XHm6cJYQUxZ5woXsN8+mPh6tlyEK3KS2Q3Yl3BGJHPAs+MPtxKaruMo1pmzh/\ndLsIqvLxwnMyfyL2vUXF/aUCgYEA4UOuYX7iZC+Y1rdctPyE0rZ8CT7JSHLxs0mk\nPh1EcNKwiNu6EgSj6gFW90ZnuOGPioOvfvgmJ/CUb2KtmI9ta+x3lB/L/AhbaDvu\nAgIKvLseKFz9PhPuIen811x2LqkVO56cPyrDK5fSwdh0GJIZN2JXGmvVNC4NcTzE\nOS/Gm+sCgYEAkfdUdDEg6qOMm7YlzxZP5vCKuags1UQ/T0V+4+HAeS6UsBFA58Eg\nvuDMoUteKLDDE/heAaQyOC+FFM+UmRmSS63x49nK2wboNHAiehs3s2Ds7e6YMcCf\nPjpQdQ52zPG0SOcCk5WIu8VJawPdOZMICgZZjwqGcfcZAXoty9tWmxECgYEAlUcq\nukVBda7tE+0zLGTjCFgR3naTIMW7UlqM0vTGNBYLEsa5idM1ZI86uGcZuTUQ0HPv\nyq5basBNPXshGyaBFrH/lFN19DD9kheU5BPCVcuScqEc2RSQDD1pZrZJQyadgYLc\nfCe0aqET842jcdzvhPpQSpwHD6stEUt5pYP5k70CgYEA3mm2+REGE+PwlF2WpZ9+\nUCB6Wfx76ON5eltz9UNK9Tcm68BKz845mUnXw4F3DTSzqol8O+QLuu/rSq6f0IBW\nE4L/dWAjaQ+nPtZDLRjAj4cWbLlgcUipkU9sXWJZ66c8km3un7M/sQCyWv6x0k8t\nhJxGT271YXA/Iwq4WKUG6/4=' ;
25+
26+ // Discovery doc URL for APIs used by the quickstart
27+ const DISCOVERY_DOC = 'https://sheets.googleapis.com/$discovery/rest?version=v4' ;
28+
29+ // Authorization scopes required by the API; multiple scopes can be
30+ // included, separated by spaces.
31+ const SCOPES = 'https://www.googleapis.com/auth/spreadsheets.readonly' ;
32+
33+ let tokenClient ;
34+ let gapiInited = false ;
35+ let gisInited = false ;
36+
37+ document . getElementById ( 'authorize_button' ) . style . visibility = 'hidden' ;
38+ document . getElementById ( 'signout_button' ) . style . visibility = 'hidden' ;
39+
40+ /**
41+ * Callback after api.js is loaded.
42+ */
43+ function gapiLoaded ( ) {
44+ gapi . load ( 'client' , initializeGapiClient ) ;
45+ }
46+
47+ /**
48+ * Callback after the API client is loaded. Loads the
49+ * discovery doc to initialize the API.
50+ */
51+ async function initializeGapiClient ( ) {
52+ await gapi . client . init ( {
53+ apiKey : API_KEY ,
54+ discoveryDocs : [ DISCOVERY_DOC ] ,
55+ } ) ;
56+ gapiInited = true ;
57+ maybeEnableButtons ( ) ;
58+ }
59+
60+ /**
61+ * Callback after Google Identity Services are loaded.
62+ */
63+ function gisLoaded ( ) {
64+ tokenClient = google . accounts . oauth2 . initTokenClient ( {
65+ client_id : CLIENT_ID ,
66+ scope : SCOPES ,
67+ callback : '' , // defined later
68+ } ) ;
69+ gisInited = true ;
70+ maybeEnableButtons ( ) ;
71+ }
72+
73+ /**
74+ * Enables user interaction after all libraries are loaded.
75+ */
76+ function maybeEnableButtons ( ) {
77+ if ( gapiInited && gisInited ) {
78+ document . getElementById ( 'authorize_button' ) . style . visibility = 'visible' ;
79+ }
80+ }
81+
82+ /**
83+ * Sign in the user upon button click.
84+ */
85+ function handleAuthClick ( ) {
86+ tokenClient . callback = async ( resp ) => {
87+ if ( resp . error !== undefined ) {
88+ throw ( resp ) ;
89+ }
90+ document . getElementById ( 'signout_button' ) . style . visibility = 'visible' ;
91+ document . getElementById ( 'authorize_button' ) . innerText = 'Refresh' ;
92+ await listMajors ( ) ;
93+ } ;
94+
95+ if ( gapi . client . getToken ( ) === null ) {
96+ // Prompt the user to select a Google Account and ask for consent to share their data
97+ // when establishing a new session.
98+ tokenClient . requestAccessToken ( { prompt : 'consent' } ) ;
99+ } else {
100+ // Skip display of account chooser and consent dialog for an existing session.
101+ tokenClient . requestAccessToken ( { prompt : '' } ) ;
102+ }
103+ }
104+
105+ /**
106+ * Sign out the user upon button click.
107+ */
108+ function handleSignoutClick ( ) {
109+ const token = gapi . client . getToken ( ) ;
110+ if ( token !== null ) {
111+ google . accounts . oauth2 . revoke ( token . access_token ) ;
112+ gapi . client . setToken ( '' ) ;
113+ document . getElementById ( 'content' ) . innerText = '' ;
114+ document . getElementById ( 'authorize_button' ) . innerText = 'Authorize' ;
115+ document . getElementById ( 'signout_button' ) . style . visibility = 'hidden' ;
116+ }
117+ }
118+
119+ /**
120+ * Print the names and majors of students in a sample spreadsheet:
121+ * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
122+ */
123+ async function listMajors ( ) {
124+ let response ;
125+ try {
126+ // Fetch first 10 files
127+ response = await gapi . client . sheets . spreadsheets . values . get ( {
128+ spreadsheetId : '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms' ,
129+ range : 'Class Data!A2:E' ,
130+ } ) ;
131+ } catch ( err ) {
132+ document . getElementById ( 'content' ) . innerText = err . message ;
133+ return ;
134+ }
135+ const range = response . result ;
136+ if ( ! range || ! range . values || range . values . length == 0 ) {
137+ document . getElementById ( 'content' ) . innerText = 'No values found.' ;
138+ return ;
139+ }
140+ // Flatten to string to display
141+ const output = range . values . reduce (
142+ ( str , row ) => `${ str } ${ row [ 0 ] } ${ row [ 4 ] } ,
143+ 'Name, Major:\n' ) ;
144+ document . getElementById ( 'content' ) . innerText = output ;
145+ }
146+ </ script >
147+ < script async defer src ="https://apis.google.com/js/api.js " onload ="gapiLoaded() "> </ script >
148+ < script async defer src ="https://accounts.google.com/gsi/client " onload ="gisLoaded() "> </ script >
149+ </ body >
150+ </ html >
0 commit comments