Блог

Я пытаюсь интегрировать Fauna и Auth0 в свое приложение Vue 3.

Чтобы добиться этого, я следую этому руководству Auth0 и этому видео на YouTube.

Короче говоря, я настроил Auth0 в качестве поставщика внутри Фауны. И я отправляю сгенерированный Auth0 токен JWT в качестве секрета фауны. Затем Фауна должна расшифровать JWT и предоставить доступ к вызову.

Чтобы проверить это, мой код извлекает некоторые фиктивные данные «продуктов» из Фауны и выводит их на консоль.

Но когда я звоню, он возвращается как unauthorized .

Что я делаю не так?

Вот сценарий внутри моего компонента Vue, который выполняет вызов:

 import { defineComponent, inject } from "vue";
import { query as q, Client } from "faunadb";

export default defineComponent({
  name: "Api",
  setup() {
    let apiMessage = null;
    let executed = false;
    const auth = inject("Auth");

    const callApi = async () => {
      const accessToken = await auth.getTokenSilently();
      console.log(accessToken);
      try {
        const client = new Client({ secret: accessToken });
        const { Paginate, Documents, Collection } = q;

        const data = await client.query(
          Paginate(Documents(Collection("products")))
        );

        console.log(data);
        apiMessage = data;
        executed = true;
      } catch (e) {
        console.log(e);
        apiMessage = `Error: the server responded with '${e.response.status}: ${e.response.statusText}'`;
      }
    };

    return {
      callApi,
    };

  },
});
 

Вот копия unauthorized возвращаемого объекта ответа:

 {
  "name": "Unauthorized",
  "message": "unauthorized",
  "description": "Unauthorized",
  "requestResult": {
    "method": "POST",
    "path": "",
    "query": null,
    "requestRaw": "{"paginate":{"documents":{"collection":"products"}}}",
    "requestContent": {
      "raw": {
        "paginate": {
          "raw": {
            "documents": {
              "raw": {
                "collection": "products"
              }
            }
          }
        }
      }
    },
    "responseRaw": "{"errors":[{"code":"unauthorized","description":"Unauthorized"}]}",
    "responseContent": {
      "errors": [
        {
          "code": "unauthorized",
          "description": "Unauthorized"
        }
      ]
    },
    "statusCode": 401,
    "responseHeaders": {
      "content-length": "65",
      "content-type": "application/json;charset=utf-8",
      "x-txn-time": "1634006015704445"
    },
    "startTime": 1634006014934,
    "endTime": 1634006015885
  }
}
 

Понял это.

Клиент должен быть инициирован с некоторыми другими значениями, самое главное-это domain значение.

 var client = new faunadb.Client({
  secret: 'YOUR_FAUNA_SECRET',
  domain: 'db.fauna.com',
  // NOTE: Use the correct domain for your database's Region Group.
  port: 443,
  scheme: 'https',
})