fetch를 통해 API에 접근할 때 API 키로 인증하기

개발
1

안녕하세요!

저는 커뮤니티를 Discourse에 두는 매거진을 위해 헤드리스 WP 사이트를 구축하고 있으며, 댓글을 아티클 페이지에 통합할 예정입니다. API 문서를 찾아보고 정말 기뻤는데, 사이트에는 다크 모드와 라이트 모드가 모두 지원되므로 iframe 임베드는 제가 원하던 방식이 아니었기 때문입니다. 댓글 템플릿이 루트 요소에서 CSS 변수를 상속받아야 합니다.

하지만 API에 직접 접근하려고 할 때(https://discourseurl.com/t/{id}.json 에 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/ 상단의 인증(Authentication) 섹션을 확인해 보세요. 요청 헤더에 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 엔드포인트(즉, Discourse 댓글을 API로 노출하는 것)를 WordPress가 노출하도록 하려면 옵션 하나만 바꾸면 된다는 걸 깨달았어요. 조금만 수정하면 되니 정말 좋습니다. 정말 감사합니다 :slight_smile:

궁금한 게 있는데, 왜 클라이언트 측에서 Discourse API를 직접 호출하는 걸 권장하지 않는 건가요? 나중에 예산이 확보되면 로그인 기능 같은 걸로 프로젝트를 확장할 계획이 있어서, 그 경우에도 Discourse API와 통신하고 싶습니다. 모든 요청을 WordPress를 통해 라우팅해야 하나요? :slight_smile: