Windows Azure AppFabric ACSv2からFacebookをIdPとして使う

Windows Azure AppFabric ACSv2 ではいろいろなIdPと連携することができますが、Facebookもその中に含まれています。(ちゃんと個別のメニューとしてある)

ということでしばやん先生に鬼のような仕打ちを受けながら、あまり情報がなさそう?なこの辺を試してみました。

Facebook Developers にいきます。 ※事前に開発者登録はしておきましょう。

「新しいアプリケーションを作成」を選択してアプリケーション名やNameSpaceを入力します。

アプリができました。

App ID、App SecretはACSv2側で利用するので控えておきましょう。あとアプリのドメイン欄にはACSv2のURLを入力して保存します。(例: https://youraccount.accesscontrol.windows.net ※HTTPSを含めるようにします)

Facebook側はこれで完了です。

次はACSv2側です。

先に証明書利用者アプリケーション(連携したいWebアプリ)を追加します。

証明書利用者アプリケーションを選択して追加を選択します。

領域と戻り先URLはアプリケーションにあわせましょう。

証明書を利用する側のアプリケーションの登録ができました。

次にIDプロバイダーを選択して追加を選びます。

Facebookアプリケーションを選んで次へ。

アプリケーションID、アプリケーションシークレットはFacebook側で登録した際に確認できる情報を設定します。

アプリケーションの許可欄は既定のemailで。Facebook側からもっとたくさんの情報を抜きたい場合はここで指定します。(Facebook側でどんなアクセス許可が使えるかは確認してください)

同じページの下の方に使用元欄があるので、先ほど作成した証明書利用者アプリケーションにチェックを付けて保存します。

無事登録できました。

最後に規則グループを編集します。

生成を選択して利用するIDプロバイダーにチェックを入れて生成します。

こんな感じで自動的に生成してくれます。便利ですね。

忘れずに保存しましょう。

ACSv2側の設定は以上です。あとはアプリ側ですね。

さくっとASP.NET MVC3でプロジェクトを作ってみます。

Microsoft.IdentityModel.dllへの参照も忘れずに。

それから、起動するURLをFacebook側のアプリ等で指定したURLになるように修正します。

次はFederationUtlityを使ってWeb.configにフェデレーション認証に必要な情報を追加します。

Application URIはFacebook側で登録したものと一致するようにしましょう。

HTTPSでないと警告でますがサンプルなので気にしない。

STSの設定は既存のSTSを選択し、WS-Federationメタデータの場所はACSv2の管理ポータルにある情報をコピペします。

もし”The security token service descriptor does not contain any key descriptors”といったエラーが表示される場合はACSv2側のプライマリキーがX.509証明書になっていない所為なので、証明書を作ってアップロードしてプライマリに設定しておきます。

使うクレームを選択するところでは適当に。Name Identiferがあればまぁいいでしょう。

あ、最後にWeb.configのSystem.Webに  <httpRuntime requestValidationMode="2.0" /> を追加しておきましょう。(ださいけど…)

では実行してみましょう。

実行すると、(そのように設定してるからですが)いきなりACSv2の認証選択画面にリダイレクトされます。

ちゃんと設定したIdPが表示されてますね。Facebookを選択します。

選択するとそれぞれのIdPのログイン画面にまたリダイレクトします。Facebookのログイン画面ではちゃんと設定したアプリケーション名が表示されてますね。

次に認証すると、情報を渡していいかの確認が行われます。

ここでログインを選択して初めて情報が渡されて認証OKとなります。その後、アプリケーションに再度リダイレクトされます。

アプリケーションに戻ってきたら認証済みになって、かつユーザー名にFacebookでの名称がつかわれてることが判ります。

 

まとめ

関連要素が多くてわかりづらいですが、Windows Azure AppFabric ACSv2 を使うと簡単にFacebook連携とかできちゃいますね!

 

参考

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中