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

Justin | design,extensions,HTML5,InDesign,tips,Tutorials | Monday, February 27th, 2017

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.

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.

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

Icon_download

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

Powered by ConvertKit

Related Articles

Leave a Reply

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