Hey guys, so I posted on the blizz API forums asking for help and for some reason they deleted my topic there! No idea why and have ticketed the moderators there EDIT it's back up now... In the meantime I thought I'd ask if any of you guys can help - I know that a lot of you out there are developers of one sort or another!

Prepare yourself for a good moanShow

Basically I learned how to make websites when I was 16. I'm 28 now and coming back into the game after so long not working with websites has been a huge and very steep learning curve. Back then github didn't exist. We were still using CSS 2 and HTML 4. Stack Overflow wasn't even around and Bootstrap certainly wasn't either. phpBB2 was the main forum software alongside vBulletin. We didn't use command line or bower to install JS applications, and they weren't even called applications back then, they were called scripts. Everything has changed so much since then.

The terminology, technology and complexity of everything has increased exponentially and for someone like me who never studied web development professionally as a young man it's like coming back to your home and your family speak a different language. I literally have no idea what people are talking about most of the time. Honestly it's complete gibberish to me and finding very basic information is a huge ballache.

The most frustrating thing about it all? This new generation of developers have forgotten how to make proper documentation. It is rare that you find a script or project that is explained in detail with working examples. People assume that you know so much already - for someone like me trying to learn this stuff it's like decyphering heiroglyphics! Everything has dependencies, which have their own dependencies, which have more dependencies. I don't even know what a 'full stack' developer is but I think you need to be one to actually get anything done with modern frameworks.

This has just been my general experience with learning new things over the last year. Totally and utterly frustrating. When I ask simple questions elsewhere on the web I'm treated like an imbecile because I don't speak the lingo, or don't use git or whaever... so please, take it easy on me okay? Anyway, sorry - just wanted to vent a bit. I don't want to offend anyone here who possesses these skills and I am not in any way demeaning them in any form. In fact I'm asking for your help!

http://us.battle.net/api/wow/realm/status?realm=Medivh&jsonp

{
	"name":"Medhiv"
	"slug":"medhiv",
	"type":"PvE",
	"type":"Whirlwind",
	"status":true,
	"queue":false,
	"population":"High",
}

<script type="text/javascript">
		function foo(data) {
			$("#result").html(data.type);
		}
 
		$(document).ready(
		function(){
			$.ajax({
			  url: "http://us.battle.net/api/wow/realm/status?realm=Medivh&jsonp=foo",
			  type: 'GET',
			  dataType: 'jsonp'
			});
		});
</script>

 Blizzard Entertainment

---

Nope

• First things first, a verified account with the Blizzard developer portal is needed. I've done this already
• Blizzard give me a unique 'Client ID' and 'Secret'. These have to be kept confidential so I can't just send them with the request.. they are both long alphanumerical string and I need to somehow provide them to Blizz to be authenticated. I have them
• In order to give these credentials to Blizz's API, I have to do it through Oauth2. So that means I need to get a 'framework' for Oauth2 working on my website. There are lots of these around, all of them poorly explained, in lots of different languages like php, java, js or command line programs like curl or whatever. I only really know JS with some degree of competence so I'd like to use a JS framework if possible. Blizzard have a list of community made frameworks for oauth2 and a lot of them are JS libraries like Angular, Jquery, Node.js etc. I would love to use any of these but I can never find any documentation that actually tells me how to set them up. So I'm stuck.
• After the hurdle of getting a working Oauth2 framework or 'wrapper' (as it sometimes referred to), I know that I have to provide Blizzard with a 'redirect URI' or series of them. I don't know what these are, I don't know how to make them and you can fucking bet that there ain't no good docs on this either. I think that these are addresses that point to my website somewhere, or something to do with my jQuery.
• Once Blizzard have my 'URIs' whatever they are, I should be authorised and therefore able to make requests to their API. Apparently not. With each request I make, I have to first of all 'generate an Authentication token' on my side, send this to Blizzard's server, Blizzard's server then say 'okay, here is your Access Token' and send me back the JSONP which I can then finally flipping parse. I have no idea how to make tokens, ask for them, or store them. Maybe a framework does this for me? I don't know! Apparently they also expire, so my script will somehow have to have a way of detecting that my token has expired and ask for a new one?

Unfortunately I don't have experience with Oauth. I'm just simple ASP.NET developer but in your case, I would work around the issue. I'd write a simple web crawler that would collect data from https://worldofwarcraft.com/en-gb/game/status and then store them wherever you want (in some db). Such webcrawler is easy to write in Java and could work in certain time intervals.

That could definitely work - SentientGypsy has already written a few scrapers for barrens.chat with Python and I’m sure this wouldn’t be too hard.

That said, I’d like to be able to make calls to the blizz API directly so I can at some point in the future add more rich features to the site like pulling people’s characters, auction house values etc. I see this as a like way of starting out with something simple.

We use Oauth with Facebook at work, seems it was quick to implement there. I spent a few min on the https://github.com/benweier/blizzard.js what part do you get stuck on? Some dependency problem? If you get the "npm install" part going , step 1 and 2 looks pretty straight forward.

5bx wrote: ↑

6 years ago

We use Oauth with Facebook at work, seems it was quick to implement there. I spent a few min on the https://github.com/benweier/blizzard.js what part do you get stuck on? Some dependency problem? If you get the "npm install" part going , step 1 and 2 looks pretty straight forward.

teebling$ npm install blizzard.js --save
npm WARN saveError ENOENT: no such file or directory, open '/Users/teebling/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/teebling/package.json'
npm WARN teebling No description
npm WARN teebling No repository field.
npm WARN teebling No README data
npm WARN teebling No license field.

+ [email protected]
added 8 packages from 12 contributors and audited 8 packages in 3.619s
found 0 vulnerabilities

Step 1: require() and initialize() Blizzard.js within your application:

Code: Select all

const blizzard = require('blizzard.js').initialize({
  key: BLIZZARD_CLIENT_ID,
  secret: BLIZZARD_CLIENT_SECRET,
});

The WARN seems to come from the lack of 'npm init' - see https://github.com/visionmedia/debug/issues/261 One user solved it with "Indeed what it wants is a package.json file, obtained by typing npm init. Then I was able to do an npm install with success."

I'll get back to the next question later. :)

5bx wrote: ↑

6 years ago

The WARN seems to come from the lack of 'npm init' - see https://github.com/visionmedia/debug/issues/261 One user solved it with "Indeed what it wants is a package.json file, obtained by typing npm init. Then I was able to do an npm install with success."

I'll get back to the next question later. :)

Teebling:~ teebling$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (teebling) npm install blizzard.js --save
Sorry, name can only contain URL-friendly characters.

5bx wrote: ↑

6 years ago

I'll get back to the next question later. :)

You don't want to have a jQuery or any kind of javascript doing the request to the API directly. You just can't do that without exposing the API token to the user browser. You have to implement some kind of endpoint on your server to proxy those requests.

Have you checked this page - https://develop.battle.net/documentatio ... ng-started ? See section "Making API requests" there is an example how to retrieve token with a simple curl request, and then making the request - that's usually how I start playing with stuff like this. Then you can quickly see if you can get the responses you're looking for.

About the security aspect and the endpoint I have no idea - I guess you just have to dig into the documentation. But you can save the blizzard.js stuff until later and start with the curl requests first to get started quicker.

5bx wrote: ↑

6 years ago

Have you checked this page - https://develop.battle.net/documentatio ... ng-started ? See section "Making API requests" there is an example how to retrieve token with a simple curl request, and then making the request - that's usually how I start playing with stuff like this. Then you can quickly see if you can get the responses you're looking for.

At least you know that you can achieve what you want, that's good. Maybe there's more examples on the blizz dev site - I guess you need to dive in there and try to find something useful.

Few notes that might help:

There are two oauth flows that I see for blizzard APIs:

