Access Management Using the PubNub AngularJS Library

In the course of implementing a bunch of new applications with the PubNub AngularJS 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 (AM) to the PubNub AngularJS 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.

To refresh your memory, let’s take a quick look at how we get started using the AngularJS API. For a deeper look, feel free to check out the earlier PubNub AngularJS SDK Blog.

Quick Recap: Setting 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. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization, for example:

Here are the script includes you’ll need to get started:

The web app is Angular-enabled with an ng-app attribute:

The code for our app lives in:

The app requires a dependency on the PubNub Angular library (pubnub.angular.service, defined in pubnub-angular.js):

The code for our controllers lives in:

Once that’s set, the PubNub service can be injected into the controller by name!

Quick Recap: Publish & Subscribe

Publishing to channels is trivial – just use the PubNub.ngPublish() method.

Subscribing to channels is accomplished by calling the PubNub.ngSubscribe() method. After the channel is subscribed, the app can register root scope message events by calling $rootScope.$on with the “event name” string returned by PubNub.ngMsgEv(channel).

Getting In Control : Managing Access using AM

There are two main functions of AM: 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 PubNub.ngGrant() 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 AngularJS 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.

The code referenced below is available at:

https://github.com/pubnub/angular-js/blob/master/dist/scripts/controllers/main.js

When a user logs in with super user privileges, the secret key and auth key are populated in the PubNub.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 AngularJS Security

In this blog entry, we had fun showing you a how to control access to your angular app with the PubNub AngularJS library. We hope you find this information to be useful — it is really cool to see the number of PubNub and AngularJS applications continue to grow over the past few weeks!

We’re continuously updating this library – for example, updated presence API support just recently landed in the SDK. We’re also actively exploring more features in this library, such as PubNub-enabled Angular directives and integration with the AngularJS promise framework. So stay tuned and let us know here PubNub AngularJS on GitHub if you have any ideas for future enhancements!

In future blog posts, we’ll cover even more features of the PubNub Angular API. In the meantime, please give the AngularJS integration a try, have fun, and reach out if you have ideas visit GitHub pubnub/angular-js. Or, if you need a hand (help@pubnub.com)!

Get Started
Sign up for free and use PubNub to power your
real-time AngularJS app.