在 ASP.NET Web Pages (Razor) 網站中使用外部網站登入

發行項
07/13/2023

本文說明如何使用 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 登入與您的網站上的帳戶建立關聯。網頁成員資格功能的相關增強功能，是使用者可以將多個登入關聯 (包括來自社交網路網站的登入，) 與網站上的單一帳戶建立關聯。

下圖顯示 [ 入門網站 ] 範本中的 [登入] 頁面，使用者可以選擇 Facebook、Twitter、Google 或 Microsoft 圖示，以使用外部帳戶登入：

外部提供者

您可以取消批註 入門網站 範本中的幾行程式碼，以啟用 OAuth 和 OpenID 成員資格。您用來處理 OAuth 和 OpenID 提供者的方法和屬性位於類別中 WebMatrix.Security.OAuthWebSecurity 。 入門網站範本包含完整的成員資格基礎結構、登入頁面、成員資格資料庫，以及您需要的所有程式碼，讓使用者使用本機認證或來自另一個網站的認證登入網站。

本節提供如何讓使用者從外部網站登入以 入門網站 範本為基礎的網站範例。建立入門網站之後，您可以執行此動作 (詳細資料，請遵循) ：

對於使用 OAuth 提供者的網站， (Facebook、Twitter 和 Microsoft) ，您可以在外部網站上建立應用程式。這可讓您的應用程式金鑰，以便叫用這些網站的登入功能。
對於使用 OpenID 提供者的網站 (Google) ，您不需要建立應用程式。針對所有這些網站，您必須擁有帳戶才能登入和建立開發人員應用程式。

注意

Microsoft 應用程式只接受工作網站的即時 URL，因此您無法使用本機網站 URL 來測試登入。
編輯網站中的一些檔案，以指定適當的驗證提供者，並提交您要使用的網站登入。

本文提供下列工作的個別指示：

啟用 Google 登入
啟用 Facebook 登入
啟用 Twitter 登入

啟用 Google 登入

建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages網站。
開啟 _AppStart.cshtml 頁面，並取消批註下列程式程式碼。
```
OAuthWebSecurity.RegisterGoogleClient();
```

執行網站的 default.cshtml 頁面，然後選擇 [ 登入] 按鈕。
在 [ 登入 ] 頁面上，于 [使用其他服務登入 ] 區段中，選擇 [Google ] 或 [ Yahoo 提交] 按鈕。此範例使用 Google 登入。

網頁會將要求重新導向至 Google 登入頁面。
輸入現有 Google 帳戶的認證。
如果 Google 詢問您是否要允許 Localhost 從帳戶使用資訊，請按一下 [允許]。

程式碼會使用 Google 權杖來驗證使用者，然後在您的網站返回此頁面。此頁面可讓使用者將其 Google 登入與您網站上的現有帳戶建立關聯，或者他們可以在您的網站上註冊新的帳戶，以建立外部登入的關聯。
選擇 [ 關聯] 按鈕。瀏覽器會返回應用程式的首頁。

啟用 Facebook 登入

