타사 통합을 위해 oAuth를 구현하는 동안 꽤 오랫동안 업데이트되지 않은 일부 정보를 우연히 발견했습니다. 여기에서는 내 경험과 그것이 어떻게 작동하는지 포착하려고 노력하고 있습니다.

참고: 이 문서에서는 oAuth 및 작동 방식에 대해 자세히 설명하지 않습니다. 주로 React 애플리케이션에서 구성하고 구현하는 방법에 중점을 둡니다. oAuth에 대해 읽고 싶다면 여기를 읽어보세요. 선명한 정보를 제공합니다.

흐름:

대략적인 흐름은 위에서 설명한 대로 작동합니다.

그렇다면 문제는 무엇입니까?

일반적으로 제3자 웹사이트에서 직접 코드 및 code_verifier를 얻으려고 하면 CORS 문제가 발생할 수 있습니다. 이것은 예상됩니다.

어떻게 해결하나요?

1. 제3자 제공업체에 문의하세요. 제3자 제공업체가 귀하의 웹사이트를 허용 목록에 추가할 수 있다면 정말 좋습니다. 백엔드가 전혀 필요하지 않습니다.

2. 화이트리스트가 작동하지 않으면 reverse_proxy로 작동할 백엔드가 필요할 수 있습니다. 우리의 경우 호출을 프록시하고 이를 역방향 프록시의 백엔드로 사용하는 간단한 TypeScript 설정을 사용했습니다. 백엔드 설정으로도 이를 달성할 수 있습니다.

왜 CORS에 영향을 미치나요?

PKCE를 사용하는 경우 토큰을 얻으려면 요청과 함께 인증 헤더를 보내야 할 가능성이 높습니다. 보안상의 이유로 UI에서는 인증 전송이 금지됩니다.

COR은 보안을 강화하기 위해 브라우저에 내장된 기능입니다. 이는 임의의 웹사이트가 인증된 쿠키를 사용하여 은행 웹사이트에 API 요청을 보내고 비밀리에 돈을 인출하는 등의 작업을 수행하는 것을 방지합니다.

반응을 쉽게 수행하기 위해 어떤 라이브러리를 사용했습니까?

https://github.com/authts/react-oidc-context
? 이것. 이는 구성을 컨텍스트로 제공하고 있으면 좋은 webstoragestatestore도 지원합니다.

더 궁금한 점이 있으신가요?

여기에 답장을 보내세요. 가능하다면 기꺼이 도와드리고 싶습니다 :)

행복한 코딩..