Flutter身份验证插件hss_okta_flutter的使用

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

Flutter身份验证插件hss_okta_flutter的使用

HSS Okta Flutter 插件简介

HSS Okta Flutter 插件作为一个抽象层，无缝集成了Okta的原生SDK，使Flutter应用能够利用Okta的强大安全框架。该插件允许Flutter开发者在iOS和Android平台上使用Okta的经典引擎认证工作流，确保用户认证过程的安全性和高效性。插件设计为与原生平台功能流畅交互，并利用Dart的异步特性提供非阻塞、优化性能的认证流程。

安装方法

移动端安装
$ flutter pub add hss_okta_flutter
Web端安装
$ flutter pub add hss_okta_flutter

在index.html的<head>标签中添加Okta的JavaScript库：

<script src="https://global.oktacdn.com/okta-auth-js/7.4.1/okta-auth-js.min.js" type="text/javascript"></script>

功能特性

移动端功能
功能 Android iOS
资源所有者流 / 直接认证 ✅ (MFA不可用) ✅
浏览器重定向认证 ✅ ✅
设备授权 ✅ ✅
设备单点登录 (SSO) ✅ ✅
Web端功能
功能 支持情况
通过重定向认证 ✅
通过弹窗认证 ✅
Token管理 ✅
认证客户端设置 ✅
认证状态管理 🚧 (开发中)
获取用户信息 ✅

配置步骤

Android 配置

在Android项目的根目录下创建okta.properties文件：

issuer= https://your.issuer.link
clientId= Your client id
signInRedirectUri= Sign in redirect URL
signOutRedirectUri= Sign out redirect URL
scopes= List of scopes, separated by space
iOS 配置

在iOS项目中创建Okta.plist文件：

<key>issuer</key>
<string>https://your.issuer.link</string>
<key>clientId</key>
<string>Your client id</string>
<key>redirectUri</key>
<string>Sign in redirect URL</string>
<key>logoutRedirectUri</key>
<string>Sign out redirect URL</string>
<key>scopes</key>
<string>List of scopes, separated by space</string>

使用示例

通用用法
import 'package:hss_okta_flutter/hss_okta_flutter_plugin.dart';

final _plugin = HssOktaFlutter();

Future<void> getCredential() async {
  try {
    await _plugin.getCredentials();
  } catch (e) {
    print('$e');
  }
}
浏览器重定向认证
import 'package:hss_okta_flutter/hss_okta_flutter_plugin.dart';

[@override](/user/override)
Widget build(BuildContext context) {
  return HssOktaBrowserSignOutWidget(
    onResult: (success) {
      if (success) {
        Navigator.of(context).pop(success);
      }
    },
    builder: (context, child) => Container(child: child),
  );
}
Web 端认证
import 'package:hss_okta_flutter/hss_okta_flutter.dart';

final oktaWeb = HssOktaFlutterWeb();

void main() async {
  await oktaWeb.initializeClient(OktaConfig(
    issuer: 'com.dev.okta.myApp',
    clientId: '123456',
    redirectUri: 'https://localhost:8080/callback',
  ));

  final token = await oktaWeb.token.startPopUpAuthentication();
  print(token.accessToken?.accessToken);
}

完整示例 Demo

以下是一个完整的示例Demo，展示了如何在Flutter应用中使用hss_okta_flutter插件进行身份验证。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:hss_okta_flutter/hss_okta_flutter.dart';
import 'package:hss_okta_flutter_example/provider/plugin_provider.dart';
import 'package:hss_okta_flutter_example/screens/home_screen.dart';
import 'package:hss_okta_flutter_example/web/redirect_form.dart';
import 'package:hss_okta_flutter_example/web/web_profile_screen.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  AuthenticationResult? result;
  final _pluginWeb = HssOktaFlutterWeb();
  final _plugin = HssOktaFlutter();

  [@override](/user/override)
  void initState() {
    super.initState();
    // For WEB
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      if (kIsWeb) {
        await _pluginWeb.initializeClient(
          oktaConfig: OktaConfig(),
        );
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      onGenerateRoute: (settings) {
        final url = Uri.parse(settings.name!);
        final args = settings.arguments;

        switch (url.path) {
          case '/':
            return MaterialPageRoute(
              settings: settings,
              builder: (context) => const HomeScreen(),
            );
          case '/login':
            return MaterialPageRoute(
              settings: settings,
              builder: (context) => const RedirectForm(),
            );
          case '/web-profile':
            return MaterialPageRoute(
              settings: settings,
              builder: (context) {
                if (args is Map<String, dynamic>) {
                  return const WebProfileScreen();
                }
                return const WebProfileScreen();
              },
            );
        }

        return null;
      },
      builder: (context, child) {
        return Scaffold(
            body: PluginProvider(
          pluginWeb: _pluginWeb,
          plugin: _plugin,
          child: child!,
        ));
      },
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter应用中使用hss_okta_flutter插件进行身份验证的代码示例。请注意，hss_okta_flutter插件的具体API和功能可能会随时间变化，因此建议在使用前查阅最新的官方文档。

首先，确保你的Flutter项目中已经添加了hss_okta_flutter依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  hss_okta_flutter: ^最新版本号  # 替换为实际的最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤进行身份验证：

  1. 导入插件：

在你的Dart文件中导入hss_okta_flutter插件：

import 'package:hss_okta_flutter/hss_okta_flutter.dart';
  1. 配置Okta客户端：

你需要配置Okta客户端以使用你的Okta组织信息。这通常包括Okta域、客户端ID和重定向URI。

final OktaClient oktaClient = OktaClient(
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  clientId: '{yourClientId}',
  redirectUri: '{yourRedirectUri}',
);
  1. 启动身份验证流程：

使用oktaClient启动身份验证流程，并处理回调。通常，你会在一个按钮点击事件中调用此方法。

void _startAuthentication() async {
  try {
    // 启动认证流程
    final AuthorizationResponse response = await oktaClient.authorize();

    // 检查是否成功获取授权码
    if (response.authorizationCode != null) {
      // 使用授权码获取访问令牌
      final TokenResponse tokenResponse = await oktaClient.exchangeCodeForTokens(response.authorizationCode!);

      // 处理访问令牌（例如，保存到Secure Storage或发送到服务器）
      print('Access Token: ${tokenResponse.accessToken}');
      print('ID Token: ${tokenResponse.idToken}');
      print('Refresh Token: ${tokenResponse.refreshToken}');
    } else if (response.error != null) {
      // 处理错误
      print('Authentication Error: ${response.error}');
    }
  } catch (e) {
    // 处理异常
    print('An error occurred: $e');
  }
}
  1. 在UI中调用身份验证方法：

在你的Flutter UI中，添加一个按钮来触发身份验证流程。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Okta Authentication Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _startAuthentication,
            child: Text('Login with Okta'),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用hss_okta_flutter插件启动Okta身份验证流程，并处理授权响应。请注意，这只是一个基本示例，实际应用中你可能需要处理更多的边缘情况和错误情况，并根据你的应用需求进行适当的调整。

务必参考hss_okta_flutter的官方文档和示例代码，以确保你使用的是最新和最佳的实践方法。

回到顶部