AngularJS Encryption and Three Way Data Binding Tutorial

Welcome back to our blog series about how to get started quickly with AngularJS using the PubNub AngularJS library. In a couple of recent episodes, we covered a tiny but powerful example of how to create a real-time Angular Chat application in less than 100 lines of code, as well as how to extend the example with multiplexing.

In this blog post, we’ll walk you through AngularJS encryption and three way data binding for web and mobile apps. This lets your app leverage additional AngularJS encryption to augment the transport-level encryption provided by PubNub itself over HTTPS. which is useful because it makes messages opaque before they are sent, and prevents third parties from snooping even if the messages are intercepted en route to the recipient (or after the fact).

The biggest advantage of AngularJS encryption with PubNub is that it allows your app to use secure communications with just one additional line of config (!). We’ll show you exactly what line of code that is later in the blog post. Thanks to the magic of Angular and PubNub, it’s super easy to make this happen with minimal code tweaks.

All the code for AngularJS encryption with PubNub is available here, and all PubNub AngularJS SDK documentation can be found ehre.

When Would I Use AngularJS Encryption?

First off, let’s take a look at the situations where you might take advantage of encryption and three way data binding:

• You want to encrypt messages “end-to-end”: at the “first hop”, as well as en route to the destination.
• You want to encrypt messages so they can be “revealed” later.
• You want to rotate cipher keys at periodic intervals so that clients are forced to refresh the key.
• You just feel like learning more about encryption and using one of PubNub’s advanced features!

So, now that you know you want to try out encryption, how do you do it? It’s pretty easy with the PubNub-Angular application.

Step 1: Get Your Includes On

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.

Setup of the PubNub Angular library is exactly the same as with the original Zero-to-Angular in 60 seconds example:

So what does all this stuff do?

• pubnub.min.js : the main PubNub communication library for JavaScript
• pubnub-crypto.min.js : encryption features in case you need to enable them someday
• angular.min.js : that AngularJS goodness we all know and love
• jquery-1.10.1.min.js : bring in some JQuery
• pubnub-angular.js : bring in the official PubNub SDK for AngularJS
• bootstrap.min.css : bring in the bootstrap styles

Once these are all set, you’re good to start coding!

Step 2: Set Up Your HTML Layout and Dynamic Content

Setup of the content DIV is the same as with the original Zero-to-Angular example:

AngularJS needs to be able to find your app. To make that happen, we add an ‘ng-app’ attribute to the div element we want to Angular-ize. In addition, we need to specify an AngularJS controller function that takes care of data binding all the logic we need. If you look in the script tag at the end of the page, you’ll see where we set up the EncryptedChatCtrl function.

Here, create a dynamic list of users simply by using a ul element and an li element that’s set up to iterate over all of the items in $scope.users. For the purposes of this demo, each user object is a simple string.

In this section, we’re just displaying a dynamic header that includes the length of the messages array (from $scope.messages).

All right! This is the first interactive feature – a simple text box that binds its content to $scope.newMessage, and a submit button for the form. The form submit function is bound to the $scope.publish function. What does it do? We’ll find out soon!

As you probably already guessed, we’re using the Angular ‘ng-repeat’ function to iterate over the $scope.messagesarray to display the list of messages in a UL (unordered list) element.

But wait a minute! I didn’t see anything about encryption in the HTML. That’s because the PubNub library takes care of it all under the hood – pretty sweet huh?

So right now you may be asking, how does it all work? Let’s check out the JavaScript!

Step 3: JavaScript – Where the AngularJS Encryption Magic Happens

Just like the previous blog entry, we’ll wrap up by taking a stroll through the JavaScript to see what’s happening. You’ll recognize a bunch from last time:

Just like last time, we:

• Declare an Angular module that matches our ng-app declaration
• Declare a Controller that matches our ng-controller declaration
• Set up the user id as a random string (your app probably has its own logic for this)
• Set up a starting message

That’s pretty cool. Let’s see what we have next.

Whoa! Here’s the good stuff!

This is pretty much the same as any other Angular PubNub application. The one and only difference we care about is:

• We add a Cipher Key argument to the options in the PubNub.init() function call

You might be asking now – “Are you serious – that’s it?” Yes, all you have to do is provide a secret key, and the PubNub client library takes care of the rest. PubNub never knows about this key, all of the encryption takes place in the browser so you know there’s nobody snooping on your data in between.

Even better, this encryption feature is available on dozens of platforms with over 50 PubNub SDKs, so your JavaScript app can communicate securely with PHP, Java, Ruby, .NET, you name it!

You can even change the cipher key later – just make sure there is a way for clients to discover the new key and reload the application in the browser with the new key.

The important things about the code above are:

• We use PubNub.ngSubscribe to register for event callbacks (note: only call it once per channel or you’ll get duplicate message events!)
• We create a ‘publish()’ function in the scope to send messages to the channel using PubNub when the user clicks “send”
• We register for message events using the Angular native $rootScope.$on function
• The channel message events are named using a PubNub-Angular-specific string that we obtain using PubNub.ngMsgEv (which is shorthand for “Angular channel message event name”)

Here, we’re just registering for PubNub Presence events so we know when users join and leave the channel. Once that’s set up, we can use the “ngHereNow” function to get the user list when the controller loads. Pretty nifty!

… And we’re done! Hopefully this helped you get started with PubNub message encryption and AngularJS without much trouble. Please keep in touch, and give us a yell if you run into any issues!

P.S. Special Footnote for Aspiring AngularJS Experts

If you look closely at the example code in the crypto.html source listing, you’ll actually notice that we have 2 HTML sections: one using encryption and one not. We did this so that the demo would be more interesting, but it also helped us pick up on an advanced AngularJS feature along the way that we’d like to share with you.

So, if you ever have the question: “How can I have more than one Angular ng-app active at the same time with different controllers in my Angular application?”

Now you’ll know! It’s like this:

• In the HTML, create 2 elements with different ng-app and different ng-controller tags
• In the JavaScript, add an angular.bootstrap call to initialize the second controller! (see below)

This is because AngularJS’s initialization is optimized for the single application case, and just needs a little help to notice any additional ones.