Flutter身份验证插件keycloak_flutter的使用

Flutter身份验证插件keycloak_flutter的使用

keycloak_flutter 是一个用于在Flutter应用程序中轻松集成Keycloak身份验证的插件。它提供了对keycloak-js库的封装，并增加了额外的功能，使得在Flutter应用中使用Keycloak更加便捷。

关于

这个库帮助你在Flutter应用中使用Keycloak，提供以下功能：

  • Keycloak Service：封装了keycloak-js的方法，使其更易于在Flutter应用中使用。
  • AuthGuard实现（即将推出）：允许你自定义自己的AuthGuard逻辑。
  • HttpClient拦截器（即将推出）：自动为所有HttpClient请求添加授权头。
  • 文档支持（即将推出）：帮助你在Flutter应用和Keycloak管理控制台中配置客户端。

兼容性

下表显示了keycloak_flutter与Keycloak版本的兼容性：

Keycloak_flutter版本 Keycloak版本
v0.0.3 v10 - v13
v0.0.19 v17 - v19
v0.0.20 - 最新 v20 - 最新

安装

首先，确保你已经配置好了Keycloak服务器。

1. 添加依赖

在pubspec.yaml文件中添加keycloak_flutter依赖：

dependencies:
  flutter_web_plugins:
    sdk: flutter
  keycloak_flutter: ^latest.version

2. 配置HTML文件

在web/index.html文件中添加Keycloak的JavaScript文件引用：

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <link rel="manifest" href="manifest.json">
    <script src="js/keycloak.js"></script>
</head>
<body>
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('flutter-first-frame', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

3. 创建Keycloak客户端

在Keycloak管理控制台中创建一个前端客户端，并确保正确配置Web Origins。

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用keycloak_flutter进行身份验证。

主函数

import 'dart:html';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:keycloak_flutter/keycloak_flutter.dart';

late KeycloakService keycloakService;

void main() async {
  keycloakService = KeycloakService(KeycloakConfig(
    url: 'http://localhost:8080', // Keycloak auth base url
    realm: 'sample',
    clientId: 'sample-flutter',
  ));
  
  await keycloakService.init(
    initOptions: KeycloakInitOptions(
      onLoad: 'check-sso',
      responseMode: 'query',
      silentCheckSsoRedirectUri: '${window.location.origin}/silent-check-sso.html',
    ),
  );
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Keycloak Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      routerConfig: _router,
    );
  }
}

主页面

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  KeycloakProfile? _keycloakProfile;

  void _login() {
    keycloakService.login(KeycloakLoginOptions(redirectUri: '${window.location.origin}'));
  }

  @override
  void initState() {
    super.initState();
    try {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
        keycloakService.keycloakEventsStream.listen((event) async {
          print(event);
          if (event.type == KeycloakEventType.onAuthSuccess) {
            _keycloakProfile = await keycloakService.loadUserProfile();
          } else {
            _keycloakProfile = null;
          }
          setState(() {});
        });
        if (keycloakService.authenticated) {
          _keycloakProfile = await keycloakService.loadUserProfile(false);
        }
        setState(() {});
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () async {
              await keycloakService.logout();
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Welcome ${_keycloakProfile?.username ?? 'Guest'}',
              style: Theme.of(context).textTheme.headline4,
            ),
            SizedBox(height: 20),
            if (_keycloakProfile?.username == null)
              ElevatedButton(
                onPressed: _login,
                child: Text('Login', style: Theme.of(context).textTheme.headline4),
              ),
            SizedBox(height: 20),
            if (_keycloakProfile?.username != null)
              ElevatedButton(
                onPressed: () async {
                  print('Refreshing token');
                  await keycloakService.updateToken(1000).then((value) {
                    print(value);
                  }).catchError((onError) {
                    print(onError);
                  });
                },
                child: Text('Refresh token', style: Theme.of(context).textTheme.headline4),
              ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _login,
        tooltip: 'Login',
        child: Icon(Icons.login),
      ),
    );
  }
}

路由配置

final _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => MyHomePage(),
    ),
  ],
);

Silent Check SSO

