Внешние службы проверки подлинности с веб-API ASP.NET (C#)
Visual Studio 2017 и ASP.NET 4.7.2 расширяют параметры безопасности для одностраничных приложений (SPA) и служб веб-API для интеграции с внешними службами проверки подлинности, которые включают несколько служб проверки подлинности OAuth/OpenID и социальных сетей: Учетные записи Майкрософт, Twitter, Facebook и Google.
В этом пошаговом руководстве
Предварительные требования
Чтобы выполнить примеры, приведенные в этом пошаговом руководстве, вам потребуется следующее:
Visual Studio 2017
Учетная запись разработчика с идентификатором приложения и секретным ключом для одной из следующих служб проверки подлинности социальных сетей:
- Учетные записи Майкрософт (https://go.microsoft.com/fwlink/?LinkID=144070)
- Twitter (https://dev.twitter.com/)
- Facebook (https://developers.facebook.com/)
- Google (https://developers.google.com/)
Использование внешних служб проверки подлинности
Множество внешних служб проверки подлинности, доступных в настоящее время для веб-разработчиков, помогает сократить время разработки при создании новых веб-приложений. У веб-пользователей обычно есть несколько учетных записей для популярных веб-служб и веб-сайтов социальных сетей, поэтому, когда веб-приложение реализует службы проверки подлинности из внешней веб-службы или веб-сайта социальных сетей, оно экономит время на разработку, которое было бы потрачено на создание реализации проверки подлинности. Использование внешней службы проверки подлинности избавляет конечных пользователей от необходимости создавать другую учетную запись для веб-приложения, а также от необходимости запоминать другое имя пользователя и пароль.
В прошлом у разработчиков было два варианта: создать собственную реализацию проверки подлинности или узнать, как интегрировать внешнюю службу проверки подлинности в свои приложения. На самом базовом уровне на следующей схеме показан простой поток запросов для агента пользователя (веб-браузера), который запрашивает информацию из веб-приложения, настроенного для использования внешней службы проверки подлинности:
На предыдущей схеме агент пользователя (или веб-браузер в этом примере) выполняет запрос к веб-приложению, которое перенаправляет веб-браузер во внешнюю службу проверки подлинности. Агент пользователя отправляет свои учетные данные внешней службе проверки подлинности, и если агент пользователя успешно прошел проверку подлинности, внешняя служба проверки подлинности перенаправит агент пользователя в исходное веб-приложение с маркером той или иной формы, которую агент пользователя отправит веб-приложению. Веб-приложение будет использовать маркер, чтобы убедиться, что агент пользователя успешно прошел проверку подлинности внешней службой проверки подлинности, и веб-приложение может использовать маркер для сбора дополнительных сведений об агенте пользователя. Когда приложение завершит обработку сведений агента пользователя, веб-приложение вернет агенту пользователя соответствующий ответ на основе его параметров авторизации.
Во втором примере агент пользователя согласовывает с веб-приложением и внешним сервером авторизации, а веб-приложение выполняет дополнительную связь с внешним сервером авторизации для получения дополнительных сведений об агенте пользователя:
Visual Studio 2017 и ASP.NET 4.7.2 упрощают интеграцию с внешними службами проверки подлинности для разработчиков, предоставляя встроенную интеграцию для следующих служб проверки подлинности:
- Учетные записи Майкрософт (учетные записи Windows Live ID)
В примерах в этом пошаговом руководстве показано, как настроить каждую из поддерживаемых внешних служб проверки подлинности с помощью нового шаблона веб-приложения ASP.NET, поставляемого с Visual Studio 2017.
Примечание
При необходимости может потребоваться добавить полное доменное имя в параметры внешней службы проверки подлинности. Это требование основано на ограничениях безопасности для некоторых внешних служб проверки подлинности, которые требуют, чтобы полное доменное имя в параметрах приложения соответствовало полному доменному имени, используемому клиентами. (Шаги для этого будут сильно отличаться для каждой внешней службы проверки подлинности. Вам потребуется обратиться к документации по каждой внешней службе проверки подлинности, чтобы узнать, требуется ли это и как настроить эти параметры.) Если вам нужно настроить IIS Express для использования полного доменного имени для тестирования этой среды, см. раздел Настройка IIS Express для использования полного доменного имени далее в этом пошаговом руководстве.
Создание примера веб-приложения
Следующие шаги помогут вам создать пример приложения с помощью шаблона веб-приложения ASP.NET. Этот пример приложения будет использоваться для каждой из внешних служб проверки подлинности далее в этом пошаговом руководстве.
Запустите Visual Studio 2017 и выберите Новый проект на начальной странице. Или в меню Файл выберите Создать , а затем Проект.
Когда откроется диалоговое окно Новый проект , выберите Установленные и разверните узел Visual C#. В разделе Visual C# выберите Интернет. В списке шаблонов проектов выберите ASP.NET Веб-приложение (.Net Framework). Введите имя проекта и нажмите кнопку ОК.
Когда отобразится новый проект ASP.NET , выберите шаблон Одностраничное приложение и нажмите кнопку Создать проект.
Подождите, пока Visual Studio 2017 создаст проект.
Когда Visual Studio 2017 завершит создание проекта, откройте файл Startup.Auth.cs , расположенный в папке App_Start .
При первом создании проекта ни одна из внешних служб проверки подлинности не включается в файле Startup.Auth.cs ; Ниже показано, как может выглядеть код, с разделами, выделенными для включения внешней службы проверки подлинности и соответствующих параметров для использования проверки подлинности учетных записей Майкрософт, Twitter, Facebook или Google с приложением ASP.NET.
using System;
using Microsoft.AspNet.Identity;
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity.Owin;
using Microsoft.Owin;
using Microsoft.Owin.Security.Cookies;
using Microsoft.Owin.Security.DataProtection;
using Microsoft.Owin.Security.Google;
using Microsoft.Owin.Security.OAuth;
using Owin;
using WebApplication1.Models;
using WebApplication1.Providers;
namespace WebApplication1
{
public partial class Startup
{
// Enable the application to use OAuthAuthorization. You can then secure your Web APIs
static Startup()
{
PublicClientId = "web";
OAuthOptions = new OAuthAuthorizationServerOptions
{
TokenEndpointPath = new PathString("/Token"),
AuthorizeEndpointPath = new PathString("/Account/Authorize"),
Provider = new ApplicationOAuthProvider(PublicClientId),
AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
AllowInsecureHttp = true
};
}
public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }
public static string PublicClientId { get; private set; }
// For more information on configuring authentication, please visit https://go.microsoft.com/fwlink/?LinkId=301864
public void ConfigureAuth(IAppBuilder app)
{
// Configure the db context, user manager and signin manager to use a single instance per request
app.CreatePerOwinContext(ApplicationDbContext.Create);
app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);
app.CreatePerOwinContext<ApplicationSignInManager>(ApplicationSignInManager.Create);
// Enable the application to use a cookie to store information for the signed in user
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login"),
Provider = new CookieAuthenticationProvider
{
// Enables the application to validate the security stamp when the user logs in.
// This is a security feature which is used when you change a password or add an external login to your account.
OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
validateInterval: TimeSpan.FromMinutes(20),
regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
}
});
// Use a cookie to temporarily store information about a user logging in with a third party login provider
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
// Enables the application to temporarily store user information when they are verifying the second factor in the two-factor authentication process.
app.UseTwoFactorSignInCookie(DefaultAuthenticationTypes.TwoFactorCookie, TimeSpan.FromMinutes(5));
// Enables the application to remember the second login verification factor such as phone or email.
// Once you check this option, your second step of verification during the login process will be remembered on the device where you logged in from.
// This is similar to the RememberMe option when you log in.
app.UseTwoFactorRememberBrowserCookie(DefaultAuthenticationTypes.TwoFactorRememberBrowserCookie);
// Enable the application to use bearer tokens to authenticate users
app.UseOAuthBearerTokens(OAuthOptions);
// Uncomment the following lines to enable logging in with third party login providers
//app.UseMicrosoftAccountAuthentication(
// clientId: "",
// clientSecret: "");
//app.UseTwitterAuthentication(
// consumerKey: "",
// consumerSecret: "");
//app.UseFacebookAuthentication(
// appId: "",
// appSecret: "");
//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
// ClientId = "",
// ClientSecret = ""
//});
}
}
}
При нажатии клавиши F5 для сборки и отладки веб-приложения отобразится экран входа, на котором вы увидите, что внешние службы проверки подлинности не определены.
В следующих разделах вы узнаете, как включить каждую из внешних служб проверки подлинности, которые предоставляются с ASP.NET в Visual Studio 2017.
Включение проверки подлинности Facebook
При использовании проверки подлинности Facebook необходимо создать учетную запись разработчика Facebook, а для работы проекта потребуется идентификатор приложения и секретный ключ от Facebook. Сведения о создании учетной записи разработчика Facebook и получении идентификатора приложения и секретного ключа см. в разделе https://go.microsoft.com/fwlink/?LinkID=252166.
Получив идентификатор приложения и секретный ключ, выполните следующие действия, чтобы включить проверку подлинности Facebook для веб-приложения.
Когда проект открыт в Visual Studio 2017, откройте файл Startup.Auth.cs .
Найдите раздел проверки подлинности Facebook в коде:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});Удалите символы "//", чтобы раскомментировать выделенные строки кода, а затем добавьте идентификатор приложения и секретный ключ. После добавления этих параметров можно перекомпилировать проект:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "426f62526f636b73", // appSecret: ""); //app.UseGoogleAuthentication();При нажатии клавиши F5, чтобы открыть веб-приложение в веб-браузере, вы увидите, что Facebook определен как внешняя служба проверки подлинности:
При нажатии кнопки Facebook браузер будет перенаправлен на страницу входа в Facebook:
После ввода учетных данных Facebook и нажатия кнопки Войти веб-браузер будет перенаправлен обратно в веб-приложение, которое предложит ввести имя пользователя , которое вы хотите связать с вашей учетной записью Facebook:
После ввода имени пользователя и нажатия кнопки Зарегистрироваться веб-приложение отобразит домашнюю страницу по умолчанию для вашей учетной записи Facebook:
Включение проверки подлинности Google
При использовании проверки подлинности Google необходимо создать учетную запись разработчика Google, а для работы проекта потребуется идентификатор приложения и секретный ключ от Google. Сведения о создании учетной записи разработчика Google и получении идентификатора приложения и секретного ключа см. в разделе https://developers.google.com.
Чтобы включить проверку подлинности Google для веб-приложения, выполните следующие действия.
Когда проект открыт в Visual Studio 2017, откройте файл Startup.Auth.cs .
Найдите раздел проверки подлинности Google в коде:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});Удалите символы "//", чтобы раскомментировать выделенные строки кода, а затем добавьте идентификатор приложения и секретный ключ. После добавления этих параметров можно перекомпилировать проект:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() { ClientId = "477522346600.apps.googleusercontent.com", ClientSecret = "gobkdpbocikdfbnfahjladnetpdkvmic" });При нажатии клавиши F5, чтобы открыть веб-приложение в веб-браузере, вы увидите, что Google определен как внешняя служба проверки подлинности:
При нажатии кнопки Google браузер будет перенаправлен на страницу входа Google:
После ввода учетных данных Google и нажатия кнопки Войти Google предложит убедиться, что у веб-приложения есть разрешения на доступ к вашей учетной записи Google:
При нажатии кнопки Принять веб-браузер перенаправляется обратно в веб-приложение, в котором будет предложено ввести имя пользователя , которое вы хотите связать с вашей учетной записью Google:
После ввода имени пользователя и нажатия кнопки Зарегистрироваться веб-приложение отобразит домашнюю страницу по умолчанию для вашей учетной записи Google:
Включение проверки подлинности Майкрософт
Для проверки подлинности Майкрософт требуется создать учетную запись разработчика, а для работы — идентификатор клиента и секрет клиента. Сведения о создании учетной записи разработчика Майкрософт и получении идентификатора клиента и секрета клиента см. в разделе https://go.microsoft.com/fwlink/?LinkID=144070.
Получив ключ и секрет потребителя, выполните следующие действия, чтобы включить проверку подлинности Майкрософт для веб-приложения.
Когда проект открыт в Visual Studio 2017, откройте файл Startup.Auth.cs .
Найдите раздел проверки подлинности Майкрософт в коде:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});Удалите символы "/", чтобы раскомментировать выделенные строки кода, а затем добавьте идентификатор клиента и секрет клиента. После добавления этих параметров можно перекомпилировать проект:
// Uncomment the following lines to enable logging in with third party login providers app.UseMicrosoftAccountAuthentication( clientId: "426f62526f636b73", clientSecret: "57686f6120447564652c2049495320526f636b73"); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});При нажатии клавиши F5, чтобы открыть веб-приложение в веб-браузере, вы увидите, что корпорация Майкрософт определена как внешняя служба проверки подлинности:
При нажатии кнопки Майкрософт браузер будет перенаправлен на страницу входа Майкрософт:
После ввода учетных данных Майкрософт и нажатия кнопки Войти вам будет предложено убедиться, что веб-приложение имеет разрешения на доступ к вашей учетной записи Майкрософт:
При нажатии кнопки Да браузер будет перенаправлен обратно в веб-приложение, в котором будет предложено ввести имя пользователя , которое вы хотите связать с вашей учетной записью Майкрософт:
После ввода имени пользователя и нажатия кнопки "Зарегистрироваться " веб-приложение отобразит домашнюю страницу по умолчанию для вашей учетной записи Майкрософт:
Включение проверки подлинности Twitter
Для проверки подлинности Twitter требуется создать учетную запись разработчика, а для работы — ключ потребителя и секрет потребителя. Сведения о создании учетной записи разработчика Twitter и получении ключа и секрета потребителя см. в разделе https://go.microsoft.com/fwlink/?LinkID=252166.
Получив ключ и секрет потребителя, выполните следующие действия, чтобы включить проверку подлинности Twitter для веб-приложения.
Когда проект открыт в Visual Studio 2017, откройте файл Startup.Auth.cs .
Найдите раздел проверки подлинности Twitter в коде:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); //app.UseTwitterAuthentication( // consumerKey: "", // consumerSecret: ""); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});Удалите символы "/", чтобы раскомментировать выделенные строки кода, а затем добавьте ключ потребителя и секрет потребителя. После добавления этих параметров можно перекомпилировать проект:
// Uncomment the following lines to enable logging in with third party login providers //app.UseMicrosoftAccountAuthentication( // clientId: "", // clientSecret: ""); app.UseTwitterAuthentication( consumerKey: "426f62526f636b73", consumerSecret: "57686f6120447564652c2049495320526f636b73"); //app.UseFacebookAuthentication( // appId: "", // appSecret: ""); //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions() //{ // ClientId = "", // ClientSecret = "" //});При нажатии клавиши F5, чтобы открыть веб-приложение в веб-браузере, вы увидите, что Twitter определен как внешняя служба проверки подлинности:
При нажатии кнопки Twitter браузер будет перенаправлен на страницу входа в Twitter:
После ввода учетных данных Twitter и нажатия кнопки Авторизовать приложение веб-браузер будет перенаправлен обратно в веб-приложение, где будет предложено ввести имя пользователя , которое вы хотите связать с вашей учетной записью Twitter:
После ввода имени пользователя и нажатия кнопки Регистрация в веб-приложении отобразится домашняя страница по умолчанию для вашей учетной записи Twitter:
Дополнительные сведения
Дополнительные сведения о создании приложений, использующих OAuth и OpenID, см. в следующих URL-адресах:
Объединение внешних служб проверки подлинности
Для большей гибкости можно одновременно определить несколько внешних служб проверки подлинности. Это позволяет пользователям веб-приложения использовать учетную запись из любой из включенных внешних служб проверки подлинности:
Настройка IIS Express для использования полного доменного имени
Некоторые внешние поставщики проверки подлинности не поддерживают тестирование приложения с помощью HTTP-адреса, например http://localhost:port/. Чтобы обойти эту проблему, можно добавить статическое сопоставление полного доменного имени (FQDN) в файл HOSTS и настроить параметры проекта в Visual Studio 2017 для использования полного доменного имени для тестирования и отладки. Для этого выполните следующие действия.
Добавьте статическое сопоставление полного доменного имени в файле HOSTS:
Откройте командную строку с повышенными привилегиями в Windows.
Введите следующую команду:
Блокнот %WinDir%\system32\drivers\etc\hosts
Добавьте в файл HOSTS следующую запись:
127.0.0.1 www.wingtiptoys.com
Сохраните и закройте файл HOSTS.
Настройте проект Visual Studio для использования полного доменного имени:
- Когда проект открыт в Visual Studio 2017, откройте меню Проект и выберите свойства проекта. Например, можно выбрать Свойства WebApplication1.
- Перейдите на вкладку Интернет.
- Введите полное доменное имя в поле URL-адрес проекта. Например, можно ввести http://www.wingtiptoys.com , если это было полное доменное имя, которое вы добавили в файл HOSTS.
Настройте IIS Express для использования полного доменного имени приложения:
Откройте командную строку с повышенными привилегиями в Windows.
Введите следующую команду, чтобы изменить папку IIS Express:
cd /d "%ProgramFiles%\IIS Express"
Введите следующую команду, чтобы добавить полное доменное имя в приложение:
appcmd.exe задать конфигурацию -section:system.applicationHost/sites /+"[name='WebApplication1'].bindings. [protocol='http',bindingInformation='*:80:www.wingtiptoys.com']" /commit:apphost
Где WebApplication1 — это имя проекта, а bindingInformation содержит номер порта и полное доменное имя, которые вы хотите использовать для тестирования.
Получение параметров приложения для проверки подлинности Майкрософт
Связывание приложения с Windows Live для проверки подлинности Майкрософт — это простой процесс. Если вы еще не связали приложение с Windows Live, можно выполнить следующие действия.
https://go.microsoft.com/fwlink/?LinkID=144070 При появлении запроса найдите и введите имя и пароль учетной записи Майкрософт, а затем нажмите кнопку Войти:
Выберите Добавить приложение , введите имя приложения при появлении запроса, а затем нажмите кнопку Создать:
Выберите приложение в разделе Имя , и откроется страница свойств приложения.
Введите домен перенаправления для приложения. Скопируйте идентификатор приложения и в разделе Секреты приложения выберите Создать пароль. Скопируйте отображаемый пароль. Идентификатор приложения и пароль являются идентификатором клиента и секретом клиента. Нажмите кнопку ОК и нажмите кнопку Сохранить.
Необязательно. Отключение локальной регистрации
Текущая ASP.NET функция локальной регистрации не запрещает автоматическим программам (ботам) создавать учетные записи участников; например, с помощью технологии предотвращения ботов и проверки, такой как CAPTCHA. Из-за этого следует удалить локальную форму входа и ссылку для регистрации на странице входа. Для этого откройте страницу _Login.cshtml в проекте, а затем закомментируйте строки локальной панели входа и ссылку регистрации. Итоговая страница должна выглядеть так, как показано в следующем примере кода:
<!-- ko with: login -->
<hgroup class="title">
<h1>Log in</h1>
</hgroup>
<div class="row-fluid">
@*<section class="span7">
<form>
<fieldset class="form-horizontal">
<legend>Use a local account to log in.</legend>
<ul class="text-error" data-bind="foreach: errors">
<li data-bind="text: $data"></li>
</ul>
<div class="control-group">
<label for="UserName" class="control-label">User name</label>
<div class="controls">
<input type="text" name="UserName" data-bind="value: userName, hasFocus: true" />
<span class="text-error" data-bind="visible: userName.hasError, text: userName.errorMessage"></span>
</div>
</div>
<div class="control-group">
<label for="Password" class="control-label">Password</label>
<div class="controls">
<input type="password" name="Password" data-bind="value: password" />
<span class="text-error" data-bind="visible: password.hasError, text: password.errorMessage"></span>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="RememberMe" data-bind="checked: rememberMe" />
<label for="RememberMe">Remember me?</label>
</label>
</div>
</div>
<div class="form-actions no-color">
<button type="submit" class="btn" data-bind="click: login, disable: loggingIn">Log in</button>
</div>
<p><a href="#" data-bind="click: register">Register</a> if you don't have a local account.</p>
</fieldset>
</form>
</section>*@
<section class="span5">
<h2>Log in using another service</h2>
<div data-bind="visible: loadingExternalLogin">Loading...</div>
<div data-bind="visible: !loadingExternalLogin()">
<div class="message-info" data-bind="visible: !hasExternalLogin()">
<p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkId=252166">this article</a>
for details on setting up this ASP.NET application to support logging in via external services.
</p>
</div>
<form data-bind="visible: hasExternalLogin">
<fieldset class="form-horizontal">
<legend>Use another service to log in.</legend>
<p data-bind="foreach: externalLoginProviders">
<button type="submit" class="btn" data-bind="text: name, attr: { title: 'Log in using your ' + name() + ' account' }, click: login"></button>
</p>
</fieldset>
</form>
</div>
</section>
</div>
<!-- /ko -->
После отключения локальной панели входа и ссылки регистрации на странице входа будут отображаться только те внешние поставщики проверки подлинности, которые вы включили:
