Регистрация через oAuth провайдера в проектах ASP.NET MVC 4

| Среда, 27 февраля, 2013

Метки: ASP.NET MVC, SimpleMembership, oAuth Комментарии: 0

В статье "Использование и настройка SimpleMembership в проектах ASP.NET MVC 4" показано, как создать проект и настроить класс SimpleMembership, для использования его с существующей базой данных. В данной статье будет рассказано, как настроить приложение, которое позволяет пользователям авторизоваться через сторонние сайты, например, Facebook, Twitter, Microsoft, или Google. Для простоты приведем пример для входа через учетную запись Facebook.

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

Рассмотрим пример приложения, который позволяет пользователям регистрироваться через сайт Facebook. Хотя пример сфокусирован на сайте Facebook, но шаги выполняемые для данного сайта очень похожи для всех oAuth-провайдеров.

Создание проекта

Для начала создадим проект ASP.NET MVC 4, выберем тип приложения ASP.MVC 4 Web Application. Можно использовать проект построенный в статье "Использование и настройка SimpleMembership в проектах ASP.NET MVC 4".

Далее из предложенных шаблонов, выберем Internet Application - приложение с контроллером управления учетными записями.

Подключение клиента провайдера

После того, как проект создан, откроем файл AuthConfig.cs в папке App_Start.

Этот файл содержит закомментаренный код регистрации клиентов внешних oAuth-провайдеров.

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        //OAuthWebSecurity.RegisterGoogleClient();
    }
}

Нам нужно включить клиента регистрации через Facebook.

public static class AuthConfig { public static void RegisterAuth() { //OAuthWebSecurity.RegisterMicrosoftClient( // clientId: "", // clientSecret: ""); //OAuthWebSecurity.RegisterTwitterClient( // consumerKey: "", // consumerSecret: ""); OAuthWebSecurity.RegisterFacebookClient( appId: "", appSecret: ""); //OAuthWebSecurity.RegisterGoogleClient(); } }

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

Регистрация сайта у внешнего провайдера

Для того чтобы сайт мог выполнять регистрацию через внешний сайт, нужно зарегистрировать свой сайт на этом внешнем провайдере. После регистрации сайта вы получите параметры, необходимые для подключения клиента провайдера (типа id, key или secret).

Для нашего примера нам нужен аккаунт Facebook. Авторизуемся на этом сайте и переходим на страницу для управления приложениями https://developers.facebook.com/apps. Далее создаем регистрацию нового приложения. При регистрации приложения можно указать в качестве домена сайта “locahost”, как показано на картинке ниже. Это работает с Facebook, но некоторые провайдеры принимают только реальные зарегистрированные домены.

На картинке app key и app secret удалены, но когда вы будете регистрировать свой сайт, то эти параметры вы должны скопировать, так как они понадобятся в приложении в качестве параметров, передаваемых клиенту.

public static class AuthConfig
{
    public static void RegisterAuth()
    {
        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        OAuthWebSecurity.RegisterFacebookClient(
            appId: "111111111111111",
            appSecret: "a1a1aa111111111a111a111aaa111111");

        //OAuthWebSecurity.RegisterGoogleClient();
    }
}

Проверка авторизации через внешнего провайдера

Это все, что нужно сделать для реализации регистрации через внешние oAuth-провайдеры. Теперь проверим как это работает, запустим приложение и нажмем ссылку "Login" в правом верхнем углу. Шаблон автоматически распознает, что зарегистрирован Facebook-клиент для регистрации, и покажет кнопку регистрации для этого провайдера.

После нажатия кнопки регистрации Facebook, происходит перенаправление на сайт Facebook и предлагается авторизоваться.

После ввода логина и пароля, пользователь информируется, что сайт получит от Facebook, базовую информацию из учетной записи. Чтобы вернуться обратно на сайт нужно начать кнопку «Go to App».

После возврата на сайт, нужно еще зарегистрироваться. Картинка ниже показывает, страницу регистрации, после того, как пользователь авторизовался на Facebook. Обычно имя пользователя уже получено от провайдера и введено в текстовое поле ввода.

Нажимаем кнопку Register, для завершения регистрации.

В базе данных можно увидеть добавленную информацию о пользователе. В таблице UserProfile содержится новая запись о пользователе. И более специфичная информация находится в таблице webpage_OAuthMembership. Все, что нужно для добавления регистрации через oAuth-провайдера, сделано.

Комментарии
Никто еще не оставил здесь комментарий.
Войдите, чтобы написать комментарий , или воспользуйтесь формой ниже.
 

Copyright © CodeHint.ru 2013-2024 (v2.4.7 - работает на Angular Universal)Калькулятор инвест-портфеля