Access Management Using the PubNub AngularJS Library
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
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
Getting In Control : Managing Access using AM
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:
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:
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 (firstname.lastname@example.org)!