@kezoponk/iphonepasscode

IPhonePasscode creates very easily a highly customizable and functional copy of the IPhone pin passcode

Usage no npm install needed!

<script type="module">
  import kezoponkIphonepasscode from 'https://cdn.skypack.dev/@kezoponk/iphonepasscode';
</script>

README

IPhonePasscode.js

IPhonePasscode creates very easily a highly customizable and functional copy of the IPhone pin passcode.
MD5 hash your passcode: md5hashgenerator.com
A back-end is required to validate the passcode, see examples bellow.

Security note

Don't use this on anything big unless:
Passcode is 11+ digits long.
If passcode is 11- digits - leave md5passcode empty and use csrf token


Installation

Install from the command line:

$ npm install @kezoponk/iphonepasscode

Install via package.json:

"@kezoponk/iphonepasscode": "1.0.9" 

Or download the dist/ipasscode.js manually

<script type="text/javascript" src="ipasscode.js"></script>

Usage

Options Description
md5passcode Leave empty if you wish to validate pin only in the specified redirect url/page - Safer
length
Required
Length of passcode
redirect
Required
Back-end file or directory to redirect if passcode is right. Works with custom parameters!
title Text appearing above passcode pins
Default: Enter Password

new IPhonePasscode('targetDiv', { Options });


CSS Classes for customization
ipasscode__press-animation
ipasscode__button
ipasscode__button-big-number
ipasscode__button-small-letters
ipasscode__title
ipasscode__pinsdiv
ipasscode__pins

Use !important if nothing changes


Example - with PHP

<div class="index-passcode" id="iphonePasscode"></div>
new IPhonePasscode('#iphonePasscode', {
                     md5passcode: 'ec6a6536ca304edf844d1d248a4f08dc',
                     length: '4',
                     redirect: '../php/keychain.php'
});
if($_GET['pass'] == '1234') {
  session_start();
  $_SESSION['keychain'] = True;
  header('location: ../index.html');
}
  • Passcode is 1234
  • PHP used for back-end with a keychain session variable

Example - with Python Django

<div class="index-passcode" id="iphonePasscode"></div>
new IPhonePasscode('.index-passcode', {
                     length: '4',
                     title: 'Enter Passcode To Login',
                     redirect: '/checkpasscode/'
});
def login_func(request):
    if request.GET['pass'] is '1234':
        return redirect('/loggedin/')
    else:
        return redirect('/passcode-login/')
  • Passcode is 1234
  • Passcode not exposed on client side, but reloads page each time
  • Modified title
  • Python django used for back-end