싱글 사인온에 대한 쉬운 가이드 (SSO)

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

프론트엔드 싱글 사인온(SSO)은 사용자가 다시 입력하거나 다시 등록할 필요 없이 단일 자격 증명 세트를 사용하여 여러 애플리케이션 또는 웹사이트에 로그인할 수 있도록 하는 사용자 인증 및 권한 부여 기술입니다. 이 접근 방식은 사용자 경험을 향상시키고 유지 관리 비용을 줄이며 보안을 개선합니다.

싱글 사인온 솔루션 소개 및 구현

프론트엔드 SSO에 대한 주요 접근 방식은 다음과 같습니다.

쿠키 기반 SSO

페이지 A의 인증 센터에 성공적으로 로그인한 후 쿠키가 설정됩니다. 이는 가장 일반적인 SSO 구현입니다. 원리는 브라우저의 쿠키 메커니즘에 의존합니다. 사용자가 처음으로 애플리케이션에 로그인하면 인증 센터로 요청이 전송됩니다. 사용자 ID를 확인한 후 인증 센터는 사용자 정보와 만료 기간이 포함된 암호화된 쿠키를 반환합니다. 쿠키의 도메인은 최상위 도메인(예: example.com)으로 설정되어 동일한 최상위 도메인(예: a.example.com 및 b.example.com) 아래의 애플리케이션 간에 공유할 수 있습니다. 사용자가 다른 애플리케이션에 액세스하면 유효한 쿠키가 있는지 확인합니다. 존재하는 경우 직접 로그인합니다. 그렇지 않으면 사용자는 로그인을 위해 인증 센터로 리디렉션됩니다. 이 방법은 구현이 간단하지만 동일한 최상위 도메인 아래의 애플리케이션으로 제한되고, 교차 도메인 문제가 있으며, 쿠키의 크기와 수에 제한을 둡니다.

페이지 A에서 성공적으로 로그인한 후 쿠키 설정:

// 암호화된 쿠키 값 생성
const encryptedValue = encrypt(userinfo);

// 쿠키 설정
document.cookie = `sso_token=${encryptedValue};domain=.example.com;path=/;max-age=86400;`;

페이지 B에서 쿠키 확인:

// 쿠키 검색
const cookieValue = document.cookie
  .split(';')
  .find((cookie) => cookie.trim().startsWith('sso_token='))
  .split('=')[1];

// 쿠키 해독
const userinfo = decrypt(cookieValue);

// 직접 로그인
login(userinfo);

토큰 기반 SSO

이는 상태 비저장 SSO 구현입니다. 원리는 사용자의 첫 번째 로그인 중에 인증 센터로 요청을 보내는 것을 포함합니다. 사용자 ID를 확인한 후 인증 센터는 사용자 정보와 만료 기간이 포함된 암호화된 토큰을 반환하며, 이 토큰은 브라우저의 로컬 스토리지(예: localStorage 또는 sessionStorage)에 저장됩니다. 사용자가 다른 애플리케이션에 액세스하면 유효한 토큰이 있는지 확인합니다. 존재하는 경우 직접 로그인합니다. 그렇지 않으면 사용자는 로그인을 위해 인증 센터로 리디렉션됩니다. 이 방법은 교차 도메인 작업을 지원하고 쿠키에 의해 제한되지 않지만 추가 스토리지 공간과 네트워크 오버헤드가 필요합니다. 또한 도난당한 토큰이 ID 오용으로 이어질 수 있으므로 보안 위험도 있습니다.

페이지 A에서 성공적으로 로그인한 후 localStorage에 토큰 저장:

// 토큰 값 생성
const token = generateToken(userinfo);

// 토큰 저장
localStorage.setItem('sso_token', token);

다른 페이지에서 토큰 확인:

// 토큰 검색
const token = localStorage.getItem('sso_token');

// 토큰 유효성 검사
const userinfo = verifyToken(token);

// 직접 로그인
login(userinfo);

OAuth 2.0 기반 SSO

이 접근 방식은 OAuth 2.0의 권한 부여 코드 흐름을 사용합니다. 사용자가 처음으로 애플리케이션에 로그인하면 인증 센터로 요청이 전송됩니다. 사용자 ID를 확인한 후 인증 센터는 권한 부여 코드를 반환하고 애플리케이션의 콜백 URL로 리디렉션합니다. 그런 다음 애플리케이션은 코드를 인증 센터로 보내 사용자 정보와 만료 기간이 포함된 액세스 토큰과 새로 고침 토큰으로 교환합니다. 이러한 토큰은 브라우저의 로컬 스토리지에 저장됩니다. 사용자가 다른 애플리케이션에 액세스하면 유효한 액세스 토큰이 있는지 확인합니다. 존재하는 경우 직접 로그인합니다. 그렇지 않으면 사용자는 로그인을 위해 인증 센터로 리디렉션됩니다. 이 방법은 OAuth 2.0 표준을 준수하고 여러 클라이언트 유형(예: 웹, 모바일, 데스크톱)을 지원합니다. 그러나 더 복잡하고 여러 요청과 리디렉션이 필요합니다.

페이지 A에서 권한 부여 요청 보내기:

const authorizeUrl = `https://auth.example.com/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&response_type=code`;

// 인증 로그인 페이지로 리디렉션
window.location.href = authorizeUrl;

성공적인 로그인 후 권한 부여 코드를 사용하여 페이지 A의 콜백 URL로 다시 리디렉션:

const redirectUri = 'https://app.example.com/callback';

// 권한 부여 코드 생성
const code = generateAuthorizationCode(userinfo);

// 애플리케이션의 콜백 URL로 다시 리디렉션
window.location.href = `${redirectUri}?code=${code}`;

페이지 A에서 권한 부여 코드를 액세스 토큰으로 교환:

const code = getQueryString('code');

// 액세스 토큰을 가져오기 위해 인증 센터로 요청 보내기
const tokenUrl = `https://auth.example.com/token?client_id=${clientId}&client_secret=${clientSecret}&code=${code}&grant_type=authorization_code`;

fetch(tokenUrl)
  .then((response) => response.json())
  .then((data) => {
    // 액세스 토큰과 새로 고침 토큰 저장
    localStorage.setItem('access_token', data.access_token);
    localStorage.setItem('refresh_token', data.refresh_token);

    // 직접 로그인
    login(data.userinfo);
  });

---

저희는 Node.js 프로젝트 호스팅을 위한 최고의 선택, Leapcell입니다. — 최대 100MB의 파일 업로드를 지원합니다!

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발하십시오.

무제한 프로젝트를 무료로 배포하십시오

• 사용량에 대해서만 지불 — 요청 없음, 요금 없음.

탁월한 비용 효율성

• 유휴 요금 없이 사용한 만큼 지불하십시오.
• 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

간편한 확장성 및 고성능

• 고도의 동시성을 쉽게 처리하도록 자동 확장합니다.
• 제로 운영 오버헤드 — 구축에만 집중하십시오.

설명서에서 자세히 알아보십시오!

X에서 팔로우하세요: @LeapcellHQ