Last active
January 6, 2020 17:35
-
-
Save tomnielsen/b0d6d09f9d69114a07beb825b69368a0 to your computer and use it in GitHub Desktop.
Example of how to call Google signin using async calls using ES6.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment