phishy/auth.js

## auth.js
// The client ID is obtained from the {{ Google Cloud Console }}
// at {{ https://cloud.google.com/console }}.
// If you run this code from a server other than http://localhost,
// you need to register your own client ID.
var OAUTH2_CLIENT_ID = '__YOUR_CLIENT_ID__';
var OAUTH2_SCOPES = [
  'https://www.googleapis.com/auth/youtube'
];

// Upon loading, the Google APIs JS client automatically invokes this callback.
googleApiClientReady = function() {
  gapi.auth.init(function() {
    window.setTimeout(checkAuth, 1);
  });
}

// Attempt the immediate OAuth 2.0 client flow as soon as the page loads.
// If the currently logged-in Google Account has previously authorized
// the client specified as the OAUTH2_CLIENT_ID, then the authorization
// succeeds with no user intervention. Otherwise, it fails and the
// user interface that prompts for authorization needs to display.
function checkAuth() {
  gapi.auth.authorize({
    client_id: OAUTH2_CLIENT_ID,
    scope: OAUTH2_SCOPES,
    immediate: true
  }, handleAuthResult);
}

// Handle the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    // Authorization was successful. Hide authorization prompts and show
    // content that should be visible after authorization succeeds.
    $('.pre-auth').hide();
    $('.post-auth').show();
    loadAPIClientInterfaces();
  } else {
    // Make the #login-link clickable. Attempt a non-immediate OAuth 2.0
    // client flow. The current function is called when that flow completes.
    $('#login-link').click(function() {
      gapi.auth.authorize({
        client_id: OAUTH2_CLIENT_ID,
        scope: OAUTH2_SCOPES,
        immediate: false
        }, handleAuthResult);
    });
  }
}

// Load the client interfaces for the YouTube Analytics and Data APIs, which
// are required to use the Google APIs JS client. More info is available at
// https://developers.google.com/api-client-library/javascript/dev/dev_jscript#loading-the-client-library-and-the-api
function loadAPIClientInterfaces() {
  gapi.client.load('youtube', 'v3', function() {
    handleAPILoaded();
  });
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Search</title>
  </head>
  <body>
    <div id="login-container" class="pre-auth">This application requires access to your YouTube account.
      Please <a href="#" id="login-link">authorize</a> to continue.
    </div>
    <div id="buttons">
      <label> <input id="query" value='cats' type="text"/><button id="search-button" disabled onclick="search()">Search</button></label>
    </div>
    <div id="search-container">
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="auth.js"></script>
    <script src="search.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
  </body>
</html>

## search.js
// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

  request.execute(function(response) {
    var str = JSON.stringify(response.result);
    $('#search-container').html('<pre>' + str + '</pre>');
  });
}
	// The client ID is obtained from the {{ Google Cloud Console }}
	// at {{ https://cloud.google.com/console }}.
	// If you run this code from a server other than http://localhost,
	// you need to register your own client ID.
	var OAUTH2_CLIENT_ID = '__YOUR_CLIENT_ID__';
	var OAUTH2_SCOPES = [
	'https://www.googleapis.com/auth/youtube'
	];

	// Upon loading, the Google APIs JS client automatically invokes this callback.
	googleApiClientReady = function() {
	gapi.auth.init(function() {
	window.setTimeout(checkAuth, 1);
	});
	}

	// Attempt the immediate OAuth 2.0 client flow as soon as the page loads.
	// If the currently logged-in Google Account has previously authorized
	// the client specified as the OAUTH2_CLIENT_ID, then the authorization
	// succeeds with no user intervention. Otherwise, it fails and the
	// user interface that prompts for authorization needs to display.
	function checkAuth() {
	gapi.auth.authorize({
	client_id: OAUTH2_CLIENT_ID,
	scope: OAUTH2_SCOPES,
	immediate: true
	}, handleAuthResult);
	}

	// Handle the result of a gapi.auth.authorize() call.
	function handleAuthResult(authResult) {
	if (authResult && !authResult.error) {
	// Authorization was successful. Hide authorization prompts and show
	// content that should be visible after authorization succeeds.
	$('.pre-auth').hide();
	$('.post-auth').show();
	loadAPIClientInterfaces();
	} else {
	// Make the #login-link clickable. Attempt a non-immediate OAuth 2.0
	// client flow. The current function is called when that flow completes.
	$('#login-link').click(function() {
	gapi.auth.authorize({
	client_id: OAUTH2_CLIENT_ID,
	scope: OAUTH2_SCOPES,
	immediate: false
	}, handleAuthResult);
	});
	}
	}

	// Load the client interfaces for the YouTube Analytics and Data APIs, which
	// are required to use the Google APIs JS client. More info is available at
	// https://developers.google.com/api-client-library/javascript/dev/dev_jscript#loading-the-client-library-and-the-api
	function loadAPIClientInterfaces() {
	gapi.client.load('youtube', 'v3', function() {
	handleAPILoaded();
	});
	}
	<!doctype html>
	<html>
	<head>
	<title>Search</title>
	</head>
	<body>
	<div id="login-container" class="pre-auth">This application requires access to your YouTube account.
	Please <a href="#" id="login-link">authorize</a> to continue.
	</div>
	<div id="buttons">
	<label> <input id="query" value='cats' type="text"/><button id="search-button" disabled onclick="search()">Search</button></label>
	</div>
	<div id="search-container">
	</div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="auth.js"></script>
	<script src="search.js"></script>
	<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
	</body>
	</html>
	// After the API loads, call a function to enable the search box.
	function handleAPILoaded() {
	$('#search-button').attr('disabled', false);
	}

	// Search for a specified string.
	function search() {
	var q = $('#query').val();
	var request = gapi.client.youtube.search.list({
	q: q,
	part: 'snippet'
	});

	request.execute(function(response) {
	var str = JSON.stringify(response.result);
	$('#search-container').html('<pre>' + str + '</pre>');
	});
	}