Skip to content
This repository was archived by the owner on Aug 12, 2025. It is now read-only.

Commit 47c49fe

Browse files
AndyDiamondsteinAndyDiamondstein
authored
Add file for coming-soon JS quickstart guide.
1 parent b9e6a9a commit 47c49fe

1 file changed

Lines changed: 120 additions & 0 deletions

File tree

‎javascript/quickstart.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>YouTube Data API Quickstart</title>
5+
<meta charset='utf-8' />
6+
</head>
7+
<body>
8+
<p>YouTube Data API Quickstart</p>
9+
10+
<!--Add buttons to initiate auth sequence and sign out-->
11+
<button id="authorize-button" style="display: none;">Authorize</button>
12+
<button id="signout-button" style="display: none;">Sign Out</button>
13+
14+
<pre id="content"></pre>
15+
16+
<script type="text/javascript">
17+
// Client ID and API key from the Developer Console
18+
var CLIENT_ID = '<YOUR_CLIENT_ID>';
19+
20+
// Array of API discovery doc URLs for APIs used by the quickstart
21+
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"];
22+
23+
// Authorization scopes required by the API. If using multiple scopes,
24+
// separated them with spaces.
25+
var SCOPES = 'https://www.googleapis.com/auth/youtube.readonly';
26+
27+
var authorizeButton = document.getElementById('authorize-button');
28+
var signoutButton = document.getElementById('signout-button');
29+
30+
/**
31+
* On load, called to load the auth2 library and API client library.
32+
*/
33+
function handleClientLoad() {
34+
gapi.load('client:auth2', initClient);
35+
}
36+
37+
/**
38+
* Initializes the API client library and sets up sign-in state
39+
* listeners.
40+
*/
41+
function initClient() {
42+
gapi.client.init({
43+
discoveryDocs: DISCOVERY_DOCS,
44+
clientId: CLIENT_ID,
45+
scope: SCOPES
46+
}).then(function () {
47+
// Listen for sign-in state changes.
48+
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
49+
50+
// Handle the initial sign-in state.
51+
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
52+
authorizeButton.onclick = handleAuthClick;
53+
signoutButton.onclick = handleSignoutClick;
54+
});
55+
}
56+
57+
/**
58+
* Called when the signed in status changes, to update the UI
59+
* appropriately. After a sign-in, the API is called.
60+
*/
61+
function updateSigninStatus(isSignedIn) {
62+
if (isSignedIn) {
63+
authorizeButton.style.display = 'none';
64+
signoutButton.style.display = 'block';
65+
getChannel();
66+
} else {
67+
authorizeButton.style.display = 'block';
68+
signoutButton.style.display = 'none';
69+
}
70+
}
71+
72+
/**
73+
* Sign in the user upon button click.
74+
*/
75+
function handleAuthClick(event) {
76+
gapi.auth2.getAuthInstance().signIn();
77+
}
78+
79+
/**
80+
* Sign out the user upon button click.
81+
*/
82+
function handleSignoutClick(event) {
83+
gapi.auth2.getAuthInstance().signOut();
84+
}
85+
86+
/**
87+
* Append text to a pre element in the body, adding the given message
88+
* to a text node in that element. Used to display info from API response.
89+
*
90+
* @param {string} message Text to be placed in pre element.
91+
*/
92+
function appendPre(message) {
93+
var pre = document.getElementById('content');
94+
var textContent = document.createTextNode(message + '\n');
95+
pre.appendChild(textContent);
96+
}
97+
98+
/**
99+
* Print files.
100+
*/
101+
function getChannel() {
102+
gapi.client.youtube.channels.list({
103+
'part': 'snippet,contentDetails,statistics',
104+
'forUsername': 'GoogleDevelopers'
105+
}).then(function(response) {
106+
var channel = response.result.items[0];
107+
appendPre('This channel\'s ID is ' + channel.id + '. ' +
108+
'Its title is \'' + channel.snippet.title + ', ' +
109+
'and it has ' + channel.statistics.viewCount + ' views.');
110+
});
111+
}
112+
113+
</script>
114+
115+
<script async defer src="https://apis.google.com/js/api.js"
116+
onload="this.onload=function(){};handleClientLoad()"
117+
onreadystatechange="if (this.readyState === 'complete') this.onload()">
118+
</script>
119+
</body>
120+
</html>

0 commit comments

Comments
 (0)