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

仕組み

1. 読者があなたのサイトにログインしている間、あなたのサーバーが、その読者が誰であるかを示す短命のトークンに署名します。
2. ページは、そのトークンを sso-token 属性でコメントウィジェットに渡します。
3. Crowment が署名を検証し、その身元で読者をコメントにログインさせます。

トークンは、あなたのサーバーと Crowment だけが知るシークレットで署名されるため、誰かが他人になりすまして読者をログインさせることはできません。シングルサインオンはすべてのプランで利用できます。

1. 有効にする

Site Console → ウィジェット → Single Sign-On を開きます。設定はオーナーと管理者が変更できます。

2. サーバーでトークンに署名する

読者がログインしているページが表示されるたびに、HS256 とシークレットで JWT に署名します。

email クレームは不要で、使われません。Crowment がメールアドレスでアカウントを照合することはありません。

// npm install jsonwebtoken
import jwt from 'jsonwebtoken'

const ssoToken = jwt.sign(
  { sub: String(user.id), name: user.displayName, avatar: user.avatarUrl },
  process.env.CROWMENT_SSO_SECRET,
  { algorithm: 'HS256', audience: CROWMENT_APP_KEY, expiresIn: '1h' },
)

// composer require firebase/php-jwt
use Firebase\JWT\JWT;

$now = time();
$ssoToken = JWT::encode([
    'sub'    => (string) $user->id,
    'name'   => $user->display_name,
    'avatar' => $user->avatar_url,
    'aud'    => CROWMENT_APP_KEY,
    'iat'    => $now,
    'exp'    => $now + 3600,
], getenv('CROWMENT_SSO_SECRET'), 'HS256');

# pip install pyjwt
import os
from datetime import datetime, timedelta, timezone
import jwt

now = datetime.now(timezone.utc)
sso_token = jwt.encode(
    {
        "sub": str(user.id),
        "name": user.display_name,
        "avatar": user.avatar_url,
        "aud": CROWMENT_APP_KEY,
        "iat": now,
        "exp": now + timedelta(hours=1),
    },
    os.environ["CROWMENT_SSO_SECRET"],
    algorithm="HS256",
)

// go get github.com/golang-jwt/jwt/v5
now := time.Now()
ssoToken, err := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
    "sub":    strconv.FormatInt(user.ID, 10),
    "name":   user.DisplayName,
    "avatar": user.AvatarURL,
    "aud":    crowmentAppKey,
    "iat":    now.Unix(),
    "exp":    now.Add(time.Hour).Unix(),
}).SignedString([]byte(os.Getenv("CROWMENT_SSO_SECRET")))

3. ウィジェットに渡す

サーバーでレンダリングするページでは、トークンを埋め込みコードに入れます。

<script defer src="https://embeds.crowment.com/comments.js"></script>

<!-- signed in: pass the token your backend signed for this page view -->
<crow-comments app-key="YOUR_APP_KEY" sso-token="SIGNED_TOKEN"></crow-comments>

<!-- signed out: leave sso-token out -->
<crow-comments app-key="YOUR_APP_KEY"></crow-comments>

読者がログインしているすべてのページでトークンを渡してください。トークンのないページは読者がログアウトしたことをウィジェットに伝え、ウィジェットもコメントからログアウトさせます。ページを移動するたびにログインし直すわけではありません。ウィジェットはセッションを保持し、読者が変わったときだけ新しいトークンと交換します。

シングルページアプリでは、ログイン状態の変化に合わせて属性を設定・削除し、ウィジェットのイベントを受け取ります。

const widget = document.querySelector('crow-comments')

// after your site signs the reader in
widget.setAttribute('sso-token', await fetchCrowmentToken())

// after your site signs the reader out
widget.removeAttribute('sso-token')

// the token expired while the page was open: hand over a fresh one
widget.addEventListener('crow:sso-expired', async () => {
  widget.setAttribute('sso-token', await fetchCrowmentToken())
})

// Required mode without a sign-in page: show your own login
widget.addEventListener('crow:login-required', () => openLoginDialog())

• crow:sso-expired：ウィジェットが読者をログインさせようとしたものの、トークンの有効期限が切れていました。新しいトークンを設定してください。
• crow:login-required：Required モードでログインページが設定されておらず、読者がログインボタンを押しました。

あなたのサイト経由でログインした読者は、あなたのサイトでログアウトします。ログアウトページがない場合、次のページでトークンを渡さなければいずれにせよログアウトされるため、ウィジェットは自身のログアウトボタンを表示しません。

4. アカウントの連携

すでに Crowment アカウントを持っている読者は、コメント欄でアバターの横にあるリンクアイコンからアカウントを連携できます。ポップアップで Crowment にログインし、Crowment のページで確認します。以降、あなたのサイトはその読者を Crowment アカウントでログインさせ、サイトのアカウントで書いたコメントはそのアカウントに移ります。

連携により、あなたのサイトはあなた自身のページ上でのみ、その読者を Crowment アカウントでログインさせられるようになります。確認ページでもそのことが読者に伝えられます。読者は User Console の Profile → Linked sites からいつでも連携を解除でき、コメントは読者のもとに残ります。SSO 設定の Account linking で連携をオフにすることもできます。

トークンの名前とアバターは、ログインのたびに読者のコメント用プロフィールを更新します。連携した Crowment アカウントは、自分の名前とアバターを保ちます。

セキュリティ

• シークレットはサーバーに保管してください。シークレットを持つ人は、あなたのサイトで誰にでもなりすまして読者をログインさせられます。
• 漏えいした場合は Replace secret を選択します。古いシークレットで署名されたトークンはすぐに使えなくなるため、新しいシークレットを直ちにデプロイしてください。すでにコメントにログインしている読者は、ログインしたままです。
• トークンは現在のリクエストの読者に対してだけ署名し、有効期間は短くしてください。

トラブルシューティング