Flutter开发WP WooCommerce应用：登录与WebView数据同步问题

一、利用API实现Flutter端身份验证 #

基于WooCommerce REST API结合JWT插件是最适合前端原生登录的方案，步骤如下：

1. WordPress端配置

   • 安装并启用JWT Authentication for WP REST API插件
   • 在wp-config.php中添加JWT密钥（需随机生成安全字符串）：

     define('JWT_AUTH_SECRET_KEY', 'your-random-secure-key');
     define('JWT_AUTH_CORS_ENABLE', true);
     

2. Flutter端登录实现
   发送POST请求到JWT登录接口，获取认证Token并本地存储：

   import 'dart:convert';
   import 'package:http/http.dart' as http;
   import 'package:shared_preferences/shared_preferences.dart';
   
   Future<bool> login(String username, String password) async {
     final response = await http.post(
       Uri.parse('https://your-site.com/wp-json/jwt-auth/v1/token'),
       body: {
         'username': username,
         'password': password,
       },
     );
   
     if (response.statusCode == 200) {
       final data = jsonDecode(response.body);
       final prefs = await SharedPreferences.getInstance();
       await prefs.setString('jwt_token', data['token']);
       await prefs.setInt('user_id', data['user_id']);
       return true;
     }
     return false;
   }
   

3. API请求身份验证
   后续调用WooCommerce API时，在请求头携带JWT Token：

   Future<http.Response> fetchOrders() async {
     final prefs = await SharedPreferences.getInstance();
     String token = prefs.getString('jwt_token')!;
     return await http.get(
       Uri.parse('https://your-site.com/wp-json/wc/v3/orders'),
       headers: {
         'Authorization': 'Bearer $token',
         'Content-Type': 'application/json',
       },
     );
   }
   

4. 注册实现
   调用WooCommerce顾客注册API完成原生注册：

   Future<bool> register(String email, String password, String firstName) async {
     final response = await http.post(
       Uri.parse('https://your-site.com/wp-json/wc/v3/customers'),
       headers: {'Content-Type': 'application/json'},
       body: jsonEncode({
         'email': email,
         'password': password,
         'first_name': firstName,
       }),
     );
     return response.statusCode == 201;
   }
   

二、WebView与Flutter端登录状态同步（非Cookie注入方案） #

方案1：自定义一次性登录链接（最贴近原生登录体验） #

通过WordPress自定义API生成安全的一次性登录链接，WebView加载后自动完成登录：

1. WordPress端添加自定义API与登录处理逻辑
   在主题functions.php中添加代码：

   // 注册自动登录API
   add_action('rest_api_init', function () {
       register_rest_route('custom/v1', '/auto-login', [
           'methods' => 'POST',
           'callback' => 'generate_auto_login_url',
           'permission_callback' => function ($request) {
               $token = str_replace('Bearer ', '', $request->get_header('Authorization'));
               $user = JWT_Auth::validate_token($token);
               return is_object($user);
           }
       ]);
   });
   
   // 生成一次性登录链接
   function generate_auto_login_url($request) {
       $token = str_replace('Bearer ', '', $request->get_header('Authorization'));
       $user = JWT_Auth::validate_token($token);
       if (!$user) return new WP_Error('invalid_token', '无效Token', ['status' => 401]);
   
       $nonce = wp_create_nonce('auto-login-' . $user->ID);
       $redirect_url = home_url('/my-account/');
       $auto_login_url = add_query_arg([
           'user_id' => $user->ID,
           'nonce' => $nonce,
           'redirect' => $redirect_url
       ], home_url('/auto-login-handler/'));
   
       return ['login_url' => $auto_login_url];
   }
   
   // 处理自动登录请求
   add_action('template_redirect', function () {
       if (!isset($_GET['user_id'], $_GET['nonce'], $_GET['redirect'])) return;
   
       $user_id = intval($_GET['user_id']);
       if (!wp_verify_nonce($_GET['nonce'], 'auto-login-' . $user_id)) {
           wp_redirect(home_url('/'));
           exit;
       }
   
       $user = get_user_by('id', $user_id);
       if ($user) {
           wp_set_auth_cookie($user_id, true); // 持久化登录状态
           wp_redirect($_GET['redirect']);
           exit;
       }
       wp_redirect(home_url('/'));
       exit;
   });
   

2. Flutter端调用API并加载WebView

   import 'package:webview_flutter/webview_flutter.dart';
   import 'package:http/http.dart' as http;
   import 'package:shared_preferences/shared_preferences.dart';
   
   Future<void> loadAuthenticatedWebView() async {
     final prefs = await SharedPreferences.getInstance();
     String token = prefs.getString('jwt_token')!;
   
     // 调用自定义API获取登录链接
     final response = await http.post(
       Uri.parse('https://your-site.com/wp-json/custom/v1/auto-login'),
       headers: {'Authorization': 'Bearer $token'},
     );
   
     if (response.statusCode == 200) {
       final data = jsonDecode(response.body);
       String loginUrl = data['login_url'];
   
       // 加载WebView，自动完成登录
       WebView(
         initialUrl: loginUrl,
         javascriptMode: JavascriptMode.unrestricted,
       );
     }
   }
   

方案2：WebView会话同步（基于JWT Token传递） #

在WebView加载时，通过JavaScript将Flutter端的JWT Token注入页面，让WordPress前端通过Token验证用户身份：

1. WordPress前端添加Token验证逻辑
   在主题functions.php中添加脚本：

   add_action('wp_enqueue_scripts', function () {
       wp_add_inline_script('jquery', '
           window.addEventListener("message", function(e) {
               if (e.data.action === "set_jwt_token") {
                   localStorage.setItem("jwt_token", e.data.token);
                   // 触发页面重新验证身份
                   window.location.reload();
               }
           });
       ');
   });
   
   // 验证Token并设置登录状态
   add_action('template_redirect', function () {
       if (!is_user_logged_in() && isset($_COOKIE['jwt_token'])) {
           $token = $_COOKIE['jwt_token'];
           $user = JWT_Auth::validate_token($token);
           if (is_object($user)) {
               wp_set_auth_cookie($user->ID, true);
           }
       }
   });
   

2. Flutter端向WebView注入Token

   WebView(
     initialUrl: 'https://your-site.com/my-account/',
     javascriptMode: JavascriptMode.unrestricted,
     onWebViewCreated: (controller) async {
       final prefs = await SharedPreferences.getInstance();
       String token = prefs.getString('jwt_token')!;
       // 通过JS注入Token
       controller.runJavascript('''
           window.postMessage({action: "set_jwt_token", token: "$token"}, "*");
       ''');
     },
   );
   

关键注意事项 #

• 所有API请求必须使用HTTPS，避免Token或敏感数据泄露
• 处理Token过期逻辑：当WebView跳转至登录页时，自动切换到Flutter原生登录界面
• 自定义API需严格验证权限，防止未授权访问

内容的提问来源于stack exchange，提问作者user10478331