Pengesahan Redux: Selamat aplikasi anda dengan auth0

mata teras

Redux menyediakan cara berstruktur untuk menguruskan keadaan dalam aplikasi React, menjadikan aliran data mudah untuk diramal dan mengurus, terutama untuk aplikasi yang besar.
Auth0 digunakan untuk pengesahan pengguna, menyediakan persediaan cepat dan ciri-ciri canggih seperti log masuk sosial dan pengesahan multi-faktor tanpa tetapan backend kompleks.
Token Web JSON (JWT) digunakan untuk pengesahan yang selamat dan tidak bertauliah terhadap API RESTFUL, yang memudahkan proses pengesahan berasaskan sesi tradisional.
Tutorial ini memudahkan proses log masuk menggunakan widget kunci Auth0 dan menggunakan middleware Redux untuk mengendalikan panggilan API dengan cekap dan selamat.
Routing yang dilindungi memastikan bahawa beberapa bahagian aplikasi hanya boleh diakses oleh pengguna yang disahkan, dengan itu meningkatkan keselamatan.
Senibina aplikasi termasuk menubuhkan tindakan redux, pengurangan, dan middleware untuk mengendalikan status pengesahan dan mengambil data dari API.

Terima kasih kepada Peleke Sengstacke untuk mengkaji semula rakan sebaya artikel ini. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

Redux sangat popular dalam komuniti React dan bahkan dalam bidang yang lebih luas, dan ada alasan yang baik. Ia adalah sebuah perpustakaan yang dicipta oleh Dan Abramov yang menjadikan pemprosesan aliran data sehala yang dianjurkan dan membolehkan pemaju menggunakan ciri-ciri pembangunan yang kuat seperti perjalanan masa dan rakaman/main balik.

terdengar hebat, bukan? Tetapi masalahnya ialah: ia memerlukan lebih banyak kod untuk ditulis. Walau bagaimanapun, jika anda mempunyai pengalaman mengekalkan aplikasi yang besar, anda mungkin tahu bahawa pemprosesan data boleh menjadi sukar untuk dikawal dan sukar untuk dikendalikan. Dengan Redux, kami sentiasa dapat memahami status permohonan kami dan mengetahui dengan tepat apa data kami lakukan.

Dalam tutorial ini, kami akan belajar bagaimana untuk memulakan membuat aplikasi React Redux sebenar yang mengesahkan pengguna dan memanggil API jauh untuk mengambil data. Aplikasi kami akan mengambil senarai Star Wars Jedi dari backend nod supaya kami dapat memaparkan nama dan foto mereka. Untuk pengesahan, kami akan menggunakan Auth0 supaya kami dapat bangun dan berjalan dengan cepat, dan kami juga dapat dengan mudah mendapatkan ciri-ciri seperti log masuk sosial dan pengesahan multi-faktor.

Kami tidak akan masuk ke dalam konsep asas Redux, jadi jika anda tidak biasa dengan perpustakaan, lihat beberapa sumber pengantar yang sangat baik berikut:

bagaimana untuk membina aplikasi tugasan menggunakan React, Redux, dan Immutable.js

• Dokumentasi Redux
Kod sumber aplikasi yang akan datang kami boleh dimuat turun dari sini.

Pengesahan Redux: Bermula

Projek React untuk tutorial ini akan ditulis dalam ES2015, jadi kami akan menyusunnya kepada ES5 menggunakan Babel dan mengendalikan bundle modul menggunakan webpack. Daripada menetapkannya dari awal, mari kita mulakan dengan contoh starter dunia sebenar Dan dalam repositori Redux. Dapatkan salinan dan pasangkan kebergantungan.

npm install

Daftar Auth0

Cara terbaik untuk mengesahkan aplikasi halaman tunggal, seperti yang kita bina, adalah menggunakan Token Web JSON (JWT). JWT menyediakan kaedah untuk pengesahan tanpa statistik terhadap API RESTFUL, yang mempunyai banyak kelebihan berbanding sesi dan pengesahan berasaskan kuki. Kelemahannya ialah menulis penyelesaian pengesahan JWT sendiri boleh menjadi rumit dan rawan kesilapan, tetapi bernasib baik, kita boleh menggunakan Auth0 tanpa bimbang tentang mana-mana pelayan atau butiran pelaksanaan keselamatan.

Jika anda belum melakukannya, sila lawati dan daftar untuk akaun Auth0 percuma. Dengan pelan percuma, kami mendapat 7,000 pengguna aktif biasa dan dua penyedia identiti sosial yang tersedia.

Selepas mendaftar, ikuti arahan untuk memulakan akaun anda. Ingat bahawa anda boleh mempunyai pelbagai aplikasi di bawah akaun yang sama, jadi pilih nama domain yang sesuai dengan keadaan anda - mungkin nama organisasi anda. Langkah pertama, kita perlu menetapkan URL localhost kita ke sumber yang dibenarkan. Ini boleh dilakukan di kawasan teks "Sumber yang Diterima (CORS)".

Sediakan pelayan web

mari kita selesaikan masalah pelayan web Jedi. Ini hanya memerlukan API yang tenang yang mengembalikan Jedi kami sebagai data JSON, dan menggunakan rangka kerja NodeJs dan Express adalah salah satu cara untuk melakukan ini dengan cepat. Anda boleh menggunakan mana-mana bahasa atau rangka kerja pelayan yang anda suka, hanya kembali data JSON.

