Applogin — 統合サインイン

スクリプト1つで、アプリに Google とメール/パスワードのサインインを追加できます。すべての認証 — サインイン、登録、メール確認、パスワードリセット、Google — は applogin.one 上の保護された iframe 内で行われます。あなたのページはユーザーのパスワードを一切見ることなく、何も検証しません。受け取るのは、すぐ使えるアプリ限定トークンだけです。

仕組み

Applogin は認証プロバイダー（Auth0/Clerk のような）ですが、ログインフォームは当社ドメインのフレーム内で提供されます。あなたのアプリは SDK を通じてそのフレームをモーダルで開き、結果を postMessage で受け取ります。トークンはあなたのアプリケーションの秘密鍵で署名された JWT（aud=app_id）で、他のアプリケーションでは無効です。

クイックスタート

スクリプトを2つ読み込んでウィジェットをマウントするだけ。静かに SSO を試し、「サインイン」ボタンを表示し、ホスト型フォームをフレームで開いてユーザーを返します。

<script src="https://applogin.one/applogin.js?v=1"></script>
<script src="https://applogin.one/applogin-ui.js?v=1"></script>
<script>
  ApploginUI.mount({
    appId: "app_your_id",
    onAuth:   (user) => renderApp(user),  // signed in: { id, email, name, picture, email_verified }
    onLogout: ()     => showLanding()
  });
  // sign-out button:  ApploginUI.logout();
</script>

以上です。フォーム、登録、メールコード、Google、パスワードリセットはすべて Applogin が処理します。必要なのは app_id の登録と allowed_origins の設定だけです（アプリの作成参照）。

ApploginUI ウィジェット 推奨

アプリの「鍵」として使える既製品：未サインイン時は「サインイン」ボタン付きの画面を表示し、クリックでホスト型フォームをモーダルで開き、サインイン後は onAuth(user) を呼んで画面を外します。

プロフィール（アバター、名前、メール）とサインアウトボタンは onAuth(user) からあなたが描画します — それがあなたの UI です。ユーザーデータはそのまま使えます。

SDK メソッド（applogin.js）低レベル

ウィジェットではなく独自の UX が欲しい場合は SDK を直接使います。まず Applogin.init({ appId }) を呼びます。トークンは localStorage の al_token_<appId> に保存されます。

Applogin.init({ appId: "app_xxx" });

// on load — silently try SSO:
const s = await Applogin.getSession();
if (s.authenticated) showApp(s.user);
else {
  const r = await Applogin.openLogin();     // modal with the applogin.one form
  if (r) showApp(r.user);
}
// attach Applogin.getToken() to your backend requests

シングルサインオン（SSO）

サインイン時、Applogin は Partitioned 属性付きのクッキー al_sso を設定します。パーティションのキーはトップレベルサイト（最も外側）です。したがって：

• 同じサイトの下にある複数のアプリ（例：appdock.pro に埋め込まれたもの）はセッションを共有 → 2つ目のアプリの getSession() がフォームなしでサインインを引き継ぎます。
• 同じアプリを別サイトとして開く（別のトップレベル）と別パーティション → ユーザーは再度サインインします。

const s = await Applogin.getSession();   // ← {authenticated:true,…} if a session exists in this partition
if (s.authenticated) showApp(s.user);

言語

ホスト型ログインフォームは10言語に対応しています：English, Deutsch, Français, Español, Italiano, Português, 日本語, 한국어, 中文, Русский。デフォルトではユーザーのブラウザ言語で開き（フォールバックは英語）、フォーム内で言語を切り替えられます — 下部の国旗メニューです。

• 言語を指定する。ウィジェットまたは SDK に lang を渡します：ApploginUI.mount({ appId, lang: "ja" }) または Applogin.init({ appId, lang: "ja" }) — フォームはその言語で開きます。オプションなしの場合、SDK はブラウザ言語を自動で送ります。
• 選択を受け取る。ユーザーはフォーム内で言語を変更できます。Applogin.openLogin() の結果には lang（サインイン時のフォームの言語）が含まれ、ページ側で追従できます。ウィジェットは localStorage の al_lang にも保存し、次回のフォームはその言語で開きます。
• メールはフォームに従う。確認コードやパスワードリセットのメールはフォームの言語で送信されます。

内部的にはフォームの URL が ?lang=xx（上記リストの2文字コード）を受け付けます — SDK が自動で付与します。

ライブ例：AppDock

appdock.pro は「ドック」型ランチャー：1つのページから複数のアプリを iframe で開きます。アプリはそれぞれ独自ドメインにあります：

ドック内で Email Writer にサインインし、次に（同じくドック内の）Audio Recorder を開くと、サインインは自動的に引き継がれます。両方が同じトップレベルサイト appdock.pro の下で動き、1つの SSO パーティションを共有するからです。

1. ドックランチャー（appdock.pro）

<button class="tile" data-src="https://emailwriter.online/">Email Writer</button>
<button class="tile" data-src="https://audiorecorder.info/">Audio Recorder</button>
<iframe id="frame" allow="microphone; clipboard-write"></iframe>
<script>
  document.querySelectorAll(".tile").forEach(t =>
    t.onclick = () => document.getElementById("frame").src = t.dataset.src);
</script>

2. アプリ（例：emailwriter.online）

<script src="https://applogin.one/applogin.js?v=1"></script>
<script src="https://applogin.one/applogin-ui.js?v=1"></script>
<script>
  ApploginUI.mount({
    appId: "app_emailwriter",
    title: "Email Writer — sign in",
    onAuth: (user) => {              // render the profile + the app
      header.textContent = user.name + " · " + user.email;
      app.hidden = false;
    },
    onLogout: () => { app.hidden = true; }
  });
</script>

3. このシナリオでのアプリ登録

各アプリは allowed_origins に自身のドメイン＋ドックのドメインを列挙します（frame-ancestors はネストされたフレームの祖先チェーン全体を見ます）：

app_emailwriter → allowed_origins: ["https://emailwriter.online", "https://appdock.pro"]
app_recorder    → allowed_origins: ["https://audiorecorder.info", "https://appdock.pro"]
// redirect_uris (for Google): ["https://applogin.one/auth-callback.html"]

バックエンドでのトークン検証

フロントエンドはリクエストの Authorization ヘッダーに Applogin.getToken() を入れます。バックエンドでの検証方法は2つです。

1. プラットフォームのエンドポイントで 失効を考慮

POST https://applogin.one/api/v1/session/verify
{ "app_id": "app_xxx", "token": "<JWT from Authorization>" }
// → { "valid": true, "user": { "id": 2, "email": "…", "email_verified": true, "name": "…", "picture": null } }
//   invalid/revoked (logout) → { "valid": false, "user": null }

2. ローカルで（あなたの jwt_secret による HS256）ネット不要

// Node.js
const jwt = require("jsonwebtoken");
const claims = jwt.verify(token, process.env.APPLOGIN_JWT_SECRET, {
  algorithms: ["HS256"], audience: "app_xxx", issuer: "applogin"
});
// claims.sub — user id, claims.email, claims.email_verified

# Python
import jwt
claims = jwt.decode(token, APPLOGIN_JWT_SECRET, algorithms=["HS256"],
                    audience="app_xxx", issuer="applogin")

JWT の構造

{
  "iss": "applogin",
  "aud": "app_xxx",          // your app_id
  "sub": "2",                // user id (as a string)
  "jti": "…",                // session id (for revocation)
  "email": "user@example.com",
  "email_verified": true,
  "name": "Jane", "picture": null,
  "iat": 1782194619, "exp": 1784786619   // ~30 days
}

Webhook（任意）

アプリに webhook_url を設定すると、Google サインインの成功のたびに、検証済みの ID を含む署名付き POST がそこへ送られます — トークンに加えたサーバー側同期のためです。

const exp = "sha256=" + crypto.createHmac("sha256", WEBHOOK_SIGNING_SECRET)
  .update(ts + "." + rawBody).digest("hex");
if (!crypto.timingSafeEqual(Buffer.from(exp), Buffer.from(sig))) reject();

アプリの作成

アプリは非公開ダッシュボード applogin.one/dashboard で作成します（サインインは Applogin 自身で）。指定するのは：

受け取るもの：app_id（公開）、jwt_secret（バックエンドでのトークン検証）、client_secret、webhook_signing_secret。

REST API — リファレンス

ベース：https://applogin.one/api。以下は開発者が実際に必要とするものです。メール/パスワードや Google 交換のエンドポイントはホスト型フォーム自身が呼び、あなたは呼びません。

開発者向け

バックエンドでアプリトークンを検証（失効考慮）。{ app_id, token } → { valid, user }。

アプリの公開データ（name、allowed_origins）。ホスト型ログインページが使用。

内部用（ホスト型フォーム/SDK が呼ぶ。あなたは呼ばない）

エラー

{"error":"Invalid or expired code","message":"Invalid or expired code"}

セキュリティ

• パスワードは隔離。入力フィールドは applogin.one の iframe 内にのみ存在し、埋め込み先サイトの JS からは届きません。
• アプリ限定トークン。JWT はアプリの秘密鍵で署名され aud=app_id を持ちます — あるアプリのトークンは別のアプリでは無効です。
• トークンはあなたのオリジンにのみ配信。フォームは allowed_origins のオリジンにのみ postMessage でトークンを送り、ログインページ自体は Content-Security-Policy: frame-ancestors <allowed_origins> 付きで配信されます（クリックジャッキング対策）。
• グローバルセッションは HttpOnly。クッキー al_sso は JS から到達不能。開発者の手元にあるのはアプリトークンだけです。
• SSO の CSRF 対策。/v1/session/sso は Origin ∈ allowed_origins のときだけトークンを発行 — ユーザーのクッキーを持つ無関係なサイトは何も得られません。
• ブルートフォース対策。login/reset/verify にレート制限（メール単位と IP 単位）。
• パスワードはハッシュ化（PBKDF2）。コードはハッシュ化・TTL 10 分・試行回数制限。全面 HTTPS。Google のトークンは保存しません。Google サインインは PKCE（S256）+ state + nonce。

LLM 向けチートシート

// include
<script src=https://applogin.one/applogin.js?v=1></script>
<script src=https://applogin.one/applogin-ui.js?v=1></script>

// mount (a lock on the app)
ApploginUI.mount({ appId, onAuth:(user)=>..., onLogout:()=>... });
ApploginUI.logout();

// low level
Applogin.init({ appId });
await Applogin.getSession();   // {authenticated, token, user} — silent SSO
await Applogin.openLogin();    // {token, user, lang}|null — modal with the form
Applogin.getToken(); await Applogin.verify(); await Applogin.logout();

// backend: verify the token
POST https://applogin.one/api/v1/session/verify {app_id, token} -> {valid, user}
// or locally: jwt.verify(token, jwt_secret, {algorithms:["HS256"], audience:app_id, issuer:"applogin"})

Applogin · 統合サインイン · ダッシュボード · ライブ例：AppDock