surajsharma/cliff_ai_google_oAuth.html

## cliff_ai_google_oAuth.html
<!DOCTYPE html>
<html>
  <head>
    <title>Sheets API Quickstart</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>Sheets API Quickstart</p>

    <!--Add buttons to initiate auth sequence and sign out-->
    <button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
    <button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

    <pre id="content" style="white-space: pre-wrap;"></pre>

    <script type="text/javascript">
      /* exported gapiLoaded */
      /* exported gisLoaded */
      /* exported handleAuthClick */
      /* exported handleSignoutClick */

      // TODO(developer): Set to client ID and API key from the Developer Console
      const CLIENT_ID = '780707646972-84u3voauonu5f7bs181ho0dl74955u49.apps.googleusercontent.com';
      const API_KEY = 'AIzaSyCf8pB6oFFup072feLjMafo5CkT-cuCTDM';

      // Discovery doc URL for APIs used by the quickstart
      const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

      // Authorization scopes required by the API; multiple scopes can be
      // included, separated by spaces.
      const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/spreadsheets.readonly';

      let tokenClient;
      let gapiInited = false;
      let gisInited = false;

      document.getElementById('authorize_button').style.visibility = 'hidden';
      document.getElementById('signout_button').style.visibility = 'hidden';

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load('client', intializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function intializeGapiClient() {
        await gapi.client.init({
          apiKey: API_KEY,
          discoveryDocs: [DISCOVERY_DOC],

        });
        gapiInited = true;
        maybeEnableButtons();
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        tokenClient = google.accounts.oauth2.initTokenClient({
          client_id: CLIENT_ID,
          scope: SCOPES,

          callback: '', // defined later

        });
        gisInited = true;
        maybeEnableButtons();
      }

      /**
       * Enables user interaction after all libraries are loaded.
       */
      function maybeEnableButtons() {
        if (gapiInited && gisInited) {
          document.getElementById('authorize_button').style.visibility = 'visible';
        }
      }

      /**
       *  Sign in the user upon button click.
       */
      function handleAuthClick() {
        tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
            throw (resp);
          }
          document.getElementById('signout_button').style.visibility = 'visible';
          document.getElementById('authorize_button').innerText = 'Refresh';
          await listSheets();
        };

        if (gapi.client.getToken() === null) {
          // Prompt the user to select a Google Account and ask for consent to share their data
          // when establishing a new session.
          tokenClient.requestAccessToken({prompt: 'consent'});
        } else {
          // Skip display of account chooser and consent dialog for an existing session.
          tokenClient.requestAccessToken({prompt: ''});
        }
      }

      /**
       *  Sign out the user upon button click.
       */
      function handleSignoutClick() {
        const token = gapi.client.getToken();
        if (token !== null) {
          google.accounts.oauth2.revoke(token.access_token);
          gapi.client.setToken('');
          document.getElementById('content').innerText = '';
          document.getElementById('authorize_button').innerText = 'Authorize';
          document.getElementById('signout_button').style.visibility = 'hidden';
        }
      }

      /**
       * Print the names and majors of students in a sample spreadsheet:
       * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
       */
      async function listSheets() {
        let response;
        try {
          console.log("HERE");

          response = await gapi.client.drive.files.list({

            // get only spreadsheets
            q: "mimeType='application/vnd.google-apps.spreadsheet'",

            'pageSize':1000,
            'fields':'files(id,name)'
          })

        } catch (err) {

          document.getElementById('content').innerText = err.message;
          return;
        }

        const files = response.result.files;

        const token = gapi.client.getToken();

        console.log(files,"FILES", token);

        // Flatten to string to display
        const output = files.reduce((str, file) => `${str}${file.name} (${file.id}\n`,'Files:\n');
        document.getElementById('content').innerText = output;`)`;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sheets API Quickstart</title>
	<meta charset="utf-8" />
	</head>
	<body>
	<p>Sheets API Quickstart</p>

	<!--Add buttons to initiate auth sequence and sign out-->
	<button id="authorize_button" onclick="handleAuthClick()">Authorize</button>
	<button id="signout_button" onclick="handleSignoutClick()">Sign Out</button>

	<pre id="content" style="white-space: pre-wrap;"></pre>

	<script type="text/javascript">
	/* exported gapiLoaded */
	/* exported gisLoaded */
	/* exported handleAuthClick */
	/* exported handleSignoutClick */

	// TODO(developer): Set to client ID and API key from the Developer Console
	const CLIENT_ID = '780707646972-84u3voauonu5f7bs181ho0dl74955u49.apps.googleusercontent.com';
	const API_KEY = 'AIzaSyCf8pB6oFFup072feLjMafo5CkT-cuCTDM';

	// Discovery doc URL for APIs used by the quickstart
	const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

	// Authorization scopes required by the API; multiple scopes can be
	// included, separated by spaces.
	const SCOPES = 'https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/spreadsheets.readonly';

	let tokenClient;
	let gapiInited = false;
	let gisInited = false;

	document.getElementById('authorize_button').style.visibility = 'hidden';
	document.getElementById('signout_button').style.visibility = 'hidden';

	/**
	* Callback after api.js is loaded.
	*/
	function gapiLoaded() {
	gapi.load('client', intializeGapiClient);
	}

	/**
	* Callback after the API client is loaded. Loads the
	* discovery doc to initialize the API.
	*/
	async function intializeGapiClient() {
	await gapi.client.init({
	apiKey: API_KEY,
	discoveryDocs: [DISCOVERY_DOC],

	});
	gapiInited = true;
	maybeEnableButtons();
	}

	/**
	* Callback after Google Identity Services are loaded.
	*/
	function gisLoaded() {
	tokenClient = google.accounts.oauth2.initTokenClient({
	client_id: CLIENT_ID,
	scope: SCOPES,

	callback: '', // defined later

	});
	gisInited = true;
	maybeEnableButtons();
	}

	/**
	* Enables user interaction after all libraries are loaded.
	*/
	function maybeEnableButtons() {
	if (gapiInited && gisInited) {
	document.getElementById('authorize_button').style.visibility = 'visible';
	}
	}

	/**
	* Sign in the user upon button click.
	*/
	function handleAuthClick() {
	tokenClient.callback = async (resp) => {
	if (resp.error !== undefined) {
	throw (resp);
	}
	document.getElementById('signout_button').style.visibility = 'visible';
	document.getElementById('authorize_button').innerText = 'Refresh';
	await listSheets();
	};

	if (gapi.client.getToken() === null) {
	// Prompt the user to select a Google Account and ask for consent to share their data
	// when establishing a new session.
	tokenClient.requestAccessToken({prompt: 'consent'});
	} else {
	// Skip display of account chooser and consent dialog for an existing session.
	tokenClient.requestAccessToken({prompt: ''});
	}
	}

	/**
	* Sign out the user upon button click.
	*/
	function handleSignoutClick() {
	const token = gapi.client.getToken();
	if (token !== null) {
	google.accounts.oauth2.revoke(token.access_token);
	gapi.client.setToken('');
	document.getElementById('content').innerText = '';
	document.getElementById('authorize_button').innerText = 'Authorize';
	document.getElementById('signout_button').style.visibility = 'hidden';
	}
	}

	/**
	* Print the names and majors of students in a sample spreadsheet:
	* https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit
	*/
	async function listSheets() {
	let response;
	try {
	console.log("HERE");

	response = await gapi.client.drive.files.list({

	// get only spreadsheets
	q: "mimeType='application/vnd.google-apps.spreadsheet'",

	'pageSize':1000,
	'fields':'files(id,name)'
	})

	} catch (err) {

	document.getElementById('content').innerText = err.message;
	return;
	}

	const files = response.result.files;

	const token = gapi.client.getToken();

	console.log(files,"FILES", token);

	// Flatten to string to display
	const output = files.reduce((str, file) => `${str}${file.name} (${file.id}\n`,'Files:\n');
	document.getElementById('content').innerText = output;`)`;
	}
	</script>
	<script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
	<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
	</body>
	</html>