Вход с помощью внешних сайтов на сайте веб-страницы ASP.NET (Razor)

; автор — Том ФитцМакен (Tom FitzMacken)

В этой статье объясняется, как войти на сайт веб-страницы ASP.NET (Razor) с помощью Facebook, Google, Twitter, Yahoo и других сайтов, то есть как обеспечить поддержку OAuth и OpenID на сайте.

Из этого руководства вы узнаете, как выполнять такие задачи:

• Как включить вход с других сайтов при использовании шаблона сайта WebMatrix Starter.

Это ASP.NET функция, представленная в этой статье:

• Помощник OAuthWebSecurity .

Версии программного обеспечения, используемые в этом руководстве

• веб-страницы ASP.NET (Razor) 2
• WebMatrix 3

веб-страницы ASP.NET включает поддержку поставщиков OAuth и OpenID. С помощью этих поставщиков вы можете разрешить пользователям входить на ваш сайт, используя существующие учетные данные facebook, Twitter, Майкрософт и Google. Например, чтобы войти в систему с помощью учетной записи Facebook, пользователи могут просто выбрать значок Facebook, который перенаправляет их на страницу входа в Facebook, где они вводят свои сведения о пользователе. Затем они могут связать вход Facebook со своей учетной записью на вашем сайте. Связанное с этим улучшение возможностей членства в веб-страницах заключается в том, что пользователи могут связать несколько имен входа (включая имена входа с сайтов социальных сетей) с одной учетной записью на веб-сайте.

На этом изображении показана страница входа из шаблона начального сайта , где пользователь может выбрать значок Facebook, Twitter, Google или Майкрософт, чтобы включить вход с помощью внешней учетной записи:

Вы можете включить членство в OAuth и OpenID, раскомментируя несколько строк кода в шаблоне начального сайта . Методы и свойства, используемые для работы с поставщиками OAuth и OpenID, находятся в WebMatrix.Security.OAuthWebSecurity классе . Шаблон начального сайта включает в себя инфраструктуру полного членства, включаемую страницу входа, базу данных членства и весь код, необходимый для входа пользователей на сайт с использованием локальных учетных данных или учетных данных другого сайта.

В этом разделе приведен пример того, как разрешить пользователям выполнять вход с внешних сайтов на сайт, основанный на шаблоне начального сайта . После создания начального сайта вы делаете это (подробные сведения см. ниже):

• Для сайтов, использующих поставщик OAuth (Facebook, Twitter и Microsoft), вы создаете приложение на внешнем сайте. Это дает ключи приложения, необходимые для вызова функции входа для этих сайтов.

• Для сайтов, использующих поставщик OpenID (Google), не нужно создавать приложение. Для всех этих сайтов необходима учетная запись для входа и создания приложений для разработчиков.

  Примечание

  Приложения Майкрософт принимают только динамический URL-адрес для рабочего веб-сайта, поэтому вы не можете использовать URL-адрес локального веб-сайта для проверки имен входа.

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

В этой статье приведены отдельные инструкции для следующих задач:

• Включение учетных записей Google
• Включение имен входа Facebook
• Включение имен входа в Twitter

Включение учетных записей Google

1. Создайте или откройте сайт веб-страницы ASP.NET, основанный на шаблоне Сайта WebMatrix Starter.

2. Откройте страницу _AppStart.cshtml и раскомментируйте следующую строку кода.

   OAuthWebSecurity.RegisterGoogleClient();
   

Тестирование входа в Google

1. Запустите страницу default.cshtml сайта и нажмите кнопку Войти .

2. На странице Вход в разделе Использовать другую службу для входа нажмите кнопку Отправить в Google или Yahoo . В этом примере используется имя входа Google.

   Веб-страница перенаправляет запрос на страницу входа Google.

   

3. Введите учетные данные для существующей учетной записи Google.

4. Если Google спросит вас, хотите ли вы разрешить Localhost использовать сведения из учетной записи, нажмите кнопку Разрешить.

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

   

5. Нажмите кнопку Связать . Браузер вернется на домашнюю страницу приложения.

Включение имен входа Facebook

1. Перейдите на сайт разработчиков Facebook (войдите, если вы еще не вошли в систему).

2. Нажмите кнопку Создать приложение , а затем следуйте инструкциям, чтобы присвоить имя и создать новое приложение.

3. В разделе Выберите, как приложение будет интегрироваться с Facebook, выберите раздел Веб-сайт .

