React、GraphQL、およびユーザー認証を使用してヘルストラッキングアプリを構築する

安全な反応アプリケーションを構築する：graphql、typeorm、node.js、oktaの組み合わせ

この記事では、VESPERフレームワーク、Typeorm、MySQL、およびnode.jsを使用して安全なGraphQL APIを構築する方法をガイドし、React、ReactStrap、およびApolloクライアントを使用してそれと対話するクライアントを作成します。安全なユーザー認証に焦点を当て、OKTAでアイデンティティ管理を簡素化します。

この記事は、もともとOkta Developer Blogで公開されました。 SitePointを可能なものとしてサポートしてくれたパートナーに感謝します。

毎日の健康データを記録するための健康追跡アプリケーションを作成します。

なぜOktaを選ぶのですか？

Oktaは、アイデンティティ管理を簡素化し、より安全で拡張しやすくするクラウドサービスです。それはあなたを可能にします：

認定および承認されたユーザー
ユーザーデータの保存
パスワードベースとソーシャルログインを実行します
マルチファクター認証でアプリケーションを保護します
その他の機能！製品のドキュメントを確認してください。

OKTAを永久に無料の開発者アカウントを登録し、安全なReactアプリケーションの構築方法を学び続けてください！

なぜヘルストラッキングアプリを選択するのですか？

2014年9月から10月中旬まで21日間の砂糖のない解毒期間があり、砂糖の食べをやめ、定期的な運動を開始し、飲酒を止めました。私は10年以上にわたって高血圧を患っていて、その時点で降圧薬を服用していました。解毒の最初の週に、私は血圧薬を使い果たしました。新しい処方には医師の訪問が必要なので、私はデトックスが終わるまで医者に診てもらうことにしました。 3週間後、私は15ポンドを失っただけでなく、血圧が通常のレベルに戻りました！

私は自分の健康を追跡するために21ポイントのシステムを作成しました。ルールは単純です：

健康的な食事のために1つのポイントを取得します。それ以外の場合、ポイントは授与されません。
運動のために1つのポイントを取得します。
飲酒せずにポイントを取得します。

私は自分の健康を追跡するために21ポイントの健康を構築しました。次に、毎日のポイントのみを追跡する簡素化されたバージョンを作成します。

typeorm、graphql、vesper

を使用してAPIをビルドします

Typeormは、ほとんどのJavaScriptプラットフォームで実行される柔軟なORMフレームワークです。 Typeormのグローバルインストール：

npm i -g typeorm@0.2.7

クライアントとGraphQL APIを保存するためのディレクトリを作成します：

mkdir health-tracker
cd health-tracker

次のコマンドを使用して新しいMySQLプロジェクトを作成します。

編集

typeorm init --name graphql-api --database mysql

ユーザー名、パスワード、およびデータベースをカスタマイズします。

graphql-api/ormconfig.jsonmysql（まだインストールされていない場合）をインストールします。

プロジェクトに移動し、プロジェクトの依存関係をインストールしてから起動して、MySQLに接続できるようにします。

graphql-api

vesperをインストールして、typeormとgraphql

cd graphql-api
npm i
npm start

を統合します

GraphQLモデルとコントローラーを作成します。

npm i vesper@0.1.9

エンティティを作成

を変更して、ポイントをユーザーに関連付けることを許可します。

src/entity/User.tsコントローラーを作成しますsrc/entity/Points.ts

GraphQLクエリと突然変異を処理するためのsrc/controller/PointsController.tsを作成します。

src/index.tsを変更して、VESPERのbootstrap()

を使用してすべてを構成します。

GraphQLプレイグラウンドを使用して、APIおよびテストクエリと突然変異を開始します。

修理日

graphql-iso-dateインストール

をインストールし、日付を処理するためにカスタムパーサーを構成します。

react

の使用を開始します

CREATE REACTアプリを使用してReactクライアントを作成し、必要な依存関係をインストールします。

npm i -g typeorm@0.2.7

apolloクライアントを構成

Apolloクライアントを構成して、GraphQL APIに接続します。

アポロプロバイダーとクエリコンポーネントを使用して

Apolloproviderとクエリコンポーネントを使用するようにreact-client/src/App.jsを変更します。

OpenID Connect Authentication for React

を追加します

OKTAにOIDCアプリケーションを作成し、Okta's React SDKとReact-Router-Dom：

をインストールします

mkdir health-tracker
cd health-tracker

ルーティングと認証を構成

react-client/src/App.jsを変更して、OKTA認証をセットアップします。

CREATE Component

作成Home.js、Login.js、Points.jsコンポーネントを作成します。

ReactStrapとBootstrapをインストールします

ReactStrapとBootstrapをインストールし、BootstrapのCSSファイルを追加します。

Okta Sign-in Widgetを使用して

を使用します

オクタサインインウィジェットのインストール：

typeorm init --name graphql-api --database mysql

OktaSignInWidget.jsコンポーネントを作成します。

CREATEPoints.jsコンポーネント

jwt

からユーザー情報を取得します

OktaのJWT Verifier：

をインストールします

cd graphql-api
npm i
npm start

creategraphql-api/src/CurrentUser.ts。

jwt verifier

を構成します

JWTバリーターを構成するようにgraphql-api/src/index.tsを変更します。

コントローラーを変更

Currentuserを注入してユーザーIDをフィルタリングするには、graphql-api/src/controller/PointsController.tsを変更します。

APIを再起動し、アプリケーションをテストします。

結論

この記事では、GraphQL、Typeorm、node.jsを使用して安全なReactアプリケーションを構築する方法を示しています。 OKTAが提供する他のリソースをチェックして、React、ノード、およびユーザー認証の詳細をご覧ください。

実際のOKTAドメイン名とクライアントIDにプレースホルダー{yourOktaDomain}と{clientId}を置き換えることを忘れないでください。 ソースコードリンクについては、元のテキストを参照してください。

以上がReact、GraphQL、およびユーザー認証を使用してヘルストラッキングアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。