Node, React 및 Okta를 사용하여 사용자 등록을 구축하십시오-IT산업-php.cn

집

기술 주변기기

IT산업

Node, React 및 Okta를 사용하여 사용자 등록을 구축하십시오

Joseph Gordon-Levitt

Feb 16, 2025 am 11:32 AM

Node, React 및 Okta를 사용하여 사용자 등록을 구축하십시오 이 기사는 원래 Okta Developer 블로그에 게시되었습니다. Sitepoint를 가능하게하는 파트너를 지원해 주셔서 감사합니다.

오늘날의 인터넷 사용자는 개인화 된 경험을 기대합니다. 개발자는 사용자 정보를 비공개로 유지하면서 개인화 된 경험을 제공하는 웹 사이트를 개발하는 법을 배워야합니다. 최신 웹 애플리케이션에는 서버 측 API와 클라이언트 측 사용자 인터페이스가있는 경향이 있습니다. 현재 로그인 한 사용자를 양쪽 끝에 알리기가 어려울 수 있습니다. 이 튜토리얼에서는 React UI를 공급하는 노드 API 설정을 안내하고 사용자의 정보를 개인 및 개인을 유지하는 사용자 등록을 구축합니다. 이 자습서에서는 redux 또는 reduxthunk와 같은 주 관리 라이브러리를 사용하지 않습니다. 보다 강력한 응용 프로그램에서는 아마도 그렇게하고 싶을 것입니다. 그러나 Redux와 Reduxthunk를 연결하고 여기에 사용 된 Fetch 문을 싱크로 추가 할 수 있습니다. 단순성을 위해이 기사를 사용하여 사용자 관리 추가에 중점을 두려면 ComponentDidMount 함수에 페치 문을 추가 할 것입니다. 키 테이크 아웃

단순화 된 설정 : Node, React 및 Okta를 사용하여 사용자 등록 설정을 설정하면 Redux와 같은 상태 관리 라이브러리가 필요하지 않아 초기 개발 프로세스를 단순화합니다. <:> 실제 통합 : 자습서는 OKTA의 REACT SDK 및 REACT 라우터의 사용을 강조하면서 REACT 응용 프로그램의 인증을 위해 OKTA를 통합하는 실습 접근 방식을 제공합니다. 코드 조직 : 응용 프로그램의 구조는 API 및 클라이언트 측을위한 별개의 폴더와 함께 문제를 적절하게 분리하여 유지 관리를 향상시킵니다. 보안 사용자 인증 : OKTA는 사용자 인증을 안전하게 처리하는 데 사용되어 사용자 자격 증명이 안전하고 효율적으로 관리되도록합니다. 구성 요소 기반 구조 : React의 구성 요소 기반 아키텍처는 로그인, 등록 및 사용자 프로파일을위한 별도의 구성 요소와 함께 UI를 구성하도록 활용됩니다. 포괄적 인 자습서 : 가이드는 기본 설정에서 고급 사용자 처리에 이르기까지 표지되어 노드, React 및 Okta를 사용하여 본격적인 사용자 등록 시스템을 구축 할 수있는 철저한 이해를 제공합니다. 노드를 설치하고 전제 조건을 반응하십시오 기본 애플리케이션을 설정하려면 이러한 기본 도구가 설치되어 있는지 확인하십시오.

노드 (8) npm (5) create-react-app (npm package) Express-Generator (NPM 패키지)

또한 Okta 개발자 계정이 필요합니다 노드 및 NPM을 설치하려면 운영 체제의 지침을 따라 https://nodejs.org/en/. 그런 다음 NPM 명령 줄을 사용하여 두 개의 NPM 패키지를 설치하기 만하면됩니다.

이제 기본 애플리케이션 구조를 설정할 준비가되었습니다.

기본 애플리케이션을 발판하십시오 응용 프로그램이 살기를 원하는 폴더로 이동하여 새 폴더를 만듭니다.

이렇게하면 API 폴더의 NodeJS 및 Express 응용 프로그램과 클라이언트 폴더의 기본 반응 응용 프로그램이있는 API 및 Client라는 멤버십 샘플 폴더에서 두 개의 폴더가 생성됩니다. 따라서 폴더 구조는 다음과 같습니다

멤버십 샘플

api

npm i -g create-react-app express-generator

클라이언트

- 마지막으로, 종속성이 설치되도록 각 하위 폴더 (API 및 클라이언트)에 대해 NPM 설치 또는 원사 설치를 실행하는 것을 잊지 마십시오. 이제 API 및 클라이언트 응용 프로그램의 적절한 폴더에서 NPM 시작 또는 원사 시작을 실행하여 두 응용 프로그램을 실행할 수 있습니다. Okta 응용 프로그램 를 추가하십시오 아직 그렇게하지 않은 경우 https://developer.okta.com/signup/에서 무료 영원한 개발자 계정을 작성하십시오. 등록하면 상단 메뉴에서 응용 프로그램을 클릭하십시오. 그런 다음 응용 프로그램 추가 버튼을 클릭하십시오
- 그런 다음 응용 프로그램 제작 마법사로 이동합니다. 단일 페이지 앱 버튼을 선택하고 하단에서 다음을 클릭하십시오.
다음 화면에는 단일 페이지 응용 프로그램 템플릿에서 제공하는 기본 설정이 표시됩니다. 응용 프로그램 이름을 "회원 신청"과 같이보다 설명적인 것으로 변경하십시오. 또한 기본 URI 및 로그인을 변경하여 URIS 설정을 리디렉션하여 포트 3000을 사용하여 응용 프로그램이 실행되는 곳이므로 변경하십시오. 기본 설정의 나머지는 괜찮습니다.

그런 다음 하단에서 완료 버튼을 클릭하십시오 응용 프로그램이 작성되면 응용 프로그램 목록에서 응용 프로그램을 선택하고 일반 탭을 클릭하여 응용 프로그램의 일반 설정을보십시오. Node, React 및 Okta를 사용하여 사용자 등록을 구축하십시오

맨 아래에는 클라이언트 ID 설정이 표시됩니다 (분명히 흐려지지 않을 것입니다). React 응용 프로그램에서 사용하려면 이것을 복사하십시오. 대시 보드 페이지의 왼쪽 상단에서 찾을 수있는 OKTA 조직 URL도 필요합니다. 아마도 "https://dev-xxxxxx.oktapreview.com"과 같은 것 같습니다 reactjs 응용 프로그램 에 인증을 추가하십시오 응용 프로그램이 생성되었으므로 몇 가지 NPM 종속성을 추가하여 OKTA를 사용하여 인증을 추가하십시오. 클라이언트 폴더에서 실행 :

또는 원사 패키지 관리자를 사용하는 경우

> app.config.js라는 클라이언트/src 폴더에 파일을 추가하십시오. 파일의 내용은 다음과 같습니다

그런 다음 그런 다음 index.js 파일을 설정하여 React 라우터와 Okta의 React SDK를 사용하십시오. index.js 파일이 완료되면 다음과 같습니다.

npm i -g create-react-app express-generator

일단 완료되면 반응 라우터에서 BrowSerRouter 구성 요소 ( "라우터"로 별명)를 추가하고 Okta의 React SDK의 보안 구성 요소를 추가했습니다. 또한 app.config.js 파일은 보안 구성 요소가 요구하는 속성에서 구성 값을 사용할 수 있도록 "config"로 가져옵니다. 앱 구성 요소를 라우터 및 보안 구성 요소로 둘러싸고 지정된 값을 전달할 수 있습니다. OnauthRequired 방법은 Okta의 React SDK에게 누군가가 안전한 경로에 액세스하려고 시도하고 로그인하지 않으면 로그인 페이지로 리디렉션한다고 말합니다. 다른 모든 것은 이전에 실행 한 Create-React-App 명령에서 나왔을 것입니다. Reactjs 앱

에 페이지를 추가하십시오 React 앱에 경로를 추가하기 전에 추가하려는 경로를 처리 할 구성 요소를 작성하십시오. 클라이언트/SRC 폴더에 구성 요소 폴더를 추가하십시오. 이곳은 모든 구성 요소가 살고 가장 쉬운 방법입니다. 그런 다음 홈페이지 구성 요소에 대한 홈 폴더를 만듭니다. 현재는 하나만있을 것이지만 나중에 홈페이지에만 사용되는 더 많은 구성 요소가있을 수 있습니다. 다음 내용이있는 폴더에 homepage.js 파일을 추가하십시오.