4. В поле URL-адрес сайта введите URL-адрес вашего сайта (например, http://www.example.com). Поле Домен является необязательным; Его можно использовать для проверки подлинности для всего домена (например , example.com).

   Примечание

   Если вы запускаете сайт на локальном компьютере с URL-адресом, например http://localhost:12345 (где номер является номером локального порта), это значение можно добавить в поле URL-адрес сайта для тестирования сайта. Однако при изменении номера порта локального сайта необходимо обновить поле URL-адрес сайта приложения.

5. Нажмите кнопку Сохранить изменения .

6. Снова перейдите на вкладку Приложения и просмотрите начальную страницу приложения.

7. Скопируйте значения Идентификатор приложения и Секрет приложения для приложения и вставьте их во временный текстовый файл. Эти значения будут передаваться поставщику Facebook в коде веб-сайта.

8. Закройте сайт разработчика Facebook.

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

1. Создайте или откройте сайт веб-страницы ASP.NET, основанный на шаблоне Сайта WebMatrix Starter.

2. Откройте страницу _AppStart.cshtml и раскомментируйте код для поставщика OAuth Facebook. Блок кода без комментариев выглядит следующим образом:

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

3. Скопируйте значение идентификатора приложения из приложения Facebook в качестве значения appId параметра (в кавычках).

4. Скопируйте значение секрета приложения из приложения Facebook в appSecret качестве значения параметра.

5. Сохраните файл и закройте его.

Проверка входа в Facebook

1. Запустите страницу default.cshtml сайта и нажмите кнопку Вход .

2. На странице Вход в разделе Использовать другую службу для входа выберите значок Facebook .

   Веб-страница перенаправляет запрос на страницу входа в Facebook.

   

3. Войдите в учетную запись Facebook.

   Код использует токен Facebook для проверки подлинности, а затем возвращается на страницу, где можно связать свое имя входа Facebook с именем входа вашего сайта. Имя пользователя или адрес электронной почты будут заполнены в поле Email формы.

   

4. Нажмите кнопку Связать .

   Браузер вернется на домашнюю страницу, и вы вошли в систему.

Включение учетных записей Twitter

1. Перейдите на сайт разработчиков Twitter.

2. Щелкните ссылку Создать приложение и войдите на сайт.

3. В форме Создание приложения заполните поля Имя и Описание .

4. В поле WebSite (Веб-сайт ) введите URL-адрес сайта (например, http://www.example.com).

   Примечание

   Если вы тестируете сайт локально (используя URL-адрес, например http://localhost:12345), Twitter может не принять URL-адрес. Однако вы можете использовать локальный IP-адрес замыкания на себя (например http://127.0.0.1:12345, ). Это упрощает процесс локального тестирования приложения. Однако при каждом изменении номера порта локального сайта необходимо обновлять поле Веб-сайт приложения.

5. В поле URL-адрес обратного вызова введите URL-адрес страницы на веб-сайте, на которую пользователи должны вернуться после входа в Twitter. Например, чтобы отправить пользователей на домашнюю страницу начального сайта (которая распознает их состояние входа), введите тот же URL-адрес, который вы указали в поле Веб-сайт .

6. Примите условия и нажмите кнопку Создать приложение Twitter .

7. На целевой странице Мои приложения выберите созданное приложение.

8. На вкладке Сведения прокрутите вниз и нажмите кнопку Создать мой маркер доступа .

9. На вкладке Сведения скопируйте значения Ключа потребителя и Секрет потребителя для приложения и вставьте их во временный текстовый файл. Эти значения будут передаваться поставщику Twitter в коде веб-сайта.

10. Закройте сайт Twitter.

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

1. Создайте или откройте сайт веб-страницы ASP.NET, основанный на шаблоне Начального сайта WebMatrix.

2. Откройте страницу _AppStart.cshtml и раскомментируйте код для поставщика OAuth Twitter. Блок кода без комментариев выглядит следующим образом:

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

3. Скопируйте значение ключа потребителя из приложения Twitter в качестве значения consumerKey параметра (в кавычках).

4. Скопируйте значение Секрет потребителя из приложения Twitter в качестве значения consumerSecret параметра .

5. Сохраните файл и закройте его.

Тестирование входа в Twitter

1. Запустите страницу default.cshtml сайта и нажмите кнопку Войти .

2. На странице Вход в разделе Использовать другую службу для входа выберите значок Twitter .

   Веб-страница перенаправляет запрос на страницу входа в Twitter для созданного приложения.

   

3. Войдите в учетную запись Twitter.

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

   

5. Нажмите кнопку Связать .

   Браузер вернется на домашнюю страницу, и вы вошли в систему.

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

• Настройка поведения в масштабах сайта
• Добавление безопасности и членства на сайт веб-страницы ASP.NET