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

Easy way to lock an app image

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.

text field name in InDesign

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

button field name in InDesign

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.

default navigation disabled

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

resources section with js file added

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

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

Would you like to see all the source files?
Sign up for my email list and I’ll send them to you.

Join the newsletter and get the source files

Sign up now and I'll send you the InDesign file, the JavaScript, and the HTML output.

Powered by ConvertKit

Join the Conversation

  1. Mark Jones says:

    Is it possible to add a click event on pressing the enter key as well as on clicking a button?

    1. Justin says:

      Example code:
      $('[name="NAME_OF_INPUT_FIELD"]').on('keypress', function (e) {
      if(e.which == 13) /*the enter key code*/
      {
      $('[name="NAME_OF_BUTTON"]').trigger('click');
      return false;
      }
      })

  2. David Stewart Howell says:

    Hi Justin, I know this is an older post but I keep going back to it again and again over the years to remind myself of the password option for IN5, which I have used extensively. I love this password code option, it works like a charm. However, I know nothing about coding or if the solution I am hoping for is even possible.

    I have a little interactive story game made with IN5 and at various points players are rewarded with a password to proceed to a specific section. Is it possible to use more than one password code at various places in the story or can it only be used once? That seems to be my understanding, but if it’s possible to add more passwords throughout the document I can’t figure it out. I have tried linking the documents together based on a different tutorial of yours, but that will only work on my machine since these stories aren’t being published online. For the hyperlinking option to work, it needs the full file path which is specific to the local machine, such as

    “C:\Users\name\Documents\Desktop\GAME\c1\index.html”

    The other option is break each section up into different files and not link them, which is what I do, but that breaks the immersion somewhat.

    But if it is possible to add specific password protection to specific pages, that is the solution I am hoping to find. I know this is a very old post, but I’m hoping it reaches any ears interested in offering a possible solution. Thanks!

    1. Justin says:

      Hi David,
      Breaking up the files would be the easiest way to do it without writing new code. You can link to them via relative file path. Check out this article for help with linking the files: Link from one document to another with InDesign and in5

      1. David Stewart Howell says:

        Thank you. Once I placed the files in my root C: folder and copied the path the linking worked for me. I appreciate your feedback.

Leave a comment

Your email address will not be published. Required fields are marked *