woloski/README.md

## README.md

      
    Raw
  

              README.md
            
          
Create a Client ID and an API Key on Google API Console. Set the Allowed Origins (e.g. localhost:3000).
Create an app in Auth0 and set the Allowed Origins (e.g. localhost:3000) and the callback to https://yours.auth0.com/mobile


## 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>
	<!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>