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

Log Masuk Tunggal (SSO) Dipermudahkan

Linda Hamilton
Linda Hamiltonasal
2025-01-21 04:30:08934semak imbas

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):

<code class="language-javascript">// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>

Mendapatkan semula dan menggunakan kuki (Halaman B):

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

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):

<code class="language-javascript">// Generate the token value
const token = generateToken(userinfo);

// Store the token
localStorage.setItem('sso_token', token);</code>

Mendapatkan semula dan menggunakan token (halaman lain):

<code class="language-javascript">// Retrieve the token
const token = localStorage.getItem('sso_token');

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

// Log in directly
login(userinfo);</code>

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):

<code class="language-javascript">// Generate an encrypted cookie value
const encryptedValue = encrypt(userinfo);

// Set the cookie
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;</code>

Mengendalikan panggilan balik (Halaman A):

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

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:
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
Artikel sebelumnya:Mengapa JavaScript tidak kemas?Artikel seterusnya:Mengapa JavaScript tidak kemas?