Flutter Web基于OpenID Connect对接Keycloak实现用户认证的方案咨询

推荐依赖包 #

以下两个包均经过生产验证，完全适配Web端，支持调用Keycloak自带登录页完成标准OIDC授权码+PKCE认证流程，无特定云厂商绑定：

• flutter_appauth：维护状态活跃，跨平台兼容，遵循标准OAuth 2.0/OIDC协议，支持所有自定义身份提供商，无多余的服务商绑定逻辑
• openid_client：轻量级纯Dart实现的OIDC客户端，针对自定义OIDC服务做了专门优化，Web端无需额外原生配置即可使用

核心实现步骤（以flutter_appauth为例） #

1. Keycloak服务端配置：
   • 新建客户端，访问类型设置为public
   • 有效重定向URI填写你的Flutter Web部署域名，本地调试可填写http://localhost:端口号/*
   • 开启PKCE强制校验，关闭客户端密码校验
   • 配置Web Origins为你的站点地址，避免跨域拦截
2. Flutter项目配置：
   • 在pubspec.yaml中添加依赖：flutter_appauth: ^最新稳定版本
   • 在web/index.html中添加授权回调处理逻辑，避免路由拦截OIDC回调地址
3. 核心认证代码示例：

final FlutterAppAuth appAuth = FlutterAppAuth();
// 填充Keycloak对应配置
final AuthorizationTokenRequest authRequest = AuthorizationTokenRequest(
  '你的Keycloak客户端ID',
  '你的Flutter Web回调地址',
  discoveryUrl: 'https://cloud-iam.com/realms/你的realm名称/.well-known/openid-configuration',
  scopes: ['openid', 'profile', 'email'],
  // 强制开启PKCE，适配公开客户端安全要求
  pkce: true,
);

// 发起认证请求，将自动跳转至Keycloak自带登录页
try {
  final AuthorizationTokenResponse? authResult = await appAuth.authorizeAndExchangeCode(authRequest);
  if (authResult != null) {
    // 认证成功后获取idToken、accessToken，本地存储后即可放行业务页面访问
    String validIdToken = authResult.idToken!;
    String validAccessToken = authResult.accessToken!;
  }
} catch (err) {
  // 自定义处理认证失败、用户取消登录等场景
}

路由拦截实现思路 #

你可以在应用初始化时增加全局校验逻辑：启动后先判断本地是否存储了有效的未过期idToken，如不存在直接触发上述认证跳转流程，认证成功后再加载业务路由，即可实现全站需登录才可访问的需求。

调试注意事项 #

• 本地调试时优先使用localhost而非127.0.0.1，避免Keycloak的域名校验不通过
• 生产部署前需要将Keycloak端的重定向URI、Web Origins配置替换为正式线上域名

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