Flutter网页OTP（一次性密码）无输入插件otpless_flutter_web的使用

Flutter网页OTP（一次性密码）无输入插件otpless_flutter_web的使用

在Flutter网站中集成一键式无输入OTP登录功能，通过我们的SDK可以简化流程。本指南详细介绍了安装SDK和无缝获取用户信息的步骤。

1. 安装 OTPless SDK 依赖

首先，在你的 pubspec.yaml 文件中添加 otpless_flutter_web 依赖：

flutter pub add otpless_flutter_web:1.2.6

2. 在 index.html 中初始化 Otpless

在你的 web/index.html 文件中添加以下脚本以启动 otpless：

<!-- Add this script to initiate otpless -->
<script
  data-appid="{YOUR_APP_ID}"
  src="https://otpless.com/v2/flutter.js"
  id="otpless-sdk"
  type="text/javascript"
  variant="HEADLESS"
></script>

请确保将 {YOUR_APP_ID} 替换为你自己的应用ID。

3. 配置注册/登录

导入所需类

在你的 Dart 文件中导入以下类：

import 'package:otpless_flutter_web/otpless_flutter_web.dart';

在 initState() 方法中添加代码

在你的 StatefulWidget 的 initState() 方法中添加以下代码：

[@override](/user/override)
void initState() {
  _otplessFlutterPlugin.headlessResponse(onHeadlessResult); // 初始化回调函数
  super.initState();
}

添加处理回调响应的代码

定义一个方法来处理回调结果：

void onHeadlessResult(dynamic result) {
  setState(() {
    dataResponse = result; // 更新状态以显示结果
  });
}

添加 OAuth 认证代码

定义一个方法来发起 OAuth 认证：

void initiateOAuth(String channelType) async {
  _otplessFlutterPlugin.initiateOAuth(onHeadlessResult, channelType);
}

添加 PHONE/EMAIL 认证代码

定义一个方法来处理电话或电子邮件认证：

void initiatePhoneEmailAuth() async {
  Map<String, dynamic> arg = {};
  if (otpContoller.text.isNotEmpty) {
    if (phoneNumberContoller.text.isNotEmpty) {
      arg["phone"] = phoneNumberContoller.text;
      arg["countryCode"] = "91";
    } else {
      arg["email"] = emailContoller.text;
    }

    arg["otp"] = otpContoller.text;

    _otpless_flutterPlugin.verifyAuth(onHeadlessResult, arg);
  } else {
    if (phoneNumberContoller.text.isNotEmpty) {
      arg["phone"] = phoneNumberContoller.text;
      arg["countryCode"] = "91";

      _otpless_flutterPlugin.initiatePhoneAuth(onHeadlessResult, arg);
    } else if (emailContoller.text.isNotEmpty) {
      arg["email"] = emailContoller.text;

      _otpless_flutterPlugin.initiateEmailAuth(onHeadlessResult, arg);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text("请输入电话号码或电子邮件"),
        ),
      );
    }
  }
}

完整示例 Demo

以下是一个完整的示例应用程序，展示了如何使用 otpless_flutter_web 插件进行 OTP 登录：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:otpless_flutter_web/otpless_flutter_web.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Otpless Flutter Web Testing',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? name;
  String? data;
  String dataResponse = 'Unknown';
  final TextEditingController phoneNumberContoller = TextEditingController();
  final TextEditingController otpContoller = TextEditingController();
  final TextEditingController emailContoller = TextEditingController();
  final _otplessFlutterPlugin = Otpless();

  void onHeadlessResult(dynamic result) {
    print(result);
    setState(() {
      dataResponse = result;
    });
  }

  void initiateOAuth(String channelType) async {
    _otplessFlutterPlugin.initiateOAuth(onHeadlessResult, channelType);
  }

  void initiatePhoneEmailAuth() async {
    Map<String, dynamic> arg = {};
    if (otpContoller.text.isNotEmpty) {
      if (phoneNumberContoller.text.isNotEmpty) {
        arg["phone"] = phoneNumberContoller.text;
        arg["countryCode"] = "91";
      } else {
        arg["email"] = emailContoller.text;
      }

      arg["otp"] = otpContoller.text;

      _otplessFlutterPlugin.verifyAuth(onHeadlessResult, arg);
    } else {
      if (phoneNumberContoller.text.isNotEmpty) {
        arg["phone"] = phoneNumberContoller.text;
        arg["countryCode"] = "91";

        _otplessFlutterPlugin.initiatePhoneAuth(onHeadlessResult, arg);
      } else if (emailContoller.text.isNotEmpty) {
        arg["email"] = emailContoller.text;

        _otplessFlutterPlugin.initiateEmailAuth(onHeadlessResult, arg);
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text("请输入电话号码或电子邮件"),
          ),
        );
      }
    }
  }

  [@override](/user/override)
  void initState() {
    _otplessFlutterPlugin.headlessResponse(onHeadlessResult);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 50),
          child: Column(
            children: [
              Text(
                "Name : $name",
                style: const TextStyle(fontSize: 25),
              ),
              const SizedBox(height: 10),
              Text(
                "Data : $data",
                style: const TextStyle(fontSize: 25),
              ),
              TextField(
                controller: phoneNumberContoller,
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(hintText: "电话号码"),
              ),
              const SizedBox(height: 10),
              TextField(
                controller: emailContoller,
                decoration: const InputDecoration(hintText: "电子邮件"),
              ),
              const SizedBox(height: 50),
              TextField(
                controller: otpContoller,
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(hintText: "OTP"),
              ),
              const Spacer(),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      initiatePhoneEmailAuth();
                    },
                    child: const Text("PHONE/EMAIL"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      initiateOAuth("GOOGLE");
                    },
                    child: const Text("OAUTH"),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}