はじめに
身近な所でここマジックリングのログインだよね、いやなんかコード入れたよ、という会話が発生して気になったので見てみました。色々とよくできているなぁとなってしまい参考になりそうという意味で紹介してみます。
基本リスペクトベースの考察記事となっております。簡単に調べてわかる範囲のためセキュリティ影響は薄い認識ですが、削除したほうが良ければ連絡を頂き次第速やかに削除致します。
ログイン画面の構造
このログイン画面で面白いのは一般にはログイン要素しかない印象がありますが、Learn moreという下スクロールできる表示が表示されており、下にスクロールするとプランごとの説明やFAQが閲覧でき、LPと繋がっているような構造になっています。
適当なURLが共有された場合に受け取った人はユーザーでない場合はログイン画面にリダイレクトされがちですが、そういうユースケースでもサービスの魅力や特徴を伝えられるようにLPへシームレスに繋がるというのはすごい構造だなと感心しました。
本家Pricingは https://www.anthropic.com/pricing ですが、このページのpricingは https://claude.ai/login#pricing となっており、少し見た目も違うので別の実装ではありそうです。コンテンツはほぼ一緒ですが…。
Continue with Emailを押すと送信完了表示が表示されます。
その後数秒立つと認証コード入力のUIに変わります。（ちょっと早い）
ログインボタンを押した時のAPI処理
ログインボタンを押すと POST /api/auth/send_magic_link に対してリクエストが送信されます。
request payload
{
"source": "claude",
"login_intent": null,
"email_address": "dummy@example.com",
"recaptcha_token": "dummy",
"recaptcha_site_key": "dummy",
"utc_offset": -540
}
GoogleのRECAPTCHAが使われていますね。その他後で登場しますが、メール送信時にユーザーのローカル時間を知るためにutc_offsetをこの時点で送信しているようです。
response body
{
"fallback_code_configuration": {
"charset": "numeric",
"length": 6,
"show_input_after_delay": 5
},
"sent": true,
"sso_url": null
}
ここで何秒後にUIが変わるかや認証コード入力の仕様が動的に設定できそうな感じになってますね。
Set-Cookie
pendingLogin=true; Domain=.claude.ai; expires=Tue, 05 Nov 2024 13:57:05 GMT; HttpOnly; Path=/; SameSite=lax; Secure
1時間有効期限のシンプルな値のCookieをセットしていますね。これはあとから出てきますが、このブラウザからログインフローを踏んだという記録を残していると思われます。有効期限が思ったより長く値もシンプルなのでhttponly, samesite=lax, secureで厳密に改ざん等が防げるということでしょうか。自分であればなんだか怖くて別の仕組みも合わせて入れたくなってしまいそうです。
cf-cache-status や x-cloud-trace-context のresponse headerがあるのでCloudflareのCDN系からオリジンはGCP系サービスに繋がっている可能性が高そうです。
ちなみにログイン画面自体は x-powered-by: Next.js があるのでわざわざ偽装していなければNext.jsを使っていてこちらも前段にCloudflareがいそうです。
メール
上記のAPIが実行されると下記のメールが届きます。
タイトル: Secure link to log in to Claude.ai | 2024-11-05 21:57:05
本文: マジックリンク入りのメール マジックリンク: https://claude.ai/magic-link#1234:asdf
*1234, asdf部分はそれぞれもっと長い英数字です。
この日時表記が日本時間で送られてきたのですが、これはログインリクエスト時にutc_offsetをブラウザ側から送ることによってローカル時間による時刻表現を簡単に実現しているように見えます。賢い…。
また、同じタイトルで送ってしまうとメーラーによって中身が部分的に返信扱いになってしまったりするのですが、常に違うタイトルにすることによって常にスレッド判定にならず防げそうです。また、ユーザーにいつリクエストしたかも示せるという一石二鳥な実装になっています。返信の回避は意図していないおまけかもしれませんが…。
マジックリンクの値部分は恐らくですが:区切りで2つの値が送られてきているので署名か復号用のiv等の値かもしれません。流石に素人すぎて分かりません。
メールを開く
ログインしたブラウザでそのまま開く
マジックリンクに遷移して恐らくCookieの値の確認を行いログイン後の画面に遷移します。 Cookieが切れている場合、というより実際リンクの有効期限切れということなのかもしれませんが、リンクの有効期限切れという画面になりました。
匿名ウィンドウで開く
匿名ウィンドウで開いた場合は画面にVerification Codeが表示され、ログインボタンを押した後の入力欄で入力することでログインできます。
おわりに
ログインしたブラウザと同じブラウザでメールを開けたユーザーに対してはそのままログインするという快適なUXを提供しつつ、なんとなくスマホ（別ブラウザ）で開いた人にも迷わずにログインできるUXをCookieを上手く活用しながら実現しているのが面白いですね。
結構文言の1語1語も上手いなと個人的には思ってしまうのでいいログインフローだなと思ってしまいました。あっぱれでございます。
それではまた！