ノード、React、およびOKTAでユーザー登録を構築します

この記事は、もともとOkta Developer Blogで公開されました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 今日のインターネットユーザーは、パーソナライズされたエクスペリエンスを期待しています。開発者は、ユーザーの情報を非公開にしながら、そのパーソナライズされたエクスペリエンスを提供するWebサイトを開発することを学ぶ必要があります。最新のWebアプリケーションには、サーバー側のAPIとクライアント側のユーザーインターフェイスもある傾向があります。現在ログインしているユーザーを両端に認識させるのは難しい場合があります。このチュートリアルでは、React UIをフィードするノードAPIのセットアップを説明し、ユーザーの情報をプライベートで個人的に保つユーザー登録を構築します。 このチュートリアルでは、ReduxやReduxThunkなどの州管理ライブラリは使用しません。より堅牢なアプリケーションでは、おそらくそれを行う必要がありますが、ReduxとReduxThunkを配線してから、ここで使用するフェッチステートメントをサンクとして追加するのは簡単です。簡単にするために、そしてこの記事をユーザー管理の追加に焦点を合わせるために、componentDidMount関数にフェッチステートメントを追加します。

キーテイクアウト

Simplified Setup：Node、React、およびOktaでユーザー登録をセットアップしても、Reduxなどの状態管理ライブラリは必要ありません。初期開発プロセスの簡素化。

実用的な統合：チュートリアルは、OktaのReact SDKとReactルーターの使用を強調し、Reactアプリケーションで認証用のOKTAを統合するための実践的なアプローチを提供します。

コード組織：アプリケーションの構造は、APIとクライアント側の個別のフォルダーで懸念を適切に分離し、保守性を向上させます。

安全なユーザー認証：OKTAはユーザー認証を安全に処理するために使用され、ユーザーの資格情報が安全かつ効率的に管理されるようにします。

コンポーネントベースの構造：Reactのコンポーネントベースのアーキテクチャは、ログイン、登録、およびユーザープロファイル用の個別のコンポーネントを使用して、UIを整理するために活用されています。
• 包括的なチュートリアル：ガイドは、基本的なセットアップから高度なユーザーの取り扱いまでカバーし、ノード、React、およびOKTAを使用して本格的なユーザー登録システムを構築することを完全に理解しています。
• ノードをインストールし、前提条件を反応します
• ベースアプリケーションをセットアップするには、これらの基本ツールがインストールされていることを確認してください。
• node（8）
• npm（5）
• create-react-app（npmパッケージ）

Express-Generator（NPM Package）

OKTA開発者アカウントも必要です。

ノードとNPMをインストールするには、https：//nodejs.org/en/。
• でオペレーティングシステムの指示に従うことができます
次に、NPMコマンドラインに2つのNPMパッケージをインストールするだけです。
基本的なアプリケーション構造をセットアップする準備ができました。