이것은 현재 홈페이지에 필요한 전부입니다. 가장 중요한 점은 홈페이지 구성 요소를 클래스 유형으로 만드는 것입니다. 지금은 단일 H1 태그 만 포함되어 있지만 "페이지"가되어야합니다. 즉, 다른 구성 요소가 포함될 수 있으므로 컨테이너 구성 요소가되는 것이 중요합니다.

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

. 다음으로 구성 요소에 인증 폴더를 만듭니다. 인증과 관련된 모든 구성 요소가 살게됩니다. 해당 폴더에서 loginform.js 파일을 작성하십시오 가장 먼저 주목해야 할 것은 Okta의 React SDK의 Withauth 고차 구성 요소를 사용하여 전체 로그인 양식을 마무리한다는 것입니다. 이것은 Auth라는 구성 요소에 소품을 추가하여 해당 고차 구성 요소의 Isauthenticated 및 Redirect 기능과 같은 것들에 액세스 할 수있게합니다. loginform 구성 요소의 코드는 다음과 같습니다

여기에 주목할만한 또 다른 점은 수입중인 Oktauth 라이브러리입니다. 이것은 이전에 만든 OKTA 응용 프로그램을 사용하는 데 서명하는 것과 같은 기본 라이브러리입니다. Baseurl의 속성을 전달하는 생성자에서 Oktaauth 객체가 생성되는 것을 알 수 있습니다. 이것은 app.config.js 파일에있는 발행자의 URL입니다. loginform 구성 요소는 다른 구성 요소에 포함되어야 하므로이 구성 요소를 포함하려면 loginpage.js 파일을 작성해야합니다. Withauth 고차 구성 요소를 다시 사용하여 Isauthenticated 기능에 액세스 할 수 있습니다. loginpage.js의 내용은 다음과 같습니다

로그인 양식 구성 요소의 것보다 약간 적지 만 여전히 여기에 지적 할 중요한 부분이 있습니다.

. 다시, 당신은 Withauth 고차 구성 요소를 사용하고 있습니다. 이것은 Okta의 인증 또는 권한 부여 프로세스를 사용해야하는 모든 구성 요소에 대한 반복되는 테마가 될 것입니다. 이 경우, 주로 습격 기능을 얻는 데 사용됩니다. CheckAuthentication () 메소드는 생성자 및 ComponentDidupDate 수명주기 메소드에서 실행되어 구성 요소가 생성되면 체크되고 구성 요소에 대한 모든 후속 변경이 다시 확인되도록합니다.

isauthenticated가 사실을 반환하면 구성 요소의 상태에 설정됩니다. 그런 다음 렌더 메소드를 확인하여 LoginForm 구성 요소를 표시할지 여부를 결정하거나 다음에 생성 할 구성 요소 인 사용자의 프로필 페이지로 리디렉션됩니다. 이제 인증 폴더 내부에서 profilepage.js 구성 요소를 만듭니다. 구성 요소의 내용은 다음과 같습니다

npm i -g create-react-app express-generator

withauth 구성 요소는 GetUser 기능에 액세스 할 수 있습니다. 여기에서는 ComponentDidMount에서 호출되어 렌더 메소드에서 사용될 데이터를 가져 오는 일반적인 장소입니다. 당신이 볼 수있는 유일한 이상한 점은 실제로 GetUser 비동기 호출에서 반환 된 사용자가있을 때까지 아무것도 렌더링하지 않는 렌더 메소드의 첫 줄입니다. 상태에 사용자가 있으면 프로필 내용을 렌더링합니다.이 경우 현재 로그인 한 사용자 이름으로 표시됩니다. 다음으로 등록 구성 요소를 추가합니다. 로그인 페이지 구성 요소에 포함 된 LoginForm 구성 요소가있는 로그인 양식과 마찬가지로 수행 할 수 있습니다. 이를 표시하는 다른 방법을 보여주기 위해서는 기본 컨테이너 구성 요소가 될 registrationform 구성 요소 만 만들 수 있습니다. 다음 내용이있는 Auth 폴더에서 registrationform.js 파일을 만듭니다.

npm i -g create-react-app express-generator