为了启用Silent Check SSO，你需要在你的应用中提供一个静态HTML文件。创建一个名为silent-check-sso.html的文件，并将其放置在assets目录中：

<html>
<body>
<script>
  parent.postMessage(location.href, location.origin);
</script>
</body>
</html>

确保该文件可以通过URL访问，例如${window.location.origin}/silent-check-sso.html。

注意事项

  • 确保不要创建多个Keycloak实例。可以使用Provider来管理单例实例。
  • 确保配置的Keycloak客户端信息与Keycloak管理控制台中的配置一致。

通过以上步骤，你就可以在Flutter应用中成功集成Keycloak身份验证了。如果你遇到任何问题，请参考Keycloak JavaScript适配器的官方文档或查看GitHub仓库中的示例代码。


更多关于Flutter身份验证插件keycloak_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，下面是一个关于如何使用 keycloak_flutter 插件进行身份验证的示例代码。这个插件允许Flutter应用与Keycloak进行集成，从而进行用户认证和授权。

首先，确保你已经在 pubspec.yaml 文件中添加了 keycloak_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  keycloak_flutter: ^最新版本号  # 请替换为当前最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，你需要配置Keycloak客户端的信息。这些信息通常包括Keycloak服务器的URL、客户端ID、客户端密钥（如果适用）、以及重定向URI。

以下是一个完整的示例，展示了如何使用 keycloak_flutter 插件进行身份验证：

import 'package:flutter/material.dart';
import 'package:keycloak_flutter/keycloak_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Keycloak Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: KeycloakAuthScreen(),
    );
  }
}

class KeycloakAuthScreen extends StatefulWidget {
  @override
  _KeycloakAuthScreenState createState() => _KeycloakAuthScreenState();
}

class _KeycloakAuthScreenState extends State<KeycloakAuthScreen> {
  KeycloakClient? _keycloakClient;

  @override
  void initState() {
    super.initState();
    _initKeycloak();
  }

  void _initKeycloak() {
    // 配置Keycloak客户端
    var config = KeycloakConfig(
      realm: 'your-realm',
      url: 'https://your-keycloak-server-url/auth',
      clientId: 'your-client-id',
      clientSecret: 'your-client-secret',  // 如果使用机密客户端，则提供此值；否则，可以省略
      redirectUri: 'your-redirect-uri://callback',
    );

    _keycloakClient = KeycloakClient(config: config);

    // 尝试自动登录（如果之前已有登录会话）
    _keycloakClient!.onAuthSuccess!.listen((session) {
      print('Authenticated successfully: ${session.token}');
      // 处理成功登录后的逻辑，例如导航到主屏幕
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen(session: session)),
      );
    });

    _keycloakClient!.onAuthError!.listen((error) {
      print('Authentication error: $error');
    });

    // 尝试获取当前会话，如果没有则启动登录流程
    _keycloakClient!.init().then((session) {
      if (session == null) {
        // 没有现有会话，启动登录流程
        _keycloakClient!.login();
      } else {
        // 已有会话，处理成功登录逻辑
        print('Existing session found: ${session.token}');
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(builder: (context) => HomeScreen(session: session)),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Keycloak Authentication'),
      ),
      body: Center(
        child: Text('Authenticating...'),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final KeycloakSession session;

  HomeScreen({required this.session});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Welcome, ${session.userInfo?.preferredUsername ?? 'Guest'}!'),
            ElevatedButton(
              onPressed: () {
                // 注销逻辑
                _keycloakClient!.logout();
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => MyApp()),
                );
              },
              child: Text('Logout'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先配置了一个 KeycloakConfig 对象，其中包含Keycloak服务器的URL、realm、客户端ID和重定向URI等信息。
  2. 创建了一个 KeycloakClient 实例，并监听其 onAuthSuccess 和 onAuthError 流以处理认证结果。
  3. 在 initState 方法中，尝试初始化Keycloak客户端并检查是否有现有会话。如果没有，则启动登录流程。
  4. 登录成功后，导航到 HomeScreen 页面，并显示用户的用户名和注销按钮。

请注意，这个示例假设你已经设置好了Keycloak服务器和客户端，并且配置了正确的重定向URI。根据你的实际情况，你可能需要调整配置信息。

回到顶部