-
-
Notifications
You must be signed in to change notification settings - Fork 45
/
Copy pathindex.html
79 lines (73 loc) · 4.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<html>
<head>
<title>Twitch Implicit Auth Example</title>
<link rel="stylesheet" href="/twitch_misc/style.css" />
</head>
<body>
<p><a href="https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow" target="_blank">Implicit Auth</a> is a way to get a <a href="https://dev.twitch.tv/docs/authentication#types-of-tokens" target="_blank">User Access Token</a> in a pure front end environment, it needs only a ClientID</p>
<p>Get the code for this example on <a href="https://github.com/BarryCarlyon/twitch_misc/tree/main/authentication/implicit_auth">Github</a> or just View the source instead</p>
<ul>
<li>
<a href="" id="authorize_public">Authorize and get Public data</a>
</li>
<li>
<a href="" id="authorize_email">Authorize and get Public data + email</a>
</li>
</ul>
<p>After testing you can Disconnect the "Barry's GitHub Examples" Application on the <a href="https://www.twitch.tv/settings/connections">Connections page</a></p>
<div id="access_token"></div>
<div id="user_data"></div>
<script type="text/javascript">
// These are set for the GitHub Pages Example
// Substitute as needed
var client_id = 'hozgh446gdilj5knsrsxxz8tahr3koz';
var redirect = 'https://barrycarlyon.github.io/twitch_misc/authentication/implicit_auth/';
document.getElementById('authorize_public').setAttribute('href', `https://id.twitch.tv/oauth2/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect)}&response_type=token`);
document.getElementById('authorize_email').setAttribute('href', `https://id.twitch.tv/oauth2/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(redirect)}&response_type=token&scope=user:read:email`);
document.getElementById('access_token').textContent = '';
if (document.location.hash && document.location.hash != '') {
var parsedHash = new URLSearchParams(window.location.hash.slice(1));
if (parsedHash.get('access_token')) {
var access_token = parsedHash.get('access_token');
document.getElementById('access_token').textContent = `Your Access Token extracted from the #url is ${access_token}`;
document.getElementById('user_data').textContent = 'Loading';
// call API
fetch(
'https://api.twitch.tv/helix/users',
{
"headers": {
"Client-ID": client_id,
"Authorization": `Bearer ${access_token}`
}
}
)
.then(resp => resp.json())
.then(resp => {
document.getElementById('user_data').innerHTML = '<p>Your Twitch Profile from Helix:</p>';
var table = document.createElement('table');
document.getElementById('user_data').append(table);
for (var key in resp.data[0]) {
var tr = document.createElement('tr');
table.append(tr);
var td = document.createElement('td');
td.textContent = key;
tr.append(td);
var td = document.createElement('td');
td.textContent = resp.data[0][key];
tr.append(td);
}
})
.catch(err => {
console.log(err);
document.getElementById('user_data').textContent = 'Something went wrong';
});
}
} else if (document.location.search && document.location.search != '') {
var parsedParams = new URLSearchParams(window.location.search);
if (parsedParams.get('error_description')) {
document.getElementById('access_token').textContent = `${parsedParams.get('error')} - ${parsedParams.get('error_description')}`;
}
}
</script>
</body>
</html>