순수 프런트엔드 애플리케이션에 대한 서비스 자격 증명을 저장하는 위치 및 방법

4

질문:

클라이언트에서 JavaScript, 즉 브라우저를 실행하는 순수한 프런트엔드 응용 프로그램을 구축하고자 합니다.내 응용 프로그램은 제3자 서비스에 요청을 해야 하는데 이것은 어떤 신분 검증 방법이 필요하다.
백엔드 프레임워크는 이런 일에 프로필을 제공하지만 JS 코드는 모두 클라이언트에서 설명하기 때문에 프로필은 패키지의 일부분이 될 수 없습니다.
서비스 API 키, 자격 증명 등을 클라이언트에 안전하게 저장하거나 백엔드 솔루션이 필요합니까?
가장 유행하는 구성 파일 프레임워크(Angular 및 React)를 검색하면 특정 환경에 대한 URL만 저장됩니다.나는 내가 이미 막다른 골목에 이르렀다고 생각하기 시작했는데, 이것은 근본적으로 불가능하다

답안

상황에 따라 결정...사용자가 제3자에게 보내야 할 비밀을 냄새를 맡지 않기를 원하지 않지만, OAuth2의 은밀한 권한 수여 상황에서 브라우저에서 시작하고 완성할 수 있습니다.
로그인/인증을 위해 타사로 리디렉션한 후 사용자는 일정 기간 동안 유효한 액세스 토큰을 가지고 귀하에게 전송됩니다.
규범에 따르면 이 영패는 실제로 URL 세션으로 발송되기 때문에 서버가 아닌 브라우저로 발송된다.서버에 대한 액세스 토큰을 받으려면 URL 세션을 분석하고 내용을 보내기 위한 프런트엔드 코드가 필요합니다.
API에서 브라우저에서 연결할 수 있는 경우 백엔드 서버가 자격 증명을 처리하지 않고도 모든 컨텐트를 브라우저에 보관할 수 있습니다.그러나 모든 API가 순수한 프런트엔드 인증 및 API 호출을 허용하는 것은 아닙니다.
그래서, 이것은... 에 달려 있다.