ログインボタンは新しいユーザーが最初に触れる部分です。だからこそ、デザインに馴染み、キーボードで操作でき、アラビア語でも正しく表示され、サーバー側でちらつきなくレンダリングされる必要があります。@posty5/oauth-angularは、これらをすべて満たした「Posty5で続行」ボタンと、その裏側のログインフローをAngularアプリに提供します。

このハウツーでは、インストールから、スタイルを整えた動くボタンまでを順に説明します。Webサイトやアプリに「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;
}

組み込みのスタイルは詳細度がゼロなので、!importantなしでもあなたのルールが必ず優先されます。また、色とサイズはすべてCSSカスタムプロパティです。アラビア語のボタンは自動的に右から左へレイアウトされ、Posty5は常にラテン文字で表記されます。

再訪したユーザーを名前で迎える

ログイン後、ボタンにはユーザーのプロフィール画像、名前入りの「〇〇として続行」、一部を伏せたメールアドレスを表示できます。他のログインプロバイダーのパーソナライズされたボタンと同じです。browserモードではこれが自動で行われます。それ以外のモードでは、バックエンドから返された情報でrememberUserを呼び出し、ログアウト時にforgetUserを呼び出します。

記憶されるユーザー情報は、名前、HTTPSの画像アドレス、一部を伏せたメールアドレスだけで、トークンは含まれません。パーソナライズされたボタンはハイドレーションの後にのみ表示されるため、サーバーでレンダリングされたHTMLと食い違うことはありません。

知っておきたいこと

• このパッケージはサーバーサイドレンダリングでも安全に使えます。サーバー上ではボタンは汎用の文言を表示し、ログイン処理がサーバーで実行されることはありません。
• Posty5の呼び出しにはfetchを使うため、HTTPインターセプターがあなた独自のAuthorizationヘッダーをPosty5のエンドポイントに付けてしまうことはありません。
• 進行中のログインはタブ単位のセッションストレージに保存され、10分で期限切れになります。
• browserモードでは、トークンをメモリ上に保持してください。長時間のセッションには、HttpOnly Cookieを使うstartUrlまたはcodeHandlerをおすすめします。

よくある質問