Rumah > hujung hadapan web > tutorial js > Log Masuk Tunggal (SSO) Dipermudahkan

Log Masuk Tunggal (SSO) Dipermudahkan

Linda Hamilton
Lepaskan: 2025-01-21 04:30:08
asal
938 orang telah melayarinya

Single Sign-On (SSO) Made Easy

Apakah itu Single Sign-On (SSO)?

Frontend Single Sign-On (SSO) ialah kaedah pengesahan dan kebenaran pengguna yang membolehkan pengguna mengakses berbilang aplikasi atau tapak web menggunakan satu set bukti kelayakan log masuk, menghapuskan log masuk dan pendaftaran berulang. Ini meningkatkan pengalaman pengguna, mengurangkan kos penyelenggaraan dan mengukuhkan keselamatan.

Melaksanakan Penyelesaian Log Masuk Tunggal

Beberapa pendekatan utama wujud untuk pelaksanaan SSO bahagian hadapan:

SSO Berasaskan Kuki

Kaedah yang digunakan secara meluas ini memanfaatkan mekanisme kuki penyemak imbas. Selepas log masuk awal ke halaman pengesahan pusat (cth., Halaman A), kuki yang disulitkan yang mengandungi data pengguna dan masa tamat tempoh dibuat. Domain kuki ditetapkan kepada domain peringkat atas (seperti example.com), mendayakan perkongsian merentas aplikasi dalam domain tersebut (a.example.com, b.example.com, dsb.). Akses seterusnya kepada aplikasi lain menyemak kuki ini; jika ada, pengguna dilog masuk secara automatik; jika tidak, ubah hala ke halaman pengesahan berlaku. Walaupun mudah, pendekatan ini terhad kepada aplikasi domain yang sama, menghadapi cabaran merentas domain dan mempunyai had pada saiz dan kuantiti kuki.

Contoh: Menetapkan dan mendapatkan semula kuki.

Menetapkan kuki (Halaman A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;
Salin selepas log masuk
Salin selepas log masuk

Mendapatkan semula dan menggunakan kuki (Halaman B):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);
Salin selepas log masuk
Salin selepas log masuk

SSO Berasaskan Token

Kaedah tanpa kewarganegaraan ini melibatkan penjanaan token yang disulitkan (mengandungi maklumat pengguna dan tamat tempoh) apabila berjaya log masuk di pusat pengesahan. Token ini disimpan di sebelah pelanggan (localStorage atau sessionStorage). Akses aplikasi seterusnya mengesahkan token; token yang sah memberikan akses terus, manakala token yang tidak sah mengubah hala ke pusat pengesahan. SSO berasaskan token menyokong fungsi merentas domain dan mengelakkan pengehadan kuki tetapi memerlukan storan tambahan dan overhed rangkaian, serta menimbulkan risiko keselamatan jika token terjejas.

Contoh: Menyimpan dan mengesahkan token.

Menyimpan token (Halaman A):

// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);
Salin selepas log masuk

Mendapatkan semula dan menggunakan token (halaman lain):

// Retrieve the token
const token = localStorage.getItem('sso_token');

// Validate the token
const userinfo = verifyToken(token);

// Log in directly
login(userinfo);
Salin selepas log masuk

SSO Berasaskan OAuth 2.0

Kaedah ini menggunakan aliran Kod Kebenaran OAuth 2.0. Log masuk awal mencetuskan permintaan kepada pusat pengesahan, yang mengembalikan kod kebenaran dan mengubah hala ke URL panggil balik aplikasi. Aplikasi menukar kod ini untuk akses dan muat semula token (mengandungi data pengguna dan masa tamat tempoh), yang disimpan di sebelah pelanggan. Semakan akses aplikasi seterusnya untuk token akses yang sah, log masuk secara automatik jika ditemui, jika tidak, halakan semula ke pusat pengesahan. Sambil mematuhi piawaian OAuth 2.0 dan menyokong pelbagai jenis pelanggan (web, mudah alih, desktop), ia lebih kompleks, memerlukan berbilang permintaan dan ubah hala.

Contoh: Aliran kod kebenaran.

Menghantar permintaan kebenaran (Halaman A):

// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;
Salin selepas log masuk
Salin selepas log masuk

Mengendalikan panggilan balik (Halaman A):

// Retrieve the cookie
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// Decrypt the cookie
const userinfo = decrypt(cookieValue);

// Log in directly
login(userinfo);
Salin selepas log masuk
Salin selepas log masuk

Leapcell: Penyelesaian Pengehosan Node.js Premier Anda

Single Sign-On (SSO) Made Easy

Leapcell ialah platform tanpa pelayan yang canggih untuk pengehosan web, tugas tak segerak dan Redis, menawarkan:

  • Sokongan berbilang bahasa: Node.js, Python, Go dan Rust.
  • Projek tanpa had percuma: Bayar hanya untuk penggunaan.
  • Kos efektif: Bayar semasa anda pergi tanpa caj terbiar.
  • Pengalaman pembangun diperkemas: UI intuitif, CI/CD automatik, metrik masa nyata.
  • Boleh skala dan berprestasi tinggi: Penskalaan automatik, overhed operasi sifar.

Terokai dokumentasi dan cubalah!

Single Sign-On (SSO) Made Easy

Ikuti kami di X: @LeapcellHQ


Baca lebih lanjut di blog kami

Atas ialah kandungan terperinci Log Masuk Tunggal (SSO) Dipermudahkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan