Flutter认证管理插件fusion_auth的使用

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

Flutter认证管理插件fusion_auth的使用

目录

插件名称

Fusion_auth是基于阿里云号码认证服务中融合认证SDK的Flutter插件。请注意如遇问题请先下载源码跑DEMO,如果还是有问题,请提issues。

插件版本

platform support version
Android YES V1.0.8
Ios YES V1.0.8

效果图

IOS

全屏 底部弹窗 中间弹窗
全屏 底部弹窗 中间弹窗

Android

全屏 底部弹窗 中间弹窗
全屏 底部弹窗 中间弹窗

集成步骤

  1. 集成阿里云SDK到客户端中,初始化并调用阿里云SDK。
  2. 对接阿里云API接口 -> 融合认证获取鉴权Token,下发至客户端后传入SDK进行鉴权。
  3. 唤起场景授权页面,部分场景需要用户授权(同意隐私协议、获取短信验证码等)。
  4. 用户授权后,从SDK回调接口获取到换号Token后, 上传到开发者的服务器。
  5. 对接阿里云的服务端API接口 -> 融合认证获取认证结果,将Token转换为用户的手机号。

最佳实践

准备工作

  1. 请登录阿里云控制台 -> 号码认证服务->融合认证。
  2. 开通融合认证服务。
  3. 创建认证方案 分别添IOS和Android的认证方案,分别获取到方案Code。
    • IOS只需要输入绑定Bundle name即可,
    • Android则需要包名和和签名。
  4. 添加短信模版、签名 (注意如果认证策略没有添加短信可以不添加)

插件使用

1. 添加监听

在初始化时添加监听以免接受不到某些回调数据。

_fusionAuthPlugin = FusionAuth(onEvent: (ResponseModel onEvent) async {
  if (kDebugMode) {
    print(">>>>>> $onEvent <<<<<<");
  }
  setState(() {
    // 唤起授权页面后需要处理点击穿透的问题
    isCurrentLogin = onEvent.errorCode == "400003";
    _platformVersion = onEvent.toJson().toString();
  });
});

2. 初始化SDK配置密钥与UI


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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用fusion_auth插件进行认证管理的示例代码。fusion_auth是一个假设的插件名称,用于演示目的,因为实际上可能没有直接名为fusion_auth的官方Flutter插件。不过,我会基于通常的认证管理插件的用法来构建一个示例。

假设fusion_auth插件提供了基本的用户注册、登录和获取用户信息的功能,以下是如何在Flutter中使用它的示例:

1. 添加依赖

首先,在你的pubspec.yaml文件中添加fusion_auth依赖(请注意,这里fusion_auth是假设的,你需要替换为实际存在的认证管理插件):

dependencies:
  flutter:
    sdk: flutter
  fusion_auth: ^x.y.z  # 替换为实际的版本号

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

2. 导入插件

在你的Dart文件中导入fusion_auth插件:

import 'package:fusion_auth/fusion_auth.dart';

3. 初始化FusionAuth

通常,认证插件需要在应用启动时进行初始化。你可以在main.dart文件中进行初始化:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 假设有一个初始化函数
  await FusionAuth.initialize(
    clientId: 'your-client-id',
    clientSecret: 'your-client-secret',
    baseURL: 'https://your-auth-server.com/api',
  );

  runApp(MyApp());
}

4. 用户注册

创建一个注册页面,允许用户输入注册信息并提交:

class RegisterScreen extends StatefulWidget {
  @override
  _RegisterScreenState createState() => _RegisterScreenState();
}

class _RegisterScreenState extends State<RegisterScreen> {
  final _formKey = GlobalKey<FormState>();
  String email = '';
  String password = '';

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      try {
        await FusionAuth.register(email: email, password: password);
        // 注册成功后跳转到登录页面或显示成功信息
        Navigator.pushReplacementNamed(context, '/login');
      } catch (e) {
        // 处理注册错误
        print('Registration error: $e');
      }
    }
  }

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

5. 用户登录

创建一个登录页面,允许用户输入登录信息并提交:

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String email = '';
  String password = '';

  void _submit() async {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();

      try {
        await FusionAuth.login(email: email, password: password);
        // 登录成功后获取用户信息或跳转到主页
        User? user = await FusionAuth.getCurrentUser();
        print('User logged in: ${user?.email}');
        Navigator.pushReplacementNamed(context, '/');
      } catch (e) {
        // 处理登录错误
        print('Login error: $e');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.isEmpty || !value.contains('@')) {
                    return 'Please enter a valid email address.';
                  }
                  return null;
                },
                onSaved: (value) {
                  email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password.';
                  }
                  return null;
                },
                onSaved: (value) {
                  password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. 获取当前用户信息

在应用的其他部分,你可以随时获取当前登录用户的信息:

void _showUserInfo() async {
  User? user = await FusionAuth.getCurrentUser();
  if (user != null) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Logged in as: ${user.email}')),
    );
  } else {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Not logged in')),
    );
  }
}

7. 路由配置

确保你的应用配置了路由,以便在注册和登录之间导航:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FusionAuth.initialize(/* 初始化参数 */);

  runApp(MaterialApp(
    home: LoginScreen(),
    routes: {
      '/register': (context) => RegisterScreen(),
      '/login': (context) => LoginScreen(),
      // 其他路由...
    },
  ));
}

请注意,上述代码是基于假设的fusion_auth插件的功能编写的。实际使用时,你需要查阅具体认证插件的文档来了解其API和使用方法。如果fusion_auth不存在,你可以考虑使用如firebase_authamplify_auth_cognito等流行的Flutter认证插件。

回到顶部