1.1.1 • Published 12 months ago
@kezoponk/iphonepasscode v1.1.1
IPhonePasscode.js
IPhonePasscode creates very easily a highly customizable and functional copy of the IPhone pin passcode.
Use the main import for standard js, or import from dist/react for the included React component.
Security note
Don't use this on anything big unless: Passcode is 12+ digits long. If passcode is 12- digits - leave md5passcode empty and either limit requests or use csrf token
Installation
Install from the command line:
$ npm install @kezoponk/iphonepasscodeInstall via package.json:
"@kezoponk/iphonepasscode": "1.1.1" Usage
MD5 hash your passcode: md5hashgenerator.com A back-end is required to validate the passcode, see examples bellow.
| Option / Prop | 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 Passcode" |
| 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 standard JS and PHP backend
<div id="iphonePasscode" />new IPhonePasscode(
document.getElementById('iphonePasscode'), {
md5passcode: 'ec6a6536ca304edf844d1d248a4f08dc',
length: '4',
redirect: 'keychain.php'
}
);if($_GET['pass'] == md5('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 React
<IPhonePasscode length="4" title="Enter Passcode To Login" redirect="/checkpasscode">- Passcode not exposed on client side, causing it reload page on each try