Emulating a Secure API Server in a Chrome Web Browser
In our previous tutorial on private chat, we left off letting users grant themselves access to protected channels. However, obviously this isn’t very secure if every client has access to the secret key. It’s not private chat if anyone can grant access to themselves. Let’s change that.
In this tutorial, we’ll walk you through how to run a secure API server in a web browser. In this case, we’ll write the server in JavaScript on the front-end. To control authorization, we’ll move the Access Manager permissions “server-side” in a simulated NodeJS environment.
Our “server” will be created in a second file that handles permissions and acts as an administrator, and will also handle our game logic or “truth.”
Wait what? Why would you ever want to do this?
Instead of building out cloud servers, you can run a secure API server on your own machine, all in a web browser. You can open up your laptop, and essentially your laptop becomes the server. No backend required.
We’ve now covered both building a multiplayer game lobby with a chatroom and the different ways we can use matchmaking to connect two different users. Here’s what we’ve covered so far:
- Part One: Series Overview and Building a Multiplayer Game Lobby
- Part Two: Adding Users and Usernames
- Part Three: Getting a List of Online Users
- Part Four: Random Matchmaking of Users
- Part Five: Skill-based Matchmaking of Users
- Part Six: Matchmaking Algorithm: Enabling Users to Challenge Other Players
- Part Seven: Create Chatrooms and Multiple Channels On Demand Tutorial
- Part Eight: Preparing for Private Chatrooms and Refactoring via Private Channels
- Part Nine: Creating Private Chat Requests with Popup Alerts
- Part Ten: JavaScript Private Chat API with Access Control
- Part Eleven: Granting and Revoking Permissions – Private Chat API
This blog post is Part Twelve of PubNub Developer Evangelist Ian Jennings‘s series on creating a multiplayer game with JavaScript.
Creating a Client-side Secure API “Server” with JavaScript
In most instances, a server would be written in NodeJS, Ruby, Python, or PHP. In our case, we’re going to write the server in Javascript on the front-end.
This is not traditionally the way we would build a game backend, but our front-end PubNub Javascript SDK will translate to NodeJS with minimal effort. Note: PubNub supports SDKs for more than 50 languages, all of which can be seen here.
Getting Started with HTML and CSS
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.
We’ll start by creating a new html file, which should look familiar.
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:
Here we’ve created another chat window which has no input. It’s going to server as a convenient log of activity happening in our application.
We’ll then add some basic CSS.
Coding the Secure API Server
Let’s start coding our server. The app will start exactly the same as in the past. Copy the same publish_key, subscribe_key, and secret_key from the other examples.
Granting Permissions Globally on the Server-side
Great! Now we’re going to add a global permissions grant to everyone on our server.
In the last Private Chat tutorial, we created a new auth_key on every page load, and then granted that auth_key access. In this example, we omit the auth_key which will grant everyone permissions.
We grant permissions to two channels at a time by using a comma separated list.
Then we subscribe to the channel. When messages come through, we output them to the server output box. We use JSON.stringify to format the object as JSON.
Now when we talk in “Lobby Chat” we should see the message output in the “Server Output.”
Private Chat Permissions
Remember how our client gave itself permission to private chat channels on request? Now we move that logic to the server.
When a new-private-chat message comes through, we grant the uuid who sent the request permission and the target using a comma separated list just like we did with multiple channels before.
We’ll also output a special alert into the server output that shows we granted a user access.
The Code So Far
The full code looks like this:
Remove secret_key and grants from Client
There’s one more part. Sure we can see the output on the server, but the client still has access to the secret_key and is granting permissions!
Back on the “client code” (the one with “Lobby Chat”) we remove the secret_key fromPUBNUB.init().
Now that the secret_key has been removed we should remove our grants as well. There are two when the app starts:
And there is one when a new PrivateChat is made.
Remove all these grants, and we’re done!
Full Code
The Secure Demo
The Server:
See the Pen Memewarz – Server Side [server] by Ian Jennings (@ianjennings) on CodePen.0
The Client:
See the Pen Memewarz – Server Side [client] by Ian Jennings (@ianjennings) on CodePen.0