Здравствуйте друзья! Сегодня я бы хотел вам рассказть о наборе инструментов, который позволяет разработчикам легко организовать взаимодействие их приложений с сервисами семейства Windows Live от компании Microsoft.
Ни для кого не секрет, что сегодня использование внешних сервисов для аутентификации пользователей на сайтах приобрело огромную популярность в Интернете. Как правило, в качетсве внешних сервисов выступают социальные сети, такие как Facebook и Twitter. Согласитесь, это удобно, когда вам не нужно помнить свой логин и пароль на каждом сайте, а достаточно запомнить один пароль, например для Facebook. Поэтому большинство уважающих себя сайтов, считают за правило предоставить своим посетителям возможность быстрой регистрации и входа.
Провайдеры внешних сервисов аутентификации (в первую очередь конечно социальные сети) предоставляют широкий набор средств (API) для использования их возможностей извне.
Не осталась в стороне и компания Microsoft. И хотя сервисы Windows Live нельзя назвать социальной сетью, это достаточно распостраненная система аутентификации для всех, кто так или иначе взаидоействует с ресурсами компании Microsoft.
В 2012 году Microsoft выпускает первые версии новой операционной системы Windows 8 и анонсирует новую концепцию разработки приложений для платформы Windows – Metro приложения написанные при помощи HTML и JavaScript.
В связи с этим Майкрософт также выпускает новый пакет средств (SDK) для работы с сервисами Windows Live из Metro приложений при помощи JavaScript. Надо отметить, что сервисы Windows Live существует достаточно давно, и, конечно, раньше тоже существовали средства для работы с ними. Однако, назвать их удобными и понятными явно было нельзя. Поэтому новый SDK приятно всех удивил своей простотой и схожестью с похожимы интерфейсами Twitter и Facebook.
Сегодня, я хочу вам показать каким образом можно интегрировать аутетификацию через Windows Live в ваш ASP.NET MVC сайт.
Первым делом необходимо зарегистрировать ваше приложение в центре разработки Windows Live по следующей ссылке: https://manage.dev.live.com/Applications/Index
Необходимо ввести название приложения, адрес возврата ответа от сервиса аутентификации (доменное имя вашего сайта) и скопировать значение “Client ID”. Примеры форм находятся на скриншотах ниже:
Создадим стандартный сайт шаблона ASP.NET MVC Framework и перейдем в представление Index.cshtml.
Для использования Windows Live JavaScript SDK необходимо разместить на странице ссылку на следующий скрипт:
<script type="text/javascript" src="http://js.live.net/v5.0/wl.js"></script>
Далее нам необходимо кнопка, при нажатии на которую пользователь бы начинал процедуру аутентификации через Windows Live Connect. Тут у вас есть выбор, можно создать свой элемент разметки и привязать функции входа к какому-либо событию этого элемента, или попросить Windows Live SDK создать для нас красивую “фирменную” кнопку входа. Мы поступим вторым способом. Для этого в разметку страницы необходимо добавить следующий фрагмент кода:
<p>
<div id="signin"></div>
</p>
<script type="text/javascript">
WL.init({
client_id: "ваш CLIENT ID",
redirect_uri: "@(Request.Url.AbsoluteUri)",
scope: ["wl.signin"],
response_type: "token"
});
WL.ui({
name: "signin",
element: "signin"
});
</script>
В результате на странице будет отображена кнопка следующего вида:
При нажатии на кнопку будет открываться диалоговое окно, где пользователь сможет ввести свой логин и пароль в сиcтеме Windows Live. На кнопке изображена надпись “Sign In”, когда пользователь неавторизированный, и “Sign Out”, когда пользователь уже прошел аутентификацию.
Все что нам осталось - узнать когда пользователь успешно пройдет атентификацию и мы сможем работать с его данными из сервиса Windows Live. Для этого определим JavaScript функцию, которая будет выполнена после того как пользователь успешно авторизируется:
<script type="text/javascript">
WL.Event.subscribe("auth.login", onLogin);
function onLogin() {
WL.api({ path: "me", method: "GET" }).then(
function (response) {
$('#userName').text("Hello " + response.name + "!");
}
);
}
</script>
Теперь мы можем осуществлять запросы к сервисам Windows LIve. Для примера давате загрузим имена и почтовые ящики контактов из почты HotMail. Для этого необходимо сначала модифицировать функцию инициализации среды Windows Live SDK:
<script type="text/javascript">
WL.init({
client_id: "00000000480C037B",
redirect_uri: "@(Request.Url.AbsoluteUri)",
scope: ["wl.signin", "wl.basic"],
response_type: "token"
});
</script>
Если вы заметили, я добавил еще одну перменную в поле “scope”. В этом поле хранится список ресурсов к которым вы хотите получить доступ. При аутентификации сервис конекта Windows Live покажет пользователю какую информацию запрашивает ваш сайт и спросит его дает ли он свое согласие на использование его персональных данных.
После получения подтверждения пользователя мы можем еще раз обратиться к сервису Windows Live и запросить у него список контактов почты HotMail пользователя:
<p>
<ul id="contacts"></ul>
</p>
<script type="text/javascript">
$('#loadLiveFriends').click(function() {
WL.api({
path: "me/contacts",
method: "GET"
}).then(
function (response) {
$.each(response.data, function(key, value) {
$('#contacts').append('<li>Name - ' + value.name + ‘ Email - ’ + value.email +'</li>');
});
}
);
});
</script>
Данная функцию выведет имя контакта и его почтовый ящик в список на странице. Список – это элемент разметки “ul” с идентификатором “contacts”.
В данной статье мы рассмотрели пример использования элементарных функций Windows Live SDK для веб платформы. Были описаны функции для аутентификации пользователей и загрузки списка контактов. Полный список предоставляемых функций намного больше, вы можете найти их описание и примеры использования на новом портале MSDN: http://msdn.microsoft.com/en-us/library/live/
