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.
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 Eleven: Granting and Revoking Permissions – Private Chat API
Getting Started with HTML and CSS
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
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.
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 from
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!
The Secure Demo