Flutter电子邮件认证插件auth_email的使用

服务器端

步骤

1. 下载PHP服务器文件（例如：v0.0.4），并修改src/config.php文件以适应你的配置。示例如下：

// 这是一个简单的配置，你可以在 `index.php` 中修改更多的配置。
$HOST = 'example.com';
$USER_NAME = 'auth@example.com';
$PASSWORD = 'password';
$PORT = 587;
$SEND_FROM = $USER_NAME;

$DEFAULT_SUBJECT = '验证邮箱';
$DEFAULT_BODY = '请输入此一次性密码（OTP）来验证您的邮箱，不要将此代码透露给任何人：{otp}';
$DEFAULT_OTP_LENGTH = 6;

// 客户端密钥：authemailtestkey
$SERVER_SHA256_KEY = '6955c3a2dbfd121697623896b38f5eb759d2cd503476980e14b9beb0cc036c4d';

// 应用的安全性。
$ALLOWED_APPS = [
    // 应用名称。必须与客户端侧的 `appName` 相同。
    'Auth Email Test' => [
        // 允许此应用使用修改后的主题。
        'modifiedSubject' => false,
        // 允许此应用使用修改后的正文。
        'modifiedBody' => false,
        // 允许此应用使用修改后的OTP长度。
        'modifiedOtpLength' => false,
    ],
];

1. 仅上传src目录下的文件到你的服务器。

客户端

步骤

1. 将auth_email添加为项目的依赖项。
2. 创建一个用于auth_email的控制器：

final authEmail = AuthEmail(
    // 应用名称。必须在服务器上的 `$ALLOWED_APPS` 中可用。
    appName: 'Auth Email Test',
    // 服务器URL。
    server: 'https://example.com/auth/email',
    // 客户端密钥。
    serverKey: 'authemailtestkey',
    // 是否允许打印调试日志。
    isDebug: true,
);

1. 发送OTP验证码到客户端邮箱：

final bool result = await authEmail.sendOTP(email: 'exampleclient@gmail.com');

你也可以通过参数更改邮件的主题、正文和OTP长度，但首先需要在PHP服务器配置中将其权限设置为true。

1. 验证OTP验证码：

final bool isVerified = authEmail.verifyOTP(email: 'exampleclient@gmail.com', otp: '<code>');

其他功能

你可以检查邮箱是否有效，然后再发送OTP验证码：

final bool isValidEmail = AuthEmail.isValidEmail('exampleclient@gmail.com');

测试服务器

步骤

1. 该项目包含一个测试服务器，你可以使用以下配置创建自己的测试应用程序：

// 仅用于测试目的。
final authEmail = AuthEmail(
  appName: 'Auth Email Example', // <- 仅允许此应用名称用于测试
  server: 'https://pub.lamnhan.dev/auth-email/api',
  serverKey: 'ohYwh',
  isDebug: true,
);

1. 你还可以在Web上测试此插件。

请注意，此配置仅用于测试目的。

贡献

如果您发现任何错误或缺少某些功能，请随时提交问题，我们也欢迎PR。

示例代码

以下是完整的示例代码：

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

// 仅用于测试目的。
final authEmail = AuthEmail(
  appName: 'Auth Email Example',
  server: 'https://pub.lamnhan.dev/auth-email/api',
  serverKey: 'ohYwh',
  isDebug: true,
);

void main() async {
  runApp(const MaterialApp(home: AuthEmailApp()));
}

class AuthEmailApp extends StatefulWidget {
  const AuthEmailApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<AuthEmailApp> createState() => _AuthEmailAppState();
}

class _AuthEmailAppState extends State<AuthEmailApp> {
  String sendOtpButton = '发送OTP';
  String verifyOtpButton = '验证OTP';

  bool isSent = false;
  String desEmailTextField = '';
  String verifyTextField = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Auth Email'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          if (!isSent) ...[
            const Text('输入您的客户端邮箱：'),
            TextFormField(
              textAlign: TextAlign.center,
              initialValue: desEmailTextField,
              onChanged: (value) {
                desEmailTextField = value;
              },
              validator: (value) {
                if (!AuthEmail.isValidEmail(desEmailTextField)) {
                  return '此邮箱无效！';
                }
                return null;
              },
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  sendOtpButton = '正在发送OTP...';
                });

                final result = await authEmail.sendOTP(email: desEmailTextField);

                if (!result) {
                  setState(() {
                    sendOtpButton = '发送OTP失败！';
                  });
                }
                setState(() {
                  isSent = result;
                });
              },
              child: Text(sendOtpButton),
            )
          ] else ...[
            const Text('输入您的OTP：'),
            TextField(
              textAlign: TextAlign.center,
              onChanged: (value) {
                verifyTextField = value;
              },
            ),
            const SizedBox(height: 8),
            ElevatedButton(
              onPressed: () async {
                final result = authEmail.verifyOTP(
                    email: desEmailTextField, otp: verifyTextField);

                if (result) {
                  setState(() {
                    verifyOtpButton = '验证OTP成功';
                  });
                } else {
                  setState(() {
                    verifyOtpButton = '验证OTP失败！';
                  });
                }
              },
              child: Text(verifyOtpButton),
            )
          ]
        ],
      ),
    );
  }
}