Bina Pendaftaran Pengguna dengan Node, React, dan Okta

Artikel ini pada asalnya diterbitkan di blog pemaju Okta. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Pengguna Internet hari ini mengharapkan pengalaman yang diperibadikan. Pemaju mesti belajar untuk membangunkan laman web yang memberikan pengalaman yang diperibadikan sambil mengekalkan maklumat pengguna mereka secara peribadi. Aplikasi web moden juga cenderung mempunyai API sisi pelayan dan antara muka pengguna sisi klien. Ia boleh mencabar untuk membuat kedua -dua hujung menyedari pengguna yang sedang dilog masuk. Dalam tutorial ini, saya akan membimbing anda melalui menubuhkan API nod yang memberi makan UI React, dan membina pendaftaran pengguna yang menyimpan maklumat pengguna secara peribadi dan peribadi.

Dalam tutorial ini, saya tidak akan menggunakan mana -mana perpustakaan pengurusan negeri seperti Redux atau Reduxthunk. Dalam aplikasi yang lebih mantap, anda mungkin mahu melakukannya, tetapi ia akan menjadi mudah untuk menyiapkan Redux dan Reduxthunk dan kemudian tambahkan pernyataan yang digunakan di sini sebagai Thunks anda. Demi kesederhanaan, dan untuk memastikan artikel ini memberi tumpuan kepada menambah pengurusan pengguna, saya akan menambah penyataan mengambil ke dalam fungsi ComponentDidMount.

Takeaways Key

Persediaan Ringkas: Menyediakan Pendaftaran Pengguna dengan Node, React, dan Okta tidak memerlukan perpustakaan pengurusan negeri seperti Redux, memudahkan proses pembangunan awal.

Integrasi Praktikal: Tutorial ini menyediakan pendekatan tangan untuk mengintegrasikan Okta untuk pengesahan dalam aplikasi React, yang menonjolkan penggunaan SDK React SDK dan React OKTA.
• Organisasi kod: Struktur aplikasi memisahkan kebimbangan dengan sewajarnya, dengan folder yang berbeza untuk API dan pihak klien, meningkatkan kebolehkerjaan.
• Pengesahan Pengguna Selamat: Okta digunakan untuk mengendalikan pengesahan pengguna dengan selamat, memastikan kelayakan pengguna diuruskan dengan selamat dan cekap.
• Struktur berasaskan komponen: Senibina berasaskan komponen React dimanfaatkan untuk menganjurkan UI, dengan komponen berasingan untuk log masuk, pendaftaran, dan profil pengguna.
• Tutorial Komprehensif: Panduan ini meliputi dari persediaan asas kepada pengendalian pengguna lanjutan, memberikan pemahaman yang mendalam tentang membina sistem pendaftaran pengguna sepenuhnya menggunakan Node, React, dan Okta.
• Pasang nod dan bertindak balas prasyarat
• Untuk menyediakan aplikasi asas, pastikan anda memasang alat asas ini:

nod (8)

npm (5)

create-react-app (pakej npm)

• Express-Generator (Pakej NPM)
anda juga memerlukan akaun pemaju Okta.
Untuk memasang nod dan npm, anda boleh mengikuti arahan untuk sistem operasi anda di https://nodejs.org/en/.
kemudian pasang dua pakej NPM dengan baris arahan NPM:

Sekarang anda sudah bersedia untuk menubuhkan struktur aplikasi asas.

perancah aplikasi asas

pergi ke folder di mana anda mahu permohonan anda hidup dan buat folder baru untuknya:

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

Ini akan mewujudkan dua folder dalam folder Keahlian yang dipanggil API dan Pelanggan, dengan aplikasi NodeJS dan Express dalam folder API dan aplikasi Base React dalam folder klien. Jadi struktur folder anda akan kelihatan seperti:

• Keahlian
  • API
  • pelanggan

untuk menjadikan bahagian seterusnya ini lebih mudah, buka dua terminal atau tab terminal; Satu ke API Folder App Express dan yang lain ke klien Folder App React.

