I am trying to set up an embedded “Follow” button on my website using the javascript SDK. All I want is to put a “Connect using Twitch” button below the video player. When someone clicks on the button, it will POPUP the authorization form from Twitch where they can confirm the grant. So far this is all working.
However, nothing else is actually working. According to the JS SDK page, the user’s authorization token should be stored in either their DOM or in a cookie. However, no matter what happens, my code is always reading the authenticated status as “false”. I tried both the popup method, and the non-popup method.
This is my code:
<script src="https://ttv-api.s3.amazonaws.com/twitch.min.js"></script>
<script>
$(function() {
Twitch.init({clientId: '**********'}, function(error, status)
{
console.log(status);
if (status.authenticated)
{
$('.twitch-connect').hide();
}
});
$('.twitch-connect').click(function()
{
Twitch.login({
scope: ['user_follows_edit', 'user_subscriptions'],
redirect_uri: 'http://yokappa.tv',
popup: true
});
});
});
</script>
<a class="twitch-connect twitch"><span>Connect with Twitch</span></a>
Here is a URL with the issue:
http://yokappa.tv/channel/8wayrun247/?test=1
(the ?test=1 code is essential to see the Twitch JS SDK stuff; Twitch stuff shows up in purple, everything else is unrelated)
The registered URI is http://yokappa.tv
I also have a second question would be, how to trigger a piece of code to happen when the user finally authorizes and it works. Normally, you wouldn’t need to trigger the code; but in this case, I want to use the “popup” feature, since the page is not the redirect uri.