Good News! We've launched an all new Chat Resource Center.
We recommend checking out our new Chat Resource Center, which includes overviews, tutorials, and design patterns for building and deploying mobile and web chat.
In our series on building a fully-featured chat application with Ember.js, we've already walked through how to build and implement:
Today, we’re going to discuss how to integrate access management in a Ember.js real-time chat application.
Access management gives you fine grain control down to the individual data channel, enabling you to grant and revoke access to those data streams. It's a powerful way to ensure security and implement authorization in your web and mobile applications.
Prerequisites
For this blog entry, we’ll presume you are somewhat familiar with the ideas from the PubNub Ember.js SDK, at least enough to get started.
Here are a few more resources:
- PubNub Ember.js SDK
- Code Pen for the PubNub Ember.js Chat Application
- Zero to Ember.js in 60 Seconds: Ember Made Easy
- Ember.js 101: From Zero to Ember in PubNub Seconds
Have you been following along with the previous posts? Feel free to click here to skip down to Access Management, otherwise, the quick recap will get you up and running quickly!
Quick Recap: Initial Set Up
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. To test a live version of this app, clone the Code Pen code, and enter your unique PubNub keys on the PubNub initialization.
Here are the script includes you’ll need to get started:
Quick Recap: The HTML View
Let’s look at the necessary code for the HTML view. This will display the app’s functionality through the browser. For a simple chat application we’ll want to see all the current users, an input box to send new messages, as well as a count and list of messages sent.
First, define the Ember.js Application:
Display a list of all online users:
Display the chat history length:
Provide an input box for new messages:
Display the chat history:
Quick Recap: Initializing the Ember.js Application with PubNub
It is very easy to create a new Ember.js application.
We’ll need to assign each user and id when they enter the channel. For the sake of simplicity, we’ll assign a random number for each id.
In order to take advantage of the PubNub Data Stream Network, we must initialize it first.
You should replace demo with your own subscribe and publish credentials from your PubNub account. Take note that you should never publish your keys to a public code base.
The main:pubnub object is fully initialized and available for injection into the controller.
Now, we can access the PubNub service anywhere from our controller with this.get('pubnub'). There are certain cases, like nested closures, where you might need to use var self = this outside of the closure.
Quick Recap: Setting Up a Channel
The next step involves creating a new channel. The channel name and initial message can be customized to your preferences. We also set up a dynamic collection for users and messages.
Defining the PubNub service, the channel, and this will provide some simplicity for us later.
Subscribing to the channel is trivial with the emSubscribe method. After this is complete, the app registers $rootScope with PubNub.on.
Quick Recap: Introducing Message and Presence Events
Add new messages to the messages list by registering for message events with emMsgEv.
Add new users to the list of users currently in the channel by registering for presence events with emPrsEv.
Pre-Populate the user list with users that are already in the channel with emHereNow.
Populate message history in the channel. You can customize the number of messages to populate with the count number.
Set up an Ember Action to publish a message with the emPublish method, passing in the user id, channel, and message. You can also send structured data as JSON objects. The PubNub library will automatically serialize and deserialized those objects for you. Very cool!
Okay, now onto the good stuff!
The Good Stuff: Access Management
In the course of implementing a bunch of new applications with the PubNub Ember.js library, we found that it’s often useful to be able to restrict access to data and operations in the PubNub API.
For example, creating a private channel for a subset of users, creating a read-only channel for real-time price updates, or restricting to write-only access to implement the request channel for a request-response interaction.
To that end, we added support for Access Manager to the PubNub Ember.js SDK. It allows flexible access control for just about any use case one can come up with, in most cases using a completely serverless API.
There are two main functions of Access Manager: Grant (which allows or disallows access to a specified channel given specified credentials), and Audit (which shows the current access control settings).
The basic mechanism of access is the auth_key, which acts as a shared secret providing access. If auth_key is not specified in grant or revoke, the operation applies to all users. The auth_key should be distributed to users via a secure mechanism (via a private channel, or user-specific messages from the server).
Granting read-only access to all channels for all users looks like:
Granting read-only access to a specific channel for all users looks like:
Granting read-only access to a specific channel is as simple as:
To create a read-write credential, we do the following:
Note that we used a different auth_key for read/write so that we can restrict distribution of that key to a limited subset of users.
To revoke access, we use the pn.emGrant() call with all privileges disabled:
To view permissions for a given channel and auth_key, we use the PubNub.ngAudit() call and provide a callback:
Special Note: TTL’s and Access Control
One noteworthy item we’d like to mention is that access control is implemented using a TTL and expires with a default of 24 hours. If you would like your permissions to be permanent or have a different TTL value, please specify it as follows:
This specifies a timeout of one hour. For more information, check out the JavaScript API.
Special Note: Access Control and Presence
If your app uses PubNub Presence, you’ll need to grant access to the special “ChannelName-pnpres” channel in order to allow access to presence events. For example:
Putting It All Together
We’ve integrated access control into the PubNub Ember.js sample application. When a user logs in, they are provided with a checkbox asking “log in as super user?” Note: this is just for demonstration purposes – in a real-world scenario, the server would likely determine whether a user is a super user or not.
When a user logs in with super user privileges, the secret key and auth key are populated in the pn.init() call as follows:
The grants are set up in the following lines of the application:
And that’s it! We now have a private channel called “SuperHeroes” which is only visible if the client has access.
Wrapping Up Ember.js
In this blog post, we had fun showing you a how to integrate access management in your Ember.js app with the PubNub Ember.js library. We hope you find this information to be useful — it is really cool to see the number of PubNub and Ember.js applications growing!
The PubNub API has many more features we didn’t cover in this blog post, but which are explained in detail in the GitHub API Guide and Reference. The documentation walks you through additional topics which really enhance your real-time-enabled web application.
In future blog posts, we’ll cover other features of the PubNub Ember API. In the meantime, please give the Ember.js integration a try, have fun, and reach out if you have ideas visit GitHub pubnub/pubnub-ember. Or, if you need a hand, help@pubnub.com!