Secara lalai, aplikasi React dan aplikasi Node akan kedua -duanya dijalankan pada port 3000 dalam pembangunan, jadi anda perlu mendapatkan API untuk dijalankan di port yang berbeza dan kemudian proksi dalam aplikasi klien.

Dalam folder API, buka fail /bin /www dan tukar port API akan berjalan ke 3001.

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

kemudian sediakan proksi untuk API dalam aplikasi klien supaya anda masih boleh memanggil/API/{Resource} dan sediakannya dari port 3000 ke port 3001. Dalam fail klien/pakej.json, tambahkan proksi Menetapkan di bawah Nama:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Akhir sekali, jangan lupa untuk menjalankan pemasangan NPM atau memasang benang untuk setiap subfolder (API dan klien) untuk memastikan bahawa kebergantungan dipasang.

Anda kini boleh menjalankan kedua -dua aplikasi dengan menjalankan NPM Start atau benang bermula dalam folder yang sesuai untuk API dan aplikasi klien.

tambahkan aplikasi okta

Jika anda belum melakukannya, buat akaun pemaju selama -lamanya di https://developer.okta.com/signup/.

Sebaik sahaja anda telah mendaftar, klik pada aplikasi di menu atas. Kemudian klik butang Tambah Aplikasi.

Anda kemudian akan dibawa ke Wizard Penciptaan Aplikasi. Pilih butang aplikasi satu halaman dan klik seterusnya di bahagian bawah.

Pada skrin seterusnya, anda akan melihat tetapan lalai yang disediakan oleh templat aplikasi satu halaman. Tukar nama permohonan itu kepada sesuatu yang lebih deskriptif, seperti "Permohonan Keahlian". Juga, tukar URI asas dan tetapan URI Redirect Login untuk menggunakan port 3000 kerana di sinilah permohonan anda akan berjalan. Selebihnya tetapan lalai baik -baik saja.

kemudian klik butang yang dilakukan di bahagian bawah.

Setelah aplikasi telah dibuat, pilihnya dari penyenaraian aplikasi, dan klik pada tab Umum untuk melihat tetapan umum untuk aplikasi anda.

Di bahagian bawah, anda akan melihat tetapan ID pelanggan (anda tidak akan kabur, jelas). Salin ini untuk digunakan dalam aplikasi React anda. Anda juga akan memerlukan URL Organisasi Okta anda, yang boleh anda dapati di sebelah kiri atas halaman Dashboard. Ia mungkin akan kelihatan seperti "https://dev-xxxxxx.oktapreview.com".

Tambahkan pengesahan ke aplikasi ReactJS

Sekarang aplikasi dibuat, tambahkan pengesahan menggunakan Okta dengan menambah beberapa kebergantungan NPM. Dari folder pelanggan dijalankan:

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

atau, jika anda menggunakan Pengurus Pakej Benang:

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

Tambah fail ke folder klien/src yang dipanggil app.config.js. Kandungan fail adalah:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Kemudian, persediaan fail index.js untuk menggunakan Router React dan SDK React OKTA. Apabila fail index.js selesai, ia akan kelihatan seperti ini:

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

Setelah selesai, anda akan menambah komponen Browserrouter (alias sebagai "penghala") dari penghala React, dan komponen keselamatan dari SDK React SDK. Juga fail app.config.js diimport sebagai "config" supaya anda boleh menggunakan nilai konfigurasi dalam sifat yang diperlukan oleh komponen keselamatan.

anda juga akan mengelilingi komponen aplikasi dengan komponen penghala dan keselamatan, yang lulus dalam nilai yang ditentukan. Kaedah Onuthrequired, hanya memberitahu SDK React SDK Okta bahawa apabila seseorang cuba mengakses laluan yang selamat dan mereka tidak log masuk, mengalihkannya ke halaman log masuk.

segala-galanya akan datang dari perintah create-react-app yang anda lari sebelumnya.

