guide/code-samples/oauth/simple-oauth-webserver/index.html at main · discordjs/guide · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>My Discord OAuth2 App</title>
</head>
<body>
	<div id="info">
		Hoi!
	</div>
	<!-- Note: This example uses the implicit grant flow (https://discordjs.guide/oauth2/#implicit-grant-flow), so make sure you use `response_type=token` here -->
	<a id="login" style="display: none;" href="your-oauth2-URL-here">Identify Yourself</a>
	<script>
		function generateRandomString() {
			let randomString = '';
			const randomNumber = Math.floor(Math.random() * 10);

			for (let i = 0; i < 20 + randomNumber; i++) {
				randomString += String.fromCharCode(33 + Math.floor(Math.random() * 94));
			}

			return randomString;
		}

		window.onload = () => {
			const fragment = new URLSearchParams(window.location.hash.slice(1));
			const [accessToken, tokenType, state] = [fragment.get('access_token'), fragment.get('token_type'), fragment.get('state')];

			if (!accessToken) {
				const randomString = generateRandomString();
				localStorage.setItem('oauth-state', randomString);

				document.getElementById('login').href += `&state=${encodeURIComponent(btoa(randomString))}`;
				return document.getElementById('login').style.display = 'block';
			}

			if (localStorage.getItem('oauth-state') !== atob(decodeURIComponent(state))) {
				return console.log('You may have been click-jacked!');
			}

			fetch('https://discord.com/api/users/@me', {
				headers: {
					authorization: `${tokenType} ${accessToken}`,
				},
			})
				.then(result => result.json())
				.then(response => {
					const { username, discriminator } = response;
					document.getElementById('info').innerText += ` ${username}#${discriminator}`;
				})
				.catch(console.error);
		}
	</script>
</body>
</html>