Flutter身份验证插件clerk_auth的使用

Flutter身份验证插件clerk_auth的使用

Official Clerk Dart SDK (Pre-release Alpha)

Pub Version Pub Points Chat on Discord Documentation Twitter Follow

⚠️ The Clerk Flutter SDK is in Alpha and not recommended for use in production.

❗️ Breaking changes should be expected until the first stable release (1.0.0) ❗️

Clerk帮助开发者构建用户管理。我们提供了简化用户体验,让用户能够从您的Dart代码中进行注册、登录和管理个人资料。

Requirements

  • Dart >= 3.0.0

Example Usage

要使用此包,您需要前往Clerk Dashboard创建一个应用程序,并将公共API密钥和发布密钥复制到项目中。

完整示例demo

下面是一个完整的示例,展示了如何使用clerk_auth进行用户登录:

import 'package:clerk_auth/clerk_auth.dart';
import 'dart:io';

Future<void> main() async {
  // 初始化Api实例
  final api = Api(
    publishableKey: '<YOUR-PUBLISHABLE-KEY>',
    persistor: await DefaultPersistor.create(
      storageDirectory: Directory.current,
    ),
    httpService: const DefaultHttpService(),
  );

  // 创建登录请求
  final response = await api.createSignIn(identifier: '<USER-EMAIL>');
  if (response.client?.signIn?.status == Status.needsFirstFactor) {
    print('需要输入第一因素验证');

    // 尝试登录
    final signIn = response.client!.signIn!;
    final attemptResponse = await api.attemptSignIn(
      signIn,
      stage: Stage.first,
      strategy: Strategy.password,
      password: '<PASSWORD>',
    );

    final client = attemptResponse.client;
    if (client?.activeSession?.status == Status.active) {
      print('登录成功');
      print('用户标识符:${client?.activeSession?.publicUserData.identifier}');
    } else {
      print('登录失败');
    }
  } else {
    print('登录状态异常');
  }
}

在上面的代码中:

  • <YOUR-PUBLISHABLE-KEY> 需要替换为您的Clerk应用程序的发布密钥。
  • <USER-EMAIL><PASSWORD> 分别需要替换为用户的电子邮件和密码。

License

此SDK根据MIT许可证授权,详情请参见LICENSE文件。

通过上述内容,您可以了解到如何在Flutter项目中使用clerk_auth插件来进行用户的身份验证。希望这对您有所帮助!如果有任何问题,欢迎随时提问。


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用clerk_auth插件进行身份验证的代码案例。clerk_auth是一个用于Flutter的身份验证库,它简化了用户注册、登录和会话管理的流程。

首先,确保你已经在pubspec.yaml文件中添加了clerk_auth依赖:

dependencies:
  flutter:
    sdk: flutter
  clerk_auth: ^最新版本号  # 替换为实际的最新版本号

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

接下来,我们来看一个基本的代码案例,展示如何使用clerk_auth进行用户注册和登录。

1. 初始化Clerk客户端

在你的Flutter应用的入口文件(通常是main.dart)中,初始化Clerk客户端:

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

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

  // 初始化Clerk客户端
  await Clerk.configure(
    clientId: '你的客户端ID',  // 替换为你的Clerk客户端ID
    clientSecret: '你的客户端密钥',  // 替换为你的Clerk客户端密钥(如果有)
    redirectUri: '你的重定向URI',  // 替换为你的重定向URI
  );

  runApp(MyApp());
}

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

2. 创建AuthScreen进行用户注册和登录

接下来,我们创建一个AuthScreen,其中包含注册和登录的按钮:

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

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

class _AuthScreenState extends State<AuthScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clerk Auth Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 打开注册页面
                await Clerk.ui.signUp();
              },
              child: Text('Register'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 打开登录页面
                await Clerk.ui.signIn();
              },
              child: Text('Login'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                // 检查用户是否已登录
                final user = await Clerk.user.getUser();
                if (user != null) {
                  // 用户已登录,显示用户信息
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('User Logged In: ${user.id}'),
                    ),
                  );
                } else {
                  // 用户未登录
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('User Not Logged In'),
                    ),
                  );
                }
              },
              child: Text('Check Login Status'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 处理回调(可选)

如果你需要在用户完成注册或登录后执行一些操作,你可以在Clerk.ui.signUp()Clerk.ui.signIn()调用后添加回调。例如,使用then方法:

ElevatedButton(
  onPressed: () async {
    await Clerk.ui.signUp().then((result) {
      // 用户完成注册后的操作
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Registration Complete'),
        ),
      );
    });
  },
  child: Text('Register'),
),

同样地,可以为登录按钮添加回调。

4. 退出登录

要退出登录,可以使用Clerk.session.signOut()方法:

ElevatedButton(
  onPressed: () async {
    await Clerk.session.signOut();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('User Logged Out'),
      ),
    );
  },
  child: Text('Logout'),
),

总结

以上代码展示了如何在Flutter项目中使用clerk_auth插件进行基本的用户身份验证。这包括注册、登录、检查登录状态以及退出登录。你可以根据需求进一步自定义和扩展这些功能。

回到顶部