Using API with sites like JSFiddle and CodePen?

Question

I am currently working on a prototype for the flair provided by Stack Exchange and can't seem to get the API to work with CodePen. It continuously returns the following error on the SE.init call:

Uncaught channelUrl must be under the current domain.

But I really just want to fetch from routes like /users/{ids}/associated Is there a way to successfully implement the API on sites like JSFiddle or Codepen?

I don't need any special authentication.

Note I tried the "Javascript SDK":

SE.init({
    clientId: 16131,
    key: 's29XM)Eqn2x3YxhjLgFwBQ((',
    channelUrl: 'codepen.io/PerpetualJ/blank', // Issue is here, this isn't a valid path.
    complete: function (data) { fetch(); }
});
function fetch() {
    var info = SE.users('9893154');
}

which gave the above error.

Is it possible to use the API with sites like JSFiddle or Codepen for rapid web debugging and demonstrations?

Answer 1

This is not the most educated answer, but through trial and error I have found a way to get the information I'm needing for my project. However, the biggest downside to this method seems to be the throttles that are in place. Websites like Codepen can easily exceed this, especially if you're using a debug window and a live/full screen view side by side for quick debugging.

The implementation is very straightforward, and for my purposes it works very well:

var accountID = "13342919";
var reputation = 0;
var goldBadges = 0;
var silverBadges = 0;
var bronzeBadges = 0;

var data = null;
var request = new XMLHttpRequest();
request.open(
    "GET",
    "https://api.stackexchange.com/2.2/users/" + accountID + "/associated",
    true
);
request.onload = function() {
    data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        for (var i = 0; i < data.items.length; i++) {
            goldBadges += data.items[i].badge_counts.gold;
            silverBadges += data.items[i].badge_counts.silver;
            bronzeBadges += data.items[i].badge_counts.bronze;
            reputation += data.items[i].reputation;
        }

        document.getElementById("reputation").innerHTML = reputation;
        document.getElementById("gold-badges").innerHTML = goldBadges;
        document.getElementById("silver-badges").innerHTML = silverBadges;
        document.getElementById("bronze-badges").innerHTML = bronzeBadges;
    }
};
request.send();

Feel free to check it out over on Codepen or JSFiddle.