建置一個支援google、Facebook帳號可登錄的MVC5應用程式

測試環境: VS2013、MV5、Windows7

---

用社交網站上的帳號來登錄至應用系統中的是當紅的技術應用(OAuth2、OpenID)，在VS2013中非常的貼心的在即有的範本中建妥相關的程式，你只要依序操作建立新專案的步驟就能很容易的讓應用程式也趕上時代潮流。在本貼文中要來試試看如何讓你的應用程式可以使用Facebook、Google帳號來登入。同時也要嘗試為這些帳號增加額外的欄位。

貼文內容:

• 建立MVC5新專案

• 啟動Google 帳號登入功能
• 修改 Startup.Auth.cs

• 啟動 Facebook 帳號登入功能
• 在 Facebook 中建立 App
• 啟動 MVC5專案中 SSL 功能
• 修改 Startup.Auth.cs

• 幫帳戶增加額外欄位

---

建立MVC5新專案

新增=>專案=>ASP.NET Web 應用程式

選擇 MVC，按下 "變更驗證" 按鈕

選擇 “個別使用者帳戶”

啟動Google 帳號登入功能

開啟 App_Start/Startup.Auth.cs

將最後一行程式註解去除。

按F5執行程式，點選登入功能

在登入畫面中，點選"Google”按鈕，出現選擇帳戶的瀏覽器畫面(或點選 “新增帳戶"功能來登入新帳號)，點選要用來登入的帳號

按下"接受"按鈕

按下"註冊"按鈕(也可以自行修改系統中的使用者名稱)，這個註冊畫面只有在以新帳號第一次登錄系統時才會出現。

下圖是以Google 帳號登入成功的畫面。到此我們已經完成了讓我們的應用程式可以接受以Google 帳號登錄的功能了。

可以打開資料庫中的 AspNetUsers 表格有一筆記錄

啟動Facebook 帳號登入功能

1. 在瀏覽器中輸入  https://developers.facebook.com/apps 來登入Facebook

2. 登入Facebook開發者網頁中，如果你不是以開發者身份來登入，請執行"註冊為開發者"功能

3. 執行”Create a new App”功能

進行 Facebook 管理者功能中建立new App

執行 Create a new App

輸入 App名稱

記下 App ID 及 App Secret ，待會在我們 MVC5專案中必須填入這些資訊。

啟動MVC5專案中的 SSL 功能

記錄下 SSL URL

將上述的SSL URL 填入 Facebook App => Settings => Advanced => Valid OAuth redirect URIs 欄位中並按下 “Save Changes” 按鈕

修改 Startup.Auth.cs，將 app.UseFacebookAuthentication 註解拿掉，並加入 appId 及 appSecret。

在VS2013 按下F5執行程式

按下"登入" ，選擇 Facebook

按下註冊按鈕(你可以自行修改使用者名稱)

登入成功畫面

打開資料庫 AspNetUsers table :

幫帳戶新增額外欄位

建立MVC5新專案

接下來我們來看看如何幫這些外在帳戶資料新增額外的欄位。我們多加了二個欄位: 居住城市、生日。

打開 models/IdentityModels.cs，加入新欄位: HomeTown、BirthDate

打開 Models/AccountViewModels.cs ，幫External Account Login  用的 ViewModel 也加入這兩個欄位:

再打開 Controllers/AccountController.cs 也要在 外部帳號註冊所使用的 Action method 中加入這二個新欄位：

最後要修改的是View，打開Views/Account/ExternalLoginConfirmation.cshtml，在View中加入這二個欄位:

在"套件管理器主控台"中依序輸入以下指令

以上新增欄位的作業完成了，當然必須要把這些修改的動作更新到資料庫中，打開套件管理主控台，依序輸入以下指令:

1. Enable-Migrations
2. Add-Migration Init
3. Update-Database

完成後你可檢查一下資料庫結構是不是變了:

當您選擇用 Facebook 帳號登入後的註冊畫面:(顯示出額外加入的二個欄位)