artursapek

Most apps require storing some sort of user data, whether that’s login credentials or sensitive data. The previous post already gave a high level overview of how to use our built-in user account management, so let’s dive in a step further and see how to secure user data. For this example, we’re going to use a sample app built using our JavaScript SDK.

Keeping Private Data Safe

As an example of how to secure data, let’s take a look at a simple web app. We built this quick todo list app using our JavaScript SDK. The finished product is available for you to play with as well.

The app features two views: a simple login/registration page and the actual list itself. The todo items each have an assigned priority level (an integer between 1 and 3) as well as an optional due date. To keep things simple, this is expressed as an integer in hours from when the task is created.

In this view we can see a few items of varying priority. It looks like we’ve already paid Derek back for sushi, so that’s good, but this post is still unfinished with a looming deadline, so let’s get at it.

Building with our Javascript SDK

CloudMine takes care of the data storage and other essentials, so all you have to do is use our brand new evented JavaScript SDK. We just need a copy of the Javascript SDK and jQuery (or save yourself the download by linking to a hosted version of jQuery), plus some sprites for a colorful UI. To begin, configure a new instance of cloudmine.WebService with our app’s API Key and App ID.

User accounts

Once the SDK is initialized, we can just start making API calls. The new JS SDK supports Restler-style chaining, so we get to write these with clean, semantic syntax. Here’s a login request, which is triggered when the user clicks the Login button in the UI.

We can easily show error messages from the server. Here, a bad email will cause show_error to flash this response:

We’re also using these same fields to offer registration. Just for the sake of the demo, we’re only asking for an email and a password again. Here’s how we might register a new user with CloudMine.

Notice how we are taking advantage of callback chaining. All you really need is the createUser call, but the extra stuff makes for a more user-friendly interface. We can listen for specific successes and errors and react to them differently. Here we chose to return the server’s raw error response when the email is already in use, but you can return our own message if the email is invalid. Since we also changed the UI to indicate the request is pending, we can reset it in the event of any error at all.

Storing and retrieving todos

Once we’re logged in, we can query for that user’s data to see if they already have a todo list.

Sending new and updated todos is just as easy. Here we’re sending a new item that was just created, stored in the object_data object.

Changing data

When the user checks off an item, we can use the update method to change one of its properties.

Deleting data

We’ve also added little buttons. Here’s how simple it is to remove an object both in frontend and in backend by calling one function:

To see more examples, including saving user sessions and logging out, you can fork the finished app from its repo.