Redux Authentication : Auth0으로 응용 프로그램을 보호하십시오

코어 포인트

Redux는 React Applications에서 상태를 관리하는 구조화 된 방법을 제공하여 특히 대규모 응용 프로그램의 경우 예측 및 관리가 쉽게 예측하고 관리 할 수 ​​있습니다.

auth0은 사용자 인증에 사용되며, 복잡한 백엔드 설정없이 소셜 로그인 및 다중 인증 인증과 같은 빠른 설정 및 고급 기능을 제공합니다.

JWT (JSON Web Tokens)는 RESTFUL API에 대한 안전한 상태의 인증에 사용되며, 이는 전통적인 세션 기반 인증 프로세스를 단순화합니다.
• 이 자습서는 Auth0의 잠금 위젯을 사용하여 로그인 프로세스를 단순화하고 Redux Middleware를 사용하여 API 호출을 효율적이고 안전하게 처리합니다.
보호 라우팅은 응용 프로그램의 일부가 인증 된 사용자에게만 액세스 할 수 있도록하여 보안을 향상시킵니다.
• Application Architecture에는 인증 상태를 처리하고 API에서 데이터를 가져 오기위한 Redux 작업, 리더러 및 미들웨어 설정이 포함됩니다.
• 이 기사의 동료 검토에 대한 Peleke Sengstacke에게 감사합니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewer에게 감사합니다! Redux는 React 커뮤니티와 심지어 더 넓은 분야에서 매우 인기가 있으며, 그럴만 한 이유가 있습니다. Dan Abramov가 만든 라이브러리로 일원 데이터 스트림을 구성하고 개발자가 시간 여행 및 녹음/재생과 같은 강력한 개발 기능을 사용할 수 있습니다.
는 훌륭하게 들립니까? 그러나 문제는 다음과 같습니다. 더 많은 코드를 작성해야합니다. 그러나 대규모 응용 프로그램을 유지 관리 한 경험이 있다면 데이터 처리가 제어하기 어려워 관리하기 어려울 수 있음을 알 수 있습니다. Redux를 사용하면 항상 응용 프로그램 상태를 명확하게 이해하고 데이터가 수행하는 작업을 정확히 알 수 있습니다.
• 이 튜토리얼에서는 사용자를 인증하고 원격 API를 호출하여 데이터를 가져 오는 실제 React Redux 응용 프로그램을 만드는 방법을 배웁니다. 우리의 앱은 Node 백엔드에서 Star Wars Jedi 목록을 검색하여 이름과 사진을 표시 할 수 있습니다. 인증을 위해 Auth0을 사용하여 빠르게 일어나거나 실행할 수 있으며 소셜 로그인 및 다중 인증 인증과 같은 기능도 쉽게 얻을 수 있습니다.
우리는 Redux의 기본 개념에 들어 가지 않을 것이므로 도서관에 익숙하지 않은 경우 다음과 같은 훌륭한 입문 자원을 확인하십시오.
• React, Redux 및 Empable.js 레드 문서
다가오는 응용 프로그램의 소스 코드는 여기에서 다운로드 할 수 있습니다.

Redux 인증 : 시작하기 이 튜토리얼의 React 프로젝트는 ES2015로 작성되므로 Babel을 사용하여 ES5로 컴파일하고 WebPack을 사용하여 모듈 번들을 처리합니다. 처음부터 설정하는 대신 Redux 저장소에서 Dan의 실제 스타터 예에서 시작하겠습니다. 사본을 받고 종속성을 설치하십시오.

레지스터 auth0

우리가 구축하는 것과 같은 단일 페이지 응용 프로그램에 대한 인증하는 가장 좋은 방법은 JWT (JSON Web Tokens)를 사용하는 것입니다. JWT는 RESTFUL API에 대한 무국적자 인증 방법을 제공하며, 이는 세션 및 쿠키 기반 인증에 비해 많은 장점이 있습니다. 단점은 JWT 인증 솔루션을 직접 작성하는 것이 까다 롭고 오류가 발생할 수 있지만 운 좋게도 서버 나 보안 구현 세부 사항에 대해 걱정하지 않고 Auth0을 사용할 수 있다는 것입니다.

아직 그렇게하지 않은 경우 무료 Auth0 계정을 방문하여 가입하십시오. 무료 계획을 사용하면 7,000 명의 정규 활동 사용자와 2 명의 소셜 정체성 제공 업체를 이용할 수 있습니다.

<code class="language-bash">npm install</code>

등록 후 프롬프트를 따라 계정을 초기화하십시오. 동일한 계정 아래에 여러 응용 프로그램을 가질 수 있으므로 상황에 맞는 도메인 이름 (아마도 조직 이름)을 선택하십시오. 첫 번째 단계에서는 LocalHost URL을 허용 소스로 설정해야합니다. 이것은 "CORS (cenefted sources)"텍스트 영역에서 수행 할 수 있습니다.

웹 서버를 설정 먼저 제다이 웹 서버의 문제를 해결합시다. 이를 위해서는 Jedi를 JSON 데이터로 반환하는 간단한 RESTFUL API가 필요하며 NodeJS 및 Express Frameworks를 사용하는 것이 신속하게 수행하는 한 가지 방법입니다. 원하는 서버 측 언어 또는 프레임 워크를 사용할 수 있으며 JSON 데이터를 반환하십시오.

참고 : Star Wars Purists는 우리가 앱 전체에서 "Jedis"를 복수 형태의 Jedi로 사용한다는 것을 알 수 있지만 이것은 올바른 복수형이 아닙니다. 대신, 우리는 "제다이"만 사용해야합니다. 어쩌면 그것은 사실이지만, 우리 앱이 더 쉬워지기 때문에 이것에 대해 괜찮습니다 :)

먼저 응용 프로그램을 초기화하고 종속성을 설치하십시오 :

우리는 서버에서 요구하는 모든 코드를 단일 JavaScript 파일로 제공 할 수 있습니다.

우리는 제다이 배열과 두 개의 엔드 포인트가 있습니다. 첫 번째 엔드 포인트는 모든 제다이를 반환하지만 ID 및 이름 속성 만 반환합니다. 두 번째 종점은 /jedis /: id에 위치하여 단일 제다이를 반환하지만 이미지 URL을 포함합니다. 인증 미들웨어를 사용하여 두 번째 엔드 포인트를 보호하고 인증 된 사용자 만 액세스 할 수 있도록 제한합니다.

그러나 우리는 실제로이 엔드 포인트를 어떻게 보호합니까? 우리는 Express-JWT를 사용하여 들어오는 JSON 웹 토큰을 찾는 미들웨어를 만들고 우리가 제공하는 키를 기반으로 확인합니다. 그런 다음이 미들웨어를 모든 엔드 포인트에 적용 할 수 있습니다. /jedis /: id endpoint의 두 번째 매개 변수 에서이 작업을 수행하고 있으며 유효한 토큰이 포함 된 요청 만 통과 할 수 있습니다.

미들웨어 자체는 Auth0 키 및 클라이언트 ID를 AuthCheck에 제공하여 응용 프로그램에 맞는 키를 제공 할 수 있습니다. 이 키는 Auth0 관리자 패널에서

application

에서 찾을 수 있습니다. 제다이 이미지는 서버의 공개 디렉토리에서 나옵니다. 리포지토리에서 동일한 이미지를 얻을 수 있거나 원하는 경우 데이터의 다른 소스의 이미지에 대한 링크를 포함 할 수 있습니다. 서버가 제자리에있을 때 API가 예상대로 작동하는지 확인해 봅시다. Postman과 같은 도구를 사용 하여이 작업을 수행 할 수 있습니다.

/API /Jedis 노선으로 이동하면 예상대로 제다이의 전체 목록을 얻을 수 있습니다. 그러나 제다이를 얻으려고하면 토큰을 서버로 보내지 않기 때문에 리소스를 검색 할 수 없습니다.

일단 응용 프로그램 자체에서 API 호출을 구현하면 요청을 사용하여 토큰을 보내는 방법을 살펴 보지만 기본적으로 권한 부여 헤더에 Bearer 구성표를 사용하여 포함하면됩니다. _{... (후속 내용은 원래 텍스트와 비슷하지만 문장이 바뀌고 문장 구조 조정이 조정됩니다. 길이가 너무 길고 여기서 생략됩니다) ....}

위 내용은 Redux Authentication : Auth0으로 응용 프로그램을 보호하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!