Proper way to perform a helix API call Using JavaScript

BarryCarlyon · August 14, 2020, 1:41pm

Check the github pages/live example

BarryCarlyon/twitch_misc/blob/gh-pages/authentication/implicit_auth/index.html#L12


<head>
    <title>Twitch Implicit Auth Example</title>
</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>
    <a href="" id="authorize">Authorize</a>
    <div id="access_token"></div>
    <div id="user_data"></div>

    <script type="text/javascript">
        var client_id = 'hozgh446gdilj5knsrsxxz8tahr3koz';
        var redirect = 'https://barrycarlyon.github.io/twitch_misc/authentication/implicit_auth/';

        document.getElementById('authorize').setAttribute('href', 'https://id.twitch.tv/oauth2/authorize?client_id=' + client_id + '&redirect_uri=' + encodeURIComponent(redirect) + '&response_type=token')
        document.getElementById('access_token').textContent = '';

        if (document.location.hash) {
            var parsedHash = new URLSearchParams(window.location.hash.substr(1));
            if (parsedHash.get('access_token')) {
                var access_token = parsedHash.get('access_token');
                document.getElementById('access_token').textContent = 'Your Access Key from the #url: ' + access_token;