How to Create a Simple Entry Password for Your App with in5

This tutorial will show you how to add a simple password to your app or Web App created with InDesign and in5 (InDesign to HTML5).

Disclaimer

This technique is very easy to bypass on the web. It should not be considered as truly secure in any way.

It only creates a simple barrier to the content and I would only suggest using when your content goes into a mobile app or Web App, because it’s slightly hard to tamper with the source code.

Don’t worry though, there are also more sophisticated ways to create password protection.

Building the Form Elements in InDesign

Start by creating a Text form field on the first page of your InDesign document using the Buttons and Forms panel.

Give the field a name with no spaces, e.g., pass_field.

Create a button with a name as well, e.g., pass_btn.

Go ahead and create all the rest of your document.

You’re almost ready to export to HTML using in5.

Creating Custom Password Checking Code

Open a text editor and paste in the following code.

$(function(){
   var pass = 'test',
   $pass_btn = $('[name=pass_btn]'),
   $pass_field = $('[name=pass_field]');
   $pass_btn.click(function(e) {
   if($pass_field.val() == pass) nav.next();
   else alert('Incorrect password');
   });
});

Save it as a JavaScript file with a .js file extension.

A quick explanation of the code

The first and last lines of the code above wrap everything else in a ready function, meaning that the code inside will only be called when the document is ready (i.e., when the form elements are loaded and can be accessed with code).

The first 3 indented lines create variables for the password text, a jQuery object for the button element, and a jQuery object for the password field respectively.

The $pass_btn variable then has a click event added. That click event tests to see if the value inside the password text element matches the pass variable.

If there’s a match, the nav.next() function sends the viewer to the next page (i.e., past the password barrier).

If not, an alert informs the user that the password is incorrect.

And if you plan to use the Flipbook Page Format, or the Viewer Display, here’s a slightly more sophisticated version of the code from above:

$(function(){
    var pass = 'test',
        $pass_btn = $('[name=pass_btn]'),
        $pass_field = $('[name=pass_field]');
        $('#viewer-options-wrap, nav').hide(); /*hide nav*/
        if(flip) { /*disable flipbook*/
        $sl.turn("disable",true).one('start',function(){
        	$sl.turn("disable",true);
        	return false;
        });
        }
    $pass_btn.click(function(e) {
        if($pass_field.val() == pass) {
            $('#viewer-options-wrap').show();
            if(flip) { $sl.turn("disable", false); }
            nav.next();
        }
        else alert('Incorrect password');
        return false;
    });
});

Now that you’ve got the code together, let’s attach it to the InDesign content and get that app exported.

Attaching the Code and Exporting the App Using in5

Choose File > Export HTML5 with in5… to launch the in5 dialog.

Disable the built-in navigation by unchecking Enable Swipe Navigation and Show Back/Next Buttons so that user can’t just swipe or click the next button to skip the password entry page.

Navigate to the Resources section and attach the .js file that you saved by clicking the plus (+) sign in the JavaScript section.

Now click OK to export your merged InDesign content and JavaScript code.

Here’s a working sample. The password is test.