Flutter社交账号登录插件flutter_social_auth的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter社交账号登录插件flutter_social_auth的使用

1.0.3

Flutter包用于通过Google、Facebook、Apple等社交账号进行登录。


Getting Started(开始使用)

要使用此插件,请按照以下步骤操作:

  1. Google 登录
    参考文档:https://pub.dev/packages/google_sign_in

  2. Facebook 登录
    参考文档:https://pub.dev/packages/flutter_facebook_auth

  3. Apple 登录
    参考文档:https://pub.dev/packages/sign_in_with_apple


Example(示例)

以下是一个完整的示例代码,展示如何使用flutter_social_auth实现社交账号登录功能。

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

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

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

  // 生成发送验证码的URL
  String _makeSendEmailCode(String email){
    return 'https://flutter/$email'; // 替换为实际的发送验证码接口
  }

  // 生成验证验证码的URL
  String _makeUrlVerifyCode(String email, String code){
    return 'https://flutter/$email/$code'; // 替换为实际的验证验证码接口
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AuthView(
        // 支持的登录类型
        listTypeLogin: const [TypeLogin.google, TypeLogin.apple],
        // 是否隐藏其他登录方式
        hideLoginWith: true,
        // 登录成功后的回调
        onLogin: (userAuthInfo) {
          if (userAuthInfo != null) {
            print(userAuthInfo); // 打印用户登录信息
          }
        },
        // 生成发送验证码的URL
        makeUrlSendEmailCode: _makeSendEmailCode,
        // 生成验证验证码的URL
        makeUrlVerifyCode: _makeUrlVerifyCode,
        // 发送验证码后的回调
        onSendEmailVerifyCode: (result, email) {
          if (result) {
            print(email); // 打印邮箱
          }
        },
        // 验证验证码后的回调
        onVerifyCode: (verifyCodeStatus) {
          print(verifyCodeStatus.name); // 打印验证状态
        },
      ),
    );
  }
}

代码说明

  1. listTypeLogin
    定义支持的登录方式,例如Google和Apple。

  2. hideLoginWith
    是否隐藏其他登录方式,默认为false。如果设置为true,则只显示指定的登录方式。

  3. onLogin
    登录成功后的回调函数,返回用户登录信息。

  4. makeUrlSendEmailCodemakeUrlVerifyCode
    分别用于生成发送验证码和验证验证码的URL。

  5. onSendEmailVerifyCodeonVerifyCode
    分别处理发送验证码和验证验证码的结果。


运行效果

运行上述代码后,会弹出一个登录界面,支持Google和Apple登录。登录成功后会在控制台打印用户的登录信息。


注意事项

  1. 请确保在项目的pubspec.yaml文件中添加依赖:
    dependencies:
      flutter_social_auth: ^版本号

更多关于Flutter社交账号登录插件flutter_social_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter社交账号登录插件flutter_social_auth的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_social_auth 是一个用于在 Flutter 应用中实现社交账号登录的插件。它支持多种社交平台,如 Google、Facebook、Twitter、Apple 等。以下是如何使用 flutter_social_auth 插件的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 flutter_social_auth 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_social_auth: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 配置社交平台

在使用 flutter_social_auth 之前,你需要在各个社交平台上注册你的应用,并获取相应的 API 密钥或客户端 ID。

Google

  • Google Cloud Console 中创建一个项目。
  • 启用 Google Sign-In API。
  • 创建 OAuth 2.0 客户端 ID。
  • android/app/src/main/AndroidManifest.xml 中添加以下配置:
<meta-data
    android:name="com.google.android.gms.auth.api.signin.GoogleSignInOptions"
    android:value="@string/default_web_client_id" />

Facebook

  • Facebook for Developers 中创建一个应用。
  • 获取 Facebook App ID。
  • android/app/src/main/AndroidManifest.xml 中添加以下配置:
<meta-data
    android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id" />

Apple

  • Apple Developer 中创建一个 App ID。
  • 启用 Sign In with Apple。
  • ios/Runner/Info.plist 中添加以下配置:
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_BUNDLE_ID</string>
        </array>
    </dict>
</array>

3. 初始化插件

在你的 Flutter 应用中初始化 flutter_social_auth 插件:

import 'package:flutter_social_auth/flutter_social_auth.dart';

final socialAuth = FlutterSocialAuth();

4. 实现社交登录

使用 flutter_social_auth 提供的 API 来实现社交登录。以下是一些示例:

Google 登录

try {
  final user = await socialAuth.googleLogin();
  print('Google User: ${user.displayName}');
} catch (e) {
  print('Google Login Error: $e');
}

Facebook 登录

try {
  final user = await socialAuth.facebookLogin();
  print('Facebook User: ${user.displayName}');
} catch (e) {
  print('Facebook Login Error: $e');
}

Apple 登录

try {
  final user = await socialAuth.appleLogin();
  print('Apple User: ${user.displayName}');
} catch (e) {
  print('Apple Login Error: $e');
}

5. 处理登录结果

登录成功后,你可以获取用户的详细信息,如姓名、电子邮件、头像等,并根据需要进行处理。

6. 注销

你还可以使用 flutter_social_auth 提供的 API 来注销用户:

await socialAuth.logout();
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!