如何在Angular 4中生成及获取WordPress用户创建所需的Bearer Token

1. 如何生成用于创建WordPress用户的Token？ #

首先得确保你的WordPress站点先配置好JWT认证的基础环境：

• 安装并启用 JWT Authentication for WP REST API 插件
• 在wp-config.php里添加以下配置（记得把密钥替换成你自己的，密钥可以从WordPress后台「工具>站点健康>信息>密钥」生成）：

  define('JWT_AUTH_SECRET_KEY', 'your-custom-secret-key-here');
  define('JWT_AUTH_CORS_ENABLE', true);
  

在Angular 4中，你需要通过POST请求访问WordPress的JWT Token端点wp-json/jwt-auth/v1/token来获取Token——注意这个请求必须携带WordPress管理员账号的用户名和密码，因为创建新用户需要管理员权限的Token才行。

2. 代码中token值的获取方式 #

你已经写了一部分请求代码，咱们把它补全，先拿到Token再用它调用创建用户的接口：

完整示例代码 #

// 先封装一个获取认证Token的方法
getWpAuthToken(): Promise<string> {
  const adminAuth = {
    username: '你的WordPress管理员用户名',
    password: '你的WordPress管理员密码'
  };

  return this.http.post('https://website.com/wp-json/jwt-auth/v1/token', adminAuth)
    .toPromise()
    .then(response => {
      // 从响应里提取token字段
      const token = response['token'];
      // 可以把token存在本地存储，方便后续复用
      localStorage.setItem('wp-admin-token', token);
      return token;
    })
    .catch(error => {
      console.error('获取Token失败:', error);
      throw error;
    });
}

// 完善你的用户创建方法
signUpForm() {
  // 先获取Token，再执行创建用户操作
  this.getWpAuthToken()
    .then(token => {
      const headers = new Headers({ 
        'Authorization': 'Bearer ' + token, // 注意Bearer后面必须加空格，这是JWT认证的格式要求
        'Content-Type': 'application/json'
      });
      return this.wpApiUsers.create(this.newUser, { headers: headers })
        .toPromise();
    })
    .then(response => {
      console.log('用户创建成功:', response);
    })
    .catch(error => {
      console.error('用户创建失败:', error);
    });
}

几个关键提醒 #

• 调用Token接口必须用管理员账号，普通用户没有创建新用户的权限
• 你的原代码里Authorization头少了Bearer后面的空格，这会直接导致认证失败，一定要注意
• 可以把获取到的Token存在localStorage或者Angular的全局服务里，不用每次创建用户都重新请求Token
• 确保this.newUser的结构符合WordPress用户接口要求，至少要包含username、email、password这些必填字段

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