React Native 응용 프로그램 구축 및 OAUTH 2.0으로 인증

직접 구축하지 않고 OKTA 및 OpenID Connect (OIDC)와 React Native Apps의 인증 기능을 쉽게 통합 할 수 있습니다. OIDC를 사용하면 OKTA API를 직접 인증 할 수 있으며이 기사는 React Native Application 에서이 기능을 구현하는 방법을 보여줍니다. AppAuth 라이브러리를 사용하여 OIDC를 통해 로그인 사용자를 리디렉션하는 방법을 배웁니다.

React Native는 효율적인 프레임 워크입니다. Ionic 및 기타 하이브리드 모바일 프레임 워크와 달리 웹 기술 (React 및 JavaScript)을 사용하여 기본 모바일 애플리케이션을 구축 할 수 있습니다. 브라우저 나 WebView가 포함되지 않으므로 React Native를 사용하여 모바일 앱을 개발하는 것은 에뮬레이터 또는 장치에서 모든 테스트를 수행 할 기본 SDK를 사용하는 것과 유사합니다. 브라우저에서 Ionic만큼 테스트 할 수 없습니다. 브라우저와 장치에 개별적으로 실행되는 코드를 작성할 필요가 없기 때문에 이점을 얻을 수 있습니다.

Google 트렌드를 확인하면 React Native가 Android 및 iOS보다 기본 개발에서 훨씬 더 인기가 있음을 알게 될 것입니다!

이 기사에서는 최신 버전의 React Native를 사용하여 응용 프로그램을 개발하는 방법을 안내합니다. 쓰기 시점에서 최신 버전은 16.2.0에 반응하고 기본 0.54.0에 반응합니다. 새로운 앱을 만들고 인증을 위해 AppAuth를 추가하고 인증을 위해 OKTA를 사용하고 iOS 및 Android에서 실행합니다.

Appauth는 OAUTH 2.0 및 OpenID Connect를 사용하여 최종 사용자의 인증 및 승인을위한 기본 응용 프로그램 클라이언트 SDK입니다. iOS, MacOS, Android 및 Native JS 환경에 적합하여 기본 앱 인증 및 승인을위한 최신 보안 및 유용성 모범 사례를 구현합니다.

React Native App 생성 React에는 새로운 React 앱을 생성하는 데 사용할 수있는 Create-React-App이라는 명령 줄 도구 (CLI)가 있습니다. React Native에는 Create React Native App이라는 유사한 도구가 있습니다. 설치하기 전에 노드 v6 이상이 설치되어 있는지 확인하십시오. Create-React-Native-App을 설치하고 OKTA-RN이라는 새 프로젝트를 만듭니다.

이 명령을 실행 한 후 터미널이 몇 가지 옵션을 제시합니다.

Mac을 사용하는 경우 i를 눌러 iOS 에뮬레이터를 엽니 다. 엑스포를 설치/오픈 한 다음 렌더링 된 app.js를 렌더링하라는 메시지가 표시됩니다.

Windows 또는 Linux를 사용하는 경우 Android 에뮬레이터 또는 Android 장치를 사용하는 것이 좋습니다 (있는 경우). 작동하지 않으면 걱정하지 마십시오. 나중에이 문제를 해결하는 방법을 다룰 것입니다.

팁 : Microsoft의 TypeScript React Native Starter를 사용하여 React Native Apps에서 JavaScript 대신 TypeScript를 사용할 수 있습니다. 이 접근법을 사용하기로 결정한 경우이 자습서가 완료된 후 응용 프로그램을 변환하는 단계를 수행하는 것이 좋습니다.

React Native 및 Oauth 2.0 이 경우, 나는 강력한 라이브러리 인 React Native App Auth를 사용합니다. 이 라이브러리를 사용하는 세 가지 이유가 있습니다. 1) 몇 분 안에 실행할 수 있다는 좋은 예를 제공합니다 다른 방법 실행.

나는 React-Native-Oauth를 시도했지만 새 공급자를 추가하기 전에 기존 제공 업체를 사용해야한다는 것을 알았습니다. Okta를 제공자로 사용하고 싶습니다. 또한 수많은 문제와 요청도 경고 신호를 보냅니다.

나는 반응-신체적 단순 보트를 시도했지만 더 이상 사용되지 않은 네비게이터 구성 요소가 최신 React Native 버전으로 작동하도록하는 데 문제가 있습니다.

나는이 React Native Oauth 2 튜토리얼을 시도했지만 내 앱으로 다시 리디렉션하는 데 문제가있었습니다.
Okta 에서 기본 앱을 만듭니다 React Native 앱에 AppAuth를 추가하기 전에 승인하려면 앱이 필요합니다. 무료 Okta 개발자 계정이 없다면 지금 가입하십시오! OKTA 개발자 계정을 로그인하고 응용 프로그램에 이동하십시오. 기본을 클릭 한 다음 다음을 클릭하십시오. 응용 프로그램의 이름 (예 : React Native), 허가 유형으로 새로 고침 토큰을 선택하고 기본 인증 코드를 선택하십시오. 로그인을 리디렉션 리디렉션 URI (예 : com.oktapreview.dev-158606 :/Callback)로 복사하여 위치에 저장하십시오. 이 값은 응용 프로그램을 구성 할 때 필요합니다.
• 탭 완료하면 다음 화면에 클라이언트 ID가 표시됩니다. 이 값을 복사하여 저장하십시오.
인증을 위해 React Native Appauth를 추가하십시오 앱의 기본 구성을"팝업 "해야합니다.이 구성은 일반적으로 Create-React Native-App에 의해 숨겨져 있습니다.

시스템에서 질문에 답하기를 원하면 다음 답변을 사용하십시오.

질문

답변

Create-React-Native-App에서 어떻게 팝업 하시겠습니까? React Native

사용자의 홈페이지에 앱이 어떤 콘텐츠를 표시해야합니까? okta rn

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

Android Studio 및 Xcode 프로젝트는 무엇을 명명해야합니까?

oktarn

React Native App Auth를 설치하려면 다음 명령을 실행하십시오.

이 명령을 실행 한 후에는 기본 iOS 프로젝트를 구성해야합니다. 편의를 위해 다음 단계를 복사했습니다.

iOS 설정 React Native App Auth는 AppAuth-IOS에 의존하므로 종속성으로 구성해야합니다. 가장 쉬운 방법은 코코 포드를 사용하는 것입니다. Cocoapods를 설치하려면 다음 명령을 실행하십시오

<code>npm install -g create-react-native-app
create-react-native-app okta-rn
cd okta-rn
npm start</code>

프로젝트의 iOS 디렉토리에서 podfile을 생성하는데,이 디렉토리는 AppAuth-IOS를 종속성으로 지정합니다. OKTARN이 NPM 실행 실행을 실행할 때 지정된 응용 프로그램 이름과 일치하는지 확인하십시오.

그런 다음 iOS 디렉토리에서 POD 설치를 실행하십시오. 첫 번째 달리기는 빠른 연결조차도 시간이 걸릴 수 있습니다. 이제 커피 나 위스키를 먹기 좋은 시간입니다! ? iOS 디렉토리에서 Open Oktarn.xcworkSpace를 실행하여 Xcode에서 프로젝트를 엽니 다.

iOS 10 이하를 지원하려는 경우 iOS/OKTARN/Info.Plist에서 지원되는 리디렉션 URL 체계를 정의해야합니다.

(다음 내용은 원래 텍스트와 동일하고 중복 부분은 생략되며 필요한 수정 및 설명 만 유지됩니다)

...

위 내용은 React Native 응용 프로그램 구축 및 OAUTH 2.0으로 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!