15分でユーザー認証を使用してReactアプリを構築する

この記事では、Oktaのサインインウィジェットをユーザー認証のためのReactアプリケーションに統合することを示しています。 JavaScriptツールであるウィジェットは、Oktaのインフラストラクチャを活用することでプロセスを簡素化します。

チュートリアルは、基本的なReactプロジェクトから始まり、OKTAサインインウィジェット（NPMを使用してインストール）を介して認証を追加します。 コンポーネントの作成、OKTAでOpenID Connectアプリケーションの構成、ウィジェットの統合をカバーします。

このプロセスには、ウィジェットのレンダリング、ユーザーログインステータスの確認、ナビゲーションバーへのログインリンクの追加が含まれます。最終LoginPageコンポーネントは、ログインステータスに基づいてログイン、ログアウト、条件付きレンダリングを管理します。

プロジェクトのセットアップ：LoginPage

シードプロジェクトのクローン：

Gitを使用して単純なReactシードプロジェクトをクローン化することから始めます：

1. git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
   cd okta-react-widget-sample

   ウィジェットのインストール：
npm経由でoktaサインインウィジェットをインストール：

2. npm install @okta/okta-signin-widget@2.3.0 --save

   スタイルの追加：
3. ファイルの

   セクション内にOKTA CDNからウィジェットのCSSを含める： index.html

   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
   <link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>

ログインコンポーネントの作成：

コンポーネントを作成します：

1. 内で

   ファイルを作成します。 当初、それは単純なコンポーネントです： LoginPage.js ./src/components/auth/

   import React from 'react';
   
   export default class LoginPage extends React.Component {
     render() {
       return <div>Login Page</div>;
     }
   }

   ルーティングを追加：
インポート

2. にルートを追加します： LoginPage ./src/app.js

   // ... other imports ...
   import LoginPage from './components/auth/LoginPage';
   
   // ... within the main route ...
   <Route component={LoginPage} path="/login" />

   OKTAアプリケーションのセットアップ：
OKTA開発者コンソールにOpenID Connectアプリケーションを作成します。リダイレクトuriを
3. 。

   に設定します http://localhost:3000

ウィジェットの統合：

ウィジェット初期化：

in
1. 、OKTA組織のURLとクライアントIDでOktasigninウィジェットを初期化：

   LoginPage.js

   import React from 'react';
   import OktaSignIn from '@okta/okta-signin-widget';
   
   export default class LoginPage extends React.Component {
     // ... (constructor, componentDidMount, showLogin, logout methods as described in the original article) ...
   }

   ウィジェットのレンダリング：
2. を使用して、指定されたdiv内でウィジェットをレンダリングします。 メソッドを実装して、ログインステータス（

   ）をチェックし、ログインウィジェット（）を表示し、ログアウトを処理します（）。 完全なthis.widget.renderElコンポーネント（エラー処理とログイン/ログアウト機能を使用）は、元の記事で提供されています。

3. ログインリンクの追加：ナビゲーションバーにログインリンクを追加します（例：./src/components/common/Navigation.js）。

4. テスト：runおよびnpm install。 アプリケーションには、OKTAサインインウィジェットが表示されるようになりました npm start

さまざまな認証シナリオ（ソーシャルログイン、パスワードリセットなど）の処理に関する完全で機能的なコードと詳細については、元の記事とその関連するGitHubリポジトリで入手できます。

や

などのプレースホルダーを実際のOKTA構成値に置き換えることを忘れないでください。

以上が15分でユーザー認証を使用してReactアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。