로그인 버튼은 새 사용자가 가장 먼저 누르는 요소이므로 디자인에 어울리고, 키보드로 작동하고, 아랍어에서도 올바르게 표시되며, 서버에서 깜빡임 없이 렌더링되어야 합니다. @posty5/oauth-angular는 이 모든 것을 갖춘 ‘Posty5로 계속하기’ 버튼과 그 뒤의 로그인 흐름을 Angular 앱에 제공합니다.

이 가이드는 설치부터 스타일이 적용되어 실제로 작동하는 버튼까지 안내합니다. 웹사이트나 앱에 ‘Posty5로 로그인’ 추가하기에서 설명한 대로 OAuth 앱을 등록했다고 가정하며, API 키 및 SDK 가이드에서 소개하는 개발자 플랫폼의 일부입니다.

먼저 모드 선택하기

• startUrl: 백엔드가 이미 로그인을 처리하는 경우입니다(예: @posty5/oauth 사용). 버튼은 시작 주소만 엽니다. 권장 모드이며 Trend Digest도 이 모드를 사용합니다.
• codeHandler: 패키지가 브라우저에서 PKCE를 시작하고 코드를 백엔드로 보내면, 백엔드가 클라이언트 시크릿으로 코드를 교환합니다.
• browser: 백엔드가 없습니다. 패키지가 공개 클라이언트로 코드를 교환하고 WebCrypto로 ID 토큰을 검증합니다. OAuth 앱에서 사이트 오리진의 브라우저 로그인을 허용해야 합니다.

어떤 모드에서도 클라이언트 시크릿은 브라우저에 전달되지 않습니다.

단계별로 버튼 추가하기

1. npm install @posty5/oauth-angular로 패키지를 설치하세요. Angular 17.3부터 20까지 지원합니다.
2. 애플리케이션 설정에서 선택한 모드로 providePosty5Auth를 호출하세요.
3. 버튼을 사용하는 곳에서 Posty5SignInButtonComponent를 가져오고, posty5SignInButton 속성을 실제 button 요소에 붙이세요. 그래야 폼, 포커스, 키보드가 평소처럼 동작합니다.
4. codeHandler와 browser 모드에서는 리디렉션 URI를 posty5Callback 컴포넌트가 있는 지연 로딩 페이지로 라우팅하고, 그 signedIn 및 failed 이벤트에서 페이지를 이동하세요.
5. 직접 한 번 로그인해 보고, 시작했던 페이지로 돌아오는지 확인하세요.

// app.config.ts
import { providePosty5Auth } from "@posty5/oauth-angular";

export const appConfig = {
  providers: [
    providePosty5Auth({
      mode: "startUrl",
      startUrl: "/api/auth/posty5/start",
    }),
  ],
};

<button posty5SignInButton theme="outline" shape="pill" [width]="320" returnUrl="/dashboard"></button>

디자인에 맞추기

• theme: filled(Posty5 파란색), outline(흰색), 또는 어두운 페이지용 filledDark.
• size: large, medium, small. shape: rectangular, pill, circle, square(로고만).
• text: ‘Posty5로 계속하기’, ‘Posty5로 로그인’, ‘Posty5로 가입하기’, ‘로그인’ 중 하나. label은 이 문구를 완전히 대체합니다.
• 버튼별 logoAlignment, width, locale, 그리고 모든 스타일을 직접 지정하고 싶을 때 쓰는 unstyled.

.login-card .posty5-btn {
  --posty5-btn-radius: 9999px;
  --posty5-btn-font-family: "Cairo", sans-serif;
  --posty5-btn-hover-bg: #1a6bff;
}

기본 스타일은 명시도(specificity)가 0이므로 !important 없이도 여러분의 규칙이 항상 우선하며, 모든 색상과 크기는 CSS 사용자 정의 속성입니다. 아랍어 버튼은 자동으로 오른쪽에서 왼쪽으로 배치되며, Posty5는 항상 라틴 문자로 표기됩니다.

다시 찾은 사용자를 이름으로 맞이하기

로그인 후 버튼에 사용자의 사진, 이름이 들어간 ‘○○(으)로 계속하기’, 일부가 가려진 이메일을 표시할 수 있습니다. 다른 로그인 제공자의 개인화된 버튼과 같은 방식입니다. browser 모드에서는 자동으로 이루어지고, 다른 모드에서는 백엔드가 반환한 정보로 rememberUser를 호출하고 로그아웃할 때 forgetUser를 호출하세요.

기억되는 사용자 정보는 이름, HTTPS 사진 주소, 가려진 이메일뿐이며 토큰은 포함되지 않습니다. 개인화된 버튼은 하이드레이션 이후에만 나타나므로 서버에서 렌더링된 HTML과 불일치가 생기지 않습니다.

알아 두면 좋은 점

• 이 패키지는 서버 사이드 렌더링에서도 안전합니다. 서버에서는 버튼이 일반 문구를 표시하며, 로그인은 서버에서 절대 실행되지 않습니다.
• Posty5 호출에 fetch를 사용하므로, HTTP 인터셉터가 여러분의 Authorization 헤더를 Posty5 엔드포인트에 추가하는 일이 없습니다.
• 진행 중인 로그인은 탭 하나의 세션 스토리지에 저장되며 10분 후 만료됩니다.
• browser 모드에서는 토큰을 메모리에 보관하세요. 긴 세션에는 HttpOnly 쿠키와 함께 startUrl 또는 codeHandler를 사용하는 것이 좋습니다.

자주 묻는 질문