webotp_autofill 0.0.4 copy "webotp_autofill: ^0.0.4" to clipboard
webotp_autofill: ^0.0.4 copied to clipboard

Platformweb

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 #

  1. Install webotp_autofill Dependency
flutter pub add webotp_autofill
  1. create a file webotp_autofill.js in your web/ 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);
        });
    });
}
  1. Initialize Webotp api in index.html
<!-- Add this script to initiate webotp -->
<script src="web_otp_autofill.js" ></script>
  1. Configure
  • 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>

To get better understanding about webotp API refer the docs of WebOtp API #

2
likes
130
points
27
downloads

Publisher

unverified uploader

Weekly Downloads

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on webotp_autofill