Flutter JWT会话管理插件flutter_session_jwt的使用

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

Flutter JWT会话管理插件flutter_session_jwt的使用

flutter_session_jwt

flutter_session_jwt 插件允许您将JWT(JSON Web Token)存储在安全存储中,并且可以解码JWT。由于payload是base64编码的,您可以轻松地查看存储的数据而无需密码。该包还提供了其他方法来获取过期日期、签发日期以及检查令牌是否已过期。

注意:在访问其他方法之前,请确保先保存令牌。

开始使用

在您的Flutter项目的 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter_session_jwt: ^latest_version # 请替换为实际的最新版本号

使用示例

导入包

首先,导入 flutter_session_jwt 包:

import 'package:flutter_session_jwt/flutter_session_jwt.dart';

示例:登录后保存JWT令牌

下面是一个示例,演示了如何在登录成功后保存JWT令牌:

Future<http.Response> login(String userName, String password) async {
  var response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'), // 这里应该是真实的登录API地址
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'userName': userName,
      'password': password
    }),
  );

  if (response.statusCode == 200) {
    Map<String, dynamic> jsonResponse = jsonDecode(response.body);
    String token = jsonResponse['token']; // 假设返回的JSON中有'token'字段
    await FlutterSessionJwt.saveToken(token);
  }
  return response;
}

获取和操作JWT令牌

一旦令牌被保存,您可以使用以下方法对其进行操作:

获取JWT Payload

// 返回Payload对象/Map
Map<String, dynamic>? payload = await FlutterSessionJwt.getPayload();
print('Payload: $payload');

获取保存的令牌

// 返回保存的令牌,用于后续API调用
String? savedToken = await FlutterSessionJwt.retrieveToken();
print('Saved Token: $savedToken');

获取过期日期和时间

// 确保Payload中有`exp`键
DateTime? expirationDateTime = await FlutterSessionJwt.getExpirationDateTime();
print('Expiration DateTime: $expirationDateTime');

获取签发日期和时间

// 确保Payload中有`iat`键
DateTime? issuedDateTime = await FlutterSessionJwt.getIssuedDateTime();
print('Issued DateTime: $issuedDateTime');

检查令牌是否已过期

// 返回布尔值,true表示已过期,false表示未过期
bool isExpired = await FlutterSessionJwt.isTokenExpired();
print('Is Token Expired: $isExpired');

获取从签发时间到当前时间的时间差

// 返回时间差
Duration? durationFromIssuedTime = await FlutterSessionJwt.getDurationFromIssuedTime();
print('Duration From Issued Time: $durationFromIssuedTime');

完整示例代码

下面是一个完整的示例代码,展示了如何在一个简单的Flutter应用中使用 flutter_session_jwt 插件:

import 'package:flutter/material.dart';
import 'package:flutter_session_jwt/flutter_session_jwt.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Session JWT Example')),
        body: Center(child: LoginButton()),
      ),
    );
  }
}

class LoginButton extends StatefulWidget {
  @override
  _LoginButtonState createState() => _LoginButtonState();
}

class _LoginButtonState extends State<LoginButton> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  Future<void> _login() async {
    String username = _usernameController.text;
    String password = _passwordController.text;

    var response = await http.post(
      Uri.parse('https://jsonplaceholder.typicode.com/albums'), // 替换为实际的登录API地址
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'userName': username,
        'password': password
      }),
    );

    if (response.statusCode == 200) {
      Map<String, dynamic> jsonResponse = jsonDecode(response.body);
      String token = jsonResponse['token']; // 假设返回的JSON中有'token'字段
      await FlutterSessionJwt.saveToken(token);

      // 显示成功消息或导航到其他页面
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('登录成功')));
    } else {
      // 显示错误消息
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('登录失败')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          controller: _usernameController,
          decoration: InputDecoration(labelText: '用户名'),
        ),
        TextField(
          controller: _passwordController,
          obscureText: true,
          decoration: InputDecoration(labelText: '密码'),
        ),
        ElevatedButton(
          onPressed: _login,
          child: Text('登录'),
        ),
      ],
    );
  }
}

此示例创建了一个简单的登录界面,用户输入用户名和密码后点击“登录”按钮,程序会发送POST请求到服务器并尝试获取JWT令牌。如果登录成功,令牌将被保存到 flutter_session_jwt 中,并显示一个成功的Snackbar消息;如果登录失败,则显示错误消息。

许可证

flutter_session_jwt 插件遵循MIT许可证。

希望这些信息对您有所帮助!如果您有任何问题或需要进一步的帮助,请随时提问。


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

1 回复

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


当然,flutter_session_jwt 是一个用于在 Flutter 应用中实现基于 JWT(JSON Web Token)的会话管理的插件。以下是一个基本的使用示例,展示如何集成和使用 flutter_session_jwt 进行会话管理。

1. 添加依赖

首先,在你的 pubspec.yaml 文件中添加 flutter_session_jwt 依赖:

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

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

2. 配置插件

在你的 Flutter 应用的入口文件(通常是 main.dart)中,配置 flutter_session_jwt。这通常涉及初始化 JWT 管理器。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 配置 JWT 管理器
  final jwtManager = JWTManager(
    secretKey: 'your_secret_key', // 请使用你的实际密钥
    issuer: 'your_issuer',        // 发行者
    audience: 'your_audience',    // 受众
    algorithm: 'HS256',           // 算法
  );

  // 将 JWT 管理器设置为全局可用
  JWTManager.instance = jwtManager;

  runApp(MyApp());
}

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

3. 登录并生成 JWT

在你的登录逻辑中,使用 JWT 管理器生成并存储 JWT。这通常涉及从服务器获取 JWT。

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

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

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

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

      // 模拟从服务器获取 JWT
      String mockJwt = 'your_jwt_token_here'; // 请替换为实际从服务器获取的 JWT

      // 存储 JWT
      await JWTManager.instance!.storeJWT(mockJwt);

      // 导航到主页
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    }
  }

  @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(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Username'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your username';
                  }
                  return null;
                },
                onSaved: (value) {
                  _username = 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'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 验证和获取 JWT 信息

在你的主页或其他需要验证 JWT 的地方,你可以使用 JWT 管理器来验证 JWT 并获取其中的信息。

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: JWTManager.instance!.verifyAndDecodeJWT(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else if (snapshot.hasData) {
              final decodedJWT = snapshot.data!;
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('User ID: ${decodedJWT['user_id']}'),
                  Text('Username: ${decodedJWT['username']}'),
                  // 显示其他解码后的 JWT 信息
                ],
              );
            } else {
              return Text('No JWT found or JWT is invalid');
            }
          },
        ),
      ),
    );
  }
}

总结

以上代码展示了如何在 Flutter 应用中使用 flutter_session_jwt 插件进行 JWT 会话管理。包括配置 JWT 管理器、登录并存储 JWT、以及在需要的地方验证和获取 JWT 信息。请确保在实际项目中根据需求调整密钥、发行者、受众等配置,并从服务器安全地获取和处理 JWT。

回到顶部