tomnielsen/google_signin_async_example.html

## google_signin_async_example.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test Google signin automatic with fallback to prompt</title>
</head>
<body>

<script>
  window.gapiPromise = (function () {
    return new Promise(function (resolve, reject) {
      // The function is called by the platform.js script with the onload parameter
      window.onLoadCallback = function () {
        resolve(true);
      };
    });
  }());

  /**
   *
   * @returns {Promise<{ email:{string}, name:{string}, photo:{string}, userid:{string},access_token:{string}}>}}>}
   * @constructor
   */
  const GoogleAuthAsync = async () => {
    const CLIENTID = 'xxxxxxxxx.apps.googleusercontent.com';  // YOUR CLIENTID HERE
    // To enter one or more authentication scopes, refer to the documentation for the API.
    const SCOPES = [
      'https://www.googleapis.com/auth/userinfo.profile',
      'https://www.googleapis.com/auth/userinfo.email',
      'https://www.googleapis.com/auth/cloudkms',   // YOUR PERMISSIONS HERE
    ].join(' ');
    // start with 'consent', then esculate to 'select_account'
    const PROMPT = 'consent';
    const IMMEDIATE = true;
    try {
      await window.gapiPromise;
    } catch (err) {
      console.log(err, err.stack);
    }
    return new Promise(function (resolve, reject) {
      try {
        window.gapi.load('auth2', () => {
          // inner function since regular login and fallback both use
          const extractResultDataFunc = (auth2) => {
            const googleUser = auth2.currentUser.get();
            const userid = googleUser.getId();
            const access_token = googleUser.getAuthResponse().access_token;
            // const id_token = googleUser.getAuthResponse().id_token;
            const profile = googleUser.getBasicProfile();
            const email = profile.getEmail();
            const name = profile.getName();
            const photo = profile.getImageUrl();

            // RESULT layout!!!!
            return {
              email,
              name,
              photo,
              userid,
              access_token,
            };
          };

          // signin options will have prompt changed if silent signin fails.
          let signinoptions = {
            client_id: CLIENTID,
            cookiepolicy: 'single_host_origin',
            scope: SCOPES,
            prompt: PROMPT,
            immediate: IMMEDIATE,
            response_type: 'id_token permission'
          };

          window.gapi.auth2.init(signinoptions).then(() => {
            const auth2 = window.gapi.auth2.getAuthInstance();
            const signedin = auth2.isSignedIn.get();
            if (signedin) {
              resolve(extractResultDataFunc(auth2));
            } else {
              signinoptions.prompt = 'select_account';
                auth2.signIn(signinoptions).then(() => {
                  const signedin = auth2.isSignedIn.get();
                  if (signedin) {
                    resolve(extractResultDataFunc(auth2));
                  } else {
                    reject("not_signed_in");
                  }
                }).catch( (err) => {
                  reject(err.error);
                });
            }
          });
        });
      } catch(err) {
        // don't throw out of a promise, reject.
        reject(err.error);
      }
    });
  };


  async function test() {
    try {
      const result = await GoogleAuthAsync();

      document.getElementById('email').value = result.email;
      document.getElementById('name').value = result.name;
      document.getElementById('userid').value = result.userid;
      document.getElementById('token').value = result.access_token;
      document.getElementById('photo').src = result.photo;
    } catch (err) {
      // common errors strings "popup_blocked_by_browser" | "popup_closed_by_user"
      console.log(err);
      document.getElementById('error').value = err;
    }
  }


  document.addEventListener('DOMContentLoaded', (evt) => {
    document.getElementById('auth').addEventListener('click', async (e) => {
      e.preventDefault();
      await test();
    });
  });


  // test();  // you can see that the async will do the right thing even it called before pageload
