Flutter第三方登录插件third_party_login的使用

第三方登录简介

Third Party Login 是一种简单的方式，可以通过不同类型的第三方登录系统进行登录。它支持以下几种登录方式：

• Google 登录
• Facebook 登录
• Apple 登录
• 手机号登录

功能特性

• 支持 Google 登录
• 支持 Facebook 登录
• 支持 Apple 登录
• 支持手机号验证

入门指南

为了使用这些功能，你需要按照以下步骤进行设置：

1. 添加依赖

在 pubspec.yaml 文件中添加 third_party_login 依赖：

dependencies:
  third_party_login: ^1.0.14

2. 导入包

在 Dart 文件中导入 third_party_login 包：

import 'package:third_party_login/third_party_login.dart';

3. 初始化 ThirdPartyLoginMethods

创建 ThirdPartyLoginMethods 实例：

ThirdPartyLoginMethods thirdPartyLoginMethods = ThirdPartyLoginMethods();

4. 调用 socialMediaLogin 并传递 AuthType

调用 socialMediaLogin 方法并传递相应的 AuthType：

final userCredential = await thirdPartyLoginMethods.socialMediaLogin(
        authType: AuthType.google);

手机号验证的使用

1. 初始化 PhoneNumberAuth 类

初始化 PhoneNumberAuth 类并调用 init 方法开始手机号验证。如果成功，它将返回 “Code sent Success” 消息：

PhoneNumberAuth _auth = PhoneNumberAuth();
final String? message = await _auth.init(phoneNumber: contactNumber);

2. 验证短信验证码

调用 verifyCode 方法并传递收到的短信验证码。该方法将尝试验证代码，如果成功，它将使用凭据登录并返回 UserCredential：

final UserCredential? userCredential =
          await thirdPartyLoginWithPhoneNumber.verifyCode(smsCode: sms);

AuthTypes

支持的 AuthType 类型包括：

• google
• facebook
• apple
• phoneNumber

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 third_party_login 插件实现 Google、Facebook 和手机号登录：

import 'dart:developer';

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:third_party_login/third_party_login.dart';
import 'package:third_party_login/third_party_login_with_phone_number.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ThirdPartyLoginMethods thirdPartyLoginMethods;
  late UserCredential? userCredential;
  TextEditingController phone = TextEditingController();
  TextEditingController sms = TextEditingController();
  String photoUrl = "";
  String displayName = "";
  String uuid = "";
  late ThirdPartyLoginWithPhoneNumber thirdPartyLoginWithPhoneNumber;

  [@override](/user/override)
  void initState() {
    thirdPartyLoginMethods = ThirdPartyLoginMethods();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (photoUrl.isNotEmpty)
              CircleAvatar(
                backgroundImage: NetworkImage(photoUrl),
                radius: 32,
                backgroundColor: Colors.black,
              ),
            const SizedBox(
              height: 10,
            ),
            if (photoUrl.isNotEmpty)
              Text(
                displayName,
                style: const TextStyle(
                    fontWeight: FontWeight.bold, fontSize: 20.0),
              ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.amber,
              child: TextButton(
                child: const Text(
                  'SignIn With Google',
                ),
                onPressed: () => signIn(AuthType.google),
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.redAccent,
              child: TextButton(
                child: const Text(
                  'SignOut from Google',
                ),
                onPressed: () => signOut(AuthType.google),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              color: Colors.blue,
              child: TextButton(
                child: const Text(
                  'SignIn With Facebook',
                  style: TextStyle(color: Colors.white),
                ),
                onPressed: () => signIn(AuthType.facebook),
              ),
            ),
            TextField(
              controller: phone,
              keyboardType: TextInputType.phone,
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.red,
              child: TextButton(
                child: const Text(
                  'Verify Phone',
                ),
                onPressed: () => verifyPhone(),
              ),
            ),
            TextField(
              controller: sms,
              keyboardType: TextInputType.number,
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.black,
              child: TextButton(
                child: const Text(
                  'Verify Code',
                ),
                onPressed: () => verifyCode(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Future<UserCredential?> signIn(AuthType authType) async {
    try {
      userCredential = await thirdPartyLoginMethods.socialMediaLogin(authType: authType);
      setState(() {
        userCredential = userCredential;
        photoUrl = userCredential?.user?.photoURL ?? "";
        displayName = userCredential?.user?.displayName ?? "";
      });
    } catch (e) {
      log('Error signing in: $e');
    }
    return null;
  }

  Future<void> signOut(AuthType authType) async {
    try {
      await thirdPartyLoginMethods.signOut(authType: authType);
      setState(() {
        userCredential = null;
        photoUrl = "";
        displayName = "";
      });
    } catch (e) {
      log('Error signing out: $e');
    }
  }

  verifyPhone() async {
    thirdPartyLoginWithPhoneNumber = ThirdPartyLoginWithPhoneNumber();
    try {
      String? message = await thirdPartyLoginWithPhoneNumber.init(phoneNumber: phone.text);
      debugPrint(message);
    } catch (e) {
      inspect(e);
    }
  }

  verifyCode() async {
    try {
      userCredential = await thirdPartyLoginWithPhoneNumber.verifyCode(smsCode: sms.text);
      inspect(userCredential);
      setState(() {
        userCredential = userCredential;
        photoUrl = userCredential?.user?.photoURL ?? "";
        displayName = userCredential?.user?.displayName ?? "";
      });
    } catch (e) {
      inspect(e);
    }
  }

  resend() async {
    try {
      final String? message = await thirdPartyLoginWithPhoneNumber.resendSms();
      debugPrint(message);
    } catch (e) {
      inspect(e);
    }
  }
}