Flutter身份验证插件auth3_login的使用

Flutter身份验证插件auth3_login的使用

该库提供了一种快速且安全的方式，以便与Auth3身份平台集成，从而保护在不同设备上运行的移动Flutter应用程序。

引言

此库提供了一种快速且安全的方法来集成Auth3身份平台，以保护您的Flutter应用程序免受未经授权的访问。如需更多帮助和详细的指导，请查看我们的文章。

平台支持

本库可以在以下环境中运行：

  • iOS
  • Android
  • Mac OS
  • Web (Flutter Web)

安装

要依赖此库，请运行以下命令：

flutter pub add auth3_login

或者，在pubspec.yaml文件中添加：

dependencies:
  auth3_login: ^版本号  # 在 https://pub.dev/packages/auth3_login 找到最新版本

然后运行：

flutter pub get

设置

Android

为了捕获回调URL，需要在AndroidManifest.xml文件中添加以下活动。请确保替换YOUR_CALLBACK_URL_SCHEME_HERE为您的实际回调URL方案（默认情况下在移动平台上为auth3，在Web上为https）。

<manifest>
  <application>
    <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" android:exported="true">
      <intent-filter android:label="flutter_web_auth">
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="YOUR_CALLBACK_URL_SCHEME_HERE" />
      </intent-filter>
    </activity>
  </application>
</manifest>

Web

在Web平台上，必须创建一个端点来捕获回调URL，并使用JavaScript的postMessage()方法将其发送到应用程序。在项目的./web文件夹中，创建一个名为auth.html的HTML文件，内容如下：

<!DOCTYPE html>
<html>
  <title>认证完成</title>
  <p>如果这没有自动发生，请关闭窗口。</p>

  <script>
    window.opener.postMessage({
      'flutter-web-auth': window.location.href
    }, window.location.origin);
    window.close();
  </script>
</html>

想要将您的后端系统集成吗？

请查看我们的官方SDK，以集成并操作您的Auth3身份：

贡献

目前我们不接受外部贡献，但我们欢迎反馈和请求。我们始终在寻找有关安全性的贡献，请参阅我们的专用页面了解更多。

支持

Auth3身份平台的客户可以通过我们的网站上的官方渠道获取支持。出于安全原因，我们将无法通过问题跟踪器处理客户请求。

许可证

请阅读LICENSE。

示例代码

以下是完整的示例代码，展示了如何使用auth3_login插件进行登录和注销。

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是您的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth3 Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Auth3 Demo'),
    );
  }
}

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

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Map<String, dynamic> _profile = {};

  void initState() {
    super.initState();
    // 验证是否可以恢复任何现有的会话。
    auth3.restore().then((restored) {
      if (restored) {
        // 注意：令牌可能已过期或被撤销。
        setState(() {
          _profile = auth3.getProfile();
        });
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              auth3.isAuthenticated
                  ? '欢迎 ${_profile['email']}'
                  : '未登录，请点击按钮登录',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (auth3.isAuthenticated) {
            // 登出
            auth3.logout().then((_) {
              // 触发此小部件的更新，因为我们已完成登出，并希望更改状态。
              // 在实际应用中，您可能想导航到另一个屏幕。
              setState(() {});
            }).catchError((err) {
              print('错误: $err');
            });
          } else {
            // 登录
            auth3.login().then(
                // 触发此小部件的更新，因为我们已完成登录，并希望更改状态。
                // 在实际应用中，您可能想导航到另一个屏幕。
                (_) {
              setState(() {
                _profile = auth3.getProfile();
              });
            }).catchError((err) {
              print('错误: $err');
            });
          }
        },
        tooltip: auth3.isAuthenticated ? '登出' : '登录',
        child: auth3.isAuthenticated ? Icon(Icons.logout) : Icon(Icons.login),
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用auth3_login插件进行身份验证的代码示例。auth3_login是一个第三方Flutter插件，用于实现与Auth3服务的集成，从而提供便捷的身份验证功能。

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

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

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

接下来，我们编写一些Flutter代码来演示如何使用auth3_login插件。

主程序文件 (main.dart)

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

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

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

class Auth3LoginScreen extends StatefulWidget {
  @override
  _Auth3LoginScreenState createState() => _Auth3LoginScreenState();
}

class _Auth3LoginScreenState extends State<Auth3LoginScreen> {
  Auth3LoginController? _auth3Controller;
  late String _result;

  @override
  void initState() {
    super.initState();
    _result = 'Waiting for login...';

    // 初始化Auth3LoginController
    _auth3Controller = Auth3LoginController(
      clientId: 'YOUR_AUTH3_CLIENT_ID',  // 替换为你的Auth3客户端ID
      redirectUri: 'YOUR_REDIRECT_URI',  // 替换为你的重定向URI
      scope: ['openid', 'profile', 'email'],  // 你需要的权限范围
    );

    _auth3Controller!.listen((event) {
      if (event is Auth3LoginSuccess) {
        setState(() {
          _result = 'Login successful! User info: ${event.userInfo}';
        });
      } else if (event is Auth3LoginError) {
        setState(() {
          _result = 'Login failed: ${event.message}';
        });
      } else if (event is Auth3LoginCancelled) {
        setState(() {
          _result = 'Login cancelled by user.';
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Auth3 Login Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                if (_auth3Controller!.isLoggedIn) {
                  // 如果已经登录，则登出
                  await _auth3Controller!.logout();
                } else {
                  // 如果未登录，则启动登录流程
                  await _auth3Controller!.login();
                }
              },
              child: Text(_auth3Controller!.isLoggedIn ? 'Logout' : 'Login'),
            ),
            SizedBox(height: 20),
            Text(_result),
          ],
        ),
      ),
    );
  }

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

注意事项

  1. 替换占位符：在代码中，YOUR_AUTH3_CLIENT_ID和YOUR_REDIRECT_URI需要替换为你实际的Auth3客户端ID和重定向URI。
  2. 权限范围：在scope列表中，你可以根据需要添加或移除权限。
  3. 处理登录状态：Auth3LoginController提供了监听登录事件的方法，你可以根据这些事件来更新UI或执行其他逻辑。

运行项目

确保你已经配置好Flutter开发环境，然后运行flutter run来启动项目。在模拟器或真机上，你应该能够看到一个按钮，点击它可以启动Auth3的登录流程。

这个示例展示了基本的登录和登出功能，以及如何处理登录成功、失败和取消的情况。根据实际需求，你可以进一步扩展和自定义这个示例。

回到顶部