</script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<button id="auth">Do it</button>
<br>
<input type="text" readonly id="email" placeholder="email" style="width:50%"><br>
<input type="text" readonly id="name" placeholder="name" style="width:50%"><br>
<input type="text" readonly id="userid" placeholder="userid" style="width:50%"><br>
<input type="text" readonly id="token" placeholder="token" style="width:50%"><br>
<img src="" id="photo"><br><br><br>
<input type="text" readonly id="error" placeholder="error" style="width:50%"><br>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Test Google signin automatic with fallback to prompt</title>
	</head>
	<body>

	<script>
	window.gapiPromise = (function () {
	return new Promise(function (resolve, reject) {
	// The function is called by the platform.js script with the onload parameter
	window.onLoadCallback = function () {
	resolve(true);
	};
	});
	}());

	/**
	*
	* @returns {Promise<{ email:{string}, name:{string}, photo:{string}, userid:{string},access_token:{string}}>}}>}
	* @constructor
	*/
	const GoogleAuthAsync = async () => {
	const CLIENTID = 'xxxxxxxxx.apps.googleusercontent.com'; // YOUR CLIENTID HERE
	// To enter one or more authentication scopes, refer to the documentation for the API.
	const SCOPES = [
	'https://www.googleapis.com/auth/userinfo.profile',
	'https://www.googleapis.com/auth/userinfo.email',
	'https://www.googleapis.com/auth/cloudkms', // YOUR PERMISSIONS HERE
	].join(' ');
	// start with 'consent', then esculate to 'select_account'
	const PROMPT = 'consent';
	const IMMEDIATE = true;
	try {
	await window.gapiPromise;
	} catch (err) {
	console.log(err, err.stack);
	}
	return new Promise(function (resolve, reject) {
	try {
	window.gapi.load('auth2', () => {
	// inner function since regular login and fallback both use
	const extractResultDataFunc = (auth2) => {
	const googleUser = auth2.currentUser.get();
	const userid = googleUser.getId();
	const access_token = googleUser.getAuthResponse().access_token;
	// const id_token = googleUser.getAuthResponse().id_token;
	const profile = googleUser.getBasicProfile();
	const email = profile.getEmail();
	const name = profile.getName();
	const photo = profile.getImageUrl();

	// RESULT layout!!!!
	return {
	email,
	name,
	photo,
	userid,
	access_token,
	};
	};

	// signin options will have prompt changed if silent signin fails.
	let signinoptions = {
	client_id: CLIENTID,
	cookiepolicy: 'single_host_origin',
	scope: SCOPES,
	prompt: PROMPT,
	immediate: IMMEDIATE,
	response_type: 'id_token permission'
	};

	window.gapi.auth2.init(signinoptions).then(() => {
	const auth2 = window.gapi.auth2.getAuthInstance();
	const signedin = auth2.isSignedIn.get();
	if (signedin) {
	resolve(extractResultDataFunc(auth2));
	} else {
	signinoptions.prompt = 'select_account';
	auth2.signIn(signinoptions).then(() => {
	const signedin = auth2.isSignedIn.get();
	if (signedin) {
	resolve(extractResultDataFunc(auth2));
	} else {
	reject("not_signed_in");
	}
	}).catch( (err) => {
	reject(err.error);
	});
	}
	});
	});
	} catch(err) {
	// don't throw out of a promise, reject.
	reject(err.error);
	}
	});
	};


	async function test() {
	try {
	const result = await GoogleAuthAsync();

	document.getElementById('email').value = result.email;
	document.getElementById('name').value = result.name;
	document.getElementById('userid').value = result.userid;
	document.getElementById('token').value = result.access_token;
	document.getElementById('photo').src = result.photo;
	} catch (err) {
	// common errors strings "popup_blocked_by_browser" \| "popup_closed_by_user"
	console.log(err);
	document.getElementById('error').value = err;
	}
	}


	document.addEventListener('DOMContentLoaded', (evt) => {
	document.getElementById('auth').addEventListener('click', async (e) => {
	e.preventDefault();
	await test();
	});
	});


	// test(); // you can see that the async will do the right thing even it called before pageload
	</script>
	<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
	<button id="auth">Do it</button>
	<br>
	<input type="text" readonly id="email" placeholder="email" style="width:50%"><br>
	<input type="text" readonly id="name" placeholder="name" style="width:50%"><br>
	<input type="text" readonly id="userid" placeholder="userid" style="width:50%"><br>
	<input type="text" readonly id="token" placeholder="token" style="width:50%"><br>
	<img src="" id="photo"><br><br><br>
	<input type="text" readonly id="error" placeholder="error" style="width:50%"><br>
	</body>
	</html>