Bina aplikasi React dengan Pengesahan Pengguna dalam 15 Minit

Artikel ini menunjukkan mengintegrasikan widget log masuk Okta ke dalam aplikasi React untuk pengesahan pengguna. Widget, alat JavaScript, memudahkan proses dengan memanfaatkan infrastruktur Okta.

Tutorial bermula dengan projek React Basic, menambah pengesahan melalui widget log masuk Okta (dipasang menggunakan NPM). Ia meliputi membuat komponen

, mengkonfigurasi aplikasi Connect OpenID di Okta, dan mengintegrasikan widget. LoginPage

Proses ini termasuk membuat widget, mengesahkan status log masuk pengguna, dan menambah pautan masuk ke bar navigasi. Komponen

akhir menguruskan login, logout, dan rendering bersyarat berdasarkan status log masuk. LoginPage

Menyediakan projek:

1. mengklonkan projek benih: Mulailah dengan mengkloning projek benih reaksi mudah menggunakan Git:

   <code class="language-bash">git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
   cd okta-react-widget-sample</code>

2. Pasang widget: Pasang widget log masuk Okta melalui NPM:

   <code class="language-bash">npm install @okta/okta-signin-widget@2.3.0 --save</code>

3. Tambah Gaya: Sertakan CSS widget dari CDN Okta dalam bahagian anda index.html bahagian:

   <code class="language-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"></code>

Mewujudkan komponen login:

3 Pada mulanya, ia adalah komponen mudah:

1. LoginPage.js Tambahkan penghalaan: ./src/components/auth/ import

   ke

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

   dan tambahkan laluan:

2. LoginPage persediaan aplikasi Okta: ./src/app.js Buat aplikasi OpenID Connect dalam Konsol Pemaju Okta. Tetapkan uri redirect ke

   .

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

3. http://localhost:3000 Mengintegrasikan widget:

Inisialisasi widget:

dalam , memulakan widget Oktasignin dengan url organisasi Okta anda dan id klien:

1. memberikan widget: Gunakan LoginPage.js untuk menjadikan widget dalam div yang ditetapkan. Melaksanakan kaedah untuk menyemak status log masuk (

   ), tunjukkan widget login (

   <code class="language-javascript">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) ...
   }</code>

   ), dan mengendalikan logout (
). Komponen
2. lengkap (dengan pengendalian ralat dan fungsi log masuk/logout) disediakan dalam artikel asal.

3. Tambahkan pautan log masuk: Tambahkan pautan log masuk ke bar navigasi anda (mis., ./src/components/common/Navigation.js).

4. Ujian: Run npm install dan . Permohonan kini harus memaparkan widget log masuk Okta. npm start

Kod yang lengkap, berfungsi dan butiran lanjut mengenai pengendalian pelbagai senario pengesahan (log masuk sosial, reset kata laluan, dan lain -lain) boleh didapati dalam artikel asal dan repositori GitHub yang berkaitan. Ingatlah untuk menggantikan ruang letak seperti

dan

dengan nilai konfigurasi Okta sebenar anda. {oktaOrgUrl}

Atas ialah kandungan terperinci Bina aplikasi React dengan Pengesahan Pengguna dalam 15 Minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!