Flutter身份验证与授权管理插件 `casdoor_flutter_sdk` 的使用

概述

casdoor_flutter_sdk 是一个用于将基于Flutter的应用程序连接到Casdoor认证系统的插件。它支持多种平台，包括Android、iOS、Linux、macOS、Web和Windows。

特性

连接到Casdoor进行单点登录（SSO）
获取Casdoor认证后的令牌

使用指南

初始化配置

初始化需要6个参数，这些参数都是字符串类型：

名称（按顺序）	是否必须	描述
clientId	是	应用程序的client_id
endpoint	是	Casdoor服务器URL，例如 `door.casdoor.com`
organizationName	是	组织名称
appName	是	应用名称
redirectUri	是	重定向URI
callbackUrlScheme	是	URL Scheme

final CasdoorFlutterSdkConfig _config = CasdoorFlutterSdkConfig(
    clientId: "014ae4bd048734ca2dea",
    endpoint: "door.casdoor.com",
    organizationName: "casbin",
    appName: "app-casnode",
    redirectUri: "http://localhost:9000/callback",
    callbackUrlScheme: "casdoor"
);

判断平台

根据不同平台设置回调URI：

final platform = await CasdoorFlutterSdkPlatform.getPlatformVersion();
String callbackUri;
if (platform == "web") {
   callbackUri = "${_config.redirectUri}.html";
} else {
   callbackUri = "${_config.callbackUrlScheme}://callback";
}

授权

通过以下步骤与Casdoor服务器进行授权：

向Casdoor发送请求。
在浏览器中输入URL：endpoint/login/oauth/authorize?client_id=xxx&response_type=code&redirect_uri=xxx&scope=read&state=xxx
填写相应的参数并执行。

获取令牌并解析

在成功通过Casdoor验证后，应用会被重定向到类似 https://localhost:9000/callback?code=xxx&state=yyyy 的URL。你的应用程序可以获取这个code并通过 _casdoor.requestOauthAccessToken(code) 来获取JWT令牌。

开始使用

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

dependencies:
  casdoor_flutter_sdk: ^1.0.0

平台特定说明

Android 和 iOS

请参考 InAppWebView 文档以了解更多关于项目设置的信息。

Linux 和 macOS

在dependencies中添加desktop_webview_window: ^0.2.3包，并修改main函数如下：

void main(List<String> args) async {
  WidgetsFlutterBinding.ensureInitialized();
  if (runWebViewTitleBarWidget(args)) {
    return;
  }
  // your code goes here ...
  runApp(const MyApp());
}

Web

在项目的./web文件夹下创建一个HTML文件（如callback.html），内容如下：

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please close the window.
<script>
  window.opener.postMessage({
    'casdoor-auth': window.location.href
  }, window.location.origin);
  window.close();
</script>

确保传递给认证服务的重定向URL与应用程序运行的URL一致（包括schema、host、port等必要信息），并且路径指向创建的HTML文件，例如callbackUri = "${_config.redirectUri}.html"。

示例代码

下面是一个简单的示例演示如何使用casdoor_flutter_sdk：

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

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

class MyApp extends StatelessWidget {
  final CasdoorFlutterSdkConfig config = CasdoorFlutterSdkConfig(
      clientId: "your_client_id",
      endpoint: "your_casdoor_endpoint",
      organizationName: "your_organization_name",
      appName: "your_app_name",
      redirectUri: "your_redirect_uri",
      callbackUrlScheme: "your_callback_url_scheme");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Casdoor Flutter SDK Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                String code = await CasdoorFlutterSdk.show(config);
                var tokenResponse = await CasdoorFlutterSdk.requestOauthAccessToken(code);
                print(tokenResponse.accessToken);
              } catch (e) {
                print(e.toString());
              }
            },
            child: Text('Login with Casdoor'),
          ),
        ),
      ),
    );
  }
}

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

itying888 1楼•11 小时前

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

当然，以下是如何在Flutter项目中使用casdoor_flutter_sdk插件进行身份验证与授权管理的示例代码。

安装插件

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

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

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

初始化Casdoor客户端

在你的Flutter应用中，你需要初始化Casdoor客户端。以下是一个简单的示例，展示如何初始化并使用Casdoor客户端进行登录和获取用户信息。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CasdoorExample(),
    );
  }
}

class CasdoorExample extends StatefulWidget {
  @override
  _CasdoorExampleState createState() => _CasdoorExampleState();
}

class _CasdoorExampleState extends State<CasdoorExample> {
  Casdoor? casdoor;
  String? userInfo;

  @override
  void initState() {
    super.initState();
    // 初始化Casdoor客户端
    casdoor = Casdoor(
      endpoint: 'https://你的Casdoor服务器地址',  // 替换为你的Casdoor服务器地址
      clientId: '你的客户端ID',  // 替换为你的客户端ID
      clientSecret: '你的客户端密钥',  // 替换为你的客户端密钥
      redirectUri: '你的回调URI',  // 替换为你的回调URI
    );
  }

  Future<void> login() async {
    try {
      // 进行登录
      await casdoor!.loginWithRedirect();
      // 登录成功后，获取用户信息
      var user = await casdoor!.getUserInfo();
      setState(() {
        userInfo = user.toString();
      });
    } catch (e) {
      print('登录失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Casdoor Flutter SDK 示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('用户信息:'),
            Text(userInfo ?? '未登录'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: login,
              child: Text('登录'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

替换占位符：确保你替换了所有https://你的Casdoor服务器地址、你的客户端ID、你的客户端密钥和你的回调URI为实际的值。
处理回调：在真实应用中，你可能需要处理重定向后的回调。这通常涉及到在你的Flutter应用中设置一个特定的路由，并在该路由中处理重定向后的逻辑。casdoor_flutter_sdk插件通常会提供处理回调的方法，但具体实现取决于插件的版本和你的需求。
错误处理：在生产环境中，你应该添加更详细的错误处理逻辑，以优雅地处理各种可能的异常情况。
安全性：确保你的客户端ID和客户端密钥安全存储，不要将它们硬编码在客户端代码中。

这个示例展示了如何使用casdoor_flutter_sdk插件进行基本的身份验证和授权管理。根据你的实际需求，你可能需要进一步自定义和扩展这个示例。

Flutter身份验证与授权管理插件casdoor_flutter_sdk的使用

Flutter身份验证与授权管理插件 casdoor_flutter_sdk 的使用

概述

特性