0

我正在尝试使用 JWT 身份验证方式将 ably.io 与 Angular 和 Azure Functions 一起使用，因为它是安全的，但我在配置它的角度方面时遇到了问题。该用例用于实时拍卖网站实时更新出价。没有针对此的特定角度教程，因此我试图将其拼凑起来。还有这段代码

          realtime.connection.once('connected', function () {
            console.log('Client connected to Ably using JWT')
            alert("Client successfully connected Ably using JWT auth")
          });

从不发出警报，所以我认为它工作不正常。我曾经让它在我没有使用 JWT 的地方工作，但是在客户端的 API 密钥在这样的组件中

let api = "<api key>";
let options: Ably.Types.ClientOptions = { key: api };
let client = new Ably.Realtime(options); /* inferred type Ably.Realtime */
let channel = client.channels.get(
  "auctions"
);

我可以订阅该频道并通过他们的 ID 相应地更新拍卖ngOnInit()

    channel.subscribe(message => {
      const auction = this.posts.find(action => {
        return action.id === message.data.auctionId;
      });

      if (auction) {
        auction.currentBid = message.data.lastBid;
      }
    });

但我需要为 JWT 切换这个逻辑，并以某种方式将该 JWT 令牌输入到不同的组件中。

Ably.io JWT 教程参考

我将以下内容放入我的角度登录服务中

  login(email: string, password: string) {


    const authData: AuthDataLogin = { email: email, password: password };
    return this.http
      .post<{
        token: string;
        expiresIn: number;
        userId: string;
      }>(environment.azure_function_url + "/POST-Login", authData)
      .pipe(takeUntil(this.destroy)).subscribe(response => {
        //JWT login token. Not Ably JWT Token
        const token = response.token; 
        this.token = token;




        if (token) {

          console.log('Fetching JWT token from auth server')

          var realtime = new Ably.Realtime({
            authUrl: "http://localhost:7071/api/AblyAuth"
          });
          realtime.connection.once('connected', function () {
            console.log('Client connected to Ably using JWT')
            alert("Client successfully connected Ably using JWT auth")
          });

...
  }

已经配置了我的天蓝色功能，当我登录时，浏览器控制台输出

GET wss://realtime.ably.io/?access_token=<token was here>&format=json&heartbeats=true&v=1.1&lib=js-web-1.1.22

所以它返回我的令牌，但是

  1. 警报永远不会发生
  2. 我不确定如何获取返回给浏览器的 JWT 令牌。我在想我可以将它存储在 localStorage 中以在组件之间共享并在用户注销时清除 localStorage，但我需要能够订阅响应并将令牌分配给变量，但我没有在 javascript 教程中看到如何获取分配给 JWT 令牌响应的变量，因为它是使用此语法调用的。

我很感激这方面的任何帮助！

       var realtime = new Ably.Realtime({
            authUrl: "http://localhost:7071/api/AblyAuth"
          });

我的天蓝色功能看起来像

const checkAuth = require('../middleware/check-auth');
var jwt = require("jsonwebtoken")
var appId = '<APP ID>'
var keyId = '<key ID>'
var keySecret = '<key secret>'
var ttlSeconds = 60

var jwtPayload =
{
  'x-ably-capability': JSON.stringify({ '*': ['publish', 'subscribe'] })
}
var jwtOptions =
{
  expiresIn: ttlSeconds,
  keyid: `${appId}.${keyId}`
}
console.log("JwtPayload");
console.log(jwtPayload);
console.log("jwtOptions");
console.log(jwtOptions);

module.exports = function (context, req) {
  console.log("INSIDE ABLY AUTH")
  // checkAuth(context, req);
  console.log('Sucessfully connected to the server auth endpoint')
  jwt.sign(jwtPayload, keySecret, jwtOptions, function (err, tokenId) {


    if (err) {
      console.log("ERR")
      console.log(err)
      console.trace()
      return
    }
    context.res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate')
    context.res.setHeader('Content-Type', 'application/json')
    console.log('Sending signed JWT token back to client')
    console.log(tokenId)

    context.res = {

      status: 200,

      body: JSON.stringify(tokenId),

      headers: {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type, Set-Cookie",
        "Access-Control-Max-Age": "86400",
        "Vary": "Accept-Encoding, Origin",
        "Content-Type": "application/json"
      }

    };

    context.done();
  })
}
4

1 回答 1

0

如果您想在将 JWT 传递给 Ably 之前拦截它（以便验证内容，并将 JWT 用于其他组件），我建议您使用authCallback而不是 authUrl。在将 JWT 传递回 Ably 构造函数之前，您可以使用函数而不是直接 URL，在其中您可以调用端点，并对响应执行任何您喜欢的操作。我已经制作了一个使用 authCallback 进行普通令牌身份验证的JavaScript 示例，但同样的原则也适用。

至于为什么您没有看到警报，看起来您正在为 Ably 的期望发送一个无效的 JWT，因此您没有成功连接到 Ably。例如，您指定的是“expiresIn”而不是“exp”。要使令牌被认为是有效的，它需要特定结构中的某些元素，请参阅文档。对于这种情况，我建议您不确定使用详细日志记录会破坏什么，您可以在连接构造函数中将其启用为"log": 4.

于 2020-06-10T16:35:19.487 回答