Flutter一次性密码（TOTP）认证插件auth_totp的使用

auth_totp 是一个快速且易于使用的基于时间的一次性密码（TOTP）认证包，适用于你的Flutter应用。它与 Google Authenticator、1Password、LastPass、Microsoft Authenticator 以及其他各种认证应用程序兼容。

Get Started

Create Secret Key 🔑

生成一个随机的秘密密钥，用于从认证应用程序创建验证码。

String secret = AuthTOTP.createSecret(
    length: 16,
    autoPadding: true,
    secretKeyStyle: SecretKeyStyle.upperLowerCase
);

// 输出示例：xHu6 nh7I D8uI s9B1

• length: 密钥长度，默认值为32，范围在16到255之间。
• autoPadding: 是否自动填充，将密钥分为每4个字符一组，默认为false。
• secretKeyStyle: 密钥风格，可以是大写、小写或大小写混合。

Verify TOTP Code ✔️

验证用户输入的TOTP代码是否正确。

bool checkOTP = AuthTOTP.verifyCode({
    secretKey: "secret_key_here",
    totpCode: "totp_code_here_by_user",
    interval: 30
});

• secretKey: 使用createSecret方法生成的秘密密钥。
• totpCode: 用户输入的TOTP代码。
• interval: 时间间隔，默认为30秒。

Generate TOTP Code 🚀

根据秘密密钥和时间间隔生成TOTP代码。

String generatedTOTPCode = AuthTOTP.generateTOTPCode(
    secretKey: 'secret_key_here',
    interval: 30
);

Get QR Code to Scan 📸

返回一个二维码URL，用户可以通过认证应用程序扫描该二维码。

String qrCodeUrl =  AuthTOTP.getQRCodeUrl({
    appName: "your app name",
    secretKey: "secret_key_here",
    issuer:"auth_totp"
});

// Image.Network(qrCodeUrl);

Full Example

以下是一个完整的示例，展示了如何使用auth_totp插件。

import 'package:auth_totp/auth_totp.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: QRCodePage(),
    ),
  );
}

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

  @override
  State<QRCodePage> createState() => _QRCodePageState();
}

class _QRCodePageState extends State<QRCodePage> {
  String secret = AuthTOTP.createSecret(
      length: 16,
      autoPadding: true,
      secretKeyStyle: SecretKeyStyle.upperLowerCase);
  String appName = "TOTP"; // 给出你的应用名称

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Auth TOTP Flutter Package", style: TextStyle(color: Colors.white)),
        centerTitle: true,
        backgroundColor: Colors.green,
        elevation: 0,
        shadowColor: Colors.transparent,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16.0),
        children: [
          const Center(
            child: Text("扫描此二维码或将秘密代码复制到您的认证应用中。点击继续进行验证。"),
          ),
          Image.network(AuthTOTP.getQRCodeUrl(appName: appName, secretKey: secret)),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: TextEditingController(text: secret),
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Secret Code',
              ),
              readOnly: true,
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => VerificationPage(secret: secret),
                ),
              );
            },
            child: const Text("Continue to Verify"),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            secret = AuthTOTP.createSecret(
                length: 16,
                autoPadding: true,
                secretKeyStyle: SecretKeyStyle.upperLowerCase);
            print(AuthTOTP.generateTOTPCode(secretKey: secret, interval: 30));
          });
        },
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

class VerificationPage extends StatefulWidget {
  final String secret;
  const VerificationPage({super.key, required this.secret});

  @override
  State<VerificationPage> createState() => _VerificationPageState();
}

class _VerificationPageState extends State<VerificationPage> {
  String code = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Verify TOTP", style: TextStyle(color: Colors.white)),
        centerTitle: true,
        backgroundColor: Colors.green,
        elevation: 0,
        shadowColor: Colors.transparent,
      ),
      body: Center(
        child: ListView(
          padding: const EdgeInsets.all(16.0),
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                keyboardType: TextInputType.number,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Enter TOTP Code',
                ),
                onChanged: (value) {
                  setState(() {
                    code = value;
                  });
                },
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  if (AuthTOTP.verifyCode(secretKey: widget.secret, totpCode: code)) {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                      content: Text("Congratulations, TOTP is correct"),
                      backgroundColor: Colors.green,
                      behavior: SnackBarBehavior.floating,
                      margin: EdgeInsets.all(10),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
                    ));
                  } else {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                      content: Text("Opps, TOTP is incorrect"),
                      backgroundColor: Colors.red,
                      behavior: SnackBarBehavior.floating,
                      margin: EdgeInsets.all(10),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
                    ));
                  }
                });
              },
              child: const Text("Verify"),
            ),
          ],
        ),
      ),
    );
  }
}

以上示例展示了如何生成密钥、显示二维码、获取用户输入并验证TOTP代码。你可以根据需要调整和扩展这个示例。