sheets.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Google Sheets API Quickstart</title>
  5. <meta charset="utf-8" />
  6. </head>
  7. <body>
  8. <p>Google Sheets API Quickstart</p>
  9. <!--Add buttons to initiate auth sequence and sign out-->
  10. <button id="authorize_button" style="display: none;">Authorize</button>
  11. <button id="signout_button" style="display: none;">Sign Out</button>
  12. <pre id="content" style="white-space: pre-wrap;"></pre>
  13. <script type="text/javascript">
  14. // Client ID and API key from the Developer Console
  15. var CLIENT_ID = '72444000263-arb8mvd5ko1i4mb7cel04bbuiipej6lc.apps.googleusercontent.com';
  16. var API_KEY = 'AIzaSyBfM8IAHkv5JRlo3nCxWpp5b3Zw2XnWXZY';
  17. // Array of API discovery doc URLs for APIs used by the quickstart
  18. var DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];
  19. // Authorization scopes required by the API; multiple scopes can be
  20. // included, separated by spaces.
  21. var SCOPES = "https://www.googleapis.com/auth/spreadsheets.readonly";
  22. var authorizeButton = document.getElementById('authorize_button');
  23. var signoutButton = document.getElementById('signout_button');
  24. /**
  25. * On load, called to load the auth2 library and API client library.
  26. */
  27. function handleClientLoad() {
  28. gapi.load('client:auth2', initClient);
  29. }
  30. /**
  31. * Initializes the API client library and sets up sign-in state
  32. * listeners.
  33. */
  34. function initClient() {
  35. gapi.client.init({
  36. apiKey: API_KEY,
  37. clientId: CLIENT_ID,
  38. discoveryDocs: DISCOVERY_DOCS,
  39. scope: SCOPES
  40. }).then(function () {
  41. // Listen for sign-in state changes.
  42. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
  43. // Handle the initial sign-in state.
  44. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
  45. authorizeButton.onclick = handleAuthClick;
  46. signoutButton.onclick = handleSignoutClick;
  47. }, function(error) {
  48. appendPre(JSON.stringify(error, null, 2));
  49. });
  50. }
  51. /**
  52. * Called when the signed in status changes, to update the UI
  53. * appropriately. After a sign-in, the API is called.
  54. */
  55. function updateSigninStatus(isSignedIn) {
  56. if (isSignedIn) {
  57. authorizeButton.style.display = 'none';
  58. signoutButton.style.display = 'block';
  59. listMajors();
  60. } else {
  61. authorizeButton.style.display = 'block';
  62. signoutButton.style.display = 'none';
  63. }
  64. }
  65. /**
  66. * Sign in the user upon button click.
  67. */
  68. function handleAuthClick(event) {
  69. gapi.auth2.getAuthInstance().signIn();
  70. }
  71. /**
  72. * Sign out the user upon button click.
  73. */
  74. function handleSignoutClick(event) {
  75. gapi.auth2.getAuthInstance().signOut();
  76. }
  77. /**
  78. * Append a pre element to the body containing the given message
  79. * as its text node. Used to display the results of the API call.
  80. *
  81. * @param {string} message Text to be placed in pre element.
  82. */
  83. function appendPre(message) {
  84. var pre = document.getElementById('content');
  85. var textContent = document.createTextNode(message + '\n');
  86. pre.appendChild(textContent);
  87. }
  88. /**
  89. * Print the names and majors of students in a sample spreadsheet:
  90. * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
  91. */
  92. function listMajors() {
  93. gapi.client.sheets.spreadsheets.values.get({
  94. spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
  95. range: 'Class Data!A2:E',
  96. }).then(function(response) {
  97. var range = response.result;
  98. if (range.values.length > 0) {
  99. appendPre('Name, Major:');
  100. for (i = 0; i < range.values.length; i++) {
  101. var row = range.values[i];
  102. // Print columns A and E, which correspond to indices 0 and 4.
  103. appendPre(row[0] + ', ' + row[4]);
  104. }
  105. } else {
  106. appendPre('No data found.');
  107. }
  108. }, function(response) {
  109. appendPre('Error: ' + response.result.error.message);
  110. });
  111. }
  112. </script>
  113. <script async defer src="https://apis.google.com/js/api.js"
  114. onload="this.onload=function(){};handleClientLoad()"
  115. onreadystatechange="if (this.readyState === 'complete') this.onload()">
  116. </script>
  117. </body>
  118. </html>