15分でユーザー認証を使用してReactアプリを構築する-jsチュートリアル-php.cn

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

Joseph Gordon-Levitt

リリース： 2025-02-16 11:54:10

オリジナル

817 人が閲覧しました

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

Build a React App with User Authentication in 15 Minutes

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

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

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

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

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

ログイン後にコピー

ウィジェットのインストール：

```
npm install @okta/okta-signin-widget@2.3.0 --save
```
ログイン後にコピー
スタイルの追加：

ファイルの

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

<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"/>

ログイン後にコピー

ログインコンポーネントの作成： Build a React App with User Authentication in 15 Minutes

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

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

export default class LoginPage extends React.Component {
  render() {
    return <div>Login Page</div>;
  }
}
```
ログイン後にコピー
ルーティングを追加：

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

// ... other imports ...
import LoginPage from './components/auth/LoginPage';

// ... within the main route ...
<Route component={LoginPage} path="/login" />

ログイン後にコピー

OKTAアプリケーションのセットアップ：

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

ウィジェットの統合： Build a React App with User Authentication in 15 Minutes

ウィジェット初期化：

、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) ...
}

ログイン後にコピー

ウィジェットのレンダリング：

を使用して、指定されたdiv内でウィジェットをレンダリングします。メソッドを実装して、ログインステータス（
）をチェックし、ログインウィジェット（）を表示し、ログアウトを処理します（）。完全なthis.widget.renderElコンポーネント（エラー処理とログイン/ログアウト機能を使用）は、元の記事で提供されています。
ログインリンクの追加：ナビゲーションバーにログインリンクを追加します（例：./src/components/common/Navigation.js）。
テスト：runおよびnpm install。アプリケーションには、OKTAサインインウィジェットが表示されるようになりました npm start