Flutter JWT会话管理插件flutter_session_jwt的使用
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
更多关于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。