Tambahkan halaman ke aplikasi ReactJs

Sebelum menambahkan sebarang laluan ke aplikasi React, buat beberapa komponen untuk mengendalikan laluan yang ingin anda tambahkan.

Tambah folder komponen ke folder klien/src. Di sinilah semua komponen anda akan hidup dan cara paling mudah untuk mengaturnya. Kemudian buat folder rumah untuk komponen halaman rumah anda. Buat masa ini hanya akan ada satu, tetapi mungkin terdapat lebih banyak komponen yang digunakan hanya untuk halaman rumah kemudian. Tambahkan fail homepage.js ke folder dengan kandungan berikut:

npm install @okta/okta-react react-router-dom --save

Ini semua yang anda perlukan untuk halaman rumah pada masa ini. Titik yang paling penting ialah menjadikan komponen laman utama sebagai jenis kelas. Walaupun sekarang ia hanya mengandungi satu tag H1, ia dimaksudkan untuk menjadi "halaman", yang bermaksud ia mungkin akan mengandungi komponen lain, jadi penting bahawa ia menjadi komponen kontena.

Seterusnya, buat folder auth dalam komponen. Di sinilah semua komponen yang berkaitan dengan pengesahan akan hidup. Dalam folder itu, buat fail loginform.js.

Perkara pertama yang perlu diperhatikan ialah anda akan menggunakan komponen pesanan lebih tinggi dari OKTA React SDK untuk membungkus keseluruhan borang log masuk. Ini menambah prop kepada komponen yang dipanggil Auth, menjadikannya mungkin untuk mengakses perkara-perkara seperti fungsi-fungsi yang tidak disengajakan dan mengalihkan pada komponen pesanan yang lebih tinggi.

Kod untuk komponen Loginform adalah seperti berikut:

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

perkara lain nota di sini adalah perpustakaan OktaAuth yang diimport. Ini adalah perpustakaan asas untuk melakukan perkara seperti mendaftar menggunakan aplikasi Okta yang anda buat sebelum ini. Anda akan melihat objek OktaAuth yang dibuat di pembina yang mendapat harta BaseUrl yang diserahkan kepadanya. Ini adalah URL untuk penerbit yang ada dalam fail app.config.js anda. Komponen LoginForm dimaksudkan untuk terkandung dalam komponen lain, jadi anda perlu membuat fail loginpage.js untuk mengandungi komponen ini. Anda akan menggunakan komponen pesanan lebih tinggi lagi, untuk mendapatkan akses kepada fungsi yang disesuaikan. Kandungan loginpage.js akan menjadi:

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

Walaupun ia sedikit kurang daripada apa yang ada dalam komponen bentuk log masuk, masih terdapat beberapa bahagian penting untuk menunjukkan di sini.

Sekali lagi, anda menggunakan komponen pesanan lebih tinggi. Ini akan menjadi tema berulang untuk setiap komponen yang perlu menggunakan proses pengesahan atau kebenaran Okta. Dalam kes ini, terutamanya digunakan untuk mendapatkan fungsi yang disesuaikan. Kaedah checkAuthentication () dilaksanakan dalam pembina dan dalam kaedah kitaran hayat ComponentDidUpdate untuk memastikan bahawa apabila komponen dibuat, ia diperiksa dan setiap perubahan seterusnya kepada pemeriksaan komponen sekali lagi.

Apabila isauthentifikasi pulangan benar, maka ia ditetapkan dalam keadaan komponen. Ia kemudian diperiksa dalam kaedah render untuk memutuskan sama ada untuk menunjukkan komponen LoginForm, atau untuk mengarahkan ke halaman profil pengguna, komponen yang akan anda buat seterusnya.

