Deploying to gh-pages from @ 79bf3f0 🚀

BarryCarlyon · Jun 21, 2023 · 9068361 · 9068361
1 parent a901625
commit 9068361
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 0 deletions.
diff --git a/authentication/implicit_auth/README.md b/authentication/implicit_auth/README.md
@@ -0,0 +1,36 @@
+## What is this example
+
+This is a very rough example of using implicit auth to auth.
+It provides two authentication links, one that'll just get public data, and a second that'll return public + the users email.
+
+## TRY THIS EXAMPLE NOW!
+
+This example is also available via GitHub Pages!
+
+Give it a [whirl here](https://barrycarlyon.github.io/twitch_misc/authentication/implicit_auth/)
+
+## Reference Documentation
+
+- [OAuth Implicit Code Flow](https://dev.twitch.tv/docs/authentication/getting-tokens-oauth#oauth-implicit-code-flow)
+
+## Setting up the config
+
+- Visit [Twitch Dev Console](https://dev.twitch.tv/console/)
+- Visit Applications
+- Manage your Application, or create one if you don't have one
+- Copy the Client ID into `client_id` JavaScript Variable
+- You'll need to throw this webpage into a website somewhere, and update the `redirect` in the html file and on the dev console accordingly.
+
+## Running the example
+
+This is so rough that you need to upload it somewhere or know how to start a WebServer on 127.0.0.1 port 80 locally
+
+If you have PHP installed
+
+> sudo php -S 127.0.0.1:80
+
+Will get you going real quick
+
+## Disconnecting the App
+
+If you use the GitHub Live example to test, you can Disconnect the "Barry's GitHub Examples" Application on the [Connections page](https://www.twitch.tv/settings/connections)
diff --git a/authentication/implicit_auth/index.html b/authentication/implicit_auth/index.html
@@ -0,0 +1,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>