quickstart-modified.html

<!-- Modify from:
  https://github.com/googleworkspace/browser-samples/blob/c056755f6d559eca34368b890d8aa3c593162106/sheets/quickstart/index.html
-->
<!DOCTYPE html>
<html>

<head>
  <title>Sheets API Quickstart</title>
  <meta charset="utf-8" />
  <script src="https://apis.google.com/js/api.js"></script>
  <script src="https://accounts.google.com/gsi/client"></script>
</head>

<body>
  <p>Sheets API Quickstart</p>
  <div id="buttonDiv"></div> 

  <script type="text/javascript">
    // from https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library
    function parseJwt (token) {
      var base64Url = token.split('.')[1];
      var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
      }).join(''));

      return JSON.parse(jsonPayload);
    };

    console.log(`Add buttons to initiate auth sequence and sign out.`);
    const authorize_button = document.createElement('button'),
      signout_button = document.createElement('button'),
      refresh_button = document.createElement('button'),
      content = document.createElement('pre');

    authorize_button.innerHTML = 'Authorize';
    signout_button.innerHTML = 'Sign Out';
    refresh_button.innerHTML = 'Refresh';

    content.style.whiteSpace = 'pre-wrap';

    document.body.appendChild(authorize_button);
    document.body.appendChild(signout_button);
    document.body.appendChild(refresh_button);
    document.body.appendChild(content);

    console.log(`api.js is loaded.`);
    gapi.load('client', async () => {
      // Loads the discovery doc to initialize the API after the API client is loaded.
      await gapi.client.init({
        // Set to API key from the Developer Console
        apiKey: 'AIzaSyCRfe3-dnm9GGMH_PFm9m5WHBMb_8U9HXY',
        // Discovery doc URL for APIs used by the quickstart
        discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
      });
    });

    console.log(`Google Identity Services are loaded.`);
    tokenClient = google.accounts.oauth2.initTokenClient({
      ux_mode: "redirect",// NOT WORKING
      login_uri: "http://localhost/quickstart-modified.html",
      // Set to client ID from the Developer Console
      client_id: '289902636224-oro06s681gdgk1kqrv8o1oca2shocfr4.apps.googleusercontent.com',
      // Authorization scopes required by the API; multiple scopes can be included, separated by spaces.
      scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
      callback: async resp => {
        console.log(resp);
        if (resp.error !== undefined) throw resp;

        // https://developers.google.com/identity/gsi/web/guides/display-button
        google.accounts.id.initialize({
          ux_mode: "redirect",
          login_uri: "http://localhost/quickstart-modified.html",
          client_id: "289902636224-oro06s681gdgk1kqrv8o1oca2shocfr4.apps.googleusercontent.com",
          callback: response => console.log(parseJwt(response.credential))
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"), { theme: "outline" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog

        await listMajors();
      }
    });

    console.log(`Sign in the user upon button click and page load.`);
    authorize_button.onclick = onload = () => tokenClient.requestAccessToken();

    console.log(`Sign out the user upon button click.`);
    signout_button.onclick = () => {
      const token = gapi.client.getToken();
      if (token !== null) {
        google.accounts.oauth2.revoke(token.access_token);
        gapi.client.setToken('');
        content.innerText = '';
      }
    }

    console.log(`
      Print the content of the spreadsheet:
      https://docs.google.com/spreadsheets/d/1uPs6CBFz1edahBCSY8HzUTmippmlutsDuhFfvM1tsiw
    `);
    const listMajors = refresh_button.onclick = async () => {
      let response;
      try {
        response = await gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: '1uPs6CBFz1edahBCSY8HzUTmippmlutsDuhFfvM1tsiw',
          range: '同學資料!B2:F',
        });
      } catch (err) {
        content.innerText = err.message;
        return;
      }
      const range = response.result, rv = range.values;
      if (!range || !rv || rv.length == 0) {
        content.innerText = 'No values found.';
        return;
      }
      for(let i=-1; ++i < rv.length-1;){
        const x = rv[i];
        for(const y of rv.slice(i+1)) if(y[0] === x[0]){
          for(let j=0; ++j < 5;){
            // console.log(x,y);
            if(!y[j] && x[j])
              y[j] = x[j];
          }
          rv.splice(i--,1);
          break;
        }
      }
      // Flatten to string to display
      content.innerText =
        rv.reduce(
          (str, row) => `${str}${row[0]}, ${row[1]}, ${row[2]}, ${row[3]}, ${row[4]}\n`,
          '科系, 姓名, 學號, 電話, 座位\n'
        );
      console.log(rv);
    }

  </script>
</body>

</html>