Sekarang buat komponen profilepage.js di dalam folder auth. Kandungan komponen adalah:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Komponen WithAuth di sini memberi anda akses kepada fungsi getUser. Di sini, ia dipanggil dari ComponentDidMount yang merupakan tempat yang biasa untuk menarik data yang akan digunakan dalam kaedah Render. Satu -satunya perkara yang ganjil yang mungkin anda lihat ialah baris pertama kaedah render yang tidak menghasilkan apa -apa sehingga sebenarnya pengguna kembali dari panggilan getuser yang tidak disengajakan. Sebaik sahaja terdapat pengguna di negeri ini, ia kemudiannya menjadikan kandungan profil, yang dalam kes ini hanya memaparkan nama pengguna yang sedang dilog masuk.

Seterusnya, anda akan menambah komponen pendaftaran. Ini boleh dilakukan seperti borang log masuk, di mana terdapat komponen Loginform yang terkandung dalam komponen login. Untuk menunjukkan cara lain untuk memaparkan ini, anda hanya akan membuat komponen pendaftaran yang akan menjadi komponen kontena utama. Buat fail pendaftaran.js dalam folder auth dengan kandungan berikut:

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

Komponen ini kelihatan seperti komponen LoginForm dengan pengecualian bahawa ia memanggil API Node (yang akan anda bina dalam seketika) yang akan mengendalikan melakukan pendaftaran. Sebaik sahaja pendaftaran diselesaikan oleh API Node, komponen log pengguna yang baru dibuat, dan kaedah render (apabila ia melihat token sesi di negeri) mengalihkan pengguna ke halaman utama aplikasi.

Anda juga boleh melihat harta sessionToken pada keadaan komponen. Ini ditetapkan oleh fungsi HandLeSubmit () untuk tujuan mengendalikan log masuk jika pendaftaran berjaya. Kemudian ia juga digunakan oleh kaedah render () untuk melakukan redirect sebaik sahaja log masuk telah selesai, dan token telah diterima.

Tambahkan laluan ke aplikasi React

Pertama, tambahkan komponen navigasi untuk laluan yang akan anda tambahkan. Dalam folder klien/src/komponen, tambahkan folder yang dipanggil Shared. Ini akan menjadi tempat di mana semua komponen yang digunakan di beberapa tempat dalam aplikasi akan ditempatkan. Dalam folder baru itu, tambahkan fail yang dipanggil Navigation.js. Fail ini mengandungi komponen asas dengan pautan ke semua halaman dalam aplikasi.

Anda perlu membungkus komponen navigasi dalam komponen pesanan lebih tinggi. Dengan cara itu, anda boleh menyemak untuk melihat sama ada pengguna yang disahkan dan memaparkan butang log masuk atau logout yang sesuai.

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

Sekarang anda mempunyai komponen yang tersedia untuk mengendalikan semua laluan, membuat laluan untuk pergi bersama mereka. Kemas kini fail app.js supaya versi akhir kelihatan seperti:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Terdapat beberapa perkara nota di sini. Pengimportan komponen SecureROute dan implisitcallback dari SDK React OKTA. Komponen ImplicitCallback mengendalikan panggilan balik dari aliran pengesahan untuk memastikan terdapat titik akhir dalam aplikasi React untuk menangkap panggilan balik dari Okta. Komponen SecureROute membolehkan anda mendapatkan sebarang laluan dan mengalihkan pengguna yang tidak disahkan ke halaman log masuk.

Komponen laluan dari React Router melakukan apa yang anda harapkan: Ia mengambil jalan yang pengguna telah menavigasi dan menetapkan komponen untuk mengendalikan laluan itu. Komponen SecureROUTE melakukan pemeriksaan tambahan untuk memastikan pengguna log masuk sebelum membenarkan akses ke laluan tersebut. Sekiranya mereka tidak berfungsi dengan baik dalam index.js akan dipanggil untuk memaksa pengguna ke halaman log masuk.

Satu-satunya perkara yang benar-benar ganjil di sini adalah laluan untuk laluan masuk. Daripada hanya menetapkan komponen untuk mengendalikan jalan, ia menjalankan kaedah render yang menjadikan komponen login dan menetapkan baseUrl dari konfigurasi.

Tambah titik akhir API ke aplikasi nod

Anda mungkin ingat bahawa API Node sedang melakukan pendaftaran, jadi anda perlu menambah titik akhir ke aplikasi Node untuk mengendalikan panggilan itu. Untuk melakukan itu, anda perlu menambah SDK nod Okta. Dari folder `API`:

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

Kemudian, anda akan menukar fail users.js dalam API/laluan. Fail akan kelihatan seperti:

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

Perkara -perkara terbesar di sini adalah pengimportan lib/Oktaclient (yang akan anda tambahkan seketika), panggilan ke fungsi createUser pada Oktaclient, dan bentuk objek NewUser. Bentuk objek NewUser didokumenkan dalam dokumentasi API Okta.

Untuk aplikasi nod anda untuk membuat panggilan ke aplikasi Okta anda, ia memerlukan token API. Untuk membuatnya, masuk ke papan pemuka pemaju Okta anda, hover ke atas pilihan menu API dan klik pada token.

dari sana klik Buat Token. Beri nama token seperti "Keahlian" dan klik Buat Token.

Salin token ke lokasi yang selamat untuk digunakan kemudian.

Buat fail yang dipanggil oktaclient.js dalam folder baru yang dipanggil lib dalam aplikasi nod. Fail ini akan mengkonfigurasi objek klien dari SDK nod Okta menggunakan token API yang anda buat seperti ini:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Dalam fail app.js pada akar aplikasi nod, kemas kini fail untuk mempunyai semua laluan panggilan ke /API /. Anda akan melihat seksyen di bawah blok App.Use pernyataan. Tukar laluan yang disediakan supaya kelihatan seperti ini:

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

Jika aplikasi Node anda masih berjalan, anda perlu menghentikan aplikasi (dengan Ctrl C) dan mengulanginya (dengan NPM Start) untuk kemas kini berkuatkuasa.

Walaupun laman web ini masih memerlukan beberapa cinta gaya yang serius, anda kini dapat mendaftarkan pengguna, log masuk dengan pengguna yang baru dibuat dan mendapatkan profil pengguna untuk dipaparkan pada halaman profil!

Ketahui lebih lanjut

Jika anda ingin mengetahui lebih lanjut mengenai teknologi yang digunakan dalam artikel ini, anda boleh menyemak dokumentasi untuk:

• nod Okta SDK
• Okta's React Sdk.

Juga, lihat artikel lain menggunakan Okta untuk pengesahan:

• artikel Randall Degges di Okta dalam laman web node mudah
• artikel saya menggunakan widget log masuk Okta dalam React
• artikel Matt Raible mengenai aplikasi web progresif

Seperti biasa, jika anda mempunyai soalan, komen, atau kebimbangan mengenai artikel yang anda boleh menghantar e -mel kepada saya di lee.brandt@okta.com atau hantarkan soalan anda ke forum pemaju. Untuk lebih banyak artikel dan tutorial, ikuti kami di Twitter @Oktadev.

Soalan Lazim (Soalan Lazim) di Bangunan Pendaftaran Pengguna dengan Node, React, dan Okta

Bagaimana saya boleh melaksanakan pengesahan Okta dalam aplikasi React?

Melaksanakan pengesahan Okta dalam aplikasi React melibatkan beberapa langkah. Pertama, anda perlu memasang Okta React SDK menggunakan NPM atau Benang. Kemudian, anda perlu membuat aplikasi Okta dalam akaun pemaju Okta anda. Selepas membuat permohonan, anda akan menerima ID Pelanggan, yang akan anda gunakan untuk mengkonfigurasi SDK React OKTA dalam permohonan anda. Anda juga perlu menyediakan laluan untuk log masuk, logout, dan halaman selamat menggunakan komponen SDK OKTA React. Akhirnya, anda boleh menggunakan Hook UseOktaAuth untuk mengakses keadaan pengesahan dan kaedah dalam komponen anda. Peranan penting dalam membina pendaftaran pengguna dengan Okta. Ia bertindak sebagai persekitaran sisi pelayan di mana anda boleh menubuhkan dan menjalankan aplikasi anda. Anda boleh menggunakannya untuk membuat pelayan, menentukan laluan, dan mengendalikan permintaan dan respons. Dalam konteks Okta, anda boleh menggunakan Node.js untuk berinteraksi dengan API Okta untuk tugas -tugas seperti membuat pengguna, mengesahkan kelayakan, dan pengurusan sesi. >

Mengamankan aplikasi React anda dengan Okta melibatkan penggunaan SDK React OKTA untuk menambah ciri pengesahan dan kebenaran ke aplikasi anda. Anda boleh menggunakan komponen keselamatan untuk membungkus aplikasi anda dan memberikannya dengan konteks pengesahan yang diperlukan. Anda juga boleh menggunakan komponen SecureROute untuk melindungi laluan tertentu dan memastikan bahawa hanya pengguna yang disahkan dapat mengaksesnya. Di samping itu, anda boleh menggunakan cangkuk useoktaauth untuk mengakses keadaan pengesahan dan kaedah dalam komponen anda. Kesalahan, seperti kelayakan tidak sah, kesilapan rangkaian, atau kesilapan pelayan. Anda boleh mengendalikan kesilapan ini dengan menggunakan blok percubaan dalam kod anda. Di blok tangkapan, anda boleh log mesej ralat dan memberikan mesej mesra pengguna kepada pengguna. Anda juga boleh menggunakan prop onError komponen keselamatan untuk mengendalikan kesilapan di peringkat global. , logout, dan laluan selamat berfungsi seperti yang diharapkan. Anda boleh melakukan ini secara manual dengan menavigasi ke laluan ini dan mengesahkan tingkah laku. Anda juga boleh menulis ujian automatik menggunakan perpustakaan ujian seperti perpustakaan ujian JEST dan React. Ujian ini boleh mensimulasikan tindakan pengguna dan periksa sama ada keadaan pengesahan berubah dengan betul.

Bagaimana saya boleh menyesuaikan halaman log masuk okta?

Anda boleh menyesuaikan halaman login Okta dengan menavigasi ke bahagian "Penyesuaian" di papan pemaju OKTA anda. Di sini, anda boleh menukar logo, warna, dan teks halaman log masuk. Anda juga boleh menggunakan widget log masuk Okta, perpustakaan JavaScript yang menyediakan pengalaman log masuk yang disesuaikan sepenuhnya. rangka kerja, termasuk sudut dan vue. SDK ini berfungsi sama dengan SDK React dan membolehkan anda menambah ciri pengesahan dan kebenaran ke aplikasi anda. Anda boleh memasang SDK menggunakan NPM atau Benang, konfigurasikannya dengan butiran aplikasi Okta anda, dan gunakan komponen dan cangkuknya dalam aplikasi anda. Okta menyediakan perpustakaan dan SDK untuk pelbagai teknologi backend, termasuk Java, .NET, dan PHP. Perpustakaan ini membolehkan anda berinteraksi dengan API Okta dari kod pelayan anda. Anda boleh menggunakannya untuk membuat pengguna, mengesahkan kelayakan, menguruskan sesi, dan banyak lagi. pada permintaan dan respons rangkaian, dan mengkaji semula log Okta. Mesej ralat boleh memberi anda petunjuk tentang apa yang berlaku. Permintaan dan respons rangkaian dapat menunjukkan data yang dihantar kepada dan diterima dari Okta. Log Okta dapat memberikan maklumat terperinci mengenai peristiwa pengesahan. . Di sini, anda boleh mencari panduan, tutorial, rujukan API, dan banyak lagi. Anda juga boleh menyertai forum pemaju Okta untuk bertanya dan berkongsi pengetahuan dengan pemaju lain.

Atas ialah kandungan terperinci Bina Pendaftaran Pengguna dengan Node, React, dan Okta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!