NASCAR problemを軽減できるかもしれない簡単な実装とさらなる妄想

f:id:ritou:20210819183905p:plain

こんばんは、ritouです。

いつもお友達同士でキャッキャウフフさせていただいているTwitterにてこんな投稿をしたところ、珍しくたくさんの反応をいただけました。

ピッコマって漫画サービス、前回のログイン方法を覚えて教えてくれる。ソーシャルログイン実装してるとこは見習うべき。 pic.twitter.com/obAMF6b1Rb
— 👹秋田の猫🐱 (@ritou) 2021年8月17日

簡単に説明すると、

ソーシャルログインとかメアド/パスワードとかでログインできるサービスがある
一度ログアウトして再びログイン画面を訪れると、「お前は前回Facebookでログインしたよな」って教えてくれた
どれ使ってたっけ...で迷わない！いい感じ〜

ってな話です。

特にソーシャルログインのボタンが並んでいる時にどれ使ってたっけ...っていう問題はNASCAR Problem(そのうちJapanese Payment Method Problemって言われるかもな！)と呼ばれています。
今回のはそれを改善するための一つの方法だと前から言われてきました。
— 👹秋田の猫🐱 (@ritou) 2021年8月18日

どう実装されているか

ログインセッションそのものを扱うCookieとは別のCookieに認証方法を保存
ログイン画面ではその値を見て表示出しわけ

と言うようになっています。

f:id:ritou:20210819180525p:plain

ちなみにここを "tw" に変更すると、お前前回Twitter使ってたよな！？になります。

値の保存方法はCookieでもlocalStorageでも良いでしょう。持ってる情報としてもそんなにセンシティブな扱いではなさそうです。

某Googleのような細かく情報を残したログアウト状態を実装したわけではなく、単純に方法のみを残しておくだけでシンプルに実装可能です。スマホ時代にあまりログアウトしないけどな〜って言うコメントもありましたが、それはそうですね。必ずしもみんなに需要があるわけではないでしょう。しかし、PC向けのサービス、複数の認証方式を採用しているサービスは、あまり考えずにこれを使ってみても良いのではないでしょうか。

さらなる妄想

ここからは妄想です。

引用RTであったのが、「新しい端末でもこれできるといいな」ってやつです。

Chromeさんに頼みましょう https://t.co/ivI26FlR2N
— 👹秋田の猫🐱 (@ritou) 2021年8月17日

それに対して「その辺りはブラウザに頼みましょうや」と答えています。この発言の背景としては、次のような展開を想像してのことです。

例えばブラウザのAPIとかで値を出し入れするように標準化がされたとして。
この前のリモートWebOTPみたいにChromeがアカウントと紐づけて同期できれば、一度もログインしたことないブラウザでもこれでログインするんだろ？ってのを提案できそうなんですよね。

みたいなツッコミ欲しかった。 https://t.co/Xwn5wPDSk2
— 👹秋田の猫🐱 (@ritou) 2021年8月18日

例えば

lastSignInMethod.set(method), lastSignInMethod.get() みたいなブラウザのAPIが定義される
- ログイン成功時に lastSignInMethod.set("fb") を呼ぶ
- ログイン画面で lastSignInMethod.get() を呼ぶ

みたいな標準化が行われたとします。すると、「このサービスで前回何でログインしたか」を統一的な方法でブラウザに覚えてもらうことができるようになりますね。

少し別の話をしましょう。この前、WebOTPの拡張についての記事を書きました。

ritou.hatenablog.com

この記事で紹介されている仕組みでは、ChromeではPCとAndroidで同じGoogleアカウントでログインすることでAndroidのChromeにて受信したWebOTPをPCのChromeの方に送られます。また、パスワードの同期の仕組みがあれば別環境の同一ブラウザで過去に利用したサービスを訪れた時に保存しておいたパスワードを自動入力することも可能でしょう。

こう言う仕組みを今回の「前回のログイン方法」にも当てはめるとどうなるでしょう。