Flutter OIDC Loopback Listener插件oidc_loopback_listener的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter OIDC Loopback Listener插件oidc_loopback_listener的使用

安装 💻

要开始使用 oidc_loopback_listener，你需要在你的机器上安装 Dart SDK。

首先，在你的 pubspec.yaml 文件中添加 oidc_loopback_listener 依赖：

dependencies:
  oidc_loopback_listener:

然后运行以下命令来安装它：

dart pub get

运行测试 🧪

要运行所有的单元测试，请执行以下命令：

dart pub global activate coverage 1.2.0
dart test --coverage=coverage
dart pub global run coverage:format_coverage --lcov --in=coverage --out=coverage/lcov.info

要查看生成的覆盖率报告，你可以使用 lcov 工具。

# 生成覆盖率报告
genhtml coverage/lcov.info -o coverage/

# 打开覆盖率报告
open coverage/index.html

完整示例

为了更好地理解如何使用 oidc_loopback_listener，我们提供了一个完整的示例。你可以通过以下链接查看示例代码：

示例代码

下面是一个简单的示例代码，展示了如何使用 oidc_loopback_listener 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OIDC Loopback Listener Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 创建一个监听器实例
              final listener = OidcLoopbackListener();

              // 启动监听器
              await listener.start();

              // 获取授权响应
              final response = await listener.waitForAuthorizationResponse();

              // 停止监听器
              await listener.stop();

              // 输出响应信息
              print('Authorization Response: $response');
            },
            child: Text('Start OIDC Loopback Listener'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter OIDC Loopback Listener插件oidc_loopback_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter OIDC Loopback Listener插件oidc_loopback_listener的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，我可以为你提供一个关于如何在Flutter项目中使用oidc_loopback_listener插件的示例代码。这个插件主要用于处理OpenID Connect (OIDC) 的回环重定向，以便在移动设备上安全地完成OAuth 2.0授权流程。

首先，确保你的Flutter项目已经包含了oidc_loopback_listener插件。如果还没有添加，可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  oidc_loopback_listener: ^最新版本号 # 请替换为当前可用的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我将展示一个基本的示例，演示如何使用oidc_loopback_listener来处理OIDC授权流程。

示例代码

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:oidc_loopback_listener/oidc_loopback_listener.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
  1. 定义OIDC配置
const String clientId = '你的客户端ID';
const String redirectUri = '你的重定向URI';
const String authorizationEndpoint = '你的授权端点';
  1. 创建OIDC Loopback Listener
class _MyHomePageState extends State<MyHomePage> {
  OidcLoopbackListener? _listener;

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

  @override
  void dispose() {
    _listener?.dispose();
    super.dispose();
  }

  Future<void> _initOidcListener() async {
    _listener = OidcLoopbackListener(
      redirectUri: Uri.parse(redirectUri),
      onCodeReceived: (Uri uri) async {
        String code = uri.queryParameters['code'] ?? '';
        if (code.isNotEmpty) {
          // 使用授权码code去获取访问令牌
          final response = await http.post(
            Uri.parse('$authorizationEndpoint/token'),
            headers: <String, String>{
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: Uri.encodeFull(
              'grant_type=authorization_code&code=$code&client_id=$clientId&redirect_uri=$redirectUri',
            ),
          );

          if (response.statusCode == 200) {
            Map<String, dynamic> data = jsonDecode(response.body);
            String accessToken = data['access_token'] ?? '';
            // 在这里处理访问令牌
            print('Access Token: $accessToken');
          } else {
            print('Failed to retrieve token: ${response.statusCode}');
          }
        }
      },
    );

    // 启动监听器
    await _listener!.start();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OIDC Loopback Listener Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 构建授权URL并导航到它
            Uri authUrl = Uri.parse('$authorizationEndpoint?response_type=code&client_id=$clientId&redirect_uri=$redirectUri');
            if (await canLaunchUrl(authUrl)) {
              await launchUrl(authUrl);
            } else {
              throw 'Could not launch $authUrl';
            }
          },
          child: Text('Start OIDC Authorization'),
        ),
      ),
    );
  }
}
  1. 处理URL启动

由于Flutter在iOS和Android上处理URL启动的方式不同，你需要分别在ios/Runner/Info.plist和android/app/src/main/AndroidManifest.xml中进行配置，以确保应用能够捕获重定向URI。

  • iOS：在Info.plist中添加一个自定义URL scheme。
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>你的自定义scheme</string>
        </array>
    </dict>
</array>
  • Android：在AndroidManifest.xml中添加intent-filter。
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="你的自定义scheme" android:host="callback" />
</intent-filter>
  1. 完整的主函数
void main() {
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

这个示例展示了如何使用oidc_loopback_listener插件来处理OIDC授权流程，包括启动授权URL、捕获重定向URI以及使用授权码获取访问令牌。请根据你的实际需求调整代码中的OIDC配置和URL scheme。

回到顶部