如果您尚未登入) ，請移至 Facebook 開發人員網站 (登入。
選擇 [ 建立新的應用程式 ] 按鈕，然後遵循提示來命名並建立新的應用程式。
在 [ 選取您的應用程式如何與 Facebook 整合] 區段中，選擇 [網站] 區段。
填入 [ 網站 URL ] 欄位，以您的網站 URL (例如， http://www.example.com) 。 [ 網域 ] 欄位是選擇性的;您可以使用此功能來提供整個網域的驗證 (，例如 example.com) 。

注意

如果您在本機電腦上執行網站，其 URL 類似 http://localhost:12345 (號碼是本機埠號碼) ，您可以將此值新增至 [網站 URL ] 欄位，以測試您的網站。不過，每當本機網站的埠號碼變更時，您必須更新應用程式的 [ 網站 URL ] 欄位。
選擇 [ 儲存變更] 按鈕。
再次選擇 [ 應用程式] 索引 標籤，然後檢視應用程式的起始頁面。
複製應用程式的 [應用程式 識別碼] 和 [ 應用程式密碼 ] 值，並將其貼到暫存文字檔中。您會在網站程式碼中將這些值傳遞至 Facebook 提供者。
結束 Facebook 開發人員網站。

現在您對網站中的兩個頁面進行變更，讓使用者能夠使用其 Facebook 帳戶登入網站。

建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages網站。
開啟 _AppStart.cshtml 頁面，並取消批註 Facebook OAuth 提供者的程式碼。未批註的程式碼區塊看起來如下：
```
OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");
```
從 Facebook 應用程式複製 應用程式 識別碼值作為參數的值 appId ， (引號內) 。
從 Facebook 應用程式複製 應用程式秘密 值作為 appSecret 參數值。
儲存並關閉檔案。

執行網站的 default.cshtml 頁面，然後選擇 [ 登入 ] 按鈕。
在 [ 登入 ] 頁面上，于 [ 使用另一個服務登入 ] 區段中，選擇 Facebook 圖示。

網頁會將要求重新導向至 Facebook 登入頁面。
登入 Facebook 帳戶。

此程式碼會使用 Facebook 權杖來驗證您，然後返回頁面，讓 Facebook 登入與網站的登入產生關聯。您的使用者名稱或電子郵件地址會填入表單上的[Email] 欄位。
選擇 [ 關聯] 按鈕。

瀏覽器會返回首頁，而且您已登入。

啟用 Twitter 登入

流覽至 Twitter 開發人員網站。
選擇 [ 建立應用程式 ] 連結，然後登入網站。
在 [ 建立應用程式 ] 表單上，填寫 [ 名稱 ] 和 [ 描述 ] 欄位。
在 [網站] 欄位中，輸入網站的 URL (例如， http://www.example.com) 。

注意

如果您要使用) 之類的 http://localhost:12345 URL 在本機測試您的網站 (，Twitter 可能無法接受 URL。不過，您可能可以使用本機回送 IP 位址 (，例如 http://127.0.0.1:12345) 。這可簡化在本機測試應用程式的程式。不過，每次本機網站的埠號碼變更時，您必須更新應用程式的 [WebSite ] 欄位。
在 [ 回呼 URL] 欄位中，輸入網站中您想要使用者在登入 Twitter 之後返回之頁面的 URL。例如，若要將使用者傳送至入門網站的首頁 (，這會辨識其登入狀態) ，請輸入您在 [WebSite] 欄位中輸入的相同 URL。
接受條款，然後選擇 [ 建立 Twitter 應用程式 ] 按鈕。
在 [ 我的應用程式 ] 登陸頁面上，選擇您建立的應用程式。
在 [ 詳細資料] 索引 標籤上，捲動至底部，然後選擇 [ 建立我的存取權杖] 按鈕。
在 [ 詳細資料] 索引 標籤上，複製應用程式的取用者金鑰和 取用者密碼 值，並將其貼到暫存文字檔中。您會在網站程式碼中將這些值傳遞至 Twitter 提供者。
結束 Twitter 網站。

現在您對網站中的兩個頁面進行變更，讓使用者能夠使用其 Twitter 帳戶登入網站。

建立或開啟以 WebMatrix 入門網站範本為基礎的 ASP.NET Web Pages網站。
開啟 _AppStart.cshtml 頁面，並取消批註 Twitter OAuth 提供者的程式碼。未批註的程式碼區塊看起來像這樣：
```
OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");
```
從 Twitter 應用程式複製 取用者金鑰 值作為參數的值 consumerKey ， (引號內) 。
從 Twitter 應用程式複製 取用者密碼 值作為參數的值 consumerSecret 。
儲存並關閉檔案。

執行網站的 default.cshtml 頁面，然後選擇 [ 登入 ] 按鈕。
在 [ 登入 ] 頁面上的 [ 使用另一個服務登入] 區段中，選擇 Twitter 圖示。

網頁會將要求重新導向至您所建立應用程式的 Twitter 登入頁面。
登入 Twitter 帳戶。
程式碼會使用 Twitter 權杖來驗證使用者，然後將您傳回頁面，讓登入與您的網站帳戶產生關聯。您的名稱或電子郵件地址會填入表單上的[Email] 欄位。
選擇 [ 關聯] 按鈕。

瀏覽器會返回首頁，而且您已登入。

在 ASP.NET Web Pages (Razor) 網站中使用外部網站登入

教學課程中使用的軟體版本

啟用 Google 登入

啟用 Facebook 登入

啟用 Twitter 登入

其他資源

意見反應

意見反應

其他資源

在 ASP.NET Web Pages (Razor) 網站中使用外部網站登入

教學課程中使用的軟體版本

啟用 Google 登入

測試 Google 登入

啟用 Facebook 登入

測試 Facebook 登入

啟用 Twitter 登入

測試 Twitter 登入

其他資源

意見反應

意見反應

其他資源