@kefah/nativescript-otp
v1.0.8TypeScript
A Nativescript plugin to auto fill the One Time Code OTP for IOS and Android
0/weekUpdated 3 years agoApache-2.0Unpacked: 190.5 KB
Published by KefahB
npm install @kefah/nativescript-otp@kefah/nativescript-otp
_Social buttons_
_Repo metadata_
$3
Documentation
Table of contents
- Install
- Limitations
- Setup
- Usage
- Best Practice
- API
- Generate Android hash code
- How to test
- License
Install
``ts`
ns plugin add @kefah/nativescript-otp
ORts`
npm i @kefah/nativescript-otp
Limitations
IOS: This feature is available from IOS 12.0
it will not working with older versionsSetup
The only setup is for Android that need a hash code to be append to the sms, the procedure is a little complicated, this plugin has a helper getAppSignatures() on it that that can generate the hash code for the development, it is not sure that the same hash work for production, for that you need to generate it manually.Get you development hash code by calling
getAppSignatures() this will log the flowing into the console:> PS: please use
getAppSignatures() to get the hash code then comment it, it is not needed any more`ts
JS: packageName: org.nativescript.plugindemo Hash: I+D7XdR0yWS
`
- Google Docs
- Here is a
plugin to generate the hash, it work for all OS
android-sms-hash-generatorBefore start
> An OTP in most case it is a integers values, please avoid using alphabet characters if possible.> For some reason on IOS the OTP dectection not workin some time with a default keyboard type, if you experiencing a problem try to set the keyboard type to
integer
xml
`Some best practice in order to successfully receive the SMS
- Try to use thoes keywords into your sms Passcode Password is
- begin your sms by I am not sure about this as it not on the docs
- do not put multilines between the msg and the hash code
- use a short code
- use numbers and alphabetical characters only`ts
<#> your code is: 1234988
I+D7XdR0yWS
`Usage
This plugin implement the Nativescript
, so you can use it instead of the regular TextField.Begin by including the plugin in your page
`xml
``Then use the plugin instead of the TextField
xml
`Full example
xml
`Register the plugin to watch the incoming SMS and passe a callback function ont it to receive the OTP, this callback will be filled once the plugin captured the SMS.
View Model
ts
import {NativescriptOtp, OTPResultInterface} from '@kefah/nativescript-otp';
export class DemoSharedOtp extends DemoSharedBase {
constructor() {
super();
console.log('test nativescript-otp!');
let otp = new NativescriptOtp();
otp.registerForOTP((otp: OTPResultInterface) => {
if(otp) {
console.error("OTP", otp);
this.set("otp", otp.otp)
// do other staff
// trigger verify...
return;
}
// No OTP was found
})
}
}
`API
| Method | type | Description | IOS | Android |
|---|---|---|---|---|
| registerForOTP: (cb)| Function | register the plugin to watch the incoming SMS| x | x|
| unregisterForOTP | Function | Unregister the watch | x | x|
| parseMsg(msg, regex) | Function | this will parse the SMS to extract the code, you don't need to call it unless your code is special and you need a diffrent then pass your raged as second params | | x |
| getAppSignatures() | Function | A helper to get a development hash code for Android | | x |Generate Android hash code
`ts
package=_yourp_package_name_
keystore=debug.keystore
keystorepass=android
alias=androiddebugkeykeytool -exportcert -alias $alias -keystore $keystore -storepass $keystorepass | xxd -p | tr -d "[:space:]" | echo -n $package
cat | openssl sha256 test.txt | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11
`ts
keytool -exportcert -alias androiddebugkey -keystore debug.keystore -storepass android | xxd -p | tr -d "[:space:]" | echo -n $package cat | openssl sha256 | tr -d "[:space:]-" | xxd -r -p | base64 | cut -c1-11
`How to test
$3
Unfortunately an You need to test the SMS` on a real device, apple doesn't allow to simulate a incomming sms on the simulator.$3
It is very easy, please see the image below