Authorization Code Flow - Involves setting the redirect uri and is not what you want. I usually think of this as sort of like "login with battle.net" where the authorization is actually passed to the resource provider (Blizzard). The user then gets a notice on oauth.battle.net or whatever it is (the user temporarily leaves your site) saying "hey an application is trying to access your username, wow characters and etc., do you want to allow this? If so go ahead and login and we will send the application back a code they can use to get this info". This is where the redirect uri comes in, battle.net has to know where to send the user (and authorization code) back to on your website. This isn't what you want: its UI driven.

Client Credentials Flow - This is what you want since you aren't looking for any protected endpoints (personal account data etc.). Luckily this is quite simple, you simply tell battle.net you are an authorized application developer using your client id and client secret and then will immediately get back an access token which you send as a header:

Authorization: Bearer {access_token}

to your endpoint:

https://us.api.blizzard.com/wow/realm/status

You should be able to then do this with two ajax requests, the first to get the access token from

https://us.battle.net/oauth/token

and the second to the realm status using the access token. Big problem there though is that your client id and client secret will be visible. So that is a long-winded response only to ask:

Have you considered making a simple PHP wrapper which handles fetching the data and then just spits it out? Just like https://api.barrens.chat/realms which takes care of all of the oauth silliness and then you can just simply request it using ajax?

Here is an example or you could use a fancy oauth library :

<?php

define ('CLIENT_ID',     '');
define ('CLIENT_SECRET', '');

define ('BNET_TOKEN_ENDPOINT',  'https://us.battle.net/oauth/token?grant_type=client_credentials');
define ('BNET_REALMS_ENDPOINT', 'https://us.api.blizzard.com/wow/realm/status');

function request ($url, $headers = []) {
	$ch = curl_init ();
	
	curl_setopt ($ch, CURLOPT_URL,            $url);
	curl_setopt ($ch, CURLOPT_RETURNTRANSFER, TRUE);
	curl_setopt ($ch, CURLOPT_HTTPHEADER,     $headers);
	
	$res = curl_exec ($ch);
	
	if (!$res) {
		return NULL;
	}
	
	return json_decode ($res, true);
}

$credentials = request (BNET_TOKEN_ENDPOINT, [
	'Authorization: Basic ' . base64_encode (CLIENT_ID . ':' . CLIENT_SECRET)
]);

$realmsEndpoint = BNET_REALMS_ENDPOINT . '?' . http_build_query ([
	'access_token' => $credentials ['access_token']
]);

$realms = request ($realmsEndpoint, [
	'Accept: application/json'
]);

var_dump ($realms);
die ();

?>

array(1) {
  ["realms"]=>
  array(246) {
    [0]=>
    array(10) {
      ["type"]=>
      string(6) "normal"
      ["population"]=>
      string(3) "n/a"
      ["queue"]=>
      bool(false)
      ["status"]=>
      bool(true)
      ["name"]=>
      string(7) "Aegwynn"
      ["slug"]=>
      string(7) "aegwynn"
      ["battlegroup"]=>
      string(9) "Vengeance"
      ["locale"]=>
      string(5) "en_US"
      ["timezone"]=>
      string(15) "America/Chicago"
      ["connected_realms"]=>
      array(5) {
        [0]=>
        string(11) "daggerspine"
        [1]=>
        string(10) "bonechewer"
        [2]=>
        string(9) "gurubashi"
        [3]=>
        string(6) "hakkar"
        [4]=>
        string(7) "aegwynn"
      }
    }
    [1]=>
    array(10) {
      ["type"]=>
      string(6) "normal"
      ["population"]=>
      string(4) "high"
      ["queue"]=>
      bool(false)
      ["status"]=>
      bool(true)
      ["name"]=>
      string(10) "Aerie Peak"
      ["slug"]=>
      string(10) "aerie-peak"
      ["battlegroup"]=>
      string(11) "Vindication"
      ["locale"]=>
      string(5) "en_US"
      ["timezone"]=>
      string(19) "America/Los_Angeles"
      ["connected_realms"]=>
      array(1) {
        [0]=>
        string(10) "aerie-peak"
      }
    }, ...
  }
}

