Flutter OIDC认证扩展插件magic_ext_oidc的使用

🔒 Magic Open Id Connect for Flutter #

<MagicLabs>

Magic Open Id Connect SDK 扩展插件用于 Flutter。

许可证 · 更新日志 · 贡献指南

🔗 安装 #

将您的 Flutter 应用程序与 Magic 集成需要我们的 Flutter 包和 OIDC 扩展：

# 通过 pub.dev:
flutter pub add magic_sdk
flutter pub add magic_ext_oidc

⚡️ 快速开始 #

在 开发者仪表板 注册或登录以获取 API 密钥，这将允许您的 Flutter 应用程序与 Magic 的 API 进行交互。

请求访问此功能，请向我们的客户支持发送您要启用的 API 密钥。

在您的 Flutter 应用程序中，通常是在登录屏幕：

import 'package:magic_sdk/magic_sdk.dart';
import 'package:magic_ext_oidc/magic_ext_oidc.dart';

void main() {
  Magic.instance = Magic("YOUR_PUBLISHABLE_KEY");

  // 使用 OIDC 扩展进行登录
  var didToken = await magic.openid.loginWithOIDC(OpenIdConfiguration(
    jwt: yourOpenIdJwt, // 从您的 OpenID 提供商处获取
    providerId: yourMagicProviderId, // 从 Magic 获取，请联系支持以获取此 ID
  ));
  
  // 使用 DID 令牌进行进一步的身份验证或请求
  print('DID Token: $didToken');
}

example/example.dart

import 'package:flutter/material.dart';

import 'package:magic_sdk/magic_sdk.dart';
import 'package:magic_ext_oidc/magic_ext_oidc.dart';
import 'package:magic_ext_oidc/types/open_id_configuration.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  Magic magic = Magic.instance;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Magic OIDC Demo 登录'),
          automaticallyImplyLeading: false,
        ),
        body: Center(
            child:
                Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          TextButton(
            style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
            ),
            onPressed: () async {
              var configuration = OpenIdConfiguration(
                jwt: 'JWT_FROM_YOUR_OPEN_ID_PROVIDER', // 从您的 OpenID 提供商处获取
                providerId: 'YOUR_MAGIC_PROVIDER_ID'); // 从 Magic 获取，请联系支持以获取此 ID

              var did = await magic.openid.loginWithOIDC(configuration);

              debugPrint('您的 DID 是: $did');
            },
            child: const Text('OIDC 登录'),
          ),
        ])));
  }
}

更多关于Flutter OIDC认证扩展插件magic_ext_oidc的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是如何在Flutter项目中使用magic_ext_oidc插件进行OIDC（OpenID Connect）认证的示例代码。这个插件可能用于处理与OIDC兼容的身份验证提供者（如Auth0、Okta等）的集成。

首先，确保你的Flutter项目已经设置好了，并且已经添加了magic_ext_oidc依赖。你可以在pubspec.yaml文件中添加如下依赖：

dependencies:
  flutter:
    sdk: flutter
  magic_ext_oidc: ^最新版本号  # 请替换为实际可用的最新版本号

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

接下来，你可以按照以下步骤进行OIDC认证：

  1. 配置OIDC提供者信息：

在你的项目中，创建一个配置文件（例如oidc_config.dart）来存储OIDC提供者的信息，如客户端ID、客户端密钥、授权端点和令牌端点等。

// oidc_config.dart
import 'package:magic_ext_oidc/magic_ext_oidc.dart';

class OIDCConfig {
  static final OIDCConfig oidcConfig = OIDCConfig(
    clientId: '你的客户端ID',
    clientSecret: '你的客户端密钥',  // 注意：某些OIDC提供者可能不需要客户端密钥
    authorizationEndpoint: 'https://你的授权服务器/oauth/authorize',
    tokenEndpoint: 'https://你的授权服务器/oauth/token',
    redirectUri: '你的重定向URI',
    scopes: ['openid', 'profile', 'email'],  // 根据需要添加额外的scope
  );
}
  1. 启动OIDC认证流程：

在你的主应用文件（例如main.dart）中，使用magic_ext_oidc插件启动认证流程。

// main.dart
import 'package:flutter/material.dart';
import 'package:magic_ext_oidc/magic_ext_oidc.dart';
import 'oidc_config.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OIDC认证示例'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                // 启动认证流程
                OIDCAuthenticationResult result = await OIDCAuthenticator.authenticate(
                  config: OIDCConfig.oidcConfig,
                );

                // 处理认证结果
                if (result.isSuccess) {
                  print('认证成功: ${result.userInfo}');
                  // 在这里你可以将用户信息保存到本地或执行其他逻辑
                } else {
                  print('认证失败: ${result.errorMessage}');
                }
              } catch (e) {
                print('认证过程中发生错误: $e');
              }
            },
            child: Text('启动OIDC认证'),
          ),
        ),
      ),
    );
  }
}
  1. 处理认证结果：

在上面的代码中，OIDCAuthenticationResult对象包含了认证的结果。如果认证成功，你可以从result.userInfo中获取用户信息；如果认证失败，你可以从result.errorMessage中获取错误信息。

请注意，上述代码是一个基本的示例，实际项目中你可能需要处理更多的边缘情况和错误处理。另外，magic_ext_oidc插件的具体API和用法可能会根据版本的不同而有所变化，因此请参考插件的官方文档和示例代码以获取最新的信息。

希望这个示例对你有所帮助！

回到顶部