使用 keycloak 和 openid_client 对 Flutter 应用程序进行身份验证

Posted 2023-02-19

【中文标题】使用 keycloak 和 openid_client 对 Flutter 应用程序进行身份验证

【英文标题】：Authenticate flutter app with keycloak and openid_client

【发布时间】：2020-07-03 23:07:03

【问题描述】：

我正在尝试通过openid_client 对我的颤振应用进行密钥斗篷验证

按照 repo 示例，我编写了一个这样的身份验证函数

authenticate() async 

  // parameters here just for the sake of the question
  var uri = Uri.parse('https://keycloak-url/auth/realms/myrealm');
  var clientId = 'my_client_id';
  var scopes = List<String>.of(['openid', 'profile']);
  var port = 4200;
  var redirectUri = Uri.parse('http://localhost:4200');

  var issuer = await Issuer.discover(uri);
  var client = new Client(issuer, clientId);

  urlLauncher(String url) async 
    if (await canLaunch(url)) 
      await launch(url, forceWebView: true);
     else 
      throw 'Could not launch $url';
    
  

  var authenticator = new Authenticator(client,
      scopes: scopes,
      port: port,
      urlLancher: urlLauncher,
      redirectUri: redirectUri);

  var c = await authenticator.authorize();
  closeWebView();

  var token= await c.getTokenResponse();
  print(token);
  return token;

当我调用该函数时，会出现一个 webview 弹出窗口，我可以通过 keycloak 登录，但是当弹出窗口关闭时，我在 c.getTokenResponse() 处收到此错误：

发生了异常。 NoSuchMethodError (NoSuchMethodError: 在 null 上调用了 getter 'length'。 接收方：空 尝试调用：长度）

检查 Credential c，我可以看到 TokenResponse 只有“state”、“session_state”和“code”字段

我错过了什么？

【参考方案1】：

我已经在 github (link) 上回答了，所以我将解决方案复制到这里：

---

在移动设备上，您应该使用 PKCE 流程。当您在 Authenticator 构造函数中省略重定向 uri 时，会自动选择此项。

所以，应该是：

var authenticator = new Authenticator(client,
      scopes: scopes,
      port: port,
      urlLancher: urlLauncher,);

确保将 uri http://localhost:4200/（包括尾部斜杠）添加到 keycloak 中的 Valid Redirect URIs。

确保将 uri http://localhost:4200/（包括尾部斜杠）添加到 keycloak 中的有效重定向 URI。

【讨论】：

你必须为此打开浏览器窗口吗？

openid_client 插件在你调用await authenticator.authorize();时打开一个webview

还有什么办法吗？

您可以使用资源所有者密码流程，但那是 OAuth2 而不是 OpenID，出于安全原因不建议使用。并且您失去了 SSO 和联合提供商。