Hey @teebling, so, I totally understand your frustration. I was also a kid that got started back in the CSS2 days and upon returning to the fray about 5 years ago the amount of tooling and things that had changed was absolutely insane. It's also largely why I sort of left the frontend world. Technology changes incredibly fast, and the JS world is basically a new universe every year due to how fast it's changing and breaking things. REST has been around a while, but the ways in which people interface with APIs has changed. Cookies, OAuth2, JWT tokens, etc. It changes based on flavors of the month and what people are familiar with.

So Node.js is not a library, it's a runtime built on the V8 engine. To make that easier to understand: you know what PHP does? Nodejs does that -- but uses JavaScript as its language of understanding and compiles that into machine code, whereas PHP goes into C++ and then machine code in order to accomplish what it is doing. You also don't need apache2/nginx to run on top of that like you do for PHP, though many still do for the great benefits of web servers like nginx, but you can in theory just route all your traffic using Node frameworks like Express.

npm is Node Package Manager -- it's like composer is in PHP. So you can't install something with it and use it on a webpage normally -- it goes into the whole Node thing. Since you're using phpBB there's pretty much zero chance you're going to be utilizing Node.js in any way here. This concept took me a while to wrap my head around too when I was just learning this stuff. I couldn't understand how JavaScript was a backend language now... but well... it is, lol. I really dislike it, but some love it.

So, like @Anders kindly explained, you can try to accomplish this within phpBB if you have enough experience writing extensions or modifying phpBB a lot -- but I honestly am not sure that's the best idea. That goes a bit outside of the realm of what the forum software should be doing, in my opinion. The best bet is to actually write you own personal API whether in JavaScript, PHP, or Go! and make a simple way to interface it from here with a super simple request. Cache the data in the API to internally update every 15 minutes or so to prevent each request spamming Blizzard. You can then also build upon this and extend it with new features that are then super easy to crunch numbers, do calculations or other misc. stuff and have simple ways to grab it with ajax requests on the forums.

However, it seems that that may go a bit outside what you're familiar with? If you'd like, despite me being a bit busy, I totally don't mind building this for you. I am a backend developer that has a ton of experience building APIs and making integration with 3rd party ones. I would enjoy doing this, and have been looking for an excuse to work with the Blizzard API.

@Anders you may be on to something here!

I've been working at this all day and found out some new stuff. Like you say, and I've had some help from other people on this too, the JS option just doesn't work due to the ID/Secret being visible etc. Also my web host don't support node.js (which all the oauth frameworks are dependent on now). So PHP seems like the better option.

I'm going to give your PHP script a try - would be awesome if this worked. Will report back soon thanks so much for the help so far.

Awesome, as @Henhouse said if you want to get more stuff in the future you will need something quite a bit more robust, public api.barrens.chat github??!?!

Henhouse wrote: ↑

6 years ago

<snip>

I couldn't understand how JavaScript was a backend language now... but well... it is, lol. I really dislike it, but some love it.

Henhouse wrote: ↑

6 years ago

However, it seems that that may go a bit outside what you're familiar with? If you'd like, despite me being a bit busy, I totally don't mind building this for you. I am a backend developer that has a ton of experience building APIs and making integration with 3rd party ones. I would enjoy doing this, and have been looking for an excuse to work with the Blizzard API.

Anders wrote: ↑

6 years ago

Awesome, as @Henhouse said if you want to get more stuff in the future you will need something quite a bit more robust, public api.barrens.chat github??!?!

Anders wrote: ↑

6 years ago

Awesome, as @Henhouse said if you want to get more stuff in the future you will need something quite a bit more robust, public api.barrens.chat github??!?!

GET https://api.barrens.chat/honorable-kills?playerName=Uncle Ganus McAnus

Response: 500 Internal Server Error - error: integer overflow

teebling wrote: ↑

6 years ago

