Flutter学校认证插件schoolar_auth的使用

本指南将指导你如何在Flutter项目中实现Schoolar Auth。Schoolar Auth是一个用于处理身份验证的Flutter库，具有最少的配置需求，支持功能包括安全的API密钥验证、可自定义的用户界面（UI）以及类似OAuth的身份验证流程。

前提条件

确保你已经设置了Flutter环境，并将schoolar_auth库添加到你的项目中。如果你还没有安装它，请遵循以下步骤：

步骤1：安装依赖

在你的pubspec.yaml文件中添加以下内容：

dependencies:
  schoolar_auth: ^1.0.0
  flutter_inappwebview: ^6.0.0
  flutter_svg: ^1.0.0
  flutter_dotenv: ^5.0.2

运行flutter pub get以安装这些依赖项。

步骤2：基本身份验证流程

本节将演示如何使用schoolar_auth设置一个登录页面。我们将通过一个LoginPage组件来引导用户通过点击“继续使用Schoolar”按钮进行身份验证。

代码实现

1. 创建LoginPage组件

在LoginPage组件中初始化schoolar_auth，并在状态管理系统中处理身份验证（State<LoginPage>）。以下是实现结构的代码：

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

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // 步骤1：声明schoolarAuth对象
  late final SchoolarAuth schoolarAuth;

  @override
  void initState() {
    super.initState();
    
    // 步骤2：用API密钥和回调初始化schoolarAuth
    schoolarAuth = SchoolarAuth(
      context: context,
      apiPublicKey: 'your-public-key',   // 替换为你的公钥
      apiSecretKey: 'your-secret-key',   // 替换为你的私钥
      onSuccess: _onAuthSuccess,         // 身份验证成功回调
      onError: _onAuthError,             // 错误回调
      onCancel: _onAuthCancel            // 取消回调
    );
  }

  // 步骤3：定义身份验证回调
  void _onAuthSuccess() {
    // 处理成功的身份验证
    print('身份验证成功');
    // 导航到下一个屏幕或执行必要的操作
  }

  void _onAuthError(dynamic error) {
    // 处理身份验证错误
    print('身份验证错误: $error');
  }

  void _onAuthCancel() {
    // 处理用户取消身份验证
    print('身份验证已取消');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 步骤4：添加登录按钮
            ElevatedButton(
              onPressed: () => schoolarAuth.authenticate(), // 触发身份验证流程
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.deepPurple,        // 按钮颜色
                padding: const EdgeInsets.symmetric(
                  horizontal: 30, 
                  vertical: 20,
                ),
              ),
              child: const Text(
                '继续使用Schoolar',                  // 按钮标签
                style: TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

1. SchoolarAuth初始化：

   • apiPublicKey 和 apiSecretKey：替换为你从身份验证提供商处获取的实际公钥和私钥。
   • onSuccess：当身份验证成功时触发的回调。
   • onError：当身份验证过程中发生错误时触发的回调。
   • onCancel：当用户取消身份验证流程时触发的回调。

2. UI：

   • 使用列布局创建了一个简单的UI，水平和垂直居中显示在屏幕上。添加了一个ElevatedButton按钮来触发身份验证过程，通过调用schoolarAuth.authenticate()。

3. 回调：

   • _onAuthSuccess：当用户成功登录时触发此函数。你可以在这里实现导航或其他操作。
   • _onAuthError：处理身份验证错误，如无效凭证或网络问题。
   • _onAuthCancel：处理用户取消身份验证的情况。

步骤3：运行应用程序

要运行应用程序，请使用以下命令：

flutter run

启动后，应用程序将显示登录按钮。点击该按钮将启动身份验证流程，并根据成功或失败情况触发相应的回调。

自定义

1. 自定义按钮样式

你可以进一步自定义按钮以匹配应用的设计，例如：

style: ElevatedButton.styleFrom(
  backgroundColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
  padding: const EdgeInsets.all(16),
),

2. 处理身份验证状态

在实际的应用程序中，你可能会使用像Provider、Bloc或Riverpod这样的状态管理解决方案来管理身份验证状态。例如：

onSuccess: () {
  setState(() {
    isAuthenticated = true;
  });
},