JS Follow button API error

[WebbieXL]

Hey guys,

i’m trying to create a streamers website with a lot of twitch functionality. One of these is having a follow button. Now it works as it seems but it’s generating an 404 error saying: [Twitch] Response Data: Object {error: “Not Found”, status: 404, message: “[user] is not following [channel]”}

I’m having trouble finding out where this error comes from.

The code i use is similar to something I found on this forum and I literally copied/pasted this code resulting in the same error.

$scope.follow = function() {

            var success = function (response) { console.log("success: " + response) }
            var failure = function (error) { console.log("error: " + error) };

            Twitch.getStatus(function (error, status) {
                if (error) return failure(error.message);
                if (!status.authenticated) return failure(error.message);

                Twitch.api({method: 'user'}, function (error, user) {
                    if (error) return failure(error.message);

                    Twitch.api({verb: 'PUT', method: 'users/' + user.name + '/follows/channels/' + channel}, function (error, response) {
                        if (error) return failure(error.message);
                        success(response);
                    });
                });
            });
        }

Hope someone can help me out on this one!

EDIT:
the API can’t find the channel the user wants to follow

[Fugiman]

Please make sure you are using the latest copy of the JS SDK located at https://github.com/justintv/twitch-js-sdk/blob/master/twitch.min.js. The CDN version at https://ttv-api.s3.amazonaws.com/twitch.min.js is out of date and does not support the verb parameter to Twitch.api.

[WebbieXL]

Thnx! I used that CDN. I’ll take a look at the latest SDK

EDIT:
So now I added the token and required scope, gave my account the permissions but it keeps giving this error:

[Twitch] API Error: Unauthorized; Token invalid or missing required scope

Then when i check the token through https://api.twitch.tv/kraken/user/?oauth_token= it confirms the user that has logged in. And i’m sure i’m using the correct scope within Twitch.login

scope: ['user_read', 'user_subscriptions', 'user_follows_edit']

altered function:
(token is called after login → var token = Twitch.getToken()

$scope.follow = function() {
        var failure = function (error) {
            console.log("failure: " + error)
        };

        Twitch.getStatus(function (error, status) {
            if (error) return failure(error.message + "(1)");
            if (!status.authenticated) return failure(error.message);

            Twitch.api({method: 'user'}, function (error, user) {
                if (error) return failure(error.message + "(2)");

                if($scope.followed) {

                    Twitch.api({verb: 'DELETE', method: 'users/' + user.name + '/follows/channels/' + channel + '?oauth_token=' + token}, function (error, response) {
                        if (error) return failure(error.message + "(3)");
                        return $scope.$apply($scope.followed = false);
                    });
                }
                else {
                    Twitch.api({verb: 'PUT', method: 'users/' + user.name + '/follows/channels/' + channel + '?oauth_token=' + token}, function (error, response) {
                        if (error) return failure(error.message + "(4)");
                        return $scope.$apply($scope.followed = true);
                    });
                }
            });
        });
    };

Is there something i’m missing here?

[BarryCarlyon]

Where is the rest of your code, I can’t see where channel comes from…

The 404 with that message is indicative that you are trying to unfollow [channel] and you don’t follow [channel] in order to unfollow [channel]

[WebbieXL]

channel is just a variable i have set, it’s not generated anywhere. var channel = “channel_name”.

and let’s say this 404 you are talking about is what’s happening, it doesn’t make sense. $scope.follow gives a true or false. To get that statement i call upon a function which checks if the user is actually following the channel. This actually works fine, returns the right value every time. So basically this message you explained can’t actually occur because what the code above is doing is trying to unfollow [channel] that [user] is following in order to unfollow [channel] and vice versa

and the second reason it doesn’t make sense to me is you’re talking about a 404 while i’m getting a 401

[Twitch] Response Data: Object {error: “Unauthorized”, status: 401, message: “Token invalid or missing required scope”}

[Fugiman]

Stop using ?oauth_token=token. Twitch.api already handles the authorization for you.

[WebbieXL]

Thnx Fugiman!

for everyone else: if you’re looking for a follow button for your website. this should work for you keep in mind that this function uses some angular, can be easily replaced with other JS)

$scope.follow = function() {
        var failure = function (error) {
            console.log("failure: " + error)
        };

        Twitch.getStatus(function (error, status) {
            if (error) return failure(error.message + "(1)");
            if (!status.authenticated) return failure(error.message);

            Twitch.api({method: 'user'}, function (error, user) {
                if (error) return failure(error.message + "(2)");

                if($scope.followed) {

                    Twitch.api({verb: 'DELETE', method: 'users/' + user.name + '/follows/channels/' + channel }, function (error, response) {
                        if (error) return failure(error.message + "(3)");
                        return $scope.$apply($scope.followed = false);
                    });
                }
                else {
                    Twitch.api({verb: 'PUT', method: 'users/' + user.name + '/follows/channels/' + channel }, function (error, response) {
                        if (error) return failure(error.message + "(4)");
                        return $scope.$apply($scope.followed = true);
                    });
                }
            });
        });