Flutter身份认证与用户管理插件gigya_flutter_plugin的使用

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

Flutter身份认证与用户管理插件gigya_flutter_plugin的使用

描述

gigya_flutter_plugin 是一个Flutter插件，用于将Gigya的原生SDK集成到Flutter应用中。该插件提供了与Gigya API交互的接口，支持多种身份认证和用户管理功能。

要求

  • Android SDK：需要SDK 14及以上版本。
  • iOS：需要iOS 13及以上版本。

下载和安装

在您的 pubspec.yaml 文件中添加 gigya_flutter_plugin 插件：

dependencies:
  gigya_flutter_plugin: ^最新版本号

然后运行 flutter pub get 来安装插件。

设置与Gigya核心集成

Android设置

  1. 配置基本元素：请参考Gigya Android SDK的核心配置文档。

  2. 自定义scheme（可选）： 在 MyApplication 类中初始化Gigya插件：

    class MyApplication : FlutterApplication() {

    override fun onCreate() {
        super.onCreate()
        GigyaFlutterPlugin.init(this, GigyaAccount::class.java)
    }
}
iOS设置

  1. 编辑 AppDelegate.swift： 导航到 <your project root>/ios/Runner/AppDelegate.swift 并添加以下代码：

    import gigya_flutter_plugin
import Gigya

