Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JICS 2013 OpenID Hack-a-thon Guide

JICS 2013 OpenID Hack-a-thon Guide

OpenID Hach-a-thonとは

各種OpenSource Projectの開発者向けに、OpenID Connect, Account Chooser対応をサポートするイベントです。
OpenID Foundation JAPANのEvangelistを含む有識者がサポートします。

@ITの「デジタル・アイデンティティ技術最新動向」という連載でOpenID Connect, Account Chooserを取り上げています。概要の把握のために事前に目を通していただくことをお勧めします。

Hack-a-thonをスムーズに進めるための参考URLと簡単な実装のポイントを紹介します。

OpenID Connect

YConnect

OpenID ConnectのRelying Partyとしての機能を実装するにあたり、国内のOpenID ProviderであるYahoo! JAPANのAPI「YConnect」をご利用いただけます。

YConnectはOpenID Connectの仕様群の中でDiscovery, Dynamic Client Registration等に対応しておりません。
Relying partyとしてYConnectを利用するためにはアプリケーション登録が必要です。 以下の記事に、WebアプリケーションにてYConnectを利用するまでに必要なアプリケーションの登録から実装までの流れがまとめられています。

Hack-a-thon当日までにアプリケーション登録のために必要なYahoo! JAPAN IDを用意しておくとスムーズに開発に入れるのではないでしょうか。

実装のポイントその1 : ID Tokenの活用

OpenID Connectの特徴の一つに、認証イベントの情報を含むID Tokenがあります。
ID Tokenにはユーザー識別子だけではなく、OP/RPの識別子や認可日時といったデータも含まれます。
また、Client CredentialsやAccess Tokenといった値を含まないため、RP側は自ドメインのCookieにセットしてセッション管理に利用するなど認証処理完了後も柔軟に利用できます。

実装のポイントその2 : 属性情報の活用

OpenID Connectではユーザーの属性情報を提供するUserInfo Endpointがあります。
これらの属性情報をうまく活用することで、新規アカウント登録時のハードルを下げることができます。
YConnectで提供される確認済みメールアドレスを利用することで、RPは自らメールを送信しユーザーに確認させる手間を省けます。

Account Chooser

Central Account Chooser

@ITの記事にあるとおり、OpenID Foundationのワーキンググループにて提供されているCentral Account Chooserを利用することで認証時のユーザビリティと安全性を向上できます。

Central Account Chooserではwww.accountchooser.comドメインのローカルストレージにメールアドレス、ニックネームといったアカウント情報を保存し、ドメインを超えて様々なサービスの認証時にリストから利用するアカウントを選択することによりサイトにメールアドレスなどの情報を伝えることができます。

Central Account Chooserを利用するための手順を説明します。
詳しくは下記のドキュメントを参照してください。

ステップ1 : アカウント情報の保存

Central Account Chooserにアカウントを保存するために、サービスは認証処理完了時に次の処理を実装します。

  1. Central Account Chooserで提供されているJavaScriptファイル(ac.js)の読み込み
  2. scoreAccountを呼び出してアカウント情報を保存

ユーザーはCentral Account Chooserのページに送られ、アカウント保存のための画面が表示されます。

ステップ2 : アカウント情報の選択

ステップ1で保存したアカウントを利用するために、サービスは認証時に次の処理を実装します。

  1. Central Account Chooserで提供されているJavaScriptファイル(ac.js)の読み込み
  2. サービスの設定情報(認証用URL、登録用URLなど)を指定

ユーザーはCentral Account Chooserのページに送られ、アカウント選択画面が表示されます。 サービスの設定情報は次のステップで利用されます。

ステップ3 : アカウントの種類に合わせた画面遷移

アカウントが選択されたとき、Central Account ChooserはサービスのUser Status URLにPOSTリクエストを送ることでアカウントの種類を問い合わせます。
User Status URLは3種類のレスポンスを返し、Central Account Chooserはそれぞれに対応した処理を行います。

  1. サービスに未登録のアカウント : 新規登録画面にリダイレクト
  2. サービスに登録済みのアカウント : ログイン画面にリダイレクト
  3. サービスに登録済み、かつ外部IdPの認証を利用しているアカウント : サービスから渡された外部IdPの認証用URLにリダイレクト

ここで、Central Account Chooserは単純にリダイレクトだけを行うわけではありません。
リダイレクト先でac.jsを読み込むことで、保存されているアカウント情報で入力フォームを補完します。
つまり、1の新規登録画面ではメールアドレス、表示名、プロフィール画像、2のログイン画面ではメールアドレスの値が自動的にセットされます。

複数のアカウントを使い分けているユーザーにとっては、アカウント忘れのリスクを抑えられるでしょう。 スマートフォンのブラウザにも対応しているため、入力ストレスの軽減にもなるでしょう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment