Flutter电话与邮箱认证插件phone_email_auth的使用

Flutter电话与邮箱认证插件phone_email_auth的使用

Getting Started（开始）

安装

dependencies:
  phone_email_auth: ^0.0.6

导入

import 'package:phone_email_auth/phone_email_auth.dart';

初始化插件

PhoneEmail.initializeApp(clientId: 'YOUR_CLIENT_ID');

注意：clientId 是你在 Phone Email 的 Admin Dashboard 的 Profile Details 部分获得的。

添加电话与邮箱登录按钮

child: PhoneLoginButton(
  borderRadius: 8,
  buttonColor: Colors.teal,
  label: 'Sign in with Phone',
  onSuccess: (String accessToken, String jwtToken) {
    if (accessToken.isNotEmpty) {
      setState(() {
        userAccessToken = accessToken;
        jwtUserToken = jwtToken;
        hasUserLogin = true;
      });
    }
  },
)

PhoneLoginButton 将返回 accessToken 和 jwtToken，这些是获取验证手机号码所必需的。

获取验证后的手机号码

一旦你获得了 accessToken，你可以通过调用 getUserInfo() 函数来获取验证后的手机号码。使用以下代码片段来检索验证后的手机号码和用户详情。

PhoneEmail.getUserInfo(
  accessToken: userAccessToken,
  clientId: phoneEmail.clientId,
  onSuccess: (userData) {
    setState(() {
      phoneEmailUserModel = userData;
      var countryCode = phoneEmailUserModel?.countryCode;
      var phoneNumber = phoneEmailUserModel?.phoneNumber;
      var firstName = phoneEmailUserModel?.firstName;
      var lastName = phoneEmailUserModel?.lastName;

      // 使用此验证后的手机号码来注册用户并创建会话
    });
  },
);

显示邮箱提醒

为已成功认证的用户集成一个邮箱提醒图标。使用以下代码片段来获取未读邮件数量并显示邮箱图标。

floatingActionButton: hasUserLogin
  ? EmailAlertButton(
    jwtToken: jwtUserToken,
  ) : const Offstage(),

完整示例代码

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  /// 初始化电话电子邮件功能
  PhoneEmail.initializeApp(clientId: 'YOUR_CLIENT_ID');

  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Phone Email',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color.fromARGB(255, 4, 201, 135),
        ),
        useMaterial3: true,
      ),
      home: const PhoneEmailAuthWidget(),
    );
  }
}

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

  [@override](/user/override)
  State<PhoneEmailAuthWidget> createState() => _PhoneEmailAuthWidgetState();
}

class _PhoneEmailAuthWidgetState extends State<PhoneEmailAuthWidget> {
  String userAccessToken = "";
  String jwtUserToken = "";
  bool hasUserLogin = false;
  PhoneEmailUserModel? phoneEmailUserModel;
  final phoneEmail = PhoneEmail();

  String emailCount = '';

  /// 获取邮件总数
  void getTotalEmailCount() async {
    await PhoneEmail.getEmailCount(
      jwtUserToken,
      onEmailCount: (count) {
        setState(() {
          emailCount = count;
        });
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Phone Email'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (hasUserLogin) ...[
              if (phoneEmailUserModel != null) ...[
                Divider(
                  thickness: 0.5,
                  color: Colors.grey.shade400,
                ),
                const SizedBox(height: 16.0),
                const Text(
                  "User Data",
                  style: TextStyle(
                    fontSize: 22,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 16.0),
                Text(
                  "User name : ${phoneEmailUserModel?.firstName} ${phoneEmailUserModel?.lastName}",
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 16.0),
                Text(
                  "Phone Number : ${phoneEmailUserModel?.countryCode} ${phoneEmailUserModel?.phoneNumber}",
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 16.0),
              ],
              if (emailCount.isNotEmpty) ...[
                Divider(
                  thickness: 0.5,
                  color: Colors.grey.shade400,
                ),
                const SizedBox(height: 16.0),
                Text(
                  "Email Count : $emailCount",
                  style: const TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                  ),
                ),
                const SizedBox(height: 16.0),
              ],
            ],

            /// 默认按钮
            if (!hasUserLogin) ...[
              /// 带有额外圆角的按钮
              /// 背景颜色不同
              /// 不同的文字
              Align(
                alignment: Alignment.center,
                child: PhoneLoginButton(
                  borderRadius: 15,
                  buttonColor: Colors.green,
                  label: 'Sign in with Number',
                  onSuccess: (String accessToken, String jwtToken) {
                    if (accessToken.isNotEmpty) {
                      setState(() {
                        userAccessToken = accessToken;
                        jwtUserToken = jwtToken;
                        hasUserLogin = true;
                      });

                      PhoneEmail.getUserInfo(
                        accessToken: userAccessToken,
                        clientId: phoneEmail.clientId,
                        onSuccess: (userData) {
                          setState(() {
                            phoneEmailUserModel = userData;
                            var countryCode = phoneEmailUserModel?.countryCode;
                            var phoneNumber = phoneEmailUserModel?.phoneNumber;
                            var firstName = phoneEmailUserModel?.firstName;
                            var lastName = phoneEmailUserModel?.lastName;
                            debugPrint("countryCode :: $countryCode");
                            debugPrint("phoneNumber :: $phoneNumber");
                            debugPrint("firstName :: $firstName");
                            debugPrint("lastName :: $lastName");
                            getTotalEmailCount();
                          });
                        },
                      );
                    }
                  },
                ),
              ),
            ],
            const SizedBox(height: 16.0),
            /// 登出
            Align(
              alignment: Alignment.center,
              child: ElevatedButton(
                onPressed: () {
                  hasUserLogin = false;
                  userAccessToken = "";
                  jwtUserToken = "";
                  phoneEmailUserModel = null;
                  emailCount = '0';
                  setState(() {});
                },
                child: const Text("Logout"),
              ),
            ),
          ],
        ),
      ),

      /// 邮箱按钮
      floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
      floatingActionButton: hasUserLogin
          ? EmailAlertButton(
              jwtToken: jwtUserToken,
            )
          : const Offstage(),
    );
  }
}