[@UIApplicationMain](/user/UIApplicationMain)
[@objc](/user/objc) class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {

    GeneratedPluginRegistrant.register(with: self)
    SwiftGigyaFlutterPlugin.register(accountSchema: UserHost.self)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

    重要提示：确保您已经根据文档配置了 info.plist 文件。

发送简单请求

使用 send 方法发送请求：

GigyaSdk.instance.send('REQUEST-ENDPOINT', {PARAMETER-MAP}).then((result) {
      debugPrint(json.encode(result));
    }).catchError((error) {
      debugPrint(error.errorDetails);
    });

示例实现可以在GitHub代码仓库中的 send_request.dart 文件中找到。

业务API

插件提供了对以下核心SDK业务API的接口：

  • login
  • register
  • getAccount
  • isLoggedIn
  • logOut
  • addConnection
  • removeConnection

这些API的实现方式与“发送简单请求”部分相同。

社交登录

使用 socialLogin 接口进行社交登录，支持的提供商包括：

  • Google
  • Facebook
  • Line
  • WeChat
  • Apple
  • Amazon
  • LinkedIn
  • Yahoo
  • Kakao
嵌入式社交提供商

某些社交提供商（如Facebook和Google）需要额外的设置，因为它们依赖于特定的嵌入式SDK。

Facebook

  • Android：请参考Gigya Android SDK的Facebook配置文档。

  • iOS：在 AppDelegate.swift 中添加以下代码：

    Gigya.sharedInstance(UserHost.self).registerSocialProvider(of: .facebook, wrapper: FacebookWrapper())
Google

  • Android：请参考Gigya Android SDK的Google配置文档。

  • iOS：在 AppDelegate.swift 中添加以下代码：

    Gigya.sharedInstance(UserHost.self).registerSocialProvider(of: .google, wrapper: GoogleWrapper())

使用屏幕集

使用Web屏幕集：

GigyaSdk.instance.showScreenSet("Default-RegistrationLogin", (event, map) {
          debugPrint('Screen set event received: $event');
          debugPrint('Screen set event data received: $map');
});

您可以选择性地传递参数：

GigyaSdk.instance.showScreenSet("Default-RegistrationLogin", (event, map) {
          debugPrint('Screen set event received: $event');
          debugPrint('Screen set event data received: $map');
}, parameters: {'param1': 'value1'});

生物识别支持

插件支持Android和iOS的生物识别功能。

iOS
  • 设备必须有密码。
  • 设备必须支持TouchID或FaceID。
  • 如果使用FaceID，请在 info.plist 文件中添加 NSFaceIDUsageDescription 键。
  • 如果需要自定义Touch ID提示文本，可以添加 GigyaTouchIDMessage 键。
Android
  • 设备必须有指纹传感器。
  • 设备上至少注册了一个指纹。
  • 应用程序必须请求适当的权限：android.permission.USE_FINGERPRINT 和 android.permission.USE_BIOMETRIC。

声明提示显示：

await widget.sdk.biometricService.optIn(
  parameters: <String, String>{
    'title': 'SampleTitle',
    'subtitle': 'SampleSubtitle',
    'description': 'SampleDescription',
  },
);

移动SSO

插件支持原生SDK的“单点登录”功能。请参考各平台的文档并按照说明进行设置。

发起SSO请求：

GigyaSdk.instance.sso().then((result) {
 // 处理结果。
 setState(() { });
}).catchError((error) {
// 处理错误。
});

移动与WebView之间的会话交换

允许移动应用与WebView之间共享会话：

  1. 使用 getAuthCode 接口获取授权码：

    final String? result = await widget.sdk.getAuthCode();

  2. 将授权码作为URL参数添加到网页URL中：

    https://page-url?authCode=code&gig_actions=sso.login

  3. 确保WebView启用了JavaScript。

  4. 页面加载后，JS SDK将交换提供的令牌以获取有效会话。

FIDO/WebAuthn认证

FIDO是一种无密码认证方法，允许通过FIDO/Passkeys进行注册、登录和撤销操作。

登录使用FIDO/WebAuthn passkey
_loginWithPasskey() async {
    try {
      GigyaSdk.instance.webAuthn.webAuthnLogin().then((result) {
        setState(() {});
      });
    } catch (error) {
      if (error is GigyaResponse) {
        showAlert("FidoError", error.errorDetails);
      }
    }
  }
注册新的FIDO/WebAuthn passkey
_registerPasskey() async {
    try {
      var result = await GigyaSdk.instance.webAuthn.webAuthnRegister();
      debugPrint(jsonEncode(result));
      showAlert("FIDO success", "passkey registered");
    } catch (error) {
      if (error is GigyaResponse) {
        showAlert("FIDO error", error.errorDetails);
      }
    }
  }
撤销现有的FIDO/WebAuthn passkey
_revokePasskey() async {
    try {
      var result = await GigyaSdk.instance.webAuthn.webAuthnRevoke();
      debugPrint(jsonEncode(result));
      showAlert("FIDO success", "passkey revoked");
    } catch (error) {
      if (error is GigyaResponse) {
        showAlert("FIDO", error.errorDetails);
      }
    }
  }

使用电话号码（OTP）登录

用户可以通过有效的电话号码进行身份验证。

使用示例

  1. 开始电话验证流程：

    GigyaSdk.instance.otp.login(phone).then((resolver) {
      // 验证码已发送。使用resolver对象进行验证码验证。
    }).catchError((error) {
      // 处理错误。
    });

  2. 使用 resolver 对象验证SMS验证码：

    resolver.verify(code).then((res) {
    // 解析账户信息。
    final Account account = Account.fromJson(res);
  }).catchError((error) {
    // 处理错误。
  });

解决中断

插件支持解决中断，例如：

  • pendingRegistration 使用 PendingRegistrationResolver 类。
  • pendingVerification 使用 PendingVerificationResolver 类。
  • conflictingAccounts 使用 LinkAccountResolver 类。
示例：解决 conflictingAccounts 中断
GigyaSdk.instance.login(loginId, password).then((result) {
      debugPrint(json.encode(result));
      final response = Account.fromJson(result);
      // 成功登录
    }).catchError((error) {
      // 可能发生了中断。
      if (error.getInterruption() == Interruption.conflictingAccounts) {
        // 引用正确的解析器
        LinkAccountResolver resolver = GigyaSdk.instance.resolverFactory.getResolver(error);
      } else {
        setState(() {
          _inProgress = false;
          _requestResult = 'Register error\n\n${error.errorDetails}';
        });
      }
    });

一旦引用了中断代码中的解析器对象，创建应用程序UI以确定是否需要链接站点或社交账户，并使用所需的 resolve 方法。

示例：链接新社交账户到站点账户
final String password = _linkPasswordController.text.trim();
resolver.linkToSite(loginId, password).then((res) {
     final Account account = Account.fromJson(res);
     // 账户成功链接。
});

完整示例Demo

以下是一个完整的示例应用程序，展示了如何使用 gigya_flutter_plugin 进行初始化和导航到不同的页面：

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

import 'routes/account_information_page.dart';
import 'routes/biometrics_page.dart';
import 'routes/forgot_password_page.dart';
import 'routes/home_page.dart';
import 'routes/login_with_credentials_page.dart';
import 'routes/manage_connections_page.dart';
import 'routes/one_time_password_login_page.dart';
import 'routes/register_with_email_page.dart';
import 'routes/send_request_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const GigyaSdk sdk = GigyaSdk();

  // 显示初始化前的配置
  const String exampleAppApiKey = '4_mL-YkAEegR9vzt6QvHWI5Q';
  const String exampleAppApiDomain = 'us1.gigya.com';
  const String exampleCname = 'YOUR-CNAME-HERE';

  try {
    await sdk.initSdk(
      apiDomain: exampleAppApiDomain,
      apiKey: exampleAppApiKey,
    );

    print('Gigya SDK initialized.');
  } catch (error, stackTrace) {
    print('Failed to initialize the Gigya SDK.');
    print(error);
    print(stackTrace);
  }

  runApp(const MyApp(sdk));
}