이 구성 요소는 등록을 처리 할 노드 API (잠시 후에 빌드 할)를 호출한다는 점을 제외하고 LoginForm 구성 요소와 비슷합니다. 노드 API에 의해 등록이 완료되면 구성 요소는 새로 생성 된 사용자를 로그인하고 렌더 메소드 (상태의 세션 토큰이 표시 될 때)는 사용자를 응용 프로그램의 홈 페이지로 리디렉션합니다.

. 당신은 또한 구성 요소의 상태에있는 세션 테이크 속성을 알 수 있습니다. 이것은 등록이 성공한 경우 로그인을 처리 할 목적으로 HandlesUbmit () 함수에 의해 설정됩니다. 그런 다음 Render () 메소드에 의해 로그인이 완료되면 리디렉션을 수행하고 토큰이 수신되면 리디렉션을 수행합니다. 반응 앱 에 경로를 추가하십시오 먼저 추가 할 경로에 대한 탐색 구성 요소를 추가하십시오. 클라이언트/src/components 폴더에서 공유라는 폴더를 추가하십시오. 이곳은 응용 프로그램의 여러 장소에서 사용되는 모든 구성 요소가 위치 할 곳입니다. 해당 새 폴더에서 Navigation.js라는 파일을 추가하십시오. 파일에는 앱의 모든 페이지에 대한 링크가있는 기본 구성 요소가 포함되어 있습니다. withauth 고차 구성 요소에 내비게이션 구성 요소를 랩핑해야합니다. 이렇게하면 인증 된 사용자가 있는지 확인하고 로그인 또는 로그 아웃 버튼을 적절하게 표시 할 수 있습니다.

이제 모든 경로를 처리 할 수있는 구성 요소가 있으므로 경로를 만들 수 있습니다. 최종 버전이 다음과 같이 보이도록 app.js 파일을 업데이트하십시오.

여기에는 주목할만한 것들이 있습니다. Okta의 React SDK에서 Secureroute 및 ComplicitCallback 구성 요소의 가져 오기. ComplicitCallback 구성 요소는 인증 흐름에서 콜백을 처리하여 React 응용 프로그램 내에 OKTA에서 리턴 호출을 포착하기 위해 엔드 포인트가 있는지 확인합니다. Secureroute 구성 요소를 사용하면 모든 경로를 확보하고 인증되지 않은 사용자를 로그인 페이지로 리디렉션 할 수 있습니다. React 라우터의 경로 구성 요소는 당신이 기대하는 것을 정확하게 수행합니다. 사용자가 해당 경로를 처리 할 구성 요소를 설정하고 설정 한 경로를 취합니다. Secureroute 구성 요소는 해당 경로에 액세스하기 전에 사용자가 로그인하도록 추가 점검을 수행합니다. 그렇지 않은 경우 index.js의 onauthrequired 함수는 사용자를 로그인 페이지로 강제하도록 호출됩니다. 여기서 정말 이상한 다른 유일한 것은 로그인 경로의 경로입니다. 경로를 처리하기 위해 구성 요소를 단순히 설정하는 대신 로그인 페이지 구성 요소를 렌더링하고 구성에서 BaseUrl을 설정하는 렌더 메소드를 실행합니다. 노드 앱

