React, GraphQL 및 사용자 인증을 통해 건강 추적 앱 구축

안전한 반응 응용 프로그램 구축 : GraphQL, Typeorm, Node.js 및 Okta 결합 이 기사에서는 Vesper Framework, TypeOrm, MySQL 및 Node.js를 사용하여 안전한 GraphQL API를 구축하는 방법을 안내하고 React, ReactStrap 및 Apollo 클라이언트를 사용하여 IT와 상호 작용하는 클라이언트를 만듭니다. 우리는 보안 사용자 인증에 중점을두고 OKTA를 통해 신원 관리를 단순화 할 것입니다.

이 기사는 원래 Okta Developer 블로그에 게시되었습니다. itepoint를 가능한 한 itepoint를 지원하는 파트너에게 감사합니다.

우리는 매일 건강 데이터를 기록하기위한 건강 추적 응용 프로그램을 만들 것입니다. 왜 OKTA를 선택합니까?

Okta는 신원 관리를 단순화하고 더 안전하고 확장하기가 쉬운 클라우드 서비스입니다. 그것은 당신이 다음을 허용합니다 :

인증 및 공인 사용자 사용자 데이터 저장 비밀번호 기반 및 소셜 로그인을 실행하십시오 다중 인증 인증으로 응용 프로그램을 보호하십시오 더 많은 기능! 제품 문서를 확인하십시오. OKTA 영구 무료 개발자 계정을 등록하고 안전한 React 응용 프로그램을 구축하는 방법을 계속 배우십시오!

왜 건강 추적 앱을 선택합니까?

나는 2014 년 9 월부터 10 월 중순까지 21 일 설탕이없는 해독 기간을 가졌으며 설탕 섭취를 중단하고 규칙적인 운동을 시작했으며 술을 중단했습니다. 나는 10 년 이상 고혈압이 있었고 당시 항 고혈압제를 복용하고있었습니다. 해독 첫 주에 나는 혈압 약을 사용했습니다. 새로운 처방전에는 의사의 방문이 필요하기 때문에 의사를 만나기 전에 해독이 끝날 때까지 기다리기로 결정했습니다. 3 주 후, 나는 15 파운드를 잃었을뿐만 아니라 혈압이 정상 수준으로 돌아 왔습니다!

나는 건강을 추적하기 위해 21 포인트 시스템을 만들었습니다. 규칙은 간단합니다 :

건강한식이 요법을 위해 한 지점을 얻으십시오. 그렇지 않으면 포인트가 수여되지 않습니다.

운동의 한 지점을 얻으십시오.

술을 마시지 않고 포인트를 얻으십시오.

나는 건강을 추적하기 위해 21 점 건강을 구축했습니다. 이제 매일 포인트 만 추적하는 단순화 된 버전을 만들 것입니다.
• typeorm, graphql 및 vesper 가있는 API를 빌드하십시오 typeorm은 대부분의 JavaScript 플랫폼에서 실행되는 유연한 ORM 프레임 워크입니다. Typeorm의 글로벌 설치 :
반응 클라이언트 및 GraphQL API를 저장하기위한 디렉토리를 만듭니다 :
다음 명령을 사용하여 새 MySQL 프로젝트를 만듭니다.
• edit
사용자 정의 사용자 이름, 비밀번호 및 데이터베이스.
• MySQL을 설치하십시오 (아직 설치되지 않은 경우).
프로젝트로 이동하여 프로젝트 의존성을 설치 한 다음 시작하여 MySQL에 연결할 수 있는지 확인하십시오.

vesper를 설치하여 typeorm 및 graphql 를 통합하십시오

그래프 QL 모델 및 컨트롤러를 만듭니다.

생성 엔티티

사용자와 연관된 지점을 허용하려면 및

를 수정하십시오.

컨트롤러를 만듭니다

생성 그래프 QL 쿼리 및 돌연변이를 처리합니다. src/controller/PointsController.ts

를 수정하려면 Vesper 's 을 사용하여 모든 것을 구성하십시오. src/index.ts GraphQL Playground를 사용하여 API 및 테스트 쿼리 및 돌연변이를 시작하십시오. bootstrap() 수리 날짜

설치 를 설치하고 맞춤형 파서를 구성하여 날짜를 처리하십시오.

반응을 시작하기 시작하십시오 반응 앱 생성을 사용하여 React Client 생성 및 필요한 종속성을 설치하십시오.

아폴로 클라이언트 구성 Apollo 클라이언트를 구성하여 GraphQL API에 연결하십시오.

Apolloprovider 및 Query 구성 요소 사용

apolloprovider 및 쿼리 구성 요소를 사용하려면 를 수정하십시오.

react graphql-iso-date에 대한 OpenID Connect 인증 추가 OKTA에서 OIDC 응용 프로그램을 작성하고 Okta의 React SDK 및 React-Router-DOM을 설치하십시오 :

라우팅 및 인증 구성

OKTA 인증을 설정하려면

를 수정하십시오.

구성 요소 생성

npm i -g typeorm@0.2.7

생성 <🎜 🎜>, <🎜 🎜> 및

구성 요소를 작성하십시오.

reactStrap 및 bootstrap <🎜 🎜

를 설치하십시오 reactstrap 및 bootstrap을 설치하고 부트 스트랩의 CSS 파일을 추가하십시오.

OKTA 로그인 위젯 사용 OKTA 로그인 위젯 설치 : <🎜 🎜>

작성 <🎜 🎜> 구성 요소를 작성하십시오.

react-client/src/App.js CREATE <🎜 🎜> 구성 요소 <🎜 🎜> jwt

에서 사용자 정보를 얻으십시오 <'s> Okta의 JWT Verifier를 설치하십시오 : <🎜 🎜>

생성 <🎜 🎜>.

jwt 검증기 <🎜

를 구성하십시오

mkdir health-tracker
cd health-tracker

JWT 유효성 검사기를 구성하려면

를 수정하십시오.

컨트롤러를 수정하십시오

currentUser를 주입하고 사용자 ID를 필터링하려면 react-client/src/App.js를 수정하십시오.

API를 다시 시작하고 응용 프로그램을 테스트하십시오.

결론 이 기사는 GraphQL, Typeorm 및 Node.js를 사용하여 보안 반응 응용 프로그램을 구축하는 방법을 보여줍니다. React, Node 및 사용자 인증에 대한 자세한 내용은 Okta가 제공 한 다른 리소스를 확인하십시오.

실제 OKTA 도메인 이름 및 클라이언트 ID에 대해 자리 표시 자 및

를 교체해야합니다. 소스 코드 링크의 원본 텍스트를 참조하십시오.

위 내용은 React, GraphQL 및 사용자 인증을 통해 건강 추적 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!