Связывание учетных записей пользователей (клиентский JavaScript)

An example of the dialog asking the subscriber to link their subscription

При использовании функции привязки подписки клиентский JavaScript — единственный способ создать новую связь между PPID и учетной записью Google читателя. На настроенной странице читателю отображается диалоговое окно с предложением привязать свою подписку. После нажатия кнопки «Продолжить с Google» читатель может выбрать учетную запись для привязки и вернуться на настроенную страницу после завершения.

Функция привязки подписки не требует использования сторонних файлов cookie или активной сессии Google у пользователя. Это позволяет гибко запускать функцию привязки в любое время, а не только после покупки. Если пользователь не авторизован в учетной записи Google, ему предоставляется возможность сделать это в процессе оформления подписки.

Примеры кода

Эти примеры кода на стороне клиента демонстрируют, как инициировать ссылку, как выглядит допустимый ответ и (при желании) как использовать eventManager swg.js для прослушивания событий аналитики и их соответствующей маршрутизации.

Привязка PPID к учетной записи читателя для одной публикации осуществляется с помощью метода linkSubscription в swg.js Использование аналогично предыдущей функции привязки учетных записей ( пример ), но вместо передачи промиса метод принимает объект, содержащий PPID.

const result = await subscriptions.linkSubscription({publisherProvidedId:6789})

Пример ответа ( интерфейс )

В действительных ответах от успешно связанной учетной записи содержатся как PPID использованный при связывании, так и логический статус success .

{
  publisherProvidedId: 6789,
  success: true
}

Объедините несколько публикаций в один пакет.

An example of the dialog asking the subscriber to link multiple their subscriptions with publications

Вы можете объединить несколько публикаций для одновременной привязки подписок, передав объект в качестве аргумента функции linkSubscriptions . Свойство linkTo представляет собой массив объектов, где каждый объект представляет собой конкретный publicationId и соответствующий ему publisherProvidedId (publisherProvidedId, PPID), которые необходимо связать.

const result = await subscriptions.linkSubscriptions({linkTo: [
  { publicationId: 'pubId1', publisherProvidedId: 'ppid1' },
  { publicationId: 'pubId2', publisherProvidedId: 'ppid2' },
  …
]});

Примеры ответов ( интерфейс )

Поля anyFailure (логическое значение) и anySuccess (логическое значение) указывают на наличие неудачных или успешных попыток привязки подписки на пакеты. Поле links содержит подробную информацию о результатах для каждой из публикаций.

Успешно установлены ссылки на все публикации. 
{
  "anyFailure": false,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": true
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

{
  "anyFailure": true,
  "anySuccess": true,
  "links": [{
    "publicationId": "CAowqfCKCw",
    "publisherProvidedId": "370720",
    "success": false
  },
  {
    "publicationId": "CAow5rTUCw",
    "publisherProvidedId": "171385",
    "success": true
  }]
}

Полный пример использования linkSubscription на стороне клиента. 

<script
  async
  type="application/javascript"
  subscriptions-control="manual"
  src="https://news.google.com/swg/js/v1/swg.js">
</script>

<script>

  function linkSubscription(ppid) {
    self.SWG.push(async (subscriptions) => {
      try {
        const result = await subscriptions.linkSubscription({
          publisherProvidedId: ppid,
        })
        console.log(result)
      } catch(e) {
        console.log(e)
      }
    })
  }

  document.addEventListener('DOMContentLoaded', function () {
    (self.SWG = self.SWG || []).push(subscriptions => {
      subscriptions.init("PUBLICATION_ID");

      //Configure the event manager for analytics integration
      subscriptions.getEventManager().then(manager => {
        manager.registerEventListener((event) => {
            // Add code here to send the event to your analytics
            // sendToAnalytics(event);
          console.log(event);
        });
      });
    });

    document
      .querySelector("SELECTOR")
      .addEventListener('click', function(){
        linkSubscription(PPID)
      })
  });
</script>

Создайте идентификатор клиента OAuth.

Хотя для привязки подписки клиент OAuth не требуется, его можно использовать для создания списка разрешенных доменов для вашего проекта. Авторизованные домены — это список доменов, с которых вашему клиентскому JavaScript разрешено совершать вызовы. Вероятно, в Центре издателя уже настроен идентификатор клиента OAuth для использования с swg.js

Тестирование

Для тестирования клиентской реализации функции привязки подписок код необходимо запустить на сервере с авторизованным источником JavaScript.

  1. Для использования в производственной среде авторизованные источники могут поступать либо от настроенного клиента OAuth, либо из списка проверенных доменов в настройках публикации в Центре издателя.
  2. Для использования в целях разработки или тестирования, при наличии непроверяемого домена (например, localhost или непубличного сервера), домен должен быть указан в настроенном клиенте OAuth.

Устранение ошибок

Наиболее распространенная проблема при тестировании клиентского JavaScript — это получение ошибки 403 - Not Authorized при попытке запуска JavaScript. Для решения этой проблемы убедитесь, что вы запускаете JavaScript с проверенного домена в Publisher Center или на хосте, который находится в авторизованных источниках JavaScript связанного OAuth-клиента.

Следующий шаг

Поздравляем с завершением интеграции JavaScript на стороне клиента! Теперь вы можете перейти к интеграции на стороне сервера . Это необходимый шаг для синхронизации прав ваших читателей. Внедрение и использование необходимой серверной функции UpdateReaderEntitlements гарантирует, что нужные статьи будут выделены для нужных подписчиков.