この記事は、もともと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を統合するための実践的なアプローチを提供します。OKTA開発者アカウントも必要です。
アプリケーションをライブにしたいフォルダーに移動し、新しいフォルダーを作成します。
これにより、APIとクライアントと呼ばれるメンバーシップサンプルフォルダーに2つのフォルダーが作成され、APIフォルダーにnodejsとExpressアプリケーションとクライアントフォルダーにベースReactアプリケーションがあります。したがって、フォルダー構造は次のようになりますnpm i -g create-react-app express-generator
メンバーシップサンプル
最後に、各サブフォルダー（APIおよびクライアント）のNPMインストールまたはYARNインストールを実行して、依存関係がインストールされていることを確認することを忘れないでください。
APIおよびクライアントアプリケーションの適切なフォルダーでNPM STARTまたはYARN STARTを実行して両方のアプリケーションを実行できるようになりました。OKTAアプリケーションを追加
mkdir MembershipSample cd MembershipSample express api create-react-app client
登録したら、トップメニューのアプリケーションをクリックします。次に、[アプリケーションの追加]ボタンをクリックします
/**
* 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 i -g create-react-app express-generator
mkdir MembershipSample cd MembershipSample express api create-react-app client
次に、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"
ReactJSアプリにページを追加します
Reactアプリにルートを追加する前に、追加するルートを処理するコンポーネントをいくつか作成します。
クライアント/SRCフォルダーにコンポーネントフォルダーを追加します。これは、すべてのコンポーネントが住む場所であり、それらを整理する最も簡単な方法です。次に、ホームページコンポーネント用のホームフォルダーを作成します。今のところ、1つだけがありますが、後でホームページにのみ使用されるコンポーネントが増える場合があります。次の内容を持つHomePage.jsファイルをフォルダーに追加します。これは、現時点でホームページに本当に必要なすべてです。最も重要なポイントは、ホームページコンポーネントをクラスタイプにすることです。現在は単一のH1タグしか含まれていませんが、「ページ」であることを意図しています。つまり、他のコンポーネントが含まれる可能性が高いため、コンテナコンポーネントであることが重要です。
最初に注意すべきことは、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
Authフォルダー内にprofilepage.jsコンポーネントを作成します。コンポーネントの内容は次のとおりです
ここでのwithauthコンポーネントは、getuser機能にアクセスできます。ここでは、Renderメソッドで使用されるデータをプルするための一般的な場所であるComponentDidMountから呼び出されます。あなたが見るかもしれない唯一の奇妙なことは、実際にユーザーがGetuserの非同期コールから返されるまで何もレンダリングするレンダリング方法の最初の行です。州にユーザーがいると、プロファイルコンテンツをレンダリングします。この場合、現在ログインしているユーザーの名前が表示されています。
次に、登録コンポーネントを追加します。これは、ログインコンポーネントに含まれるログインフォームコンポーネントがあるログインフォームと同じように実行できます。これを表示する別の方法を示すために、メインコンテナコンポーネントとなる登録フォームコンポーネントを作成するだけです。次のコンテンツを使用して、authフォルダーに登録file.jsファイルを作成します。npm i -g create-react-app express-generator
コンポーネントの状態のセッションが伸びるプロパティに気付くこともあります。これは、登録が成功した場合にログインを処理する目的で、handleSubmit（）関数によって設定されます。また、ログインが完了したらリダイレクトを実行するためにRender（）メソッドで使用され、トークンが受信されました。
React Appにルートを追加最初に、追加するルートのナビゲーションコンポーネントを追加します。クライアント/SRC/コンポーネントフォルダーに、共有と呼ばれるフォルダーを追加します。これは、アプリケーションのいくつかの場所で使用されるすべてのコンポーネントが配置される場所です。その新しいフォルダーに、navigation.jsというファイルを追加します。このファイルには、アプリ内のすべてのページへのリンクがある基本コンポーネントが含まれています。
すべてのルートを処理するためのコンポーネントが利用可能になったので、それらと一緒に行くルートを作成します。 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
APIエンドポイントをノードアプリに追加します
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
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からクライアントオブジェクトを構成します。
ノードアプリがまだ実行されている場合、アプリを停止し（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。
いつものように、記事に関する質問、コメント、または懸念がある場合は、lee.brandt@okta.comにメールを送信するか、開発者フォーラムに質問を投稿してください。その他の記事やチュートリアルについては、twitter @oktadevでフォローしてください。ノード、React、およびOkta
OKTAとのReactアプリのセキュリティには、OKTA React SDKを使用して、アプリに認証機能と認証機能を追加することが含まれます。セキュリティコンポーネントを使用して、アプリをラップし、必要な認証コンテキストを提供できます。 Securerouteコンポーネントを使用して特定のルートを保護し、認証されたユーザーのみがアクセスできることを確認することもできます。さらに、useoktaauthフックを使用して、コンポーネントの認証状態とメソッドにアクセスできます。
OKTA開発者ダッシュボードの「カスタマイズ」セクションに移動することにより、OKTAログインページをカスタマイズできます。ここでは、ログインページのロゴ、色、テキストを変更できます。また、完全にカスタマイズ可能なログインエクスペリエンスを提供するJavaScriptライブラリであるOKTAサインインウィジェットを使用することもできます。 AngularとVueを含むフレームワーク。これらのSDKは、React SDKと同様に機能し、アプリに認証と承認機能を追加できるようにします。 NPMまたはYARNを使用してSDKをインストールし、OKTAアプリケーションの詳細で構成し、アプリでコンポーネントとフックを使用できます。 OKTAは、Java、.NET、PHPなど、さまざまなバックエンドテクノロジーにライブラリとSDKを提供しています。これらのライブラリを使用すると、サーバー側のコードからOKTA APIと対話できます。それらを使用してユーザーを作成したり、資格情報を確認したり、セッションを管理したり、OKTA認証で問題をトラブルシューティングするにはどうすればよいですか？ネットワークのリクエストと応答、およびOKTAログのレビュー。エラーメッセージは、何がうまくいかなかったかについての手がかりを与えることができます。ネットワークのリクエストと応答は、OKTAに送信および受信したデータを表示できます。 OKTAログは、認証イベントに関する詳細な情報を提供できます。
以上がノード、React、およびOKTAでユーザー登録を構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
