Flutter身份验证与会话管理插件supertokens_flutter的使用

当然，下面是一个关于如何在Flutter应用中使用supertokens_flutter插件进行身份验证与会话管理的代码示例。这个示例将展示如何初始化Supertokens、进行用户登录和注销以及检查用户会话状态。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  supertokens_flutter: ^x.y.z  # 替换为最新版本号

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

2. 配置Supertokens

在你的Flutter应用的入口文件（通常是main.dart）中，配置Supertokens：

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

void main() {
  // 配置Supertokens
  Supertokens.init({
    apiKey: "YOUR_API_KEY", // 替换为你的Supertokens API Key
    websiteDomain: "YOUR_WEBSITE_DOMAIN", // 替换为你的网站域名
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 用户登录

创建一个登录屏幕，让用户可以输入凭据并提交进行登录：

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

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 Supertokens.signIn({
          email: _email,
          password: _password,
        });

        // 登录成功，跳转到主页
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomeScreen()),
        );
      } catch (e) {
        // 处理登录错误
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('登录失败: ${e.message}')),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('登录'),
      ),
      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) {
                    return '请输入Email';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: '密码'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入密码';
                  }
                  return null;
                },
                obscureText: true,
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submit,
                child: Text('登录'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 检查用户会话状态

在主页中，你可以检查用户会话状态，并显示相应的内容：

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool? _isUserLoggedIn;

  @override
  void initState() {
    super.initState();

    // 检查用户会话状态
    Supertokens.getCurrentUser().then((user) {
      setState(() {
        _isUserLoggedIn = user != null;
      });
    });
  }

  void _logout() async {
    await Supertokens.signOut();
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => LoginScreen()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: _isUserLoggedIn == null
            ? CircularProgressIndicator()
            : _isUserLoggedIn!
                ? Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('欢迎回来！'),
                      SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: _logout,
                        child: Text('注销'),
                      ),
                    ],
                  )
                : Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('你未登录'),
                      SizedBox(height: 20),
                      ElevatedButton(
                        onPressed: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => LoginScreen()),
                          );
                        },
                        child: Text('登录'),
                      ),
                    ],
                  ),
      ),
    );
  }
}

总结

这个示例展示了如何在Flutter应用中使用supertokens_flutter插件进行基本的身份验证和会话管理。你可以根据需求进一步扩展和定制这些功能。