인증은 사용자의 신원을 확인하는 절차입니다. 비밀번호, 패스키, 일회용 코드처럼 본인만 제시할 수 있는 증거를 검사한 뒤 세션을 만듭니다.
데모에서는 증거를 검사하기 전과 후에 신원 배지가 바뀝니다. 인증에 성공했다고 모든 데이터에 접근할 수 있는 것은 아닙니다. 각 작업에 대한 인가를 별도로 확인해야 합니다.
언제 쓰나
로그인, API 호출, 관리자 작업에서 요청자의 신원을 확인할 때 사용합니다.
인증
Authentication
요청을 보낸 사람이 누구인지 확인한 뒤 신원을 세션에 연결합니다.
···
<div class="sd"><div class="sd-head"><strong>AUTHENTICATION</strong><span id="state">live check</span></div><div class="sd-stage"><div class="tile" id="claim">unknown caller</div><div class="arrow">→</div><div class="tile" id="proof">proof pending</div><div class="arrow">→</div><div class="tile" id="badge">anonymous</div></div><div class="sd-foot"><span id="caption">checking boundary</span><span>tap to step</span></div></div>.sd{box-sizing:border-box;width:min(94vw,700px);height:min(86vh,318px);padding:clamp(9px,2.3vmin,18px);border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);display:flex;flex-direction:column;gap:clamp(6px,1.8vmin,12px);font:600 clamp(12px,2.6vmin,16px)/1.25 var(--font-sans, sans-serif)}.sd *{box-sizing:border-box}.sd-head,.sd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:1.25em}.sd-head strong{color:var(--accent);letter-spacing:.06em}.sd-head span,.sd-foot{color:var(--muted)}.sd-foot{font-size:clamp(12px,2.4vmin,14px)}.sd-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vmin,18px);overflow:hidden}.sd .mono{font-family:ui-monospace,monospace}.sd .tile{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.5vmin,10px);text-align:center}.sd .good{color:var(--accent);border-color:var(--accent)}.sd .bad{color:var(--accent-3);border-color:var(--accent-3)}.sd .arrow{color:var(--muted);font-size:clamp(15px,4vmin,28px)}.sd .active{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}.sd .blocked{background:color-mix(in srgb,var(--accent-3) 13%,var(--surface));border-color:var(--accent-3)}.sd-stage .tile{width:24%;max-width:150px;min-height:clamp(44px,13vmin,74px);display:grid;place-items:center}.sd-stage .arrow{flex:0 0 auto}let n=0;function advance(){n=(n+1)%3;document.getElementById('proof').textContent=n===0?'proof pending':n===1?'checking proof':'proof valid';document.getElementById('badge').textContent=n===2?'member':'anonymous';document.getElementById('badge').classList.toggle('active',n===2);document.getElementById('state').textContent=n===2?'identity established':'identity unverified';document.getElementById('caption').textContent=n===2?'session can be issued':'verify evidence first'}advance();setInterval(advance,850);
document.querySelector('.sd').addEventListener('pointerdown',advance);