登録フォームが増えるたびにユーザーが覚えるパスワードは増え、保存するパスワードが増えるほど守るべきものも増えていきます。「Posty5でログイン」を使えば、ユーザーはすでに持っているPosty5アカウントで、「Googleでログイン」を選ぶのと同じ感覚でWebサイトやアプリにログインできます。

この記事では、ユーザーに表示される内容、開発者として得られるもの、そして導入の4つのステップを説明します。これは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でのみ入力されます。
• アプリの名前、ロゴ、Webサイト、プライバシーポリシー、利用規約に加え、要求するデータごとの説明行と「許可」「キャンセル」ボタンが並ぶ同意画面。
• ユーザーの選択は記憶され、次回以降のログインはそのまま通過します。ユーザーは「アカウント」の「連携済みアプリ」から、いつでもあなたのアプリのアクセスを解除できます。

ユーザー側から見た詳しい流れは「Posty5でログイン」とは？データは安全？で解説しています。ご自身のログインページからこの記事にリンクすることもできます。

開発者として得られるもの

• 標準のOpenID Connect。すべてのログインでPKCEが必須の認可コードフローと、多くのライブラリが自動設定に使えるディスカバリードキュメントを備えています。
• ユーザーの名前、プロフィール画像、メールアドレス、メールアドレスが確認済みかどうかを含む署名付きIDトークン（RS256）。含まれるのは、ユーザーが許可したスコープの分だけです。
• アプリ専用の非公開ユーザーID。sub はあなたのアプリでは常に同じで、他の開発者のアプリでは異なる値になるため、アプリ間でユーザーを照合することはできません。
• Node.jsバックエンド向けで、セッションストアなしで使える署名付きログインリンクを生成する@posty5/oauthと、Angular向けのカスタマイズ可能な「Posty5で続行」ボタンを提供する@posty5/oauth-angular。
• フロントエンドだけのアプリ向けのブラウザーログイン。アプリごとに有効化でき、登録したWebサイトのオリジンからのリクエストだけが受け付けられます。
• Posty5 Studioでアプリごとに用意される「ユーザー」タブと、同じ一覧をサーバーから読み取れる、アプリに追加したAPIキー。

4つのステップで導入する

1. Posty5 Studioで「開発者キット」を開き、「OAuthアプリ」から「アプリを登録」を選びます。ユーザーに表示される名前、ロゴ、リンクを入力し、コールバックのアドレスをリダイレクトURIとして登録します。
2. クライアントIDとクライアントシークレットをサーバーの設定にコピーします。シークレットは一度しか表示されませんが、後からローテーションできます。
3. @posty5/oauthをインストールし、ルートを2つ追加します。ログインリンクを作成してユーザーを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の中に持つため、サーバーは2つのリクエストの間に何も保持する必要がありません。さらにCookieによって、リンクはそれを要求したブラウザーに結び付けられます。

連携方法を選ぶ

• Node.jsバックエンドを持つWebサイト：@posty5/oauthを使います。クライアントシークレットはサーバー上にとどまります。
• Angularアプリ：@posty5/oauth-angularのボタンを使い、ログイン処理はバックエンドに任せます。詳しくはAngularに「Posty5で続行」ボタンを追加する方法をご覧ください。
• バックエンドのない静的アプリ：アプリのブラウザーログインを有効にしてサイトのオリジンを登録し、Angularパッケージのbrowserモード、またはPKCEに対応した任意のOpenID Connectクライアントを使います。
• その他の言語：OpenID Connectライブラリの接続先を https://api.posty5.com に設定し、クライアントIDとシークレットを指定します。

始める前に知っておきたい制限

• リフレッシュトークンはありません。アクセストークンの有効期間は1時間なので、ログイン後はご自身のセッションを維持してください。
• サイレントログイン（prompt=none）は提供していません。prompt=login または max_age を使えば、改めてのログインを強制できます。
• 「Posty5でログイン」が共有するのは本人情報（名前、プロフィール画像、メールアドレス）だけです。アプリがユーザーのPosty5コンテンツにアクセスできるようになるわけではありません。
• 各アカウントで登録できるOAuthアプリは最大20個で、各アプリには完全一致のリダイレクトURIを最大10個設定できます。

よくある質問