如何从 Angular 创建一个 json Web 令牌？答案

【问题标题】：How to create a json web token from angular?如何从 Angular 创建一个 json Web 令牌？
【发布时间】：2021-11-02 16:37:10
【问题描述】：

我的问题是，我可以从 angular 创建一个 jwt，有一个 angular 库允许我这样做，目前我正在使用 @auth0/angular-jwt 作为库并根据我在 @ 中调查的内容987654321@，唯一存在的函数是：

const decodedToken = helper.decodeToken(myRawToken);
const expirationDate = helper.getTokenExpirationDate(myRawToken);
const isExpired = helper.isTokenExpired(myRawToken);

我在jsonwebtoken 中找不到与jwt.sign(...) 相似的内容。所以我想知道是否有一个库可以让我这样做，如果唯一的一个是jsonwebtoken，我该如何在角度实现它？

【问题讨论】：

JWT 不应该在服务器上生成吗……？为什么要在客户端执行此操作？？
@esqew 将我不想从客户端看到的敏感数据发送到服务器，例如登录时的电子邮件和密码
您不想将登录详细信息发送到服务器？你怎么可能在那个方案中进行身份验证？

标签： angular jwt

【解决方案1】：

来来回回后，我意识到前面没有必要生成令牌，任何知识最少的人都可以破译并使用信息，尽管如此我还是研究了仅使用@987654321生成签名令牌的过程@图书馆。

首先是安装依赖：

npm i --save crypto-js @types/crypto-js

以下将创建一个将我们的信息转换为base64的方法：

base64url(source: any) {
    let encodedSource = CryptoJS.enc.Base64.stringify(source);

    encodedSource = encodedSource.replace(/=+$/, '');

    encodedSource = encodedSource.replace(/\+/g, '-');
    encodedSource = encodedSource.replace(/\//g, '_');

    return encodedSource;
  }

然后我将不得不创建生成未签名令牌的方法：

  encodeToken(payload:any) {
    var header = {
      "alg": "HS256",
      "typ": "JWT"
    };

    var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
    var encodedHeader = this.base64url(stringifiedHeader);

    var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(payload));
    var encodedData = this.base64url(stringifiedData);

    var token = encodedHeader + "." + encodedData;
  }

最后是使用我们的密钥对令牌进行签名的方法：

  signToken(payload:any,key:string) {
    var secret = key;
    let token:any = this.encodeToken(payload);

    var signature:any = CryptoJS.HmacSHA256(token, secret);
    signature = this.base64url(signature);

    var signedToken = token + "." + signature;
    return signedToken;
  }

为了调用它，我只使用 signToken() 作为第一个参数发送的要隐藏的对象，第二个是签署令牌的密钥。

【讨论】：

【解决方案2】：

请仔细阅读 JWT 是如何工作的，特别是如何实现安全性以及在什么条件下。

在浏览器上生成 JWT 令牌没有任何意义，因为这意味着拥有用于在浏览器中某处签名的私有密钥（JS 代码），因此任何能够创建令牌的人都可以超级轻松地访问它自己处理任何数据，您的服务器会信任它们。

在您的情况下，登录时的电子邮件和密码必须按原样发送，但要通过 HTTPS 连接。

【讨论】：

【解决方案3】：

如果用户在您的应用程序中写入密码，则向他们隐藏密码是没有意义的（很可能您会在部署时处理此问题，SSL 以您几乎感觉不到的方式加密用户和服务器之间的所有数据）。

基本上，您从这种方法中几乎一无所获，相反，您应该创建密钥安全的 jwt 服务器端。

【讨论】：