如何通过Graphiqlplayground进行身份验证

Question

这是我第一次使用 GraphQL，我尝试访问给定查询的内容，但由于缺乏权限，我无法访问此给定查询，在这种情况下，我获得了访问此 GraphQL api 的用户名和密码，我可以使用 GraphQL 中的这些凭据获取并验证令牌，但我的问题如下，如何在 API 中进行身份验证才能访问 API 的查询？

我的错误如下。

"errors": [
    {
      "message": "You do not have permission to perform this action",

我相信这是非常基本的事情，但我只是找不到解决这个问题的方法。

Answer 1

单击 HTTP 标头并添加您的令牌，如下所示：

{
  "Authorization": "Bearer YOUR_TOKEN_HERE"
}

您可能需要删除 Bearer 并仅使用令牌，这取决于您如何在服务器上进行授权。

Answer 2

这用于下面 GraphiQL 上的 REQUEST HEADERS 中的 JWT 身份验证：

{
  "Authorization": "JWT your_jwt_access_token_here"
}

Answer 3

如果有人偶然发现同样的问题，仅发送 HTTP 在我的情况下不起作用，因为我的 @auth-directive 中有这一行：

let token = req?.cookies?.token 它只会检查来自cookie的令牌，而不会从我传递授权标头的请求标头中检查令牌。

通过将其更改为解决了问题：

let token = req?.cookies?.token ?? req?.headers?.authorization

Answer 4

您还可以通过使用 GraphiQL 将以下代码片段注入到 HTML 页面中，使其在用户使用 Firebase 登录或注销时自动更新

Authorization: ...

 标头：

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
  import { getAuth } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-auth.js";

  const app = initializeApp({
    projectId: "example",
    appId: "xxxxx",
    apiKey: "xxxxx",
    authDomain: "example.com"
  });

  function setAuthHeader(token) {
    const editor = document.querySelectorAll('.variable-editor .CodeMirror')[1].CodeMirror;
    const headers = JSON.parse(editor.getValue());
    headers.Authorization = token ? "Bearer " + token : undefined;
    editor.setValue(JSON.stringify(headers, null, 2));
  }

  getAuth(app).onIdTokenChanged((user) => {
    if (user) {
      user.getIdToken().then(token => setAuthHeader(token));
    } else {
      setAuthHeader(null);
    }
  });
</script>

在

https://github.com/kriasoft/relay-starter-kit 查找完整示例

Answer 5

这是我公司的 Graphql HTTP 标头的示例：

{ 
    "Authorization": "Bearer k1kmcDKasVAKd......" 
}

PS：不要忘记添加双引号。非常重要！

专业提示：如果您正在测试团队的 Playground，则可以从公司团队的登录或 Google 开发工具中的令牌网络调用获取不记名令牌。