RP 드롭인 로더
스크립트 한 줄과 <logi-signin> 태그로 붙는 1pass 로그인 버튼입니다. 마크업·스타일·상태 전환을 로더가 맡고, 인증 자체는 건드리지 않습니다.
이 페이지가 맞나요?
- ✅ 맞음: 백엔드가 있는 웹 RP — 로그인 버튼을 직접 그리지 않고 스크립트로 붙이고 싶을 때
- ❌ SPA (백엔드 없음) 이라면 →
@logi-auth/browsernpm 패키지. 웹 통합 트랙 참고 - ❌ 정적 마크업만 필요(로더 스크립트 없이 직접 스타일링) 하다면 → 로그인 버튼 컴포넌트
설치
<script src="https://api.1pass.dev/rp/v1.js" data-client="logi_xxx" defer></script>
<logi-signin login-url="/auth/1pass/start">
<a href="/auth/1pass/start">1pass 로 계속하기</a>
</logi-signin><logi-signin> 안의 <a> 는 slot 폴백입니다. 스크립트가 로드되기 전, 또는 로드에 실패했을 때 일반 링크로 동작해 login-url 로 이동합니다. 로더가 정상 로드되면 이 마크업을 대체해 브랜드 버튼을 렌더링합니다.
동작 원리
로더는 UI와 페이지 이동만 담당합니다. state 생성, PKCE, code 교환은 전부 login-url 뒤에 있는 RP 백엔드 책임입니다 — 토큰이 브라우저에 남지 않습니다. 이 구조는 IETF OAuth for Browser-Based Apps BCP 가 권고하는 BFF(Backend-for-Frontend) 패턴을 따릅니다.
서버 쪽 콜백 처리·토큰 교환·세션 발급은 기존 웹 통합 트랙 가이드를 그대로 따르면 됩니다. 로더는 그 앞단 버튼만 대체합니다.
속성표
| 속성 | 값 | 기본 | 설명 |
|---|---|---|---|
login-url | URL (필수) | — | 클릭 시 이동할 RP 자체 로그인 시작 라우트 |
variant | filled / outline | filled | 버튼 배경 스타일 |
shape | rounded / pill | rounded | 모서리 반경 (14px / 999px) |
size | md / lg | lg | 버튼 높이 (36px / 48px) |
theme | auto / light / dark | auto | auto 는 prefers-color-scheme 을 따름 |
return-to | URL | — | 로그인 완료 후 돌아올 경로. RP 백엔드가 해석 |
wide | boolean | — | 버튼을 부모 너비 100% 로 확장 |
custom | boolean | — | 커스텀 버튼 모드. 안쪽 마크업을 그대로 쓰고 로더는 클릭·상태만 부여. 이 속성이 없으면 안쪽 마크업은 스크립트 미로드 폴백으로만 쓰이고 브랜드 버튼으로 대체된다 |
고정 항목 — 변경 불가
아래는 브랜드 가이드라인이라 속성으로 바꿀 수 없습니다.
- 워딩:
1pass 로 계속하기 - 마크 색:
filled= 흰 단색,outline= 그라데이션 원본 - 마크 크기: 22px
사전 조건 — origin 등록
개발자 콘솔에서 앱의 allowed origins 에 사이트 origin(스킴 + 호스트 + 포트)을 정확히 등록해야 합니다. 미등록 origin 에서는 로더가 403 origin_not_allowed 를 받고 스스로 비활성화됩니다 — 버튼은 흐리게 렌더되고 클릭이 막히며, 콘솔에 원인 코드가 남습니다.
- prefix 매칭이 아니라 정확 일치입니다.
https://app.example.com과https://app.example.com:8443은 다른 origin 입니다. - 개발용 로컬 origin(
http://localhost:3000등)도 별도로 등록해야 합니다. - 등록 위치: 앱 등록 가이드
CSP
로더 스크립트와 설정 조회 요청을 허용하는 최소 CSP입니다.
Content-Security-Policy: script-src https://api.1pass.dev; connect-src https://api.1pass.dev별칭 URL 에 SRI 를 붙이지 마세요
/rp/v1.js 는 major 버전 별칭이라 내용이 계속 갱신됩니다. integrity 속성을 붙이면 해시가 안 맞아 정상 업데이트가 로딩 자체를 막아버립니다. 브레이킹 체인지는 /rp/v2.js 같은 새 경로로 나가므로, 별칭은 SRI 없이 그대로 신뢰하면 됩니다.
상태 · 이벤트
로더는 <logi-signin> 엘리먼트에 data-state 속성으로 현재 상태를 반영합니다.
| 상태 | 의미 |
|---|---|
unknown | 스크립트 로드 전 (slot 폴백 표시 중) |
loading | 설정 조회 중 |
ready | 정상 렌더 완료 |
error | origin 미등록·클라이언트 비승인 — 버튼 비활성화 |
degraded | 설정 조회 실패(네트워크·타임아웃·5xx) — 버튼은 활성 유지, 인증 여부는 서버가 최종 판정 |
logi:ready / logi:error CustomEvent 는 document 에서 발생합니다. detail 에는 clientId(ready) 또는 code·recoverable(error) 만 담기고 토큰·사용자 정보는 없습니다.
document.addEventListener('logi:error', (e) => {
if (!e.detail.recoverable) console.warn('1pass 로더 비활성화:', e.detail.code);
});로드 실패는 로그아웃이 아닙니다
api.1pass.dev 접속이 실패해도 버튼은 slot 폴백 링크로 계속 동작합니다(소프트 실패). 이 상태를 사용자 로그아웃이나 세션 만료로 오판하지 마세요 — RP 의 실제 세션 상태는 RP 백엔드 쿠키가 유일한 기준입니다.
버전 정책
/rp/v1.js 는 major 별칭입니다. 마이너·패치 갱신은 같은 경로로 조용히 반영되고, 브레이킹 체인지가 있을 때만 /rp/v2.js 같은 새 경로가 생깁니다. 별칭을 그대로 쓰면 별도 마이그레이션 없이 개선 사항을 계속 받습니다.