SSO(Single Sign-On)가 쉬워졌습니다.-JS 튜토리얼-php.cn

SSO(Single Sign-On)가 쉬워졌습니다.

Linda Hamilton

풀어 주다： 2025-01-21 04:30:08

원래의

898명이 탐색했습니다.

Single Sign-On (SSO) Made Easy

싱글 사인온(SSO)이란 무엇입니까?

프런트엔드 SSO(Single Sign-On)는 사용자가 단일 로그인 자격 증명 세트를 사용하여 여러 애플리케이션이나 웹 사이트에 액세스할 수 있도록 하는 사용자 인증 및 권한 부여 방법으로, 반복적인 로그인 및 등록이 필요하지 않습니다. 이를 통해 사용자 경험이 향상되고 유지 관리 비용이 절감되며 보안이 강화됩니다.

Single Sign-On 솔루션 구현

프런트엔드 SSO 구현을 위한 몇 가지 주요 접근 방식이 있습니다.

쿠키 기반 SSO

이 널리 사용되는 방법은 브라우저의 쿠키 메커니즘을 활용합니다. 중앙 인증 페이지(예: 페이지 A)에 처음 로그인하면 사용자 데이터와 만료 시간이 포함된 암호화된 쿠키가 생성됩니다. 쿠키의 도메인은 최상위 도메인(예: example.com)으로 설정되어 해당 도메인(a.example.com, b.example.com 등) 내의 애플리케이션 간에 공유가 가능합니다. 이후에 다른 애플리케이션에 액세스하면 이 쿠키가 있는지 확인합니다. 있는 경우 사용자는 자동으로 로그인됩니다. 그렇지 않으면 인증 페이지로 리디렉션됩니다. 간단하지만 이 접근 방식은 동일한 도메인 애플리케이션으로 제한되고 도메인 간 문제에 직면하며 쿠키 크기 및 수량에 제한이 있습니다.

예: 쿠키 설정 및 검색

쿠키 설정(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;`;

로그인 후 복사

쿠키 검색 및 사용(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);

로그인 후 복사

토큰 기반 SSO

이 상태 비저장 방법에는 인증 센터에 성공적으로 로그인하면 암호화된 토큰(사용자 정보 및 만료 포함)이 생성됩니다. 이 토큰은 클라이언트측(localStorage 또는 sessionStorage)에 저장됩니다. 후속 애플리케이션 액세스에서는 토큰을 확인합니다. 유효한 토큰은 직접 액세스 권한을 부여하는 반면, 유효하지 않은 토큰은 인증 센터로 리디렉션됩니다. 토큰 기반 SSO는 도메인 간 기능을 지원하고 쿠키 제한을 방지하지만 추가 저장소 및 네트워크 오버헤드가 필요하고 토큰이 손상될 경우 보안 위험을 초래합니다.

예: 토큰 저장 및 검증

토큰 저장(페이지 A):

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

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

로그인 후 복사

토큰 검색 및 사용(다른 페이지):

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

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

// Log in directly
login(userinfo);

로그인 후 복사

OAuth 2.0 기반 SSO

이 방법은 OAuth 2.0의 인증 코드 흐름을 활용합니다. 초기 로그인은 인증 센터에 대한 요청을 트리거하며, 인증 센터는 인증 코드를 반환하고 애플리케이션의 콜백 URL로 리디렉션됩니다. 애플리케이션은 이 코드를 클라이언트 측에 저장된 액세스 및 새로 고침 토큰(사용자 데이터 및 만료 시간 포함)으로 교환합니다. 후속 애플리케이션 액세스에서는 유효한 액세스 토큰이 있는지 확인하고, 발견되면 자동으로 로그인하고, 그렇지 않으면 인증 센터로 리디렉션합니다. OAuth 2.0 표준을 준수하고 다양한 클라이언트 유형(웹, 모바일, 데스크톱)을 지원하지만 여러 요청과 리디렉션이 필요하므로 더 복잡합니다.

예: 인증 코드 흐름

승인 요청 보내기(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;`;

로그인 후 복사

콜백 처리(페이지 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);

로그인 후 복사