Nota: Star Wars Purists akan melihat bahawa kita menggunakan "Jedis" sebagai bentuk jamak Jedi sepanjang aplikasinya, tetapi ini bukan bentuk jamak yang betul. Sebaliknya, kita hanya perlu menggunakan "Jedi". Mungkin itu benar, tetapi saya baik -baik saja dengan ini kerana ia menjadikan aplikasi kami lebih mudah :)

Pertama, mulakan aplikasi dan pasang kebergantungan:

mkdir server && cd server
touch server.js
npm init
npm install express express-jwt cors

Kami boleh menyediakan semua kod yang diperlukan oleh pelayan dalam satu fail JavaScript tunggal.

// server.js

const express = require('express');
const app = express();
const jwt = require('express-jwt');
const cors = require('cors');

app.use(cors());
app.use(express.static('public'));

// express-jwt 提供的身份验证中间件。
// 此中间件将检查传入请求，以获取应用于它的任何路由上的有效 JWT。
const authCheck = jwt({
  secret: 'AUTH0_SECRET',
  // 如果您的 Auth0 客户端是在 2016 年 12 月 6 日之前创建的，
  // 请取消注释下面的行并删除上面的行
  // secret: new Buffer('AUTH0_SECRET', 'base64'),
  audience: 'AUTH0_CLIENT_ID'
});

var jedis = [
  {
    id: 1,
    name: 'Luke Skywalker',
    image: 'http://localhost:7000/images/luke-skywalker.jpg'
  },
  {
    id: 2,
    name: 'Anakin Skywalker',
    image: 'http://localhost:7000/images/anakin-skywalker.png'
  },
  {
    id: 3,
    name: 'Yoda',
    image: 'http://localhost:7000/images/yoda.png'
  },
  {
    id: 4,
    name: 'Obi-Wan Kenobi',
    image: 'http://localhost:7000/images/obi-wan-kenobi.jpg'
  },
  {
    id: 5,
    name: 'Mace Windu',
    image: 'http://localhost:7000/images/mace-windu.jpg'
  }
];

app.get('/api/jedis', (req, res) => {
  const allJedis = jedis.map(jedi => { 
    return { id: jedi.id, name: jedi.name }
  });
  res.json(allJedis);
});

app.get('/api/jedis/:id', authCheck, (req, res) => {
  res.json(jedis.filter(jedi => jedi.id === parseInt(req.params.id))[0]);
});

app.listen(7000);
console.log('Listening on http://localhost:7000');

Kami mempunyai pelbagai Jedi dan dua titik akhir yang mengendalikannya. Titik akhir pertama mengembalikan semua Jedi tetapi hanya ID dan Nama Properties mereka. Titik akhir kedua terletak di /jedis /: id, mengembalikan satu Jedi, tetapi juga termasuk URL imej. Kami akan menggunakan middleware pengesahan kami untuk melindungi titik akhir kedua dan menyekatnya hanya untuk pengguna yang disahkan untuk mengakses.

Tetapi bagaimana kita sebenarnya melindungi titik akhir ini? Kami menggunakan Express-JWT untuk membuat middleware yang mencari token Web JSON yang masuk dan mengesahkannya berdasarkan kunci yang kami sediakan. Kami kemudian boleh memohon middleware ini ke mana -mana titik akhir kami - kami melakukan ini pada parameter kedua /Jedis /: id endpoint - dan hanya permintaan yang mengandungi token yang sah boleh lulus.

Middleware itu sendiri ditetapkan dengan menyediakan Kunci Auth0 kami dan ID Pelanggan untuk AuthCheck, di mana anda boleh memberikan kunci khusus untuk aplikasi anda. Kekunci ini boleh didapati di panel admin auth0 di bawah aplikasi .

Imej Jedi datang dari direktori awam di pelayan. Anda boleh mendapatkan imej yang sama dari repositori, atau anda boleh memasukkan pautan ke imej dari sumber lain dalam data anda, jika anda lebih suka.

Apabila pelayan berada di tempat, mari sahkan bahawa API berfungsi seperti yang diharapkan. Kita boleh melakukan ini menggunakan alat seperti Postman.

Jika kita pergi ke laluan /API /Jedis, kita akan dapat mendapatkan senarai penuh Jedi seperti yang diharapkan. Walau bagaimanapun, jika kita cuba mendapatkan Jedi, kita tidak dibenarkan untuk mengambil sumber itu kerana kita tidak menghantar token ke pelayan.

Sebaik sahaja kami melaksanakan panggilan API dalam aplikasi itu sendiri, kami akan melihat bagaimana untuk menghantar token menggunakan permintaan kami, tetapi pada dasarnya kami hanya perlu memasukkannya menggunakan skema pembawa dalam tajuk kebenaran.

... (kandungan berikutnya adalah serupa dengan teks asal, tetapi ayat diganti dan pelarasan struktur kalimat diselaraskan. Panjangnya terlalu panjang, ditinggalkan di sini) ....

Atas ialah kandungan terperinci Pengesahan Redux: Selamat aplikasi anda dengan auth0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!