emu雑記

C#erな人が書いているブログです。最近、javaを始めました。なんかいろいろやってます。

ASP.NET MVC + Facebook認証

ASP.NET MVCFacebook認証の流れです。
昨日と同じように、ASP.NET Web アプリケーションを作成。
f:id:emu717171:20131123212136j:plain

MVCを選択して、Web APIにチェックを付けます。
f:id:emu717171:20131123212257j:plain

流れはほとんど同じです。
[App_Start] - [Startup.Auth.cs]のFacebookのコメントアウトを解除してから、FacebookのAppIDとApp Secretを設定します。
f:id:emu717171:20131123212316j:plain

[Controllers] - [ValuesController]を作成します。
f:id:emu717171:20131123212341j:plain
f:id:emu717171:20131123212435j:plain
f:id:emu717171:20131123212441j:plain

[Authorize]属性を付けます。
f:id:emu717171:20131123212514j:plain

このほかにも、FacebookアプリのキャンバスURLに、プロジェクトの[Properties] - [Web]を選択して、開発サーバーのアドレスを設定なども行います。

昨日の記事を参考にしてみてください。

[F5]デバッグ実行してみましょう。
MVCテンプレートを選択して、個人ユーザー アカウントを設定した場合、右上にログインリンクができているのがわかります。
f:id:emu717171:20131123212725j:plain

とりあえず、http://localhost:port/api/valuesを叩いてみましょう。
f:id:emu717171:20131123213103j:plain

昨日の記事だと、[Authorize]属性が付いていればエラー(権限なし)、[Authorize]属性がなければデータを取得ました。

今回では、そのままログイン画面にリダイレクトされます。
f:id:emu717171:20131123213122j:plain

右側に「Use another service to log in.」という部分があって、【Facebook】ボタンが存在します。
ボタンを押すと、Facebookのログイン画面に飛んでいきます。
f:id:emu717171:20131123213243j:plain

ログインすると、asp.net側のWebアプリケーションのユーザー登録画面にリダイレクトされます。
f:id:emu717171:20131123213258j:plain

そして、http://localhost:port/api/valuesのJSONがダウンロード開始します。
f:id:emu717171:20131123213417j:plain

ファイルを開くと正常に取得できていますので、[Authorize]属性は無事に承認されていることが確認できます。
f:id:emu717171:20131123213519j:plain

少し中身を確認してみましょう。
Visual Studio 2013の【ツール】-【データベースへの接続】をクリックします。
f:id:emu717171:20131123214822j:plain

データソースを「Microsoft SQL Server データベースファイル(SqlClient)」を選択して、データベース ファイル名の【参照】ボタンをクリックします。
mdfファイルをプロジェクトの[App_Data]フォルダにあるmdfファイルを選択します。
f:id:emu717171:20131123215122j:plain

サーバーエクスプローラーから、今のデータベースを参照し【新しいクエリ】を選択します。

SELECT * FROM AspNetUserLogins
SELECT * FROM AspNetUsers

と入力して、実行しましょう。
すると、LoginProviderがFacebookとなっていて、データが生成されていることが確認できます。
f:id:emu717171:20131123215540j:plain