Well, wow, that would be awesome to have you working on it if it's something you'd enjoy doing! Don't feel like its a commitment or anything though Hen - I mean all I'm trying to do right now anyway is grab realm stats for the 'Realms' section of the website. I think with Anders' script and the two ajax requests I can make that happen now. But yes it would be very cool to have an extended range of features for the future! Why not!

Henhouse wrote: ↑

6 years ago

teebling wrote: ↑

6 years ago

Well, wow, that would be awesome to have you working on it if it's something you'd enjoy doing! Don't feel like its a commitment or anything though Hen - I mean all I'm trying to do right now anyway is grab realm stats for the 'Realms' section of the website. I think with Anders' script and the two ajax requests I can make that happen now. But yes it would be very cool to have an extended range of features for the future! Why not!

First iteration to display just realm info shouldn't be very hard. I could probably take a look tomorrow if you don't figure anything out with it in PHP. Going forward this is likely the better way so you don't put more pressure on the forum code by making it have to perform the work of an API.

Do you have a GitHub/GitLab?

teebling wrote: ↑

6 years ago

Alright great! I'll give the PHP thing a go anyway for my own pride's sake but if you think it'd be better to take that load away from the forum software then I'm with you on this

I have an account on github yeah - teebling. Not sure if that's what you mean Hen.

Sweet - maybe get @Anders involved as well if he's keen

Sure if Henhouse wants another set of eyeballs , not sure how much time I will have but I am happy to help when I can. Github is Komodo123

Hello @teebling,

I'm the author of the "actual good doc" in AngularJS. First off thanks for reading my stuff, second off - I read through this and have a simple solution.

Yes, the Blizzard API did move to the OAuth2 authorization flow. My post is out of date but since you shouldn't have your client secrets visible in the web (doesn't belong in this layer), I didn't really bother creating anything for it in AngularJS.

As others have mentioned, you could write something separate and that does have its advantages. There are a lot of popular languages out there, but since you're on a web host you're limited to what is installed. I'm not sure what is involved with creating a phpBB addon, but if you know php that might be a good route.

Good news is every linux box comes with bash and python - both could be used in a simple way to achieve what you want. Using a simple bash script, you could use that very curl request (with your client id and secret "hidden" from the web on your server) and save the json result to a file (let's say token.json).

From there you have a few options:

Option 1: Extend the bash/python script to parse the token.json for your token, and make the second request for the realm data. Once again you'd save that output on the server as your "cached" version (realm.json). You'd create a simple cron job to do this every 15 minutes. If you saved this realm.json file in a publically accessible place (aka wwwroot/data/realm.json), you could retrieve it from jQuery just like you wanted via a local url (barens.chat/data/realm.json for example). You could still make this request on page load, but it would be loading the local file so no worries about your rate limit. Done.

Option 2: Parse the token.json from phpBB/php, use the token to make the second request for realm data, build the page... done (lots of "hidden steps" here)

Make sense?

Here is a real simple bash script that could be used for getting the token. If you'd like help making the second request in a language native to your hosting platform (bash/python), or need advice on another route - I can help!

#!/bin/bash

TOKEN_ENDPOINT="https://us.battle.net/oauth/token"
TOKEN_FILENAME="token.json"

CLIENT_ID="<id here>"
CLIENT_SECRET="<secret here>"

curl -u $CLIENT_ID:$CLIENT_SECRET -d grant_type=client_credentials $TOKEN_ENDPOINT > $TOKEN_FILENAME

You can easily do this in vanilla js, if I read it correct all you need is a fetch() and abit of code to type out ur fetched data.

I am writing this on my phone so there may be a mistake but I'll try to look carefully so there won't be any.

let maldivh;

function grapData(){
    fetch("insert your API route here")
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        maldivh = data;
        updater();
    });
}

function updater(){
    document.querySelector("#test").innerHTML = maldivh;
    
    // Since the maldivh variable is now an object you will have to navigate around in it to get the specific data.  Example: maldivh.realm to print the realm information etc