在 ASP.NET Web Pages (Razor) 網站中使用外部網站登入
本文說明如何使用 Facebook、Google、Twitter、Yahoo 和其他網站登入您的 ASP.NET Web Pages (Razor) 網站，也就是如何在您的網站中支援 OAuth 和 OpenID
您將學到什麼：
- 當您使用 WebMatrix 入門網站範本時，如何啟用來自其他網站的登入。
這是本文中介紹的 ASP.NET 功能：
OAuthWebSecurity協助程式。教學課程中使用的軟體版本
- ASP.NET Web Pages (Razor) 2
- WebMatrix 3
ASP.NET Web Pages 包含對 OAuth 和 OpenID 提供者的支援。 使用這些提供者，您可以讓使用者使用來自 Facebook、Twitter、Microsoft 和 Google 的現有認證登入您的網站。 例如，若要使用 Facebook 帳戶登入，使用者可以只選擇 Facebook 圖示，便會將他們重新導向至他們輸入使用者資訊的 Facebook 登入頁面。 然後，他們可以將 Facebook 登入與您的網站上的帳戶產生關聯。 Web Pages 成員資格功能的相關增強功能是使用者可以將多個登入 (包括來自社群網路網站的登入) 與網站上的單一帳戶產生關聯。
下圖顯示入門網站範本的登入頁面，使用者可以選擇 Facebook、Twitter、Google 或 Microsoft 圖示，以使用外部帳戶登入：
您可以在入門網站範本中取消註解幾行程式碼，以啟用 OAuth 和 OpenID 成員資格。 您用來處理 OAuth 和 OpenID 提供者的方法和屬性位於WebMatrix.Security.OAuthWebSecurity類別中。 入門網站範本包含完整的成員資格基礎結構、登入頁面、成員資格資料庫，以及讓使用者使用本機認證或其他網站認證登入您的網站所需的所有程式碼。
本節提供範例說明如何讓使用者從外部網站登入以入門網站範本為基礎的網站 。 建立入門網站之後，您可以執行此動作 (詳細資料如下)：
針對使用 OAuth 提供者的網站 (Facebook、Twitter 和 Microsoft)，您可以在外部網站上建立應用程式。 這可提供您為這些網站叫用登入功能所需的應用程式金鑰。
針對使用 OpenID 提供者的網站 (Google)，您不需要建立應用程式。 針對所有這些網站，您必須擁有帳戶才能登入和建立開發人員應用程式。
注意
Microsoft 應用程式只接受運作中網站的即時 URL，因此您無法使用本機網站 URL 來測試登入。
編輯網站中的一些檔案，以指定適當的驗證提供者，並將登入提交至您想要使用的網站。
本文為以下工作提供單獨的說明：
啟用 Google 登入
建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages。
開啟 _AppStart.cshtml 頁面，並取消註解下列程式碼行。
OAuthWebSecurity.RegisterGoogleClient();
測試 Google 登入
執行網站的 default.cshtml 頁面，然後選擇登入按鈕。
在登入頁面上，於使用其他服務登入區段中，選擇 Google 或 Yahoo 提交按鈕。 此範例使用 Google 登入。
網頁會將請求重新導向至 Google 登入頁面。
輸入現有 Google 帳戶的認證。
如果 Google 詢問您是否要允許 Localhost 使用帳戶中的資訊，請點擊允許。
程式碼會使用 Google 權杖來驗證使用者，然後返回您網站上的此頁面。 此頁面讓使用者可將 Google 登入與您網站上的現有帳戶建立關聯，或者他們可以在您的網站註冊新帳戶，以和外部登入產生關聯。
選擇關聯性按鈕。 瀏覽器將返回到應用程式的首頁。
啟用 Facebook 登入
移至 Facebook 開發人員網站 (如果您尚未登入，請登入)。
選擇建立新應用程式按鈕，然後遵循提示來命名並建立新的應用程式。
在選取您的應用程式如何與 Facebook 整合區段中，選擇網站區段。
在網站 URL 欄位中填入您的網站 URL (例如，
http://www.example.com)。 網域欄位是自選的；您可以使用此欄位來提供整個網域的驗證 (例如 example.com)。注意
如果您在本機電腦上以類似
http://localhost:12345的 URL (其中號碼為本機埠號碼) 執行網站，您可以將此值新增至網站 URL 欄位，以測試您的網站。 不過，每當本機網站的埠號碼變更時，您必須更新應用程式的網站 URL欄位。選擇儲存變更按鈕。
再次選擇應用程式索引標籤，然後檢視應用程式的起始頁面。
複製應用程式的應用程式識別碼和應用程式密碼值，並將其貼到暫存文字檔中。 您會在網站程式碼中將這些值傳遞至 Facebook 提供者。
退出 Facebook 開發人員網站。
現在您變更了網站中的兩個頁面，讓使用者能夠使用其 Facebook 帳戶登入網站。
建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages。
開啟 _AppStart.cshtml 頁面，並取消註解 Facebook OAuth 提供者的程式碼。 取消註解的程式碼區塊如下所示：
OAuthWebSecurity.RegisterFacebookClient( appId: "", appSecret: "");從 Facebook 應用程式複製應用程式識別碼值作為
appId參數的值 (在引號內)。從 Facebook 應用程式複製 應用程式密碼 值作為
appSecret參數值。儲存並關閉檔案。
測試 Facebook 登入
執行網站的 default.cshtml 頁面，然後選擇登入 按鈕。
在登入頁面上，於使用其他服務登入區段中，選擇 Facebook 圖示。
網頁會將請求重新導向至 Facebook 登入頁面。
登入 Facebook 帳戶。
此程式碼會使用 Facebook 權杖來驗證您，然後返回頁面，讓 Facebook 登入與網站的登入產生關聯。 您的使用者名稱或電子郵件地址會填入表單上的電子郵件欄位。
選擇關聯性按鈕。
瀏覽器會返回首頁，且您已登入。
啟用 Twitter 登入
瀏覽至 Twitter 開發人員網站。
選擇建立應用程式連結，然後登入網站。
在建立應用程式表單上，填寫名稱和描述欄位。
在網站欄位中，輸入您網站的 URL (例如，
http://www.example.com)。注意
如果您要在本機測試您的網站 (使用類似
http://localhost:12345的 URL)，Twitter 可能不接受該 URL。 不過，您也許可以使用本機 loopback IP 位址 (例如http://127.0.0.1:12345)。 這可簡化在本機測試應用程式的過程。 不過，每次本機網站的埠號碼變更時，您必須更新應用程式的網站欄位。在回撥 URL 欄位中，輸入網站中您希望使用者在登入 Twitter 之後返回的頁面 URL。 例如，若要將使用者傳送至入門網站的首頁 (將辨識其登入狀態)，請輸入您在網站欄位中輸入的相同 URL。
接受條款，然後選擇建立 Twitter 應用程式按鈕。
在我的應用程式登陸頁面上，選擇您建立的應用程式。
在詳細資料索引標籤上，捲動到底部，然後選擇建立我的存取權杖按鈕。
在詳細資料索引標籤上，複製應用程式的取用者金鑰和取用者密碼值，並將其貼到暫存文字檔中。 您會在網站程式程式碼中將這些值傳遞至 Twitter 提供者。
退出 Twitter 網站。
現在您變更了網站中的兩個頁面，讓使用者能夠使用其 Twitter 帳戶登入網站。
建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages。
開啟 _AppStart.cshtml 頁面，並取消註解 Twitter OAuth 提供者的程式碼。 取消註解的程式碼區塊如下所示：
OAuthWebSecurity.RegisterTwitterClient( consumerKey: "", consumerSecret: "");從 Twitter 應用程式複製取用者金鑰值作為
consumerKey參數的值 (在引號內)。從 Twitter 應用程式複製取用者密碼值作為
consumerSecret參數的值。儲存並關閉檔案。
測試 Twitter 登入
執行網站的 default.cshtml 頁面，然後選擇登入按鈕。
在登入頁面上，於使用其他服務登入區段中，選擇 Twitter 圖示。
網頁會將請求重新導向至您建立之應用程式的 Twitter 登入頁面。
登入 Twitter 帳戶。
程式碼會使用 Twitter 權杖來驗證使用者，然後讓您返回頁面，讓登入與您的網站帳戶產生關聯。 您的名稱或電子郵件地址會填入表單上的電子郵件欄位。
選擇關聯性按鈕。
瀏覽器會返回首頁，且您已登入。