Skip to content

Instantly share code, notes, and snippets.

@woloski

woloski/README.md

Created October 13, 2014 15:53
Show Gist options
  • Save woloski/190f10d0d120318082a2 to your computer and use it in GitHub Desktop.
Save woloski/190f10d0d120318082a2 to your computer and use it in GitHub Desktop.
Download ZIP
Authenticate with Google through Auth0 and refresh the access token from Browser
Raw
README.md
  1. Create a Client ID and an API Key on Google API Console. Set the Allowed Origins (e.g. localhost:3000).
  2. Create an app in Auth0 and set the Allowed Origins (e.g. localhost:3000) and the callback to https://yours.auth0.com/mobile

Raw
google-refresh-token-from-js.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<input type="submit" class="btn-login" id="btn-login" value="Login" />
<input type="submit" class="btn-refresh" id="btn-refresh" value="Refresh Acccess Token" />
<input type="submit" class="btn-api" id="btn-api" value="Call /me Google API" />
<p>My access token is <span id="at"></span></p>
<script type="text/javascript">
// Create a Client ID on Google API Console and enter localhost:3000 as a valid origin
var GOOGLE_CLIENTID = '104565000066-9c5jq38snvb7hib5um6hubn6ken4kq2b.apps.googleusercontent.com';
// Create a Browser Key on Google API Console and allow http://localhost:3000/*
var GOOGLE_APIKEY = 'AIzaSyB-O8tPvKl07e-dzOAnFjvXrJkAiC9yLQ4';
// Enter the Scopes you need.
var GOOGLE_SCOPES = 'https://www.googleapis.com/auth/plus.me';
// Create an Auth0 app and set localhost:3000 as a valid origin and https://yours.auth0.com/mobile as a valid callback
var AUTH0_CLIENTID = '3hy8Ld9ApIo8l6Og2glrYuF1u25Sohms';
function initializeGapi() {
gapi.client.setApiKey(GOOGLE_APIKEY);
}
function getOrRefreshGoogleAccessToken() {
gapi.auth.authorize({client_id: GOOGLE_CLIENTID, scope: GOOGLE_SCOPES, immediate: true}, function(authResult) {
if (authResult) {
document.getElementById('at').textContent = authResult.access_token;
}
});
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.load('plus', 'v1', function() {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
request.execute(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(resp.displayName));
document.getElementById('content').appendChild(heading);
});
});
}
var widget;
document.addEventListener( "DOMContentLoaded", function(){
widget = new Auth0Widget({
domain: 'matugit.auth0.com',
clientID: AUTH0_CLIENTID,
callbackURL: location.href,
callbackOnLocationHash: true
});
});
var userProfile;
document.getElementById('btn-login').addEventListener('click', function() {
widget.signin({ popup: true }, null, function(err, profile, token) {
if (err) {
// Error callback
console.log(err);
} else {
// Success calback
// Save the JWT token.
localStorage.setItem('userToken', token);
// Save the profile
userProfile = profile;
// only do this if the user logged in with google
if (userProfile.identities[0].provider === 'google-oauth2') {
getOrRefreshGoogleAccessToken();
}
}
});
});
document.getElementById('btn-refresh').addEventListener('click', getOrRefreshGoogleAccessToken);
document.getElementById('btn-api').addEventListener('click', makeApiCall);
</script>
<script src="https://apis.google.com/js/client.js?onload=initializeGapi"></script>
<script src="//cdn.auth0.com/w2/auth0-widget-5.2.min.js"></script>
<div id="content"></div>
<p>Retrieves your profile name using the Google Plus API.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment