Flutter Web集成Keycloak认证时openid_client返回Null凭证求助

核心原因 #

你的代码没有处理Keycloak跳转回应用后的授权响应参数解析。当用户完成Keycloak登录跳转回应用时，URL中会携带授权码等参数，但你的代码仅在点击登录时初始化Authenticator，跳转后页面重新加载，新的Authenticator实例无法捕获这些参数，导致credential始终为null。

具体修复步骤 #

1. 初始化时处理授权回调 #

在应用启动时（比如main函数或首页的initState），先检查当前URL是否包含Keycloak返回的授权响应，解析后生成凭证：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 替换为你的Keycloak Realm地址、客户端ID和所需权限
  final keycloakUri = Uri.parse('https://your-keycloak-domain/auth/realms/your-realm');
  const clientId = 'your-flutter-client';
  const scopes = ['openid', 'profile', 'email'];

  // 初始化客户端和认证器
  var issuer = await Issuer.discover(keycloakUri);
  var client = Client(issuer, clientId);
  var authenticator = Authenticator(client, scopes: scopes);

  // 检查当前URL是否是Keycloak的授权回调
  final currentUri = Uri.base;
  if (Authenticator.isAuthorizationResponse(currentUri)) {
    // 解析回调参数，生成凭证
    await authenticator.handleAuthorizationResponse(currentUri);
    // 清除URL中的授权参数，避免重复处理
    window.location.replace(window.location.origin);
  }

  runApp(const MyApp());
}

2. 调整登录函数逻辑 #

确保登录时指定正确的回调URL（必须与Keycloak客户端配置的Valid Redirect URIs完全一致）：

Future<Map<String, dynamic>?> authenticate(Uri uri, String clientId, List<String> scopes) async {   
  var issuer = await Issuer.discover(uri);
  var client = Client(issuer, clientId);
  var authenticator = Authenticator(client, scopes: scopes);
  
  var c = await authenticator.credential;
  
  if (c == null) {
    // 指定回调URL，必须匹配Keycloak配置的有效跳转地址
    await authenticator.authorize(
      redirectUri: Uri.parse('http://localhost:5000'), // 替换为你的应用地址
    );
  } else {
    return await c.getUserInfo();
  }
  return null;
}

3. 检查Keycloak客户端配置 #

• Valid Redirect URIs：必须添加你的Flutter Web应用地址，比如http://localhost:5000/*（本地开发）或线上域名。
• Access Type：设置为public（Flutter Web是前端应用，无法安全存储客户端密钥）。
• Scopes：确保客户端已启用openid、profile等你请求的权限。

4. 额外检查项 #

• 确认请求的scopes包含openid（这是OpenID Connect认证的必填scope）。
• 打开浏览器控制台，查看是否有CORS或参数解析相关的错误。
• 本地开发时，Keycloak的Realm设置中Login选项的Require SSL可暂时设为None，避免HTTPS强制跳转问题。

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