🚪

Zenn のちょっと不思議な挙動を見つけたのでレポートして解説する

2020/09/20に公開

まずは再現手順から

適当なアカウントで新規登録を行う
最初のユーザー情報入力 ( https://zenn.dev/onboarding ) の画面から、一度Zennの「ログインと新規登録」画面（ https://zenn.dev/enter ）に遷移する
- 私の場合、ログインアカウントを誤って仕事用のにしてしまったため、慌ててログインアカウントを変えようと、Chromeのバックボタン長押しから戻ると再現しました
- もしかすると他にもだめなURLがあるかも
一度、https://zenn.dev/clear というURLに遷移して、そこから中途半端なログイン状態でトップページに遷移する。
このとき、ログインユーザーアイコンが表示されないためログアウト操作が画面から行えず、Cookieクリアなどを行う必要がある

上記の手順が、2020/09/20 20時現在再現する状況です。

Zenn では現状Googleアカウントを利用したサインインしかサポートされていません（その割り切り素晴らしいと思います）。このような場合、一般的にユーザー登録時に以下のようなフローを実装します。

まず認証依頼先の認証URLへとユーザーを遷移させる。
- その際、何らかの形で認証依頼先での認証完了後に遷移する自分のサイトのURLをコールバックURLの形で渡す。
コールバックされた自サイト上で認証トークンを受け取る。
- このとき、認証依頼時に付加した条件に応じて、認証依頼先での情報を自サイト側でも取り出すことが可能となる。
コールバックされた自サイト内のでユーザー登録を行う。
- このとき、②で得られた情報のみですべての情報を満たすことができることもあれば、追加で独自の情報を入力する必要があるパターンもある。
  - 今回は独自の情報を入力する必要があるパターン

このとき③が中途半端な形で終わってしまった場合で、かつ適切な対策が取られていないと、このような問題が表出します。まぁ結構あるあるパターンですね。

そもそも Zenn 側もこの状況を想定していないわけではなさそうで、例えば④のときの記事の作成ボタン自体は押せてしまうのですが、すぐに「ユーザー名を登録してください」というエラーが発生し、不正な操作はできなさそうです。

また、最初のユーザー情報登録画面においても、おそらくブラウザバックが殺されており、バックボタン長押しで過去の履歴から遷移したりとか直接アドレスを打ち込むとか、そういうひねくれたことをしないとそもそもこの状況には陥りません。

とはいえ、ここまでの検知はできているのですから、おそらくかなりの少ないコードの追加で、上記の事象も解消できるはずです。ユーザーアイコンが描画できなかった時点でページとしてエラーを投げて、エラー復帰ルートに乗せればそれでOKな気がしますので。