webotp_autofill 0.0.3 webotp_autofill: ^0.0.3 copied to clipboard
The WebOTP API provides a streamlined user experience for web apps to verify that a phone number belongs to a user when using it as a sign-in factor. WebOTP is an extension of the Credential Management API
WEBOTP_AUTOFILL #
The WebOTP API provides a streamlined user experience for web apps to verify that a phone number belongs to a user when using it as a sign-in factor. WebOTP is an extension of the Credential Management API.
📖 Steps to integrate webotp_autofill #
- Install webotp_autofill Dependency
flutter pub add webotp_autofill
- create a file
webotp_autofill.js
in yourweb/
directory and paste the below code
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
navigator.credentials.get({
otp: { transport: ['sms'] },
}).then(otp => {
const webOtpAutofillEvent = new CustomEvent('web-otp-autofill', {
detail: {
otp: otp.code
}
});
window.dispatchEvent(webOtpAutofillEvent);
}).catch(err => {
console.log(err);
});
});
}
- Initialize Webotp api in index.html
<!-- Add this script to initiate webotp -->
<script src="web_otp_autofill.js" ></script>
- Configure Sign up/Sign in
- Import the following classes.
import 'package:webotp_autofill/webotp_autofill.dart';
- Add this code to your Statefull widget
final TextEditingController _otpTextController = TextEditingController();
@override
void initState() {
WebOtpHandler().webAutofillOtpListener(onOtp: _onOtp);
super.initState();
}
_onOtp(String otp) {
_otpTextController.text = otp;
}
@override
void dispose() {
WebOtpHandler().removeWebAutofillOtpListener();
super.dispose();
}
SMS message format #
A typical SMS message looks like so:
Your verification code is 123456.
@top-level.example.com #123456 @embedded.com
- The first line and second blank line are optional and are for human readability.
- The last line is mandatory. It must be the last line if there are others present, and must consist of:
- The domain part of the URL of the website that invoked the API, preceded by a @.
- Followed by a space.
- Followed by the OTP, preceded by a pound sign (#).
NOTE: if you are using flutter web page in iframe and need to autofill the otp #
<iframe src="https://embedded.com/..." allow="otp-credentials"> ... </iframe>