3,121 views(since 2013/10/08)

ASP.NET MVC4 で認証(ログイン)の実装 + Facebookと関連付け

Visual Studio 2012/2013 のASP.NET MVC4のテンプレートは協力で非常に簡単にログイン付きのサンプルが作れる

OAuthでFacebook, Twitter, Microsoft, Goolge アカウントなんかとも簡単に連携できます。

※連携するとログインはFacebook, Twitter, Microsoft, Goolge アカウントでOAuthで行えるようになります。

あとで調べることとしては、

セッションレスにできるのか? 

  • iPhone/safari だとCookie はデフォルトきっているので。
  • データベースをローカルではなくSQL Azureにすること、これはWeb.configに接続文字列かけば、Entity FrameworkでごにょごにょすればOKだと思う。

まずは Visual Stuido 2013 で作ってみよう。 

ファイル/新規作成/プロジェクト

ASP.NET MVC4 Webアプリケーション

ASPNETMVC_LOGIN_0010

インターネットアプリケーション/OK

ASPNETMVC_LOGIN_0020

自動でソースが生成されました!!

デバック実行してます。(F5)

ASPNETMVC_LOGIN_0030

お見事!, レスポンシブルなWebサイトが自動で作られています。

また「ログイン」をクリックするとログイン画面がでてきます。

ASPNETMVC_LOGIN_0040

自動生成されたプログラムはEntitiy Framework経由でDBにユーザID、パスワードが保存されます。

データベース作成するプログラムは以下にあります。

  1. Fillters/InitializeSimpleMembershipAttribute.cs の以下のところ
    ((IObjectContextAdapter)context).ObjectContext.CreateDatabase();

データベースの設定は

  1. Web.config の以下のところ

    <add name=”DefaultConnection” connectionString=”Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MvcApplication3-20131001232926;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-MvcApplication3-20131001232926.mdf” providerName=”System.Data.SqlClient” />

ASPNETMVC_LOGIN_0050

それではFacebookでアカウントでAuth連携してみよう。

Facebook Developers のページにいき適当にアプリを作り App ID /アプリのSecret Keyを取得する。

https://developers.facebook.com/apps/

ASPNETMVC_LOGIN_0060

Visual Studioで

/App_Start/AuthConfig.cs をあけてFacebookのところに値を設定する。

            OAuthWebSecurity.RegisterFacebookClient(
                appId: “570519353003844”,
                appSecret: “XXXXXXXXXXXXXXXXX”);

Visual Studio のプロジェクトプロパティでの「プロジェクトURL」をメモしておく

ASPNETMVC_LOGIN_0070

Facebook のキャンパスURLに「プロジェクトURL」を入力する。

ASPNETMVC_LOGIN_0080

Visaul Studio でデバック実行(F5)するとログイン画面+Facebook連携ボタンがでてきますので

Facebookボタンを押します。

ASPNETMVC_LOGIN_0090

Facebookアカウントを関連付けます。とでてくるので

そのまま登録します。

ASPNETMVC_LOGIN_0100

ログイン後はFacebookと関連づいたアカウントでログインされます。

ASPNETMVC_LOGIN_0110

Filed Under: .NET

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.