Flutter Django认证扩展插件pbp_django_auth_extended的使用

pbp_django_auth_extended

这是一个从pbp_django_auth派生的Flutter包。它帮助学生在Flutter应用程序中实现来自Django Web服务的身份验证。此派生（扩展）包添加了pbp_django_auth包中不存在的功能。

获取开始

Django的部分

要使用该包，你需要在你的Django项目中创建一个异步JavaScript（AJAX）登录视图。

1. 运行 python manage.py startapp authentication 创建一个新的应用模块来处理AJAX登录。

2. 在settings.py中添加 "authentication" 到 INSTALLED_APPS。

3. 运行 pip install django-cors-headers 安装所需的库。

4. 在settings.py中添加 "corsheaders" 到 INSTALLED_APPS。

5. 在settings.py中添加 "corsheaders.middleware.CorsMiddleware" 到 MIDDLEWARE。

6. 在settings.py中创建一个新的变量 CORS_ALLOW_ALL_ORIGINS 并设置其值为 True (CORS_ALLOW_ALL_ORIGINS=True)。

7. 在settings.py中创建一个新的变量 CORS_ALLOW_CREDENTIALS 并设置其值为 True (CORS_ALLOW_CREDENTIALS=True)。

8. 在settings.py中创建以下变量：

   CSRF_COOKIE_SECURE = True
   SESSION_COOKIE_SECURE = True
   CSRF_COOKIE_SAMESITE = 'None'
   SESSION_COOKIE_SAMESITE = 'None'
   

9. 在authentication/views.py中创建一个登录视图方法。 示例登录视图

   from django.shortcuts import render
   from django.contrib.auth import authenticate, login as auth_login
   from django.http import JsonResponse
   from django.views.decorators.csrf import csrf_exempt
   
   [@csrf_exempt](/user/csrf_exempt)
   def login(request):
       username = request.POST['username']
       password = request.POST['password']
       user = authenticate(username=username, password=password)
       if user is not None:
           if user.is_active:
               auth_login(request, user)
               # 跳转到成功页面
               return JsonResponse({
                 "status": True,
                 "message": "成功登录！"
                 # 如果你想传递数据到Flutter，可以在这里插入额外的数据
               }, status=200)
           else:
               return JsonResponse({
                 "status": False,
                 "message": "登录失败，账户已禁用。"
               }, status=401)
   
       else:
           return JsonResponse({
             "status": False,
             "message": "登录失败，请检查您的用户名/密码。"
           }, status=401)
   

   此视图将为用户设置cookie，并允许带有@login_required装饰器的认证请求。

10. 在authentication/views.py中创建一个检查是否匿名的视图方法。

    def check_is_anonymous(request):
      print(request.user.is_anonymous)
      return JsonResponse({
          "anonymous": request.user.is_anonymous
      }, status=200)
    

11. 在authentication/urls.py中添加URL。

    path('is-anonymous/', check_is_anonymous, name='check_is_anonymous'),
    

Flutter的部分

要使用该包，修改应用程序根部件，通过使用Provider向所有子部件提供CookieRequest库。

例如，如果以前的应用初始化代码如下：

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter App',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: const MyHomePage(title: 'Flutter App'),
            routes: {
                "/login": (BuildContext context) => const LoginPage(),
            },
        );
    }
}

将其更改为：

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return Provider(
            create: (_) {
                CookieRequest request = CookieRequest(baseUrl: '<DJANGO BASE URL>'); // 不要在此处使用尾随'/'
                return request;
            },
            child: MaterialApp(
                title: 'Flutter App',
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                ),
                home: const MyHomePage(title: 'Flutter App'),
                routes: {
                    "/login": (BuildContext context) => const LoginPage(),
                },
            ),
        );
    }
}

这将创建一个新的Provider对象，将CookieRequest实例与应用程序中的所有组件共享。

使用方法

要将该包用于您的项目，请遵循以下步骤。

1. 导入Provider库和该包到组件。

   import 'package:provider/provider.dart';
   import 'package:pbp_django_auth/pbp_django_auth.dart';
   ...
   

2. 在Widget的build(BuildContext context)函数中调用context.watch实例化request对象。 示例

   class _LoginPageState extends State<LoginPage> {
     final _loginFormKey = GlobalKey<FormState>();
     bool isPasswordVisible = false;
     void togglePasswordView() {
       setState(() {
         isPasswordVisible = !isPasswordVisible;
       });
     }
   
     String username = "";
     String password1 = "";
   
     @override
     Widget build(BuildContext context) {
       final request = context.watch<CookieRequest>();
       // 下面是其余的widget代码
       ...
     }
   }
   

3. 使用包进行登录时，调用request.login(url, data)方法。

   // 'username' 和 'password' 应该是用户登录表单的值。
   final response = await request.login("/auth/login", {
     'username': username,
     'password': password1,
   });
   if (request.loggedIn) {
     // 登录成功的代码将运行此处。
   } else {
     // 登录失败（错误的用户名/密码）的代码将运行此处。
   }
   

4. 使用库获取或插入数据时，调用request.get(url)或request.post(url, data)方法。

   /* GET 请求示例： */
   final response = await request.get('<PATH TO ACCESS (DO NOT INCLUDE BASE URL)>');
   // 返回的响应将是一个包含JsonResponse键的Map对象
   
   /* POST 请求示例： */
   final response = await request.post('<PATH TO ACCESS (DO NOT INCLUDE BASE URL)>', {
     "data1": "这是示例数据",
     "data2": "这是示例数据2",
   });
   // data 参数应为Django表单的键。
   // 返回的响应将是一个包含JsonResponse键的Map对象。