새 회원가입 양식은 매번 비밀번호를 하나 더 요구하고, 저장하는 비밀번호가 늘어날수록 보호해야 할 대상도 늘어납니다. ‘Posty5로 로그인’을 사용하면 Google로 로그인을 선택할 때처럼, 사용자가 이미 가진 Posty5 계정으로 웹사이트나 앱에 로그인할 수 있습니다.

이 글에서는 사용자에게 보이는 화면, 개발자로서 얻는 것, 그리고 도입하는 네 단계를 설명합니다. 이 기능은 API 키 및 SDK 가이드에서 소개하는 Posty5 개발자 플랫폼의 일부입니다.

‘Posty5로 로그인’이란

이제 Posty5는 OAuth 2.0 및 OpenID Connect 제공자입니다. Posty5 Studio에서 앱을 등록하고 사용자를 Posty5로 보내 로그인하게 하면, 사용자가 누구인지 서버에 알려 주는 서명된 ID 토큰을 돌려받습니다. 여러분의 사이트는 사용자의 Posty5 비밀번호를 절대 보지 못합니다.

표준을 따르기 때문에 Node.js 및 Angular용 Posty5 패키지는 물론, ASP.NET Core, Python, PHP, Java 등 인증받은 모든 OpenID Connect 라이브러리와 함께 작동합니다. 앱 등록과 사용자 로그인은 모든 요금제에서 크레딧을 사용하지 않습니다.

사용자에게 보이는 화면

• 로그인 페이지의 ‘Posty5로 로그인’ 또는 ‘Posty5로 계속하기’ 버튼.
• 아직 로그인하지 않았다면 Posty5 자체 로그인 페이지. 비밀번호는 posty5.com에서만 입력합니다.
• 앱 이름, 로고, 웹사이트, 개인정보처리방침과 이용약관, 요청하는 데이터별 한 줄 설명, 그리고 ‘허용’과 ‘취소’ 버튼이 있는 동의 화면.
• 사용자의 선택은 기억되어 다음 로그인은 바로 통과합니다. 사용자는 언제든지 ‘계정’의 ‘연결된 앱’에서 여러분 앱의 액세스를 제거할 수 있습니다.

사용자 관점의 전체 안내는 ‘Posty5로 로그인’이란? 내 데이터는 안전할까요?에 있으며, 여러분의 로그인 페이지에서 이 글로 링크할 수 있습니다.

개발자로서 얻는 것

• 표준 OpenID Connect. 모든 로그인에서 PKCE가 필수인 인가 코드 흐름과, 대부분의 라이브러리가 스스로 설정에 사용하는 디스커버리 문서를 제공합니다.
• 사용자의 이름, 프로필 사진, 이메일과 이메일 인증 여부가 담긴 서명된 ID 토큰(RS256). 사용자가 허용한 스코프에 한해서만 포함됩니다.
• 앱 전용 비공개 사용자 ID. sub 값은 여러분의 앱에서는 변하지 않고 다른 개발자의 앱에서는 달라지므로, 앱끼리 사용자를 대조할 수 없습니다.
• 세션 저장소 없이 쓰는 서명된 로그인 링크를 제공하는 Node.js 백엔드용 @posty5/oauth, 그리고 Angular용으로 커스터마이즈할 수 있는 ‘Posty5로 계속하기’ 버튼인 @posty5/oauth-angular.
• 프런트엔드 전용 앱을 위한 브라우저 로그인. 앱별로 켤 수 있으며, 등록한 웹사이트 오리진에서 온 요청만 받습니다.
• Posty5 Studio의 앱별 ‘사용자’ 탭, 그리고 앱에 추가해 서버에서 같은 목록을 읽을 수 있는 API 키.

네 단계로 추가하기

1. Posty5 Studio에서 ‘개발자 키트’를 열고 ‘OAuth 앱’에서 ‘앱 등록’을 선택하세요. 사용자에게 보일 이름, 로고, 링크를 입력하고 콜백 주소를 리디렉션 URI로 입력합니다.
2. 클라이언트 ID와 클라이언트 시크릿을 서버 설정에 복사하세요. 시크릿은 한 번만 표시되며, 나중에 교체할 수 있습니다.
3. @posty5/oauth를 설치하고 라우트 두 개를 추가하세요. 하나는 로그인 링크를 만들어 사용자를 Posty5로 보내고, 다른 하나인 콜백은 결과를 검증합니다.
4. 로그인 페이지에 ‘Posty5로 로그인’ 버튼을 놓고 직접 한 번 로그인해 본 뒤, 전달받은 sub 값을 기준으로 사용자 레코드를 관리하세요.

const link = await posty5.createLoginLink({ returnTo: "/account" });
res.cookie("p5_binding", link.binding, { httpOnly: true, secure: true, sameSite: "lax" });
res.redirect(link.url);

// on your redirect URI
const { claims, returnTo } = await posty5.handleLoginCallback(req.query, { binding: req.cookies.p5_binding });

로그인 링크는 PKCE verifier, nonce, 돌아갈 주소를 봉인된 state 안에 담고 있어 서버는 두 요청 사이에 아무것도 저장할 필요가 없으며, 쿠키가 링크를 요청한 브라우저에 묶어 줍니다.

통합 방식 선택하기

• Node.js 백엔드가 있는 웹사이트: @posty5/oauth를 사용하세요. 클라이언트 시크릿은 서버에만 머뭅니다.
• Angular 앱: @posty5/oauth-angular의 버튼을 사용하고 로그인은 백엔드가 처리하게 하세요. Angular에 ‘Posty5로 계속하기’ 버튼을 추가하는 방법을 참고하세요.
• 백엔드가 없는 정적 앱: 앱의 브라우저 로그인을 켜고 사이트 오리진을 등록한 뒤, Angular 패키지의 browser 모드나 PKCE를 지원하는 OpenID Connect 클라이언트를 사용하세요.
• 그 밖의 모든 언어: 클라이언트 ID와 시크릿을 넣고 OpenID Connect 라이브러리가 https://api.posty5.com 을 가리키도록 설정하세요.

시작 전에 알아 둘 제한 사항

• 리프레시 토큰은 없습니다. 액세스 토큰은 1시간 동안 유효하므로, 로그인 후에는 자체 세션을 유지하세요.
• 자동 로그인(prompt=none)은 지원하지 않습니다. prompt=login 또는 max_age로 새로 로그인하도록 강제할 수 있습니다.
• ‘Posty5로 로그인’은 신원 정보(이름, 프로필 사진, 이메일)만 공유합니다. 앱이 사용자의 Posty5 콘텐츠에 접근할 수 있게 되지는 않습니다.
• 계정마다 OAuth 앱을 최대 20개까지 등록할 수 있으며, 앱마다 정확히 일치하는 리디렉션 URI를 최대 10개까지 둘 수 있습니다.

자주 묻는 질문