fetch を通じて API にアクセスする際の API キーによる認証

開発
1

こんにちは！

雑誌のヘッドレス WordPress サイトを構築しており、コミュニティは Discourse にあります。記事ページにコメントを統合しようとしています。API ドキュメントを見つけ、非常に喜んでいますが、iframe 埋め込みは望むものではなく、サイトがダークモードとライトモードの両方に対応するため、コメントテンプレートがルート要素から CSS 変数を継承する必要があります。

しかし、https://discourseurl.com/t/{id}.json に直接 API をアクセスしようとすると（fetch を使用して）、常にレート制限に引っかかってしまいます。そのため、API キーを追加して認証を試みることにしました。

以下のコードを使用しています：

fetch(this.apiUrl, {
        headers: {
          'User-Api-Key': '{Discourse 管理画面から取得したユーザー API キー}',
        },
      })

どのキーを使っても（管理者キーを試しても）以下のエラーが発生します：

error_type: "invalid_access"
errors: Array [ "Du har inte behörighet att visa den efterfrågade resursen." ]

（おおよその翻訳：「要求されたリソースを表示する権限がありません」）

API キーの仕組みについて何か見落としているのでしょうか？レート制限に引っかからずにこれらの API エンドポイントをリクエストするための推奨アプローチは何でしょうか？

2

https://docs.discourse.org/ の上部にある「認証」セクションをご覧ください。リクエストヘッダーに API 認証情報を設定する方法の例が記載されています。ヘッダーには Api-Key と Api-Username を使用する必要があります。

3

ありがとうございます！認証部分を見落としていたなんて、とても想像できません。何度もドキュメントを読み直していたのにね :joy:

とにかく、少し進んでいるようですが、ブラウザのコンソールでこの問題にぶつかりました：
(Reason: missing token 'api-key' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel).

何が原因かよくわかりませんし、フォーラムでもこれに関する情報が見つかりません。何か見落としているのでしょうか？奇妙なことに、コードでは ‘Api-Key’ というヘッダーを指定しているのですが。何かアイデアはありますか？ :slight_smile:

4

JavaScript アプリを構築していて、API リクエストをブラウザから行っているのですね？

推奨されるアプローチは、Discourse への API 呼び出しをサーバーサイドで行い、JavaScript アプリが WordPress と話すのと同じように、サーバーと通信させることです。これにより、CORS の問題を回避できます。

5

ああ、素晴らしい！これで WP Discourse のコードを調べて、必要な API エンドポイントを WP が公開するまであと一歩のところだと気づきました（Discourse のコメントを API 経由で公開する）。少し調整するだけです。これは最高ですね、本当にありがとうございます :slight_smile:

ちょっと気になったのですが、なぜクライアント側から直接 Discourse API を操作することは推奨されていないのでしょうか？将来的に予算があれば（ログイン機能など）、プロジェクトを拡張するアイデアがいくつかあります。その場合、Discourse API と連携させたいと考えています。すべてを WordPress を経由させる必要があるのでしょうか？ :slight_smile: