React Native 및 API 백엔드를 사용한 인증

React Native 및 API 백엔드를 사용한 인증

---

React Native 앱과 별도의 NodeJS / Express API 백엔드를 사용하여 oauth를 둘러 보려고합니다. https://github.com/adamjmcgrath/react-native-simple-auth 는 React Native 앱에 대한 인증을 제공 하고 http://passportjs.org/ 는 NodeJS 백엔드에 대한 인증을 제공 한다는 것을 이해 합니다 . 로그인 및 API 액세스를위한 인증을 위해이 두 가지를 연결하는 방법을 잘 모르겠습니다.

사용자가 이메일과 비밀번호 또는 Facebook / Twitter / Google을 통해 React Native 앱에 로그인하기를 바랍니다. 앱에 로그인 한 후 인증되고 특정 경로에 대한 액세스 권한이 있는지 확인하기 위해 API에 무엇을 보내야합니까?

다음은 로그인하고 로그인 한 사용자의 설정을 확인하는 흐름의 예입니다.

1. 사용자는 이메일 / 비밀번호 또는 Facebook / Twitter / Google을 통해 React Native 앱에 로그인합니다.
2. 사용자가 인증 됨
3. 앱에서 GET / api / settings 요청
4. API는 사용자가 인증되었는지 확인하고 해당 사용자의 설정을 반환하거나 API는 사용자가 인증되지 않았 음을 확인하고 403을 반환합니다.

---

이 질문에는 너무 많아서 하나의 SO 답변에 모두 맞지 않을 것입니다.하지만 여기에 당신이 성취하고자하는 것에 광범위하게 맞는 몇 가지 팁과 일반적인 개요가 있습니다.

OAuth2 승인

소리를 들으면 소셜 로그인 인증 을 제공하기 위해 OAuth 2를 사용하는 데 관심 이 있으며 이메일 및 비밀번호를 사용하는 대안으로 자사 인증 을 수행하고 싶습니다 . 소셜 로그인의 경우 OAuth 2 암시 적 흐름을 사용하여 널리 알려진 패턴 인 액세스 토큰을 검색하게됩니다. 또한 이메일과 비밀번호로 사용자 를 인증 하려고하므로 OAuth 2의 확장이며 인증 외에도 인증을 명시 적으로 지원하는 OpenID Connect에 익숙해 져야합니다.

두 경우 모두 사용자가 이메일 / 비밀번호 콤보를 제출하거나 소셜 ID 제공 업체를 통해 권한을 부여하면 응답으로 액세스 토큰 과 (선택적으로) ID 토큰 을 받게됩니다 . JWT (JSON 웹 토큰, jwt.io 참조 )와 같은 토큰 은 JWT의 결과를 검사하기 위해 디코딩 할 수있는 base64 인코딩 문자열로 제공되며, 여기에는 사용자의 ID 및 기타 세부 정보가 포함됩니다. 이메일 주소, 이름 등

다양한 유형의 흐름에 대한 자세한 내용 은 Digital Ocean에 대한이 훌륭한 개요를 참조하십시오 .

API 인증에 토큰 사용

이제 액세스 토큰이 있으므로 모든 요청과 함께이를 API에 전달하여 올바르게 인증되었음을 입증 할 수 있습니다. HTTP 헤더, 특히 헤더에 액세스 토큰을 전달 Authorization하여 base64로 인코딩 된 액세스 토큰 (인증 요청에 대한 응답으로 원래받은 것) 앞에 Bearer. 따라서 헤더는 다음과 같습니다.

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJh...

API 측에서는 해당 토큰을 수신하고 디코딩 한 다음 해당 토큰 의 ID와 클레임 을 확인 합니다. sub속성 에서 토큰의 일부로 전달되는 것은 요청하는 사용자 의 주체 또는 ID입니다. 이것은 액세스를 식별하고 각 사용자의 권한, 권한 등 을 사용하여 API 측에서 작업을 시작하는 방법입니다. API 측에서 수신 한 액세스 토큰의 유효성 을 검사 하여 그렇지 않은지 확인 하는 것도 중요합니다. 스푸핑 또는 수작업.

암시 적 흐름에 대해 RN에서 어떻게 보이는지

다음은 OAuth 2 암시 적 흐름에 대한 React Native의 일반적인 프로세스이며 소셜 ID 공급자에 사용할 것입니다.

1. 사용자가 React Native UI에서 소셜 로그인 버튼 중 하나를 탭합니다.
2. 버튼에 응답하는 코드는 각각이 원하는 항목에 따라 해당 공급자에 대한 요청 URL을 작성합니다 (약간 다르기 때문).
3. LinkingRN 의 API를 사용하면 장치의 브라우저에서 해당 URL을 열어 사용자가 로그인 / 승인 댄스를 할 수 있도록 소셜 공급자로 이동합니다.
4. 완료되면 소셜 제공자는 사용자를 귀하가 제공하는 URL로 리디렉션합니다. 모바일 장치에서는 고유 한 사용자 지정 URL 체계를 사용하여 사용자를 웹보기에서 앱으로 이동합니다. 이 스키마는와 같이 앱의 일부로 등록 my-awesome-app://하는 것이며 소셜 제공 업체에 전달하는 리디렉션 URL은 다음과 같을 수 my-awesome-app://auth_complete/있습니다. 이러한 URL 스키마 및 딥 링크를 구성하는 방법 은 Linking API 문서 를 참조하십시오 .
5. 새 URL 스키마 / 딥 링크의 핸들러에서 URL의 일부로 전달 된 토큰을 받게됩니다. 직접 또는 라이브러리를 사용하여 URL에서 토큰을 구문 분석하여 앱에 저장합니다. 이 시점에서 JWT로 검사를 시작하고 API 액세스를 위해 HTTP 헤더에 전달할 수 있습니다.

RN에서 리소스 소유자 암호 부여 흐름을 보는 방법

암시 적 흐름을 고수하거나 API와 앱이 서로 신뢰되는 경우 리소스 소유자 암호 부여 흐름으로 전환하는 자신의 계정에 대한 이메일 / 비밀번호 콤보 옵션이 있습니다 . 즉, 두 앱을 모두 만드는 것입니다. 및 API. UX가 훨씬 더 좋기 때문에 가능한 경우 모바일 앱에서 ROPG 흐름을 선호합니다. 별도의 웹보기를 열 필요없이 앱에서 직접 UI 요소에 이메일과 암호를 입력하면됩니다. 그렇게 말하면 다음과 같습니다.

1. 사용자가 이메일 / 비밀번호 콤보 로그인 버튼을 탭하면 RN이 이메일 및 비밀번호에 대한 TextInputs가 포함 된 UI로 응답합니다.
2. 이메일 및 비밀번호와 함께 전달되는 적절하게 제작 된 URL 및 본문 세부 사항을 포함하는 POST 요청을 인증 서버 (API 또는 별도의 서버 일 수 있음)에 빌드하십시오. 이 요청을 실행하십시오.
3. 인증 서버는 응답 본문의 관련 토큰으로 응답합니다. 이 시점에서 위의 5 단계에서 이전에 수행 한 것과 동일한 작업을 수행 할 수 있습니다. 여기서 나중에 API 요청에 사용할 토큰을 저장하고 관련 사용자 정보를 검사합니다.

보시다시피 ROPG는 더 간단하지만 신뢰도가 높은 시나리오에서만 사용해야합니다.

API에서

API 측에서는 Authorization 헤더의 토큰을 검사하고 앞서 언급 한대로 사용자가 인증 된 것으로 간주합니다. 토큰 및 사용자 권한을 유효화하고 확인하는 것은 여전히 ​​좋은 보안 관행입니다. 요청과 함께 전송 된 토큰이 없거나 전송 된 토큰이 만료 된 경우 요청을 거부합니다.

도움이 되었기를 바랍니다. 확실히 많은 것이 있지만 일반적인 개요를 제공합니다.

참고 URL : https://stackoverflow.com/questions/36943253/authentication-with-react-native-and-api-backend