AppFabric ACS カスタムサインインのコードを読み解く

Windows Azure AppFabric ACS でカスタムのサインイン画面を作る « ブチザッキ

さすが抱かれたい男 No.1。仕事が速いし素晴らしい。

早速開発してるアプリに ACS を組み込んで、サンプルコードをダウンロードしたところ、そのコードに衝撃を受けた*1ので調査しました。

基本的には JSONP で ACS 側から IdP の情報を貰って組み立ててるだけなんですが、やたらとコードはごちゃごちゃしてます。ちなみに ACS から貰えるデータは下のような感じ。

• Name: IdP の名前
• LoginUrl: ログイン URL
• LogoutUrl: ログアウト URL (無い場合もある)
• ImageUrl: 設定された画像の URL (当然、設定しなければ無い)
• EmailAddressSuffixes: メールアドレスのドメイン部分の配列

これが ACS で設定した分だけ配列で送られてきます。そしてサンプルコードはこの情報からボタンを作成するだけとなっています。

しかし、サンプルコードには一度選択された IdP を優先表示する機能やメールアドレスが必要な場合はフォームを出して、検証するといったコードがあるのでごちゃごちゃしていました。

なので、とりあえずメールアドレスは置いておいて、シンプルに IdP の一覧を表示してログインできるように書き換えました。コードは以下のような感じ。

<ul id="identity-list"></ul>

<script id="identity" type="text/x-jquery-tmpl">
<li><a href="${LoginUrl}">${Name}</a></li>
</script>

<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "GET",
            url: "https://*******.accesscontrol.windows.net:443/v2/metadata/IdentityProviders.js",
            data: {
                protocol: "wsfederation",
                realm: "(設定したURL)",
                reply_to: "",
                context: "",
                request_id: "",
                version: "1.0"
            },
            dataType: "jsonp",
            success: function (json) {
                $("#identity").tmpl(json).appendTo("#identity-list");
            }
        });
    });
</script>

サンプルコードだと古き良き時代の JSONP を使っていたので、jQuery を使って書き直しました。これでグローバルを汚染することもないですね。

そして、受け取った IdP 一覧を出力するために jQuery Templates を使いました。実際に動かすとこんな感じ。

メールアドレスが必要な場合には対応していないですが、EmailAddressSuffixes が空じゃないときに出力するだけです。その後の処理はサンプルコード読んでください。

*1:悪い意味で