User ID -> Username Retrieval

It’d be great if someone could confirm that what I’m doing is correct. I’m trying to figure out how to get the Twitch username of viewers to my backend service.

Using the example code:

window.Twitch.ext.onAuthorized((auth) => {
  console.log(auth);
});

I can see that in this case the auth object contains a property userId. Is this property guaranteed to exist and be in the format U######## if the Twitch user is logged in?

Am I right in my understanding that I can send this userId to my backend service, which could then query the Twitch API at the Get User by ID endpoint to retrieve the username from that user ID?

Are there any extra permissions that need to be granted from the viewer for my extension to retrieve their username in this way?

Thanks.

No extra permissions needed. You just need to access the name property from the object that the Get User By ID function returns and your good to go.

Sounds good, thanks.

Follow up question: does this mean there isn’t anything protecting logged-in viewers from having their IP exposed? Since viewers hit backend services directly and those services have access to their username, what is stopping any extension from building tables of username → IP associations? Are extensions disabled by default per channel and require viewers to opt-in?

EDIT: Seems that viewers have to explicitly grant extensions the permission to see their user ID. See here:
unknown (1)

Hi,

Im trying to figure out how to get the “real” userId.

I do have granted the permission to see the user ID but the userId i get back from onAuthorized is UXXXXXXXXXXXX where X is not numeric (not a valid twitch id then) .

What am I missing ?

See “Opaque IDs”

OpaqueID’s are ALWAYS present.

onAuthorised fires EVERY page load

For example:

window.Twitch.ext.onAuthorized(
    function(auth){
        var parts=auth.token.split(".");
        var payload=JSON.parse(window.atob(parts[1]));
        if (payload.user_id) {
            // user has granted
            jQuery.get('https://api.twitch.tv/kraken/users/' + payload.user_id, <etc>
        } else {
            // user has NOT granted
        }
    }
);
1 Like

Thanks ! This is exactly what I was looking for !

personally I just do:

if (payload.user_id) {
    jQuery.get('MY EBS')
}

And do the Twitch Lookup if I don’t have a recent username cached. As well as return other user information, but different things for differnet use cases/extensions

I am getting: {“error”:“Bad Request”,“status”:400,“message”:“No client id specified”}

What am I doing wrong?

Is this in reference to extensions or just accessing the api?

Did you specify a client ID in the header? Id post a link to the docs but I’m on mobile right now

Hi.

Added the client id to the header and got this one:
{“error”:“Not Found”,“status”:404,“message”:“User "…" was not found”}

Did you specify a Version Header?

v3 expects username
v5 expects user id

https://dev.twitch.tv/docs/v5/guides/using-the-twitch-api

Hi,

I did, here is the code I added - what is wrong with it?

window.Twitch.ext.onAuthorized(function(auth) {
console.log(‘The JWT that will be passed to the EBS is’, auth.token);
console.log(‘The channel ID is’, auth.channelId);
console.log(auth);

    var parts=auth.token.split(".");
    var payload=JSON.parse(window.atob(parts[1]));
    if (payload.user_id) {
        // user has granted
        $.ajax({
            url: 'https://api.twitch.tv/kraken/users/' + payload.user_id + "?client-id=2wo1au2eakivi3mww1cmjts5eraj2p",
            method: "get",
            headers: {
                "Client-ID":"2wo1au2eakivi3mww1cmjts5eraj2p"
            },
            success: function(data){
                console.log(data);
            }

        });

    } else {
        // user has NOT granted
    }

});

You’re using user ID with kraken v3 (default). You can use v5 (IDs) by specifying the header Accept: application/vnd.twitchtv.v5+json

As a side-note, client-id in the URL does nothing, itt’s client_id, but you don’t need it at all since you’re sending it as a header.

1 Like

Now its working, thanks

Now, is it ok to send this kind of ajax query without using the JWT token?

Also, when I send an ajax request to my server, should I use the JWT token?

Been struggling with this for a couple days now. Documentation seems to be very poor when it comes to Twitch API…

I’m receiving a 400 error saying that No client id specified… What am I doing wrong here?

$.get(“https://api.twitch.tv/kraken/users/” + payload.user_id + “?client-id=xxxxxxx”, …

Thanks

When provided as a querystring param it’s client_id, not client-id.

Also, the documentation for the API reference is actually pretty good (some of the non-reference pages could use quite a bit of work), it’s just that you’re using the client id in a querystring param when all the examples for almost all endpoints show to use a header (and once v5 is removed and you need to use Helix, providing it in a header is the only way)

Great! Ended up getting it. It was a little unclear about having the client id as header from the docs. I guess I was just going in circles with the API docs because of this transition of v5 to current. A lot of other links were dead ends so it was very frustrating.

Anyway, here is what I ended up with, makes a ton of sense now:

$.ajax({
url: “https://api.twitch.tv/helix/users?id=” + payload.user_id,
method: “GET”,
headers:{
“Client-ID”: “xxxxxxxxxxxxxxxxxxxxx”
},
success: function(data){
console.log(data);
}
});

It doesn’t work anymore. It requires token. But this still works:

$.ajax({url: 'https://api.twitch.tv/kraken/users/'+payload.user_id, 
        method:'GET', 
        headers:{'client-id':auth.clientId,
        Accept: 'application/vnd.twitchtv.v5+json'} } ).
  done(function(data){
	  console.log(data);
});