Flutter认证管理插件angel3_auth的使用

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

Flutter认证管理插件angel3_auth的使用

Angel3 Authentication 是一个功能齐全的认证插件,适用于 Angel3 框架。它受到 Passport 的启发,并提供了多种认证策略。

Bundled Strategies

  • Local (支持和不支持 Basic Auth)
  • 其他策略(如 Twitter, Google, OAuth2 等)可以在 pub 上找到。

示例代码

以下是一个完整的示例,展示如何在你的项目中使用 angel3_auth 插件:

配置服务器

首先,你需要配置服务器以支持认证:

import 'dart:async';
import 'package:angel3_auth/angel3_auth.dart';
import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_framework/http.dart';

void main() async {
  var app = Angel();
  var auth = AngelAuth<User>(
      serializer: (user) => user.id ?? '',
      deserializer: (id) => fetchAUserByIdSomehow(id));

  // 中间件解码 JWT 并注入用户对象
  await app.configure(auth.configureServer);

  auth.strategies['local'] = LocalAuthStrategy((username, password) {
    // 通过某种方式检索用户...
    // 如果认证成功,返回 User 对象。
    //
    // 否则,返回 `null`。
    return null;
  });

  app.post('/auth/local', auth.authenticate('local'));

  var http = AngelHttp(app);
  await http.startServer('127.0.0.1', 3000);

  print('Listening at http://127.0.0.1:3000');
}

class User {
  String? id, username, password;
}

Future<User> fetchAUserByIdSomehow(String id) async {
  // 通过某种方式获取用户...
  throw UnimplementedError();
}

处理认证请求

你可以为不同的认证策略设置路由处理程序。例如,使用本地认证:

app.post('/local', auth.authenticate('local'));

使用多个认证策略

你可以使用多个认证策略,每个策略按顺序运行。如果一个策略成功,则循环结束;如果所有策略都失败,则抛出 401 Not Authenticated 错误。

var chainedHandler = auth.authenticate(
  ['basic', 'facebook'],
  authOptions
);

默认认证回调

对于单页应用(SPA),通常需要在一个单独的窗口中打开 OAuth 登录端点。angel3_client 提供了一个方便的功能来实现这一点:

configureServer(Angel app) async {
  var handler = auth.authenticate(
    'facebook',
    AngelAuthOptions(callback: confirmPopupAuthentication()));
  app.get('/auth/facebook', handler);
  
  var chainedHandler = auth.authenticate(
    ['basic','facebook'],
    authOptions
  );
}

使用 angel3_client 监听认证结果

你可以使用 angel3_client 来监听从弹出窗口返回的 JWT:

app.authenticateViaPopup('/auth/google').listen((jwt) {
  // 处理 JWT
});

以上是 angel3_auth 插件的基本用法和示例。更多详细信息可以参考 User Guide


这个 Markdown 文档包含了如何在 Flutter 应用中使用 `angel3_auth` 插件进行认证管理的完整示例和说明。希望对你有所帮助!

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

1 回复

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


当然,关于Flutter中angel3_auth插件的使用,以下是一个基本的代码案例,展示如何集成和使用该插件进行认证管理。请注意,angel3_auth是一个比较高级的库,通常用于处理复杂的认证逻辑,因此在真实应用中可能需要更多的配置和调整。

首先,确保你的Flutter项目已经添加了对angel3_auth及其依赖库的引用。在pubspec.yaml文件中添加以下依赖(请注意,具体的版本号可能需要根据实际情况调整):

dependencies:
  flutter:
    sdk: flutter
  angel3_framework: ^x.y.z  # 替换为实际版本号
  angel3_auth: ^x.y.z  # 替换为实际版本号
  # 可能还需要其他依赖,如 body_parser, session 等

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

接下来,以下是一个基本的示例代码,展示如何在Flutter应用中使用angel3_auth进行认证管理。这里假设你已经有一个Flutter应用,并且你正在创建一个简单的服务器端认证服务。

服务器端代码(Dart)

首先,设置Angel服务器并配置认证中间件:

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_auth/angel3_auth.dart';
import 'package:body_parser/body_parser.dart';
import 'package:angel3_session/angel3_session.dart';

void main() async {
  var app = Angel();

  // 配置 body 解析中间件
  app.use(bodyParser.json());

  // 配置会话中间件
  var sessions = SessionService();
  app.use('/auth', sessions.middleware);

  // 配置认证服务
  var auth = AuthService(secret: 'your-secret-key');
  app.configure(auth.configureServer);

  // 注册用户(示例)
  auth.serializers.add(UserSerializer<Map>());

  // 自定义登录逻辑
  app.post('/login', auth.authenticate(
    basic: (BasicAuthCredentials credentials) async {
      // 这里应该查询数据库验证用户
      var user = {
        'id': '1',
        'username': credentials.username,
        'password': 'hashed-password', // 注意:这里应该是哈希后的密码
      };

      // 假设用户名和密码匹配
      if (user['username'] == credentials.username && 
          // 在实际中,你应该验证哈希后的密码
          user['password'] == credentials.password) {
        return user;
      }
      throw ForbiddenError('Invalid credentials');
    },
  ));

  // 受保护的路由
  app.get('/protected', auth.authorize(), (req, res) async {
    res.write('Hello, ${req.user?.['username']}!');
  });

  // 启动服务器
  await app.listen(3000);
  print('Server is running on http://localhost:3000');
}

客户端代码(Flutter)

在Flutter客户端,你可以使用http包来与服务器进行通信。以下是一个简单的登录和访问受保护资源的示例:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

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

class AuthDemo extends StatefulWidget {
  @override
  _AuthDemoState createState() => _AuthDemoState();
}

class _AuthDemoState extends State<AuthDemo> {
  final String _baseUrl = 'http://localhost:3000';
  String _token;

  Future<void> _login(String username, String password) async {
    var url = Uri.parse('$_baseUrl/login');
    var response = await http.post(
      url,
      headers: <String, String>{
        'Content-Type': 'application/json',
        'Authorization': 'Basic ${base64Encode(utf8.encode('$username:$password'))}',
      },
    );

    if (response.statusCode == 200) {
      // 在实际中,你应该从响应中提取token并保存
      // 这里假设token在响应体中,且格式为 {"token": "your-token"}
      var body = jsonDecode(response.body);
      setState(() {
        _token = body['token']; // 注意:这个示例中并没有实际返回token
      });
      print('Login successful');
    } else {
      throw Exception('Failed to login');
    }
  }

  Future<void> _fetchProtectedResource() async {
    var url = Uri.parse('$_baseUrl/protected');
    var response = await http.get(
      url,
      headers: <String, String>{
        'Authorization': 'Bearer $_token', // 使用之前获取的token
      },
    );

    if (response.statusCode == 200) {
      print('Protected resource: ${response.body}');
    } else {
      throw Exception('Failed to fetch protected resource');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Angel3 Auth Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => _login('username', 'password'),
              child: Text('Login'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _token != null ? () => _fetchProtectedResource() : null,
              child: Text('Fetch Protected Resource'),
            ),
          ],
        ),
      ),
    );
  }
}

请注意,上面的客户端代码示例中并没有实际从服务器获取token,因为angel3_auth的基本认证示例并没有返回token。在实际应用中,你可能需要使用JWT(JSON Web Tokens)或其他机制来获取和存储token。

此外,上面的代码仅用于演示目的,并没有处理错误、异常或边缘情况。在实际应用中,你应该添加适当的错误处理和用户反馈机制。

回到顶部