Issue with "Allowlist config Urls"

drago · August 17, 2023, 10:12pm

I whitelisted the my backend root url in all the allowlist fields. (config, viewers, images etc…), eventually, I was able to display images, but I still can’t make API calls my endpoints (at least from the config page).

Can you help me?

BarryCarlyon · August 17, 2023, 10:15pm

What does the console (browers console) say?

drago · August 17, 2023, 10:51pm

Refused to connect to ‘WHITELISTED_BACKEND_URL’ because it violates the document’s Content Security Policy.

BarryCarlyon · August 17, 2023, 10:52pm

This suggests that

URL Fetching Domains doesn’t contain the stated URL.

For example:

drago · August 17, 2023, 10:54pm

Oh! Didn’t read the text for this input.
Gonna check it out rn and report back

drago · August 17, 2023, 11:11pm

I had to add Cors, but then It worked
Thank you bro

I came across another issue, in case you could help
What is the behaviour for twitch.configuration.broadcaster

I set it with a new value, but:

When I called to check “twitch.configuration?.broadcaster?.content”, it was the same old value.
twitch.configuration.onChanged was not triggered. I read in the docs that it should be triggered once only, on load. But the name doesn’t suit it, so I thought maybe a typo.

Should conclude from this that “twitch.configuration.broadcaster.content” is only usable on load, but never during the actual lifetime of the page?

Does this apply to the viewer as well? this would be problematic.
Viewers should get the latest info when the broadcaster updates the config

BarryCarlyon · August 17, 2023, 11:14pm

that is correct it’s triggered only once when it’s initially loaded

Then you’d need to use extension pubsub other another medium to distribute the updated config.

Since I generally use a server to set configs I take this approach

github.com

BarryCarlyon/twitch_misc/blob/main/extensions/config_service/set_n_publish.js

/*

The config service for Twitch Extensions is great.
But when you set config it doesn't trigger onChanged.
onChanged is used to retrieve config values from the config service.
But it's only triggered once when the extension inits

This example covers how to set the config
And then Broadcast it

it's a NodeJS Example
it's suitable for cron jobs

*/

const fs = require('fs');
const path = require('path');

