Flutter JWT认证插件jaguar_jwt的使用

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

Flutter JWT认证插件jaguar_jwt的使用

简介

jaguar_jwt 是一个用于 Dart 和 Jaguar.dart 的JWT工具库,可以用来生成和处理 JSON Web Tokens (JWT)。更多关于 JSON Web Tokens 的信息,请参见 RFC 7519

目前,jaguar_jwt 只支持使用 HMAC SHA-256 算法来生成/处理 JSON Web Signature (JWS)。

使用方法

发行 JWT

下面是一个简单的例子,演示了如何创建一个 JWT:

import 'package:jaguar_jwt/jaguar_jwt.dart';

void main() {
  final key = 's3cr3t';
  final claimSet = JwtClaim(
      subject: 'kleak',
      issuer: 'teja',
      audience: ['audience1.example.com', 'audience2.example.com'],
      otherClaims: {
        'typ': 'authnresponse',
        'pld': {'k': 'v'}
      },
      maxAge: const Duration(minutes: 5));

  String token = issueJwtHS256(claimSet, key);
  print(token);
}

处理 JWT

处理 JWT 主要分为三步:

  1. 验证签名并提取声明集。
  2. 验证声明集。
  3. 从声明集中提取声明。

以下是一个完整的示例,展示了如何验证和解析 JWT:

import 'package:jaguar_jwt/jaguar_jwt.dart';

void main() {
  final jwt = senderCreatesJwt();
  receiverProcessesJwt(jwt);
}

String senderCreatesJwt() {
  // 创建声明集
  final claimSet = JwtClaim(
    issuer: 'teja',
    subject: 'kleak',
    audience: ['client1.example.com', 'client2.example.com'],
    jwtId: _randomString(32),
    otherClaims: {
      'typ': 'authnresponse',
      'pld': {'k': 'v'}
    },
    maxAge: const Duration(minutes: 5),
  );

  // 根据声明集生成 JWT
  final token = issueJwtHS256(claimSet, sharedSecret);

  print('JWT: "$token"\n');

  return token;
}

void receiverProcessesJwt(String token) {
  try {
    // 验证 JWT 中的签名并提取其声明集
    final decClaimSet = verifyJwtHS256Signature(token, sharedSecret);
    print('JwtClaim: $decClaimSet\n');

    // 验证声明集
    decClaimSet.validate(issuer: 'teja', audience: 'client2.example.com');

    // 使用声明集中的值
    if (decClaimSet.jwtId != null) {
      print('JWT ID: "${decClaimSet.jwtId}"');
    }
    if (decClaimSet.subject != null) {
      print('Subject: "${decClaimSet.subject}"');
    }
    if (decClaimSet.issuedAt != null) {
      print('Issued At: ${decClaimSet.issuedAt}');
    }
    if (decClaimSet.containsKey('typ')) {
      final dynamic v = decClaimSet['typ'];
      if (v is String) {
        print('typ: "$v"');
      } else {
        print('Error: unexpected type for "typ" claim');
      }
    }
  } on JwtException catch (e) {
    print('Error: bad JWT: $e');
  }
}

const String sharedSecret = 's3cr3t';

String _randomString(int length) {
  const chars =
      '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  final rnd = Random(DateTime.now().millisecondsSinceEpoch);
  final buf = StringBuffer();

  for (var x = 0; x < length; x++) {
    buf.write(chars[rnd.nextInt(chars.length)]);
  }
  return buf.toString();
}

配置

JwtClaimSet

JwtClaimSet 是持有 JWT 声明集信息的模型。以下是注册声明的列表:

  1. issuer: 发行令牌的权威机构。这将在授权时用于验证预期的发行者是否已发行该令牌。填充 JWT 的 iss 字段。
  2. subject: 令牌的主题。通常存储的是用户 ID。填充 JWT 的 sub 字段。
  3. audience: 接受此令牌的受众列表。这将在授权时用于验证 JWT 是否有服务预期的受众。填充 JWT 的 aud 字段。
  4. expiry: 令牌不再被接受的时间。填充 JWT 的 exp 字段。
  5. notBefore: 令牌可接受处理的时间。填充 JWT 的 nbf 字段。
  6. issuedAt: 令牌发出的时间。填充 JWT 的 iat 字段。
  7. jwtId: 跨服务唯一标识符,识别令牌。填充 JWT 的 jti 字段。

此外,您也可以在 JWT 中包含其他声明。

通过以上内容,您可以轻松地在 Flutter 或 Dart 项目中集成 jaguar_jwt 插件以实现 JWT 的生成与验证功能。


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

1 回复

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


在Flutter应用中,虽然通常不会直接在客户端处理JWT(JSON Web Tokens),因为JWT认证通常是在服务器端进行的,但了解如何在Flutter应用中与JWT交互是很重要的。特别是如果你需要与后端服务进行通信,这些服务使用JWT进行身份验证。

jaguar_jwt 是一个流行的 Dart 包,用于生成和验证 JWT,但它主要用于服务器端。在Flutter客户端,你通常会使用HTTP客户端库(如 http 包)来发送请求,并在必要时处理JWT。

不过,为了展示如何在Flutter应用中与JWT相关的后端服务交互,这里我们将创建一个简单的示例,演示如何使用 http 包发送带有JWT的请求。假设你有一个后端服务,它接受JWT作为Authorization头部的一部分。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3  # 确保使用最新版本

2. Flutter客户端代码

下面是一个Flutter客户端的示例代码,它发送一个带有JWT的GET请求到后端服务:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter JWT Authentication Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 假设你已经从某个地方获取了JWT
              String jwt = "your.jwt.token.here";
              
              // 设置请求头
              Map<String, String> headers = {
                'Authorization': 'Bearer $jwt',
              };

              // 发送GET请求到后端服务
              var response = await http.get(
                Uri.parse('https://your-backend-service.com/protected-endpoint'),
                headers: headers,
              );

              // 处理响应
              if (response.statusCode == 200) {
                print('Response Data: ${response.body}');
                // 显示响应数据,这里简单打印到控制台
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Data fetched successfully')),
                );
              } else {
                print('Failed to fetch data: ${response.statusCode}');
                // 显示错误信息
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Failed to fetch data')),
                );
              }
            },
            child: Text('Fetch Protected Data'),
          ),
        ),
      ),
    );
  }
}

3. 后端服务假设

虽然这个示例集中在Flutter客户端,但假设你的后端服务能够处理JWT认证。后端服务可能会像这样验证JWT:

// 伪代码示例,具体实现取决于你使用的后端框架和库

// 解析Authorization头部,提取JWT
String jwt = request.headers['authorization'].split(' ').last;

// 使用jaguar_jwt或其他库验证JWT
try {
  var decoded = verifyJwt(jwt, secretKey); // secretKey是你的密钥
  // 如果验证成功,decoded将包含JWT的负载数据
  // 你可以根据这些数据允许或拒绝访问
} catch (e) {
  // JWT验证失败,返回401 Unauthorized
  return Response(status: 401);
}

总结

虽然 jaguar_jwt 主要用于服务器端,但Flutter客户端可以通过HTTP请求与需要JWT认证的后端服务交互。上面的示例展示了如何使用 http 包发送带有JWT的请求,并在Flutter应用中处理响应。确保你的后端服务能够正确解析和验证JWT。

回到顶部