okyuu.comのOpenIDでのログインがSxipperからしづらい件について

OpenIDでの認証にかんして 質問 [okyuu.com] へのコメントとして書いていたら、とても長くなってしまったのでブログのエントリーとしました。(Q&Aにも記事をピックアップできればいいのにね。文面の長さや画像などに制限無いから説明しやすいと思うんだけど)

おいらお灸のIDを取るときにOpenID使ったんだけど、「OpenIDのURLを入力するんじゃなくて、ユーザIDだけ入力させるのはわかりづらい、せめてフォーマットを示せ」って文句言ったら、次の日には直ってたんで、スタッフの対応はすごくいいイメージです。(←ちょっと前まで「http://USER_ID.blogspot.com/」みたいなガイドが無かった)

プログラマ向けのサイトで、こういう姿勢って大事ですよね。

で、OpenIDを使ったスマートなログインの仕方(with Sxipper編)ですが、たぶんこの問題って、お灸だけの話じゃなくて、一般的な問題ですよね。たしかに身元保証(てな程各OpenIDプロバイダがしっかりしてるとも思えないけど)したければ、ホワイトリスト法になるんでしょうし、まだ技術としてこなれてないからパターンが確立してないんでしょうし。

自分もOpenID使おうと思っている一人として、解決策無いかなーと思って、解決案を何個か考えてみました。

最終的には現状のokyuu.comのインターフェイスが云々じゃなくて、自分ならこう実装するという観点でまとめます。

何を問題とするのか

まず、現状の問題点ですが、

・Sxipperでは自動ログインできないにもかかわらず、ログインしない限りリクエスト毎にポップアップが表示されて非常にウザい

の一言に尽きると思います。

これは「もうSxipperが無いと生きていけない」的にSxipperに依存している人にしてみれば、結構致命的な問題です。Sxipperを使ってログインが出来ないだけでなく、もっと悪いことにSxipperが邪魔でしょうがないので。サイトに魅力がないなら、去ってしまうユーザが居るであろうぐらいの深刻さです。

でも、おそらく、IDを毎回タイプする人にとっては問題ないと思うんです。

だったら、Sxipperに特化した抜け道を造っておけばいいのかなと。

OpenIDの動作原理

あまり詳しくないんだけど、このあたりの実装(OpenID 1.0)になってると勝手に判断。(OpenID2.0も基本は同じなのかな)

あなたのサイトをOpenID対応にしている2行の意味 − ＠IT

ちょっと直せば済むかもね案

現状OpenIDプロバイダ選択用ドロップダウンを選んだら、モーダルっぽいウインドウ(と表現すべき?)にユーザIDの入力を求められるんだけど、この時もSxipperは反応してくれない。JavaScriptで制御してるっぽいので、HTML的にはformとかが無いからかな?

ここさえクリアできれば、Sxipperユーザはキーをタイプする必要が無くなるんだけど…でも、そもそもOpenIDプロバイダ選択用ドロップダウンを選択するのが面倒だな…(自堕落)

(あと、Sxipper対策をするしないにかかわらず、ユーザ名打ち込んでEnter叩いたらOKボタンが反応して欲しい)

現状をなるべく崩さない案

Sxipperの動作原理を把握してないので、脳内ベースですが、きっと原理的には入力項目(inputとform)のname属性なりid属性をキーに、その内容を記録/再生しているんだと思うので、OpenIDプロバイダをセレクトボックスから選択するのではなく、特定文字列を入力させて選択させるのはどうでしょう?(これだとSxipperでもらくちん)

具体的には「optionタグのvalue値見合いの文字列」を直接入力するためのテキストボックスを用意するとか。

問題は、Sxipperを使ってない人にとっては逆に使いづらくなるので、両立ができない点ですが、

https://okyuu.com/ja/login

のようなログイン専用ページがあるなら、Sxipper用のインターフェイスがあってもいいのかなぁと思う次第です。

現実的な線は、今のOpenIDプロバイダ選択用ドロップダウンと、OpenIDプロバイダ名+ユーザIDを入力させるテキストボックスを併記するような感じかなぁ。これだと非Sxipperユーザでもあまり不便ではないと思います。

そもそも案

OpenIDプロバイダ選択用ドロップダウンを廃して、やっぱりOpenIDのURI全てをを入力してもらい、OpenIDプロバイダにリダイレクトする前に正規表現で検査するなどして、マズければ普通通りエラーを返すってのが、ベーシックなのかなぁという案。

OpenIDプロバイダ名+ユーザIDを入力させるテキストボックスを併記よりは、こちらの方が一般的でシンプルかも。

でも、タイプ量が増えるからSxipper使ってない人には不便になるか。

現状のインターフェイス+OpenIDのURI入力ボックス併記が良い?

それに、検査するためのお灸側のコード変更量も増えるね。

ぐだぐだになってきたのでそろそろまとめる

結論から言うと、自分ならこういうインターフェイスにする。

Skitch.com + Skitch = fast and fun screen capture and image sharing.

どこが良いのか

• テキストボックスを基本にしつつも、OpenIDプロバイダを選択してユーザ名だけ入力するようなインターフェイスも備えているので、ユーザ名だけをタイプしたい人も、ブラウザ任せにしたい人も救われる
• このサービス、英語メインなんだけど、このOpenIDのログインページだけは日本語表示されている。･･･ってことは、どこかで出しているライブラリを使っている(おいらのスキルでは追えなかった)んじゃないかな?→みんなで使ってみんなではっぴー
• サーバサイドでは単純にURIを正規表現でバリデートできるので、ホワイトリスト方式で怪しいOpenIDプロバイダを弾ける。(ただし、弾いて意味があるの?とは思う)　これは(今URIをバリデートしているならば)、クライアント側のインターフェイスがどうであろうと、サーバサイド側のコードを変更する必要がないことを指す。

okyuuに合わせて考えると

• 現状でもoptionのvalueの値はバリデートしてるんだろうから、OpenIDのURIを正規表現を使ってホワイトリスト方式ではじくのも、さほど手間にはならないのでは?
• https://okyuu.com/ja/loginでは、完全に今のドロップダウンを廃して置き換える。
• トップページは、現状では価格.comIDがデフォルトで、OpenIDを入力するには一度クリックしなければならないため、やはりポップアップがうざく感じるっぽい。(未確認)　なので、価格.comIDの下にOpenIDの入力ボックスを表示し、切り替えを廃しては?(これでSxipperがちゃんと動くかは未確認)

のが理想なのかなぁと思った。

ただ、仕組みを理解しないでズカズカ言ってるので、ホントは実現できない理由があるのかも知れませんが、少数派であるFireFox3 with Sxipperのいちユーザ意見として。

で、最終的にOpenIDのログインインターフェイスはどうまとまっていくのか?

とりあえずokyuu.com でこのエントリのタイトルで検索すると、今後どうなったかは追えると思う。

最初に言ったとおり、これはokyuu.comだけの問題じゃなくて、一般的にどういうインターフェイスが都合がよいかという話だから、okyuuスタッフが出した解と、おいらの理想的な形は違うかも知れないけど、このエントリーから派生した議論(もしくはみんな興味なくて完全スルー)とその結末は、一つのバッドノウハウと一つの回答ぐらいの意味はあると思う。

興味ある人は追ってみてください。