如何在Flutter中通过OAuth 2.0获取AccessToken并用于接口鉴权

一、修复 AccessToken 获取逻辑 #

你当前代码存在几个问题，需要调整：

• redirect_uri 应该是字符串格式的地址，而非 Uri 对象
• POST 请求需指定 Content-Type: application/json 头，否则服务器可能无法正确解析请求体
• 需要解析返回的 JSON 数据，提取并保存 access_token

修正后的代码：

import 'dart:convert';
import 'package:http/http.dart' as http;

// 存储获取到的AccessToken
String? _accessToken;

Future<void> getToken() async {
  final tokenUri = Uri.parse("https://your-token-api-url");
  final requestBody = json.encode({
    "client_id": "clientid",
    "client_secret": "clientpassword",
    "redirect_uri": "https://your-redirect-url", // 改为字符串格式
    "grant_type": "client_credentials"
  });

  final response = await http.post(
    tokenUri,
    headers: {"Content-Type": "application/json"}, // 添加请求头
    body: requestBody,
  );

  if (response.statusCode == 200) {
    final tokenData = json.decode(response.body);
    _accessToken = tokenData["access_token"];
    print("获取Token成功: $_accessToken");
  } else {
    print("获取Token失败: ${response.statusCode} - ${response.body}");
  }
}

二、使用 AccessToken 发起鉴权请求 #

拿到 access_token 后，在后续API请求的请求头中加入 Authorization: Bearer <token> 即可完成鉴权：

Future<void> fetchProtectedData() async {
  if (_accessToken == null) {
    print("请先获取AccessToken");
    return;
  }

  final apiUri = Uri.parse("https://your-protected-api-url");
  final response = await http.get(
    apiUri,
    headers: {
      "Authorization": "Bearer $_accessToken",
      "Content-Type": "application/json"
    },
  );

  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    print("获取受保护数据成功: $data");
  } else {
    print("请求失败: ${response.statusCode} - ${response.body}");
  }
}

三、额外注意事项 #

• Token 缓存与过期处理：建议将 access_token 存储到本地（比如使用 shared_preferences），并记录过期时间，避免每次请求都重复获取Token
• 错误处理：添加异常捕获逻辑（比如网络请求异常），以及Token过期后的自动刷新逻辑
• 安全性：不要在代码中硬编码 client_secret，可以通过环境变量或配置文件管理敏感信息

内容的提问来源于stack exchange，提问作者Usman Hafeez