/// 示例应用程序
class MyApp extends StatefulWidget {
  /// 默认构造函数
  const MyApp(this.sdk, {super.key});

  /// 已初始化的Gigya SDK
  final GigyaSdk sdk;

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (_) => HomePage(sdk: widget.sdk),
        '/send_request': (_) => SendRequestPage(sdk: widget.sdk),
        '/login_credentials': (_) => LoginWithCredentialsPage(sdk: widget.sdk),
        '/register_email': (_) => RegisterWithEmailPage(sdk: widget.sdk),
        '/account_information': (_) => AccountInformationPage(sdk: widget.sdk),
        '/manage_connections': (_) => ManageConnectionsPage(sdk: widget.sdk),
        '/forgot_password': (_) => ForgotPasswordPage(sdk: widget.sdk),
        '/otp_phone_login': (_) => OneTimePasswordLoginPage(sdk: widget.sdk),
        '/biometrics': (_) => BiometricsPage(sdk: widget.sdk),
      },
    );
  }
}

更多关于Flutter身份认证与用户管理插件gigya_flutter_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter身份认证与用户管理插件gigya_flutter_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用gigya_flutter_plugin进行身份认证与用户管理的代码案例。请注意，此代码假设您已经按照gigya_flutter_plugin的官方文档完成了必要的配置，如API密钥的获取和SDK的初始化。

1. 添加依赖

首先，在您的pubspec.yaml文件中添加gigya_flutter_plugin依赖：

dependencies:
  flutter:
    sdk: flutter
  gigya_flutter_plugin: ^最新版本号 # 请替换为实际可用的最新版本号

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

2. 初始化Gigya SDK

在您的Flutter应用的主入口（通常是main.dart）中初始化Gigya SDK：

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

void main() {
  // 初始化Gigya SDK
  GigyaFlutterPlugin.init(
    apiKey: 'YOUR_API_KEY',
    secret: 'YOUR_SECRET',
    dataCenter: 'YOUR_DATA_CENTER',
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Gigya Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 登录用户

创建一个登录页面，使用Gigya SDK进行用户认证：

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

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  var loginResult = await GigyaFlutterPlugin.accountLogin(
                    loginID: _emailController.text,
                    password: _passwordController.text,
                    params: {
                      // 可以添加其他参数，如profile fields等
                    },
                  );
                  print('Login Result: $loginResult');
                  // 处理登录结果，如导航到主页
                } catch (e) {
                  print('Login Error: $e');
                }
              },
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}

4. 用户注册

类似地，您可以创建一个注册页面：

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _firstNameController = TextEditingController();
  final _lastNameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Register'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _firstNameController,
              decoration: InputDecoration(labelText: 'First Name'),
            ),
            TextField(
              controller: _lastNameController,
              decoration: InputDecoration(labelText: 'Last Name'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                try {
                  var registerResult = await GigyaFlutterPlugin.registerAccount(
                    loginID: _emailController.text,
                    password: _passwordController.text,
                    firstName: _firstNameController.text,
                    lastName: _lastNameController.text,
                    params: {
                      // 可以添加其他参数，如profile fields等
                    },
                  );
                  print('Register Result: $registerResult');
                  // 处理注册结果，如导航到登录页或主页
                } catch (e) {
                  print('Register Error: $e');
                }
              },
              child: Text('Register'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    _firstNameController.dispose();
    _lastNameController.dispose();
    super.dispose();
  }
}

5. 用户注销

在用户的主页或其他合适的位置添加注销功能：

ElevatedButton(
  onPressed: () async {
    try {
      var logoutResult = await GigyaFlutterPlugin.logout();
      print('Logout Result: $logoutResult');
      // 处理注销结果，如导航到登录页
    } catch (e) {
      print('Logout Error: $e');
    }
  },
  child: Text('Logout'),
)

总结

以上代码展示了如何在Flutter项目中使用gigya_flutter_plugin进行基本的用户认证和用户管理操作。请根据您的实际需求调整代码，如添加更多的错误处理、UI优化等。同时，确保遵循Gigya的官方文档和最佳实践，以确保安全性和功能的完整性。

回到顶部