Разработка веб-клиента с использованием Ember.js и мобильных служб Windows Azure. Часть 4

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

Настройка аутентификации

Службы Windows Azure Mobile Services упрощают настройку проверки подлинности с использованием Facebook, Google, учетной записи Microsoft (ранее LiveID) или Twitter в качестве поставщика проверки подлинности. Документация на WindowsAzure.com довольно обширна, чтобы уже настроить это, поэтому на этом шаге я просто следовал « Зарегистрировать ваше приложение для аутентификации» и настроить раздел « Мобильные сервисы » документа. Для моих провайдеров я просто использовал Google и Twitter.

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

Реализация входа / выхода

Поскольку вход в систему / выход из системы глобален, я хотел, чтобы ссылка была очень заметной. Так что ставить его в конце панели навигации было естественным выбором.

Мне также нужен был способ глобального отслеживания состояния входа в систему, поэтому я использовал Ember.StateManager для отслеживания этого состояния.

Тогда есть действия для обработки входа и выхода. Они должны работать независимо от страницы, которую я просматриваю; Я не хочу реализовывать эти действия на всех контроллерах. К счастью, действия всплывают в ApplicationController, если они не обрабатываются другими контроллерами.

высказывать

Спасибо ветке StackOverflow за указание на решение этой проблемы. Вот LoginStateManager

  //login statemachine
  App.LoginStateManager = Ember.StateManager.create({
      initialState: "isNotAuthenticated",
      isAuthenticated: Ember.State.create({
          enter: function () {
              console.log("enter " + this.name);
          },
          logout: function (manager, context) {
              manager.transitionTo('isNotAuthenticated');
          }
      }),
      isNotAuthenticated: Ember.State.create({
          enter: function () {
              console.log("enter " + this.name);
          },
          login: function (manager, credentials) {
              console.log(credentials);
              manager.transitionTo('isAuthenticated');
          }
      })
  });

Состояние либо isNotAuthenticated (по умолчанию), либо isAuthenticated. Он будет входить в консоль при изменении состояния. Обратите внимание manager.transitionTo(). Это переход между состояниями.

Контроллер (ы)

Мне нужно было определить ApplicationController, так как именно там я и хотел обрабатывать события входа / выхода. Это также должно сказать конечному автомату об изменении состояния, а также предоставить свойство isAuthenticated, которое панель навигации может использовать, чтобы определить, показывать ли вход / выход из системы. Я также хотел использовать это в NewpostController, поэтому я также добавил его туда. И я хочу получить имя пользователя автоматически из токена аутентификации, поэтому я просто удалил поле автора здесь и в шаблоне ниже. Вот код:

//Application controller, since we want login to be an application wide thing
  //login/logout events are bubbled up to here regardless of the page you are on
  App.ApplicationController = Em.Controller.extend({

      authStateBinding: Ember.Binding.oneWay('App.LoginStateManager.currentState.name'),
      authState: null,

      isAuthenticated: function () {
          return (this.get('authState') == 'isAuthenticated');
      }.property('authState'),
      login: function(provider) {
        client.login(provider).then(function(results) {
          App.LoginStateManager.send("login", client.currentUser);
        });
      },
      logout: function() {
        client.logout();
        App.LoginStateManager.send("logout");
      }
  });

// Newpost controller
  App.NewpostController = Ember.ObjectController.extend({
    title: '',
    body: '',
    authStateBinding: Ember.Binding.oneWay('App.LoginStateManager.currentState.name'),
      authState: null,
    isAuthenticated: function () {
          return (this.get('authState') == 'isAuthenticated');
      }.property('authState'),
    save: function() {
      //create the post
      var now = new Date();
      var post=App.Post.create({
        title: this.get('title'),
        body: this.get('body'),
        posted: now.toString('dddd, MMMM, yyyy'),
      });
      post.save();
      // set these back to '' so the form is pretty
      this.set('title','');
      this.set('body','');
      //transition back to posts
      this.transitionToRoute('posts');
    }
  });

Обратите внимание, что isAuthenticatedпросто проверяет authState объекта LoginStateManager для определения состояния. Но чтобы добраться до этой точки, вы должны подключить привязку, которая возвращает текущее состояние.

Для событий входа в систему я передаю провайдера из пользовательского выбора на панели навигации в качестве providerпараметра, а затем использую его, client.login()чтобы сообщить Windows Azure Mobile Services, какого из сконфигурированных провайдеров использовать для этого запроса аутентификации.

Для перехода между состоянием входа / выхода из системы он просто отправляет вход / выход из системы менеджеру состояния вместе с информацией currentUser, возвращаемой client.login()запросом на вход в систему.

Navbar

Ниже приведена версия файла application.hbs, обновленная для обеспечения функциональности входа / выхода из системы:

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      {{#linkTo index class="brand"}}My Great Blog{{/linkTo}}
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li>{{#linkTo posts}}<i class="icon-book icon-white"></i> Posts{{/linkTo}}</li>
          <li>{{#linkTo newpost}}<i class="icon-pencil icon-white"></i> Write{{/linkTo}}</li>
          {{#if isAuthenticated}}
            <li>
              <a {{action logout}} href="#"><i class="icon-remove icon-white"></i> Logout</a>
            </li>
          {{else}}
            <li class="dropdown">
              <a id="loginproviders" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <i class="icon-user icon-white"></i> Login <b class="caret"></b>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="loginproviders">
                <li role="presentation"><a {{action login "twitter"}} href="#">Twitter</a></li>
                <li role="presentation"><a {{action login "google"}} href="#">Google</a></li>
              </ul>
            </li>
          {{/if}}
        </ul>
      </div>
    </div>
  </div>
</div>

{{outlet}}

В {{#if isAuthenticated}} отображает вход или выход из системы меню выбора по мере необходимости.

Для пункта меню входа в систему я выбрал выпадающий список между Twitter и Google. Важный бит здесь является {{Действие Войти «твиттер»}} и {{Действие Войти «Google»}} . Оба вызывают действие входа и передают ему строку «twitter» или «google». Это будет отображаться в контроллере как providerпараметр, который обсуждался ранее, если вы используете другого провайдера, просто измените соответствующие поля.

Для выхода из системы это просто вызывает действие выхода из системы.

Улучшения после записи

Ранее я упоминал, что после ограничения доступа к функциям CRUD в мобильных службах Windows Azure, если вы отправите новое сообщение, выйдя из системы, произойдет молчание. Кто на самом деле хочет заполнить огромный пост в блоге, нажать «Отправить» и увидеть все свои работы потерянными? Почти никто. Поэтому, чтобы сделать это лучше, я добавил проверку isAuthenticated и отображал предупреждение, если вы не вошли в систему.

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      {{#linkTo index class="brand"}}My Great Blog{{/linkTo}}
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li>{{#linkTo posts}}<i class="icon-book icon-white"></i> Posts{{/linkTo}}</li>
          <li>{{#linkTo newpost}}<i class="icon-pencil icon-white"></i> Write{{/linkTo}}</li>
          {{#if isAuthenticated}}
            <li>
              <a {{action logout}} href="#"><i class="icon-remove icon-white"></i> Logout</a>
            </li>
          {{else}}
            <li class="dropdown">
              <a id="loginproviders" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                <i class="icon-user icon-white"></i> Login <b class="caret"></b>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="loginproviders">
                <li role="presentation"><a {{action login "twitter"}} href="#">Twitter</a></li>
                <li role="presentation"><a {{action login "google"}} href="#">Google</a></li>
              </ul>
            </li>
          {{/if}}
        </ul>
      </div>
    </div>
  </div>
</div>

{{outlet}}

Я также удалил поле автора, так как установил его в аутентификации, возвращаемой из мобильных сервисов.

Получение имени пользователя

Mobile Services предоставляет серверный JavaScript (node.js) для операций CRUD. Я использую операцию вставки, чтобы вытащить имя пользователя и добавить его в сообщение, поскольку оно сохраняется в хранилище данных. Вот шаги, чтобы сделать это.

1. Используя портал управления Windows Azure, перейдите к своему экземпляру Mobile Services и выберите  таблицу сообщений .

2. Выберите « Сценарий» и, наконец, выберите « Вставить» в раскрывающемся списке « Операция» .
   

3. Замените существующий код следующим, затем нажмите кнопку Сохранить

   function insert(item, user, request) {
   
       item.author = "Unknown";
       var identities = user.getIdentities();
       var url;
       
       if (identities.google) {
           var googleAccessToken = identities.google.accessToken;
           url = 'https://www.googleapis.com/oauth2/v1/userinfo?access_token=' + googleAccessToken;
       } else if (identities.facebook) {
           var fbAccessToken = identities.facebook.accessToken;
           url = 'https://graph.facebook.com/me?access_token=' + fbAccessToken;
       } else if (identities.microsoft) {
          var liveAccessToken = identities.microsoft.accessToken;
           url = 'https://apis.live.net/v5.0/me/?method=GET&access_token=' + liveAccessToken;
       } else if (identities.twitter) {
          var userId = user.userId;
          var twitterId = userId.substring(userId.indexOf(':') + 1);
         url = 'https://api.twitter.com/1/users/show.json?user_id=' + twitterId;
       }
       if (url) {
           var requestCallback = function (err, resp, body) {
               if (err || resp.statusCode !== 200) {
                   console.error('Error sending data to the provider: ', err);
                   request.respond(statusCodes.INTERNAL_SERVER_ERROR, body);
               } else {
                   try {
                       var userData = JSON.parse(body);
                       item.author = userData.name;
                       request.execute();
                   } catch (ex) {
                       console.error('Error parsing response from the provider API: ', ex);
                       request.respond(statusCodes.INTERNAL_SERVER_ERROR, ex);
                   }
               }
           }
           var req = require('request');
           var reqOptions = {
               uri: url,
               headers: { Accept: "application/json" }
           };
           req(reqOptions, requestCallback);
       } else {
           // Insert with default user name
           request.execute();
       }
   }