// Load configuation
const config = JSON.parse(fs.readFileSync(path.join(

This file has been truncated. show original

I call set config then send the same config out over pubsub to listening clients to reconfigure

drago · August 17, 2023, 11:19pm

Ok, I see. Why not!
I’ll test it out and report back … you’re the best @BarryCarlyon

drago · August 18, 2023, 2:47pm

GM

I made a few tests to populate the configurations on the backend by activating “Custom/My Own Service”.

I found that once I populated the configuration from the back-end, I’m no longer able to get/set the configurations on config.html (onChange is returning an empty object).
So I have a couple of questions:

Is it possible to use both, backend in tandem with the frontend for configurations?
According to the animals-facts example, this seems possible. But it doesn’t work for me for some reason.
https://github.com/twitchdev/animal-facts/blob/main/src/components/App/App.js
I, sort of, understood the utility of the “Required Per Channel Configuration” field. But I’m not sure how to use it. Is there an example or process explanation?

BarryCarlyon · August 18, 2023, 2:52pm

If you want to use the Twitch Configuration service you must select
Extension Configuration Service

This does not stop you storing configuration seperately

You would only select Custom/My Own Service if you are intending to use

to block activation using Extensions Reference | Twitch Developers

Yes but you MUST select Extension Configuration Service

This means that can use force a streamer to configure your extension first, storing config into an external something
Then you call Extensions Reference | Twitch Developers to say that “configuration is complete and the streamer may not activate the extension into a slot”

drago · August 18, 2023, 4:56pm

That’s much better.
I hope this is my last question, the configuration saved using the back-end is not the same as the front-end’s.

I suspected it is related to the version, but:

My app’s version is 0.0.1
On the front-end, I’m using: twitch.configuration.set(“broadcaster”, “1”, JSON.stringify(config))
On the back-end, I tried setting the version to both “1” & “0.0.1” on PUT “https://api.twitch.tv/helix/extensions/configurations”
On the back-end, for fetching configurations, there is no version parameter.

My test was very simple:
set backend => reload the extension & check onChange => set on the front-end => check on the back-end

Is it the intended behavior?

BarryCarlyon · August 18, 2023, 5:02pm

Just to clarify

if you use the API or the JS helper to set the extension config service they should be the same.

You can choose not to use the config service and store information in your database instead.

The version of your extension is irrelevant.

You wrote to the config segment and said that it is version “1”

The version is returned with the contents of the config.
It’s not a paramter it is “part” of the config

example response:

{
  "data": [
    {
      "segment": "global",
      "content": "hello config!",
      "version": "0.0.1"
    }
  ]
}

The extension config service only stores one item of configuration per segement.
That item of configuration may or may not have a version attached to it. Versions are used to block/allow activation of the extension into a slot.

You cannot “load” version “0.0.1” if you set a config of version “1” theres no history/way to load older configurations.

If you don’t want to block activation of an extension to force configuration first don’t use versioning.

I fear you are getting confused over the purpose of the version attached to the configuration.

If the version set with config matched the version set in the dashboard, allow activation.

That version can be a string of any format/content, even as simple as “ok” doesn’t need to be numeric.

drago · August 18, 2023, 5:13pm

The fact that I’m not getting the same config, is why I’m questioning the version parameter.
Now the version set in the admin (Broadcaster Writable Channel Segment Version), front & back is the same (1), but still the config is not matching.

BarryCarlyon · August 18, 2023, 5:13pm

Sure you are using the right user_id?

it is working as expected here:

I then do in console of the extension

window.Twitch.ext.configuration.set('broadcaster', '100', '{"what":"TodayIsFriday"}');

And now on reload

And then using backend to set

drago · August 18, 2023, 5:17pm

I got the userId from the auth object on the front,
channel_id: 9412xxxx
user_id: U9412xxxx

(this is really confusing!!)

I was using, user_id, now tried with channel_id and on the back I received the front-config.
But not able to set it correctly, I’ll debug this now

drago · August 18, 2023, 5:18pm

I thought if the userId was not correct, the API would throw an error.
Didn’t expect to save config in the void haha

BarryCarlyon · August 18, 2023, 5:19pm

user id’s everywhere do not have a prefix.

It seems when talking to the API you have used the opaque user id which is what user_id is from the onAuth object.

the userID returned in on auth is Opaque user ID which is “more like” a session ID than anything that actually represents a user.

BarryCarlyon · August 18, 2023, 5:19pm

It might have throw an error that you didn’t catch as you didn’t have a onError callback bound.

drago · August 18, 2023, 5:23pm

The opaque id is the actual user id prefixed by a U, which might make sense.

This might be wrong

I’ll try to fetch the user_id from the back end

The fetch function didn’t throw any error, and the config got save and was able to retrieve it, will do a couple more tests to understand the behavior better…

will update this thread…

BarryCarlyon · August 18, 2023, 5:31pm

It’s only this when the viewer that is using the extension is the broadcaster.

It’s much safer to consider this data value as the opaque session id and save confusion.

Then use the channel_id returned in onAuthorized for your configuration calls.

See Extensions Reference | Twitch Developers → opaque_user_id for a good explanation.

Identifies the session using this JWT. Any token generated by your EBS should leave this field blank. When present, the value is interpreted as follows:

Values beginning with “U” are stable references to a Twitch account across sessions and channels. You can use them to provide persistent services to users.

Values beginning with “A” are transient references to an anonymous Twitch session; the user has not logged into the Twitch website. These values are not stable and should never be associated with persistent data. It is possible for them to represent different users over time. If your extension requires a stable user identity, your front-end interface should display an appropriate login request when this field does not begin with “U.”

Broadcasters’ tokens are set with “U” + their Twitch user IDs, to avoid confusing opaque IDs with user IDs when the broadcaster is a viewer.

Yeah looks like that API doesn’t validate the passed in ID is a real user ID or not.

So if you did a API call to save data into fred you’ll never be able to retrieve that on the front end. Since onChanged will only the same channel_id from onAuthorized to fetch configuration with