基于WordPress后端的React应用Google OAuth认证实现方案咨询

核心思路 #

React前端拿到Google OAuth的ID Token后，将其通过请求头的Authorization字段传递给WordPress后端，后端先验证Token的合法性，再返回对应数据。

第一步：WordPress后端配置（验证Token+开放API） #

1. 注册自定义API端点并添加Token验证逻辑
   在WordPress的functions.php或自定义插件中添加以下代码，实现Token验证和受保护API的注册：

   // 注册自定义API路由
   add_action('rest_api_init', function () {
       register_rest_route('custom/v1', '/protected-resource', [
           'methods' => ['GET', 'POST'],
           'callback' => 'handle_protected_request',
           'permission_callback' => 'validate_google_oauth_token',
       ]);
   });
   
   // Google Token验证逻辑
   function validate_google_oauth_token() {
       // 从请求头提取Token
       $auth_header = $_SERVER['HTTP_AUTHORIZATION'] ?? '';
       if (empty($auth_header) || !str_starts_with($auth_header, 'Bearer ')) {
           return new WP_Error('missing_token', '未提供有效Token', ['status' => 401]);
       }
   
       $google_token = substr($auth_header, 7);
       // 调用Google官方验证端点校验Token
       $verify_response = wp_remote_get("https://oauth2.googleapis.com/tokeninfo?id_token=$google_token");
   
       if (is_wp_error($verify_response)) {
           return new WP_Error('verify_failed', 'Token验证失败', ['status' => 401]);
       }
   
       $token_data = json_decode(wp_remote_retrieve_body($verify_response), true);
       // 额外校验：确保Token的受众是你的Google应用ID（防止滥用）
       if ($token_data['aud'] !== 'YOUR_GOOGLE_CLIENT_ID') {
           return new WP_Error('invalid_audience', 'Token受众不匹配', ['status' => 403]);
       }
   
       // 校验用户是否存在于WordPress系统中
       $wp_user = get_user_by('email', $token_data['email']);
       if (!$wp_user) {
           return new WP_Error('user_not_found', '用户未注册', ['status' => 403]);
       }
   
       // 验证通过，设置当前用户上下文
       wp_set_current_user($wp_user->ID);
       return true;
   }
   
   // API回调函数：处理业务逻辑
   function handle_protected_request($request) {
       // 这里可以根据当前用户（wp_get_current_user()）返回对应数据
       return [
           'success' => true,
           'data' => '仅Google认证用户可访问的数据',
           'user_email' => wp_get_current_user()->user_email
       ];
   }
   

2. 配置CORS（跨域请求支持）
   如果React前端和WordPress不在同一域名，需在WordPress中添加CORS配置，允许前端域名的请求：

   add_action('rest_api_init', function () {
       add_filter('rest_pre_serve_request', function ($_) {
           header('Access-Control-Allow-Origin: https://your-react-app-domain.com');
           header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
           header('Access-Control-Allow-Headers: Authorization, Content-Type');
           header('Access-Control-Allow-Credentials: true');
           return $_;
       });
   });
   

第二步：React前端发起请求 #

在React中，拿到Google OAuth返回的ID Token后，将其放入Authorization请求头中发起API调用：

示例（使用Fetch API）

const fetchProtectedData = async (googleIdToken) => {
    try {
        const response = await fetch('https://your-wordpress-site.com/wp-json/custom/v1/protected-resource', {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${googleIdToken}`,
                'Content-Type': 'application/json'
            }
        });

        if (!response.ok) {
            const errorDetails = await response.json();
            throw new Error(errorDetails.message || '请求失败');
        }

        const result = await response.json();
        console.log('获取到的受保护数据:', result);
        return result;
    } catch (error) {
        console.error('API请求错误:', error);
        // 这里可以处理Token过期、用户不存在等错误场景
    }
};

// 调用示例（假设已通过Google OAuth获取到id_token）
// fetchProtectedData(user.googleIdToken);

关键注意事项 #

• Token过期处理：Google ID Token默认有效期为1小时，前端需监听Token过期事件，调用Google OAuth的刷新接口获取新Token。
• HTTPS强制：所有API请求必须使用HTTPS，避免Token在传输过程中被劫持。
• 权限控制：验证Token后，务必结合WordPress的用户权限体系，确保用户只能访问其有权限的数据。

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