에 API 엔드 포인트를 추가하십시오 노드 API가 등록을 수행하고 있음을 기억할 수 있으므로 해당 호출을 처리하려면 엔드 포인트를 노드 앱에 추가해야합니다. 그렇게하려면 Okta의 노드 SDK를 추가해야합니다. `API '폴더에서 실행 :

npm i -g create-react-app express-generator

그러면 API/경로에서 user.js 파일을 변경합니다. 파일은 다음과 같습니다.

여기에서 가장 큰 주목할만한 점은 Lib/Oktaclient (순간에 추가 할 수있는), Oktaclient의 CreateUser 함수 호출 및 NewUser 객체의 모양을 가져 오는 것입니다. NewUser 객체의 모양은 Okta의 API 문서에 문서화되어 있습니다. 노드 애플리케이션에서 OKTA 응용 프로그램을 호출하려면 API 토큰이 필요합니다. 하나를 만들려면 Okta 개발자 대시 보드로 이동하여 API 메뉴 옵션을 사용하여 토큰을 클릭하십시오.

거기에서 토큰 생성을 클릭하십시오. 토큰에게“멤버십”과 같은 이름을주고 토큰 생성을 클릭하십시오.

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

나중에 사용할 수 있도록 토큰을 안전한 위치로 복사하십시오.

노드 애플리케이션에서 lib라는 새 폴더에서 oktaclient.js라는 파일을 만듭니다. 파일은 방금 만든 API 토큰을 사용하여 Okta 노드 SDK에서 클라이언트 객체를 구성합니다.

<..> 노드 앱의 루트에있는 app.js 파일의 파일에서 파일을 업데이트하여 모든 통화 경로 /api /에 대한 경로를 발표하십시오. app.use 문의 블록 아래의 섹션이 표시됩니다. 경로를 설정하여 다음과 같이 보이도록 설정하십시오.

노드 앱이 여전히 실행중인 경우 업데이트가 적용되도록 앱 (CTRL C 포함)을 중지하고 (NPM을 시작하여) 다시 실행해야합니다. 사이트는 여전히 심각한 스타일의 사랑이 필요하더라도 이제 사용자를 등록하고 새로 생성 된 사용자에게 로그인하고 프로필 페이지에 표시를 위해 사용자의 프로필을 로그인 할 수 있습니다!

자세히 알아보십시오 이 기사에 사용 된 기술에 대해 자세히 알아 보려면 다음에 대한 문서를 확인할 수 있습니다.

okta의 노드 sdk okta의 반응 sdk. Node, React 및 Okta를 사용하여 사용자 등록을 구축하십시오 또한, 인증을 위해 Okta를 사용하여 다른 기사를 확인하십시오 :

Randall Degges의 간단한 노드 웹 사이트에서 Okta에 관한 기사 react

의 Okta 로그인 위젯을 사용한 내 기사 Progressive Web Apps

에 관한 Matt Raible의 기사

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

언제나 그렇듯이 기사에 대한 질문, 의견 또는 우려 사항이 있으면 Lee.brandt@okta.com으로 이메일을 보내거나 개발자 포럼에 질문을 게시 할 수 있습니다. 더 많은 기사와 튜토리얼을 보려면 Twitter @oktadev에서 당사를 따르십시오.

Node, React 및 Okta 로 사용자 등록을 구축 할 때 자주 묻는 질문 (FAQ) React 앱에서 Okta 인증을 구현하려면 어떻게됩니까?

REACT 앱에서 OKTA 인증 구현에는 여러 단계가 포함됩니다. 먼저 NPM 또는 원사를 사용하여 OKTA React SDK를 설치해야합니다. 그런 다음 OKTA 개발자 계정에서 OKTA 응용 프로그램을 작성해야합니다. 애플리케이션을 작성한 후 클라이언트 ID를 받게되며 응용 프로그램에서 Okta React SDK를 구성하는 데 사용됩니다. 또한 OKTA React SDK 구성 요소를 사용하여 로그인, 로그 아웃 및 안전한 페이지를위한 경로를 설정해야합니다. 마지막으로, Okta를 사용한 사용자 등록을 구축하는 데있어 Node.js의 역할은 무엇입니까?

node.js Plays. OKTA로 사용자 등록을 구축하는 데 중요한 역할. 응용 프로그램을 설정하고 실행할 수있는 서버 측 환경 역할을합니다. 이를 사용하여 서버를 작성하고, 경로를 정의하고, 요청 및 응답을 처리 할 수 있습니다. Okta의 맥락에서 Node.js를 사용하여 사용자 생성, 자격 증명 확인 및 세션 관리와 같은 작업을 위해 Okta API와 상호 작용할 수 있습니다. >

OKTA를 사용하여 React 앱을 보호하려면 Okta React SDK를 사용하여 앱에 인증 및 인증 기능을 추가해야합니다. 보안 구성 요소를 사용하여 앱을 포장하고 필요한 인증 컨텍스트를 제공 할 수 있습니다. Secureroute 구성 요소를 사용하여 특정 경로를 보호하고 인증 된 사용자 만 액세스 할 수 있는지 확인할 수도 있습니다. 또한 Useoktaauth 후크를 사용하여 구성 요소의 인증 상태 및 메소드에 액세스 할 수 있습니다.