Flutter云身份认证插件sign_with_unicloud_id的使用

Flutter云身份认证插件sign_with_unicloud_id的使用

TODO: 简短说明如何在原生环境中配置以使用此插件。

使用方法

- Android SDK 20+

- iOS 9+

更多详情请查看示例代码:example/lib/main.dart

完整示例代码

import 'package:flutter/material.dart';
import 'package:sign_with_unicloud_id/sign_with_unicloud_id.dart'; // 导入插件

void main() => runApp(const MyApp()); // 主函数

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key); // 构造函数
  [@override](/user/override)
  _MyAppState createState() => _MyAppState(); // 创建状态类
}

class _MyAppState extends State<MyApp> { // 状态类
  late final SignWithUnicloudId signWithUnicloudId; // 初始化插件实例

  [@override](/user/override)
  void initState() { // 初始化生命周期方法
    signWithUnicloudId = SignWithUnicloudId( // 初始化插件对象
        clientHost: "unicloudca.unicloud.ai", // 设置客户端主机名
        clientId: "unicloud-ca", // 设置客户端ID
        onWebResourceError: (e) { // 设置错误回调
          print(e); // 打印错误信息
        });
    super.initState(); // 调用父类初始化方法
  }

  Future<void> _signInWith() async { // 登录方法
    try {
      var ret = await signWithUnicloudId.authorize(context); // 调用授权方法
      print(ret); // 打印授权结果
    } catch (e) {
      print(e); // 打印异常信息
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) { // 构建UI
    return MaterialApp( // 应用程序入口
      home: Scaffold( // 页面主体
        appBar: AppBar( // 应用栏
          title: const Text('插件示例应用'), // 应用栏标题
        ),
        body: Center( // 中心布局
          child: SizedBox( // 尺寸限定
            height: 60, // 高度
            width: 120, // 宽度
            child: ElevatedButton( // 按钮组件
              child: const Text('使用Unicloud ID登录'), // 按钮文本
              onPressed: () => _signInWith(), // 按钮点击事件
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter云身份认证插件sign_with_unicloud_id的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,我可以为你提供一个关于如何使用 sign_with_unicloud_id 插件进行云身份认证的 Flutter 代码案例。假设你已经设置好 UniCloud 环境,并且已经在你的 Flutter 项目中添加了 sign_with_unicloud_id 依赖。

首先,确保你的 pubspec.yaml 文件中包含以下依赖:

dependencies:
  flutter:
    sdk: flutter
  sign_with_unicloud_id: ^最新版本号  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

以下是一个简单的 Flutter 应用示例,展示了如何使用 sign_with_unicloud_id 插件进行用户注册和登录:

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

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

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

class AuthScreen extends StatefulWidget {
  @override
  _AuthScreenState createState() => _AuthScreenState();
}

class _AuthScreenState extends State<AuthScreen> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';
  bool _isLoading = false;

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      setState(() {
        _isLoading = true;
      });

      try {
        // 假设你有一个方法来判断是注册还是登录
        bool isRegister = true; // 你可以根据UI上的按钮或用户选择来设置这个值

        if (isRegister) {
          // 注册用户
          await UniCloudID.register(
            email: _email,
            password: _password,
          );
          print('User registered successfully');
        } else {
          // 登录用户
          await UniCloudID.login(
            email: _email,
            password: _password,
          );
          print('User logged in successfully');
        }

        // 登录成功后,可以获取当前用户信息
        User? user = await UniCloudID.currentUser();
        print('Current user: ${user?.email}');

        // 跳转到下一个屏幕或显示成功信息
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomeScreen()),
        );
      } catch (e) {
        print('Error: $e');
        // 显示错误信息
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('Error: ${e.message ?? e.toString()}'),
          ),
        );
      } finally {
        setState(() {
          _isLoading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auth Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
                onChanged: (value) {
                  setState(() {
                    _email = value;
                  });
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                validator: (value) {
                  if (value == null || value.isEmpty || value.length < 6) {
                    return 'Password must be at least 6 characters long';
                  }
                  return null;
                },
                obscureText: true,
                onChanged: (value) {
                  setState(() {
                    _password = value;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _isLoading ? null : _submit,
                child: Text(_isLoading ? 'Loading...' : 'Register/Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the home screen!'),
      ),
    );
  }
}

这个示例展示了如何使用 sign_with_unicloud_id 插件进行用户注册和登录。请注意,这只是一个简单的示例,实际应用中你可能需要更复杂的UI和错误处理逻辑。

注意

  1. 确保你的 UniCloud 项目已经正确配置,包括数据库和云函数。
  2. 插件的具体方法名称和参数可能会随着版本的更新而变化,请参考插件的官方文档以获取最新信息。
  3. 在生产环境中,务必对敏感信息进行加密和保护,并确保遵循最佳安全实践。
回到顶部