Flutter with Firebase JWT 向 Heroku Hasura 发送 GraphQL (graphql_flutter) 请求，该请求具有“格式错误的授权标头”

Question

我已经搜索过答案，但我还没有看到在一起使用 Flutter、Firebase 和 Hasura GraphQL 的背景下谈论这个问题。

在 Flutter 中工作，利用 Firebase 身份验证后端，我正在获取用户 JWT 并将其传递给 Heroku Hasura GraphQL 端点（带有查询）。

大部分设置和代码都遵循并受到 https://hasura.io/blog/build-flutter-app-hasura-firebase-part1/ 的教程第 2 部分和第 3 部分以及 https://github.com/snowballdigital/flutter-graphql 的 Flutter graphql 文档的启发。

Firebase 已成功将新用户记录添加到我的 GraphQL 数据库。 Firebase 正在返回一个 JWT，并在构建 GraphQL 客户端期间将其添加到 GraphQL AuthLink。这就是 JWT 的样子（隐藏个人信息）：

标题：算法和令牌类型

{
    "alg": "RS256",
    "kid": "12809dd239d24bd379c0ad191f8b0edcdb9d3914",
    "typ": "JWT"
}

FULL PAYLOAD:DATA

{
    "iss": "https://securetoken.google.com/<firebase-app-id>",
    "aud": "<firebase-app-id>",
    "auth_time": 1598563214,
    "user_id": "iMovnQvpwuO8HiGOV82cYTmZRM92",
    "sub": "iMovnQvpwuO8HiGOV82cYTmZRM92",
    "iat": 1598635486,
    "exp": 1598639086,
    "email": "<user-email>",
    "email_verified": false,
    "firebase": {
        "identities": {
            "email": [
                "<user-email>"
            ]
        },
        "sign_in_provider": "password"
    }
}

HASURA UI 中的解码 JWT 工具显示此错误：

“声明密钥：'https://hasura.io/jwt/claims' 未找到”

根据Hasura's documentation，令牌中应该存在这样的东西：

"https://hasura.io/jwt/claims": {
    "x-hasura-allowed-roles": ["editor","user", "mod"],
    "x-hasura-default-role": "user",
    "x-hasura-user-id": "1234567890",
    "x-hasura-org-id": "123",
    "x-hasura-custom": "custom-value"
  }

在我使用的各种教程和文档中，唯一需要定义 hasura 自定义声明的地方是用户注册的 Firebase 云函数：

exports.registerUser = functions.https.onCall(async (data, context) => {

const email = data.email;
const password = data.password;
const displayName = data.displayName;

if (email === null || password === null || displayName === null) {
    throw new functions.https.HttpsError('unauthenticated', 'missing information');
}

try {
    const userRecord = await admin.auth().createUser({
        email: email,
        password: password,
        displayName: displayName
    });

    const customClaims = {
        "https://hasura.io/jwt/claims": {
            "x-hasura-default-role": "user",
            "x-hasura-allowed-roles": ["user"],
            "x-hasura-user-id": userRecord.uid
        }
    };

    await admin.auth().setCustomUserClaims(userRecord.uid, customClaims);
    return userRecord.toJSON();

} catch (e) {
    throw new functions.https.HttpsError('unauthenticated', JSON.stringify(error, undefined, 2));
}

});

我对 Firebase 和 JWT 太陌生，无法理解为什么自定义声明不在令牌中。我以为 Firebase 会给我一个嵌入了自定义声明的 JWT，然后将它传递给 Hasura 后端就足够了。

我的 Heroku Hasura 应用程序日志也显示此错误：

"格式错误的授权标头","code":"invalid-headers"

Firebase 是否需要进一步配置才能交回正确的声明？ JWT 中缺少的信息是否与记录为“格式错误的授权标头”的服务器端错误相同，还是我需要设置其他标头（请参阅下面的 Flutter 代码）。

这是 Flutter 中的 GraphQL 配置代码：

import 'dart:async';

import 'package:dailyvibe/services/jwt_service.dart';
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

class AuthLink extends Link {
  AuthLink()
      : super(
          request: (Operation operation, [NextLink forward]) {
            StreamController<FetchResult> controller;

            Future<void> onListen() async {
              try {
                final String token = JWTSingleton.token;
                operation.setContext(<String, Map<String, String>>{
                  'headers': <String, String>{
                    'Authorization': '''bearer $token'''
                  }
                });
              } catch (error) {
                controller.addError(error);
              }

              await controller.addStream(forward(operation));
              await controller.close();
            }

            controller = StreamController<FetchResult>(onListen: onListen);

            return controller.stream;
          },
        );
}

class ConfigGraphQLClient extends StatefulWidget {
  const ConfigGraphQLClient({
    Key key,
    @required this.child,
  }) : super(key: key);
  final Widget child;

  @override
  _ConfigGraphQLClientState createState() => _ConfigGraphQLClientState();
}

class _ConfigGraphQLClientState extends State<ConfigGraphQLClient> {
  @override
  Widget build(BuildContext context) {
    final cache = InMemoryCache();

    final authLink = AuthLink()
        .concat(HttpLink(uri: 'https://<myapp>.herokuapp.com/v1/graphql'));

    final ValueNotifier<GraphQLClient> client = ValueNotifier(
      GraphQLClient(
        cache: cache,
        link: authLink,
      ),
    );

    return GraphQLProvider(
      client: client,
      child: CacheProvider(
        child: widget.child,
      ),
    );
  }
}

Answer 1

回答我自己的问题：自定义声明不在我的 JWT 中，因为我没有从 Flutter 调用我的 registerUser 云函数。现在我是这样的：

  final HttpsCallable callable = CloudFunctions.instance
      .getHttpsCallable(functionName: 'registerUser')
        ..timeout = const Duration(seconds: 30);
  await callable.call(<String, dynamic>{
    'email': email,
    'password': password,
  });

（此代码 sn-p 感谢https://hasura.io/blog/build-flutter-app-hasura-firebase-part3/）

我使用的是 Firebase 的 createUserWithEmailAndPassword(email: email, password: password) 方法，它不会创建自定义声明或触发云功能。