Rumah >hujung hadapan web >tutorial js >Log Masuk Tunggal (SSO) Dipermudahkan
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.
Beberapa pendekatan utama wujud untuk pelaksanaan SSO bahagian hadapan:
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>
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>
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 ialah platform tanpa pelayan yang canggih untuk pengehosan web, tugas tak segerak dan Redis, menawarkan:
Terokai dokumentasi dan cubalah!
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!