• 基本アプリケーションの足場

  アプリケーションをライブにしたいフォルダーに移動し、新しいフォルダーを作成します。

  これにより、APIとクライアントと呼ばれるメンバーシップサンプルフォルダーに2つのフォルダーが作成され、APIフォルダーにnodejsとExpressアプリケーションとクライアントフォルダーにベースReactアプリケーションがあります。したがって、フォルダー構造は次のようになります

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

  メンバーシップサンプル

  api
  • クライアント
    この次のパートを簡単にするには、2つの端子または端子タブを開きます。 ExpressアプリフォルダーAPIの1つ、もう1つはReactアプリフォルダークライアントに。
    デフォルトでは、Reactアプリとノードアプリは両方とも開発中にポート3000で実行されるため、APIを別のポートで実行してからクライアントアプリでプロキシを作成する必要があります。
  APIフォルダーで、 /bin /wwwファイルを開き、ポートを変更しますAPIは3001に実行されます。
  次に、クライアントアプリケーションのAPIのプロキシを設定して、/API/{リソース}を呼び出し、ポート3000からポート3001にプロキシにすることができます。以下の名前の設定：

  最後に、各サブフォルダー（APIおよびクライアント）のNPMインストールまたはYARNインストールを実行して、依存関係がインストールされていることを確認することを忘れないでください。

  APIおよびクライアントアプリケーションの適切なフォルダーでNPM STARTまたはYARN STARTを実行して両方のアプリケーションを実行できるようになりました。

  OKTAアプリケーションを追加

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

  まだ行っていない場合は、https://developer.okta.com/signup/で無料のForever開発者アカウントを作成します。

  登録したら、トップメニューのアプリケーションをクリックします。次に、[アプリケーションの追加]ボタンをクリックします

  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3001');
  app.set('port', port);
  

  その後、アプリケーション作成ウィザードに連れて行かれます。シングルページアプリボタンを選択し、下部の[次へ]をクリックします。
  次の画面では、シングルページアプリケーションテンプレートによって提供されるデフォルト設定が表示されます。 「メンバーシップアプリケーション」など、アプリケーションの名前をより説明的なものに変更します。また、ベースURISを変更し、ログインはURISの設定をリダイレクトしてポート3000を使用します。これがアプリケーションが実行される場所であるためです。デフォルト設定の残りの部分は問題ありません。

  次に、下部の[完了]ボタンをクリックします。

  アプリケーションが作成されたら、アプリケーションリストから選択し、[一般的なタブをクリックしてアプリケーションの一般的な設定を表示します。

  下部には、クライアントIDの設定が表示されます（明らかにぼやけません）。これをコピーして、Reactアプリケーションで使用します。また、Dashboardページの左上にあるOKTA組織URLが必要です。おそらく「https://dev-xxxxxx.oktapreview.com」のようなものになるでしょう

  ReactJSアプリケーションに認証を追加
  アプリケーションが作成されたら、いくつかのnpm依存関係を追加してOKTAを使用して認証を追加します。クライアントフォルダーの実行から：

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

  または、YARNパッケージマネージャーを使用している場合：

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

  app.config.jsと呼ばれるクライアント/SRCフォルダーにファイルを追加します。ファイルの内容は次のとおりです
  次に、index.jsファイルをセットアップして、ReactルーターとOktaのReact SDKを使用します。 index.jsファイルが完了すると、次のようになります。

  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3001');
  app.set('port', port);
  

  完了すると、ReactルーターからBrowsErrouterコンポーネント（「ルーター」としてエイリアス）とOKTAのReact SDKのセキュリティコンポーネントを追加します。また、app.config.jsファイルが「構成」としてインポートされているため、セキュリティコンポーネントが必要とするプロパティの構成値を使用できます。

  また、指定された値を渡すルーターとセキュリティコンポーネントでアプリコンポーネントを囲みます。 OnauthRequiredメソッドは、OktaのReact SDKに、誰かが安全なルートにアクセスしようとしてログインしていない場合、ログインページにリダイレクトすることを単純に伝えます。

  "name": "client",
  "proxy": "http://localhost:3001"
  

  他のすべては、以前に実行したCreate-React-Appコマンドから来ています。

  ReactJSアプリにページを追加します

  Reactアプリにルートを追加する前に、追加するルートを処理するコンポーネントをいくつか作成します。

  クライアント/SRCフォルダーにコンポーネントフォルダーを追加します。これは、すべてのコンポーネントが住む場所であり、それらを整理する最も簡単な方法です。次に、ホームページコンポーネント用のホームフォルダーを作成します。今のところ、1つだけがありますが、後でホームページにのみ使用されるコンポーネントが増える場合があります。次の内容を持つHomePage.jsファイルをフォルダーに追加します。
  これは、現時点でホームページに本当に必要なすべてです。最も重要なポイントは、ホームページコンポーネントをクラスタイプにすることです。現在は単一のH1タグしか含まれていませんが、「ページ」であることを意図しています。つまり、他のコンポーネントが含まれる可能性が高いため、コンテナコンポーネントであることが重要です。

  次に、コンポーネントにAUTHフォルダーを作成します。これは、認証に関係しているすべてのコンポーネントが実現する場所です。そのフォルダーで、loginform.jsファイルを作成します。

  最初に注意すべきことは、OKTAのReact SDKのWithAuthの高次コンポーネントを使用して、ログインフォーム全体をラップすることです。これにより、Authと呼ばれるコンポーネントにプロップが追加され、その高次コンポーネントのIsAuthedicatedおよびリダイレクト関数のようなものにアクセスできるようになります。

  ログインフォームコンポーネントのコードは次のとおりです
  もう1つの注意事項は、オクタアースライブラリがインポートされていることです。これは、以前に作成したOKTAアプリケーションの使用に署名するなどのベースライブラリです。コンストラクターにOktaauthオブジェクトが作成されていることに気付くでしょう。これは、app.config.jsファイルにある発行者のURLです。 Loginformコンポーネントは別のコンポーネントに含まれることを目的としているため、このコンポーネントを含むにはloginpage.jsファイルを作成する必要があります。 withauthの高次コンポーネントを再度使用して、isauthenticated関数にアクセスします。 loginpage.jsの内容は次のとおりです

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

  ログインフォームコンポーネントにあるものよりも少し少ないですが、ここで指摘する重要な作品がまだいくつかあります。

  繰り返しますが、WithAuthの高次コンポーネントを使用しています。これは、OKTAの認証または承認プロセスを使用する必要があるすべてのコンポーネントの繰り返しのテーマになります。この場合、それは主にisAuthenticated関数を取得するために使用されます。 CheckAuthentication（）メソッドは、コンストラクターとコンポーネントDidupdateライフサイクルメソッドで実行され、コンポーネントが作成されたときにチェックされ、その後のコンポーネントへの変更がすべて再度チェックされるようにします。

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

  isauthenticatedが真実を返すと、コンポーネントの状態に設定されます。次に、レンダリング方法でチェックされて、ログインフォームコンポーネントを表示するか、ユーザーのプロファイルページにリダイレクトするかを決定します。

  Authフォルダー内にprofilepage.jsコンポーネントを作成します。コンポーネントの内容は次のとおりです

  ここでのwithauthコンポーネントは、getuser機能にアクセスできます。ここでは、Renderメソッドで使用されるデータをプルするための一般的な場所であるComponentDidMountから呼び出されます。あなたが見るかもしれない唯一の奇妙なことは、実際にユーザーがGetuserの非同期コールから返されるまで何もレンダリングするレンダリング方法の最初の行です。州にユーザーがいると、プロファイルコンテンツをレンダリングします。この場合、現在ログインしているユーザーの名前が表示されています。

  次に、登録コンポーネントを追加します。これは、ログインコンポーネントに含まれるログインフォームコンポーネントがあるログインフォームと同じように実行できます。これを表示する別の方法を示すために、メインコンテナコンポーネントとなる登録フォームコンポーネントを作成するだけです。次のコンテンツを使用して、authフォルダーに登録file.jsファイルを作成します。

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

  このコンポーネントは、登録の実行を処理するノードAPI（すぐにビルドすること）を呼び出すことを除いて、ログインフォームコンポーネントによく似ています。登録がノードAPIによって完了すると、コンポーネントは新しく作成されたユーザーにログを記録し、レンダリングメソッド（状態でセッショントークンが表示されるとき）は、ユーザーをアプリケーションのホームページにリダイレクトします。

  コンポーネントの状態のセッションが伸びるプロパティに気付くこともあります。これは、登録が成功した場合にログインを処理する目的で、handleSubmit（）関数によって設定されます。また、ログインが完了したらリダイレクトを実行するためにRender（）メソッドで使用され、トークンが受信されました。

  React Appにルートを追加
  最初に、追加するルートのナビゲーションコンポーネントを追加します。クライアント/SRC/コンポーネントフォルダーに、共有と呼ばれるフォルダーを追加します。これは、アプリケーションのいくつかの場所で使用されるすべてのコンポーネントが配置される場所です。その新しいフォルダーに、navigation.jsというファイルを追加します。このファイルには、アプリ内のすべてのページへのリンクがある基本コンポーネントが含まれています。

  withauthの高次コンポーネントにナビゲーションコンポーネントをラップする必要があります。そうすれば、認証されたユーザーがあるかどうかを確認し、必要に応じてログインまたはログアウトボタンを表示できます。

  すべてのルートを処理するためのコンポーネントが利用可能になったので、それらと一緒に行くル​​ートを作成します。 app.jsファイルを更新して、最終バージョンが次のようになるようにします。

  ここにはいくつかの注意があります。 OktaのReact SDKからのSecurerouteおよびImplicitCallbackコンポーネントのインポート。 ImplicitCallbackコンポーネントは、認証フローからのコールバックを処理して、OKTAからのリターンコールをキャッチするためのReactアプリケーション内にエンドポイントがあることを確認します。 Securerouteコンポーネントを使用すると、任意のルートを保護し、認証されていないユーザーをログインページにリダイレクトできます。

  React Routerからのルートコンポーネントは、予想されることを正確に行います。ユーザーがナビゲートしたパスを取り、そのルートを処理するコンポーネントを設定します。 Securerouteコンポーネントは、そのルートへのアクセスを許可する前に、ユーザーがログインするように追加のチェックを行います。それらがそうでない場合は、index.jsのonauthRequed関数が呼び出され、ユーザーにログインページを強制します。

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

  ここで他の唯一の本当に奇妙なものは、ログインパスのルートです。パスを処理するようにコンポーネントを単に設定する代わりに、ログインページコンポーネントをレンダリングし、構成からbaseURLを設定するレンダリングメソッドを実行します。

  APIエンドポイントをノードアプリに追加します

  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3001');
  app.set('port', port);
  

  ノードAPIが登録を行っていることを覚えているかもしれません。そのため、ノードアプリにエンドポイントを追加して、その呼び出しを処理する必要があります。そのためには、OKTAのノードSDKを追加する必要があります。 `api`フォルダーの実行から：

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

  次に、API/ルートでusers.jsファイルを変更します。ファイルは次のようになります：

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

  ここでの最大のことは、lib/oktaclientのインポート（すぐに追加する）、oktaclientのcreateUser関数への呼び出し、および新ユーザーオブジェクトの形状です。 Newuserオブジェクトの形状は、OKTAのAPIドキュメントに文書化されています。

  ノードアプリケーションにOKTAアプリケーションに電話をかけるには、APIトークンが必要です。 1つを作成するには、OKTA開発者ダッシュボードに移動し、APIメニューオプションの上にホバリングし、トークンをクリックします。
  そこから[トークンを作成]をクリックします。トークンに「メンバーシップ」のような名前を付け、[トークンの作成]をクリックします。

  トークンを後で使用するために安全な場所にコピーします。

  ノードアプリケーションでLIBと呼ばれる新しいフォルダーにoktaclient.jsというファイルを作成します。このように作成したAPIトークンを使用して、ファイルはOKTAのノードSDKからクライアントオブジェクトを構成します。

  app.jsファイルでノードアプリのrootのファイルで、ファイルを更新して、すべての呼び出しルートに /api /を使用します。 App.Suseステートメントのブロックの下にセクションが表示されます。セットアップされたルートを変更して、次のようになります。

  ノードアプリがまだ実行されている場合、アプリを停止し（CTRL Cを使用）、更新を有効にするために（NPM Startで）再実行する必要があります。

  サイトにはまだ深刻なスタイルの愛が必要ですが、ユーザーを登録し、新しく作成したユーザーにログインし、プロファイルページに表示するためにユーザーのプロフィールを記録することができます！

  /**
   * Get port from environment and store in Express.
   */
  
  var port = normalizePort(process.env.PORT || '3001');
  app.set('port', port);
  

  もっと学ぶ

  "name": "client",
  "proxy": "http://localhost:3001"
  

  この記事で使用されているテクノロジーの詳細については、ドキュメントをご覧ください。

  oktaのノードsdk

  okta's React sdk。
  また、認証のためにOKTAを使用して他の記事をチェックしてください：
  シンプルなノードのウェブサイトでOKTAに関するランドールデッグスの記事
  oktaサインインウィジェットをReact
  • を使用した私の記事
  Matt RaibleのProgressive Webアプリに関する記事

  いつものように、記事に関する質問、コメント、または懸念がある場合は、lee.brandt@okta.comにメールを送信するか、開発者フォーラムに質問を投稿してください。その他の記事やチュートリアルについては、twitter @oktadevでフォローしてください。ノード、React、およびOkta

  でユーザー登録を構築するためのよくある質問（FAQ）

  ReactアプリにOKTA認証を実装するにはどうすればよいですか？

  ​​

  ReactアプリにOKTA認証を実装するには、いくつかのステップが含まれます。まず、NPMまたはYARNを使用してOKTA React SDKをインストールする必要があります。次に、OKTA開発者アカウントにOKTAアプリケーションを作成する必要があります。アプリケーションを作成した後、クライアントIDを受信します。クライアントIDは、アプリケーションでOKTA React SDKを構成するために使用します。また、OKTA React SDKコンポーネントを使用して、ログイン、ログアウト、およびセキュアページ用のルートをセットアップする必要があります。最後に、useoktaauthフックを使用して、コンポーネント内の認証状態とメソッドにアクセスできます。 OKTAでユーザー登録を構築する上で重要な役割。これは、アプリケーションを設定して実行できるサーバー側の環境として機能します。それを使用して、サーバーを作成し、ルートを定義し、リクエストと応答を処理できます。 OKTAのコンテキストでは、node.jsを使用して、ユーザーの作成、資格情報の検証、セッションの管理などのタスクについてOKTA APIと対話できます。 >

  OKTAとのReactアプリのセキュリティには、OKTA React SDKを使用して、アプリに認証機能と認証機能を追加することが含まれます。セキュリティコンポーネントを使用して、アプリをラップし、必要な認証コンテキストを提供できます。 Securerouteコンポーネントを使用して特定のルートを保護し、認証されたユーザーのみがアクセスできることを確認することもできます。さらに、useoktaauthフックを使用して、コンポーネントの認証状態とメソッドにアクセスできます。

  okta認証を実装するときにエラーを処理するにはどうすればよいですか？

  OKTAログインページをカスタマイズするにはどうすればよいですか？

  OKTA開発者ダッシュボードの「カスタマイズ」セクションに移動することにより、OKTAログインページをカスタマイズできます。ここでは、ログインページのロゴ、色、テキストを変更できます。また、完全にカスタマイズ可能なログインエクスペリエンスを提供するJavaScriptライブラリであるOKTAサインインウィジェットを使用することもできます。 AngularとVueを含むフレームワーク。これらのSDKは、React SDKと同様に機能し、アプリに認証と承認機能を追加できるようにします。 NPMまたはYARNを使用してSDKをインストールし、OKTAアプリケーションの詳細で構成し、アプリでコンポーネントとフックを使用できます。 OKTAは、Java、.NET、PHPなど、さまざまなバックエンドテクノロジーにライブラリとSDKを提供しています。これらのライブラリを使用すると、サーバー側のコードからOKTA APIと対話できます。それらを使用してユーザーを作成したり、資格情報を確認したり、セッションを管理したり、OKTA認証で問題をトラブルシューティングするにはどうすればよいですか？ネットワークのリクエストと応答、およびOKTAログのレビュー。エラーメッセージは、何がうまくいかなかったかについての手がかりを与えることができます。ネットワークのリクエストと応答は、OKTAに送信および受信したデータを表示できます。 OKTAログは、認証イベントに関する詳細な情報を提供できます。

  OKTAとその機能について詳しく知るにはどうすればよいですか？ 。ここでは、ガイド、チュートリアル、API参照などを見つけることができます。また、OKTA開発者フォーラムに参加して質問をしたり、他の開発者と知識を共有したりすることもできます。

以上がノード、React、およびOKTAでユーザー登録を構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。