在 ASP.NET 网页 (Razor) 站点中使用外部站点登录

项目
07/13/2023

本文介绍如何使用 Facebook、Google、Twitter、Yahoo 和其他网站登录到 ASP.NET 网页 (Razor) 网站，即如何在站点中支持 OAuth 和 OpenID。

学习内容：

使用 WebMatrix 初学者网站模板时，如何启用从其他站点登录。

这是本文中介绍的 ASP.NET 功能：

帮助 OAuthWebSecurity 程序。

本教程中使用的软件版本

ASP.NET 网页 (Razor) 2

WebMatrix 3

ASP.NET 网页包括对 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 网页网站。
打开 _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” 字段。
选择“ 保存更改” 按钮。
再次选择“ 应用 ”选项卡，然后查看应用程序的起始页。
复制应用程序的 “应用 ID ”和 “应用机密” 值，并将其粘贴到临时文本文件中。将在网站代码中将这些值传递给 Facebook 提供程序。
退出 Facebook 开发人员网站。

现在，你对网站的两个页面进行更改，以便用户能够使用其 Facebook 帐户登录网站。

创建或打开基于 WebMatrix 初学者网站模板的 ASP.NET 网页网站。
打开 _AppStart.cshtml 页面并取消注释 Facebook OAuth 提供程序的代码。未注释的代码块如下所示：
```
OAuthWebSecurity.RegisterFacebookClient(
        appId: "",
        appSecret: "");
```
将 Facebook 应用程序中 的应用 ID 值复制为参数的值 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) 。这简化了在本地测试应用程序的过程。但是，每次本地站点的端口号更改时，都需要更新应用程序的 “网站” 字段。
在 “回调 URL” 字段中，输入网站中希望用户在登录 Twitter 后返回到的页面的 URL。例如，若要将用户发送到起始网站 (将识别其登录状态) 的主页，请输入您在 “网站” 字段中输入的相同 URL。
接受条款并选择“ 创建 Twitter 应用程序 ”按钮。
在 “我的应用程序” 登陆页上，选择你创建的应用程序。
在“ 详细信息 ”选项卡上，滚动到底部，然后选择“ 创建我的访问令牌 ”按钮。
在“ 详细信息 ”选项卡上，复制应用程序的 “使用者密钥 ”和“ 使用者机密” 值，并将其粘贴到临时文本文件中。你将在网站代码中将这些值传递给 Twitter 提供程序。
退出 Twitter 网站。

现在，你对网站的两个页面进行更改，以便用户能够使用其 Twitter 帐户登录网站。

创建或打开基于 WebMatrix 初学者网站模板的 ASP.NET 网页网站。
打开 _AppStart.cshtml 页面并取消注释 Twitter OAuth 提供程序的代码。未注释的代码块如下所示：
```
OAuthWebSecurity.RegisterTwitterClient(
        consumerKey: "",
        consumerSecret: "");
```
将 Twitter 应用程序中的 “使用者密钥 ”值复制为参数的值 consumerKey ， (引号) 。
复制 Twitter 应用程序中的 “使用者机密” 值作为参数的值 consumerSecret 。
保存并关闭该文件。

运行站点的 default.cshtml 页，然后选择 “登录” 按钮。
在 “登录 ”页上的“ 使用其他服务登录 ”部分，选择 Twitter 图标。

网页会将请求重定向到所创建应用程序的 Twitter 登录页。
登录到 Twitter 帐户。
该代码使用 Twitter 令牌对用户进行身份验证，然后将你返回到一个页面，你可以在其中将登录名与网站帐户相关联。你的姓名或电子邮件地址将填写到表单上的“Email”字段中。
选择“ 关联” 按钮。

浏览器将返回到主页，并且你已登录。

在 ASP.NET 网页 (Razor) 站点中使用外部站点登录

本教程中使用的软件版本

启用 Google 登录名

启用 Facebook 登录名

启用 Twitter 登录名

其他资源

反馈

反馈

其他资源

在 ASP.NET 网页 (Razor) 站点中使用外部站点登录

本教程中使用的软件版本

启用 Google 登录名

测试 Google 登录名

启用 Facebook 登录名

测试 Facebook 登录名

启用 Twitter 登录名

测试 Twitter 登录名

其他资源

反馈

反馈

其他资源