Используем внешнюю аутентификацию Windows Azure Mobile Services в десктопном WPF приложении

Здравствуйте!

Одной из удобных функций Windows Azure Mobile Services является использования внешних служб аутентификаций, которые предоставляются Google, Facebook, Twitter и сам Microsoft Account. Это означает, что разработчику, нет необходимости имплементировать работу с каждым из них отдельно, для этого есть унифицированные методы.

Среди официально поддерживаемых платформ числится почти все кроме… обычной Windows Desktop.

О чём речь

В официальной документации по аутентификации довольно подобно расписан метод использования этого функционала, однако, приведённый в нём примеру завязан на платформозависимый Windows.UI.Popups. Неужели такая мелочь может удержать нас от использования этого мощного инструмента в разработке для привычной среды, которая к тому же, все ещё доминирует? Давайте разбираться.

Постановка задачи

Отображение модального окна необходимо для:

• Отображения Web-страницы внешнего провайдера
• Получение user id от внешнего провайдера для идентификации пользователя и authentication token от Azure — который необходим для дальнейших запросов к бакенду.
• Возврат User ID в экземпляр класса MobileServiceUser, а authentication token в экземпляр класса MobileServiceClient.

Лично я противник модальных окон, поэтому всё сделаем в едином окне, с применением асинхронных методов.

Реализация задумки

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

В вёрстке нам понадобятся:

1. WPF окошко с Frame, в который мы будем грузить нужные нам страницы.
2. Простую страничку «LoginPage» c кнопкой «Login».
3. Вторая страница — просто контейнер для WebBrowser компонента — «WebLoginPage».

В коде реализуем метод-расширения для класса MobileServiceClient:

public static class DesktopWebLoginExtension     {     public async Task<MobileServiceUser> LoginAsync(this MobileServiceClient client, MobileServiceAuthenticationProvider provider, LoginPape loginPage)         {             Uri startUri = new Uri(client.ApplicationUri, "login/" + provider.ToString().ToLowerInvariant());             Uri endUri = new Uri(client.ApplicationUri, "login/done");                          LoginResult externalAuthProviderLoginResult = await loginPage.GetLoginResultAsync(startUri, endUri);                          if (externalAuthProviderLoginResult == null)              {                 return null;             }              var returnServiceUser = new MobileServiceUser(externalAuthProviderLoginResult.UserId);             returnServiceUser.MobileServiceAuthenticationToken = externalAuthProviderLoginResult.AuthenticationToken;             client.CurrentUser = returnServiceUser;             return returnServiceUser;               }     } 

Разберём:

1. Как дополнительный параметр наш метод принимает loginPage — что конечно является грубым нарушением software layer, но для примера сойдет.
2. startUri и endUri собраны исходя из этой документации.
3. loginPage.GetLoginResultAsync — асинхронный метод, который вернёт нам экземпляр класса LoginResult
4. Далее происходит заполнение необходимых нам полей для дальнейшей работы.

А вот и сам класс-контейнер, в последствии он будет заполнен из JSON-ответа:

public class LoginResult     {         public string UserId { get; set; }         public string AuthenticationToken { get; set; }     }  

Код страницы WebLoginPage выглядит вот так:

public class WebLoginPage : Page     {          private Uri startUri;         private Uri endUri;          public delegate void LoginCompleteEventHandler(LoginResult result);         public event LoginCompleteEventHandler UserLogedIn;          public LoginBrowserPage()         {             InitializeComponent();             webBrowser.Navigating += webBrowser_Navigating;         }      public Task<LoginResult> GetLoginResultAsync(Uri startUri, Uri endUri)         {             this.startUri = startUri;             this.endUri = endUri;              var returnTask = new TaskCompletionSource<LoginResult>();              webBrowser.Navigate(startUri);              this.UserLogedIn += (r) => { returnTask.SetResult(r); };              return returnTask.Task;         }      internal void webBrowser_Navigating(object sender, NavigatingCancelEventArgs e)         {             if (e.Uri.Equals(this.endUri))             {                 string uri = e.Uri.ToString();                  if (uri.LastIndexOf("#token=") != 0)                 {                     var startOfToken = uri.IndexOf("#token=") + "#token=".Length;                     uri = uri.Substring(startOfToken).Replace("%2C", ",");                     JObject jsonObj = JObject.Parse(uri);                     var userId = jsonObj["user"]["userId"].ToObject<string>();                     var authToken = jsonObj["authenticationToken"].ToObject<string>();                      UserLogedIn(new LoginResult() { UserId = userId, AuthenticationToken = authToken });                 }                 else                 {                     UserLogedIn(null);                 }             }         }     } 

Разберём:

1. Мы объявили событие, которое будет возникать по завершении аутентификации в нашем мини браузере.
2. GetLoginResultAsync — метод, который «ждёт» событие завершения процесса авторизации с помощью замечательного класса TaskCompletionSource. Так мы добились единой «линии ожидания» из асинхронных методов. С большой натяжкой это можно назвать модальной загрузкой страницы во фрейм с возвратом результата в вызывающую функцию (асинхронно) — как и советует нам действовать Microsoft с приходом асинхронных методов.
3. webBrowser_Navigating — в этом обработчике события мы старательно десериализуем JSON-ответ от сервиса и получаем заветные UserId и AuthenticationToken.
4. Вызываем заветное событие — после чего все асинхронные вызовы завершаются и вызывающий метод получает результат аутентификации.

Теперь ничего не мешает нам в нужном месте написать:

var user = await MobileServiceClient.LoginAsync(MobileServiceAuthenticationProvider.MicrosoftAccount, webLoginPage); 

P.S. При завершении наш webBrowser предложит нам скачать JSON ответ от сервиса. Это проблема IE движка решается вот таким ключиком в реестре:

Windows Registry Editor Version 5.00;
[HKEY_CLASSES_ROOT\MIME\Database\Content Type\application/json]
«CLSID»="{25336920-03F9-11cf-8FD0-00AA00686F13}"
«Encoding»=hex:08,00,00,00

Вывод

С помощью выше переведённого кода мы сняли неприятное ограничением связанное с невозможностью просто вызвать MobileService.LoginAsync в десктопном приложении и получить результат аутентификации асинхронно.

Спасибо за внимание.

Ссылки:

Windows Azure Mobile Services REST API Reference
Get started with authentication in Mobile Services
Register your application in Google