Создание приложения ASP.NET MVC 5 с помощью Facebook, Twitter, LinkedIn и Google OAuth2 (C#)

Рик Андерсон

В этом руководстве показано, как создать веб-приложение ASP.NET MVC 5, которое позволяет пользователям входить в систему с помощью OAuth 2.0 с учетными данными от внешнего поставщика проверки подлинности, например Facebook, Twitter, LinkedIn, Microsoft или Google. Для простоты в этом руководстве основное внимание уделяется работе с учетными данными из Facebook и Google.

Включение этих учетных данных на веб-сайтах обеспечивает значительное преимущество, так как миллионы пользователей уже имеют учетные записи с этими внешними поставщиками. Эти пользователи могут быть более склонны зарегистрироваться на вашем сайте, если им не нужно создавать и запоминать новый набор учетных данных для входа.

См. также приложение ASP.NET MVC 5 с использованием SMS и электронной почты для двухфакторной аутентификации.

В этом руководстве также показано, как добавить данные профиля для пользователя и как использовать API членства для добавления ролей. Это руководство было написано РикОм Андерсоном (Пожалуйста, следуйте за мной в Twitter: @RickAndMSFT ).

Начало работы

Начните с установки и запуска Visual Studio Express 2013 для Интернета или Visual Studio 2013. Установите Visual Studio 2013 с обновлением 3 или более поздней версии.

Замечание

Необходимо установить Visual Studio 2013 с обновлением 3 или более поздней версии, чтобы использовать Google OAuth 2 и выполнять локальную отладку без предупреждений SSL.

Щелкните "Создать проект " на начальной странице или выберите меню и выберите "Файл", а затем "Создать проект".

Создание первого приложения

Нажмите кнопку "Создать проект", а затем выберите Visual C# слева, а затем веб-приложение ASP.NET. Присвойте проекту имя "MvcAuth" и нажмите кнопку "ОК".

В диалоговом окне "Создать ASP.NET проект" щелкните MVC. Если проверка подлинности не является отдельными учетными записями пользователей, нажмите кнопку «Изменить проверку подлинности» и выберите отдельные учетные записи пользователей. Включив параметр размещение в облаке, приложение будет очень легко разместить в Azure.

Если выбрано Размещение в облаке, завершите настройку в диалоговом окне.

Используйте NuGet для обновления до последней версии промежуточного слоя OWIN

Используйте диспетчер пакетов NuGet для обновления ПО промежуточного слоя OWIN. Выберите "Обновления" в меню слева. Вы можете нажать кнопку "Обновить все" или найти только пакеты OWIN (показанные на следующем рисунке):

На рисунке ниже показаны только пакеты OWIN:

В консоли диспетчера пакетов (PMC) можно ввести Update-Package команду, которая обновит все пакеты.

Нажмите клавишу F5 или CTRL+F5 , чтобы запустить приложение. На рисунке ниже номер порта равен 1234. При запуске приложения вы увидите другой номер порта.

В зависимости от размера окна браузера может потребоваться щелкнуть значок навигации, чтобы просмотреть ссылки "Главная", "О", "Контакт", "Регистрация" и "Вход".

Настройка SSL в проекте

Чтобы подключиться к поставщикам проверки подлинности, таким как Google и Facebook, необходимо настроить IIS-Express использовать SSL. Важно продолжать использовать SSL после входа в систему и не возвращаться к HTTP, так как ваш куки-файл для входа так же конфиденциален, как имя пользователя и пароль, и без использования SSL вы отправляете его в открытом виде по сети. Поскольку вы уже потратили время на установку соединения и защиту канала (что является основной причиной, по которой HTTPS медленнее, чем HTTP) перед запуском конвейера MVC, то перенаправление обратно на HTTP после входа в систему не сделает текущий запрос или будущие запросы значительно быстрее.

В обозревателе решений щелкните проект MvcAuth .
Нажмите клавишу F4, чтобы отобразить свойства проекта. Кроме того, в меню "Вид " можно выбрать окно "Свойства".
Измените SSL включено на True.
Скопируйте URL SSL (который будет https://localhost:44300/, если вы не создали другие проекты SSL).
В обозревателе решений щелкните правой кнопкой мыши проект MvcAuth и выберите "Свойства".
Выберите веб-вкладку и вставьте URL-адрес SSL в поле "URL-адрес проекта ". Сохраните файл (Ctl+S). Вам потребуется этот URL-адрес для настройки приложений проверки подлинности Facebook и Google.
Добавьте атрибут RequireHttps к контроллеру Home , чтобы все запросы должны использовать ПРОТОКОЛ HTTPS. Более безопасный подход заключается в добавлении фильтра RequireHttps в приложение. См. раздел "Защита приложения с помощью SSL и атрибута авторизации" в руководстве по созданию приложения ASP.NET MVC с проверкой подлинности и базой данных SQL и развертыванием в Службе приложений Azure. Ниже показана часть контроллера home.
```
[RequireHttps]
public class HomeController : Controller
{
   public ActionResult Index()
   {
      return View();
   }
```
Для запуска приложения нажмите сочетание клавиш CTRL+F5. Если вы установили сертификат в прошлом, можно пропустить остальную часть этого раздела и перейти к созданию приложения Google для OAuth 2 и подключению приложения к проекту, в противном случае следуйте инструкциям, чтобы доверять самозаверяющим сертификату, созданному IIS Express.
Прочтите диалоговое окно "Предупреждение системы безопасности " и нажмите кнопку "Да ", если вы хотите установить сертификат, представляющий localhost.
IE отображает домашнюю страницу и нет предупреждений SSL.
Google Chrome также принимает сертификат и будет отображать содержимое HTTPS без предупреждения. Firefox использует собственное хранилище сертификатов, поэтому будет отображаться предупреждение. Для нашего приложения вы можете безопасно нажать кнопку "Понять риски".

Создание приложения Google для OAuth 2 и подключение приложения к проекту

Предупреждение

Текущие инструкции Google OAuth см. в разделе "Настройка проверки подлинности Google" в ASP.NET Core.

Перейдите в консоль разработчиков Google.
Если вы еще не создали проект, выберите "Учетные данные " на левой вкладке и нажмите кнопку "Создать".
На левой вкладке щелкните "Учетные данные".
Нажмите кнопку "Создать учетные данные" , а затем идентификатор клиента OAuth.
1. В диалоговом окне "Создание идентификатора клиента" сохраните веб-приложение по умолчанию для типа приложения.
2. Задайте авторизованные источники JavaScript на SSL-адрес, который вы использовали выше (https://localhost:44300/ если вы не создавали других SSL-проектов)
3. Установите URI авторизованного перенаправления на:
  https://localhost:44300/signin-google
Щелкните пункт меню "Согласие OAuth", а затем задайте адрес электронной почты и имя продукта. После завершения формы нажмите кнопку "Сохранить".
Щелкните пункт меню "Библиотека", найдите API Google+ и нажмите кнопку "Включить".

На рисунке ниже показаны включенные API.

В диспетчере API Google перейдите на вкладку "Учетные данные ", чтобы получить идентификатор клиента. Загрузите и сохраните файл JSON с секретами приложения. Скопируйте и вставьте ClientId и ClientSecret в UseGoogleAuthentication метод, найденный в файле Startup.Auth.cs в папке App_Start . Приведенные ниже значения ClientId и ClientSecret являются примерами и не работают.

public void ConfigureAuth(IAppBuilder app)
{
    // Configure the db context and user manager to use a single instance per request
    app.CreatePerOwinContext(ApplicationDbContext.Create);
    app.CreatePerOwinContext<ApplicationUserManager>(ApplicationUserManager.Create);

    // Enable the application to use a cookie to store information for the signed in user
    // and to use a cookie to temporarily store information about a user logging in with a third party login provider
    // Configure the sign in cookie
    app.UseCookieAuthentication(new CookieAuthenticationOptions
    {
        AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
        LoginPath = new PathString("/Account/Login"),
        Provider = new CookieAuthenticationProvider
        {
            OnValidateIdentity = SecurityStampValidator.OnValidateIdentity<ApplicationUserManager, ApplicationUser>(
                validateInterval: TimeSpan.FromMinutes(30),
                regenerateIdentity: (manager, user) => user.GenerateUserIdentityAsync(manager))
        }
    });
    
    app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);

    // 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(
         clientId: "000-000.apps.googleusercontent.com",
         clientSecret: "00000000000");
}

Предупреждение

Безопасность— никогда не храните конфиденциальные данные в исходном коде. Учетная запись и учетные данные добавляются в приведенный выше код, чтобы сохранить пример простым. Рекомендации по развертыванию паролей и других конфиденциальных данных в ASP.NET и Службе приложений Azure.

Нажмите клавиши CTRL+F5 , чтобы создать и запустить приложение. Щелкните ссылку "Войти".
В разделе "Использование другой службы для входа" щелкните Google.

Замечание

Если пропустить любой из описанных выше шагов, вы получите ошибку HTTP 401. Перепроверьте описанные выше шаги. Если отсутствует обязательный параметр (например , имя продукта), добавьте отсутствующий элемент и сохраните его; Для работы проверки подлинности может потребоваться несколько минут.
Вы будете перенаправлены на сайт Google, где вы введете свои учетные данные.
После ввода учетных данных вам будет предложено предоставить разрешения только что созданному веб-приложению:
Щелкните Принять. Теперь вы будете перенаправлены обратно на страницу регистрации приложения MvcAuth, где можно зарегистрировать учетную запись Google. Вы можете изменить имя локальной регистрации электронной почты, используемое для учетной записи Gmail, но обычно вы хотите сохранить псевдоним электронной почты по умолчанию (то есть используемый для проверки подлинности). Нажмите кнопку "Зарегистрировать".

Создание приложения в Facebook и подключение приложения к проекту

Предупреждение

Текущие инструкции по проверке подлинности Facebook OAuth2 см. в разделе "Настройка проверки подлинности Facebook"

Проверка данных членства с помощью обозревателя серверов

В меню "Вид " щелкните обозреватель серверов.

Разверните DefaultConnection (MvcAuth), разверните Таблицы, щелкните правой кнопкой мыши AspNetUsers и щелкните "Показать данные таблицы".

Добавление данных профиля в класс пользователя

В этом разделе вы добавите дату рождения и домашний город в данные пользователя во время регистрации, как показано на следующем рисунке.

Откройте файл Models\IdentityModels.cs и добавьте дату рождения и свойства домашнего города:

public class ApplicationUser : IdentityUser
{
    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
    public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
    {
        // Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
        var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
        // Add custom user claims here
        return userIdentity;
    }
}

Откройте файл Models\AccountViewModels.cs и задайте дату рождения и свойства домашнего города в ExternalLoginConfirmationViewModel.

public class ExternalLoginConfirmationViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    public string HomeTown { get; set; }
    public System.DateTime? BirthDate { get; set; }
}

Откройте файл Controllers\AccountController.cs и добавьте код для даты рождения и домашнего ExternalLoginConfirmation города в методе действия, как показано ниже.

[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> ExternalLoginConfirmation(ExternalLoginConfirmationViewModel model, string returnUrl)
{
    if (User.Identity.IsAuthenticated)
    {
        return RedirectToAction("Manage");
    }

    if (ModelState.IsValid)
    {
        // Get the information about the user from the external login provider
        var info = await AuthenticationManager.GetExternalLoginInfoAsync();
        if (info == null)
        {
            return View("ExternalLoginFailure");
        }
        var user = new ApplicationUser() 
        {
            UserName = model.Email, Email = model.Email,
            BirthDate = model.BirthDate,
            HomeTown  = model.HomeTown
        
        };
        IdentityResult result = await UserManager.CreateAsync(user);
        if (result.Succeeded)
        {
            result = await UserManager.AddLoginAsync(user.Id, info.Login);
            if (result.Succeeded)
            {
                await SignInAsync(user, isPersistent: false);
                
                // For more information on how to enable account confirmation and password reset please visit https://go.microsoft.com/fwlink/?LinkID=320771
                // Send an email with this link
                // string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
                // var callbackUrl = Url.Action("ConfirmEmail", "Account", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
                // SendEmail(user.Email, callbackUrl, "Confirm your account", "Please confirm your account by clicking this link");
                
                return RedirectToLocal(returnUrl);
            }
        }
        AddErrors(result);
    }

    ViewBag.ReturnUrl = returnUrl;
    return View(model);
}

Добавьте дату рождения и домашний город в файл Views\Account\ExternalLoginConfirmation.cshtml :

@model MvcAuth.Models.ExternalLoginConfirmationViewModel
@{
    ViewBag.Title = "Register";
}
<h2>@ViewBag.Title.</h2>
<h3>Associate your @ViewBag.LoginProvider account.</h3>

@using (Html.BeginForm("ExternalLoginConfirmation", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()

    <h4>Association Form</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <p class="text-info">
        You've successfully authenticated with <strong>@ViewBag.LoginProvider</strong>.
            Please enter a user name for this site below and click the Register button to finish
            logging in.
    </p>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.HomeTown, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.HomeTown, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.HomeTown)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.BirthDate, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.BirthDate, new { @class = "form-control" })
            @Html.ValidationMessageFor(m => m.BirthDate)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Удалите базу данных членства, чтобы снова зарегистрировать учетную запись Facebook в приложении и убедиться, что вы можете добавить новую дату рождения и сведения профиля домашнего города.

В обозревателе решений щелкните значок "Показать все файлы", а затем щелкните правой кнопкой мыши Add_Data\aspnet-MvcAuth-dateStamp<>.mdf и нажмите кнопку "Удалить".

В меню "Сервис" щелкните NuGet Package Manger, а затем выберите консоль диспетчера пакетов (PMC). Введите следующие команды в PMC.

Enable-Migrations (Включение миграций)
Add-Migration Init
Update-Database

Запустите приложение и используйте FaceBook и Google для входа и регистрации некоторых пользователей.

Проверка данных о членстве

В меню "Вид " щелкните обозреватель серверов.

Щелкните правой кнопкой мыши AspNetUsers и щелкните "Показать данные таблицы".

Ниже показаны поля HomeTown и BirthDate.

Выход из приложения и вход в систему с помощью другой учетной записи

Если вы войдете в приложение с помощью Facebook, а затем выйдите и попытаетесь войти еще раз с другой учетной записью Facebook (с помощью того же браузера), вы сразу же войдете в предыдущую учетную запись Facebook, которую вы использовали. Чтобы использовать другую учетную запись, необходимо перейти в Facebook и выйти из нее. Это же правило применяется к любому другому стороннему поставщику проверки подлинности. Кроме того, вы можете войти с другой учетной записью с помощью другого браузера.

Дальнейшие шаги

Следуйте инструкциям по созданию приложения MVC ASP.NET с проверкой подлинности и базой данных SQL и развертыванием в Службе приложений Azure, которая продолжает работу с этим руководством и показывает следующее:

Развертывание приложения в Azure.
Как защитить приложение с помощью ролей.
Как защитить приложение с помощью фильтров RequireHttps и авторизации .
Как использовать API членства для добавления пользователей и ролей.

Хорошее объяснение того, как работают ASP.NET внешние службы проверки подлинности, см. в статье о внешних службах проверки подлинности Роберта Макмюррей. Статья Роберта также подробно описывает подключение аутентификации Microsoft и Twitter. В отличном учебнике по EF/MVC Том Дайкстра показывает, как работать с Entity Framework.

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-27

Создание приложения ASP.NET MVC 5 с помощью Facebook, Twitter, LinkedIn и Google OAuth2 (C#)

Начало работы

Создание первого приложения

Используйте NuGet для обновления до последней версии промежуточного слоя OWIN

Настройка SSL в проекте

Создание приложения Google для OAuth 2 и подключение приложения к проекту

Создание приложения в Facebook и подключение приложения к проекту

Проверка данных членства с помощью обозревателя серверов

Добавление данных профиля в класс пользователя

Проверка данных о членстве

Выход из приложения и вход в систему с помощью другой учетной записи

Дальнейшие шаги

Обратная связь

Дополнительные ресурсы