Создавайте пропуска в Интернете с помощью API Google Кошелька.

1. Введение

Обзор

API Google Wallet позволяет взаимодействовать с пользователями через различные типы пропусков: карты лояльности, предложения, подарочные карты, билеты на мероприятия, проездные билеты, посадочные талоны и многое другое. Каждый тип пропуска, или класс пропусков, имеет специфические поля и функции для улучшения пользовательского опыта.

Однако эти варианты могут не подойти для всех случаев. Для более персонализированного использования можно использовать универсальный тип пропуска. Вот несколько примеров использования универсального типа пропуска:

• Парковочные пропуска
• читательские билеты библиотеки
• Ваучеры с предоплаченной стоимостью
• абонементы в спортзал
• Бронирование

Для любого варианта использования, который может быть представлен, можно использовать универсальные проходы:

• До трех строк информации
• (Необязательно) Графическое изображение штрихкода
• (Необязательно) Раздел с подробной информацией

Для получения дополнительной информации об API Google Wallet или о добавлении кнопки «Добавить в Google Wallet» на веб-страницу, пожалуйста, ознакомьтесь с документацией для разработчиков Google Wallet .

Все классы пропусков и объекты должны соответствовать Политике допустимого использования .

Передавайте классы и объекты.

API Google Wallet предоставляет методы для создания следующих объектов:

Тип	Описание
Сдать экзамен	Шаблон для отдельного объекта паса. Он содержит информацию, общую для всех объектов пасов, принадлежащих этому классу.
Передайте объект	Экземпляр класса пропуска, уникальный для идентификатора пользователя.

Об этом практическом занятии

В этом практическом задании вам предстоит выполнить следующие задачи.

1. Создайте новый эмитентский счет в демонстрационном режиме.
2. Создайте учетную запись службы для выдачи пропусков.
3. Создайте новый универсальный класс прохода.
4. Создайте новый объект пропуска.
5. Создайте кнопку «Добавить в Google Wallet» , чтобы сохранить пароль.
6. Отобразите кнопку на своей веб-странице.
7. Обработайте результат сохранения пароля.

Предварительные требования

• Гит
• Учетная запись Google с доступом к консоли Google Cloud.
• Node.js версии 10 или выше

Цели

После выполнения этого практического задания вы сможете сделать следующее:

• Создавайте объекты паролей с помощью Google Wallet.
• Создайте кнопку « Добавить в Google Кошелек».

Поддерживать

Если вы застряли на каком-либо этапе выполнения задания, в репозитории GitHub google-pay/wallet-web-codelab содержится полное решение для ознакомления.

2. Настройка

На этом этапе вы создадите учетную запись эмитента в демонстрационном режиме. Это позволит вам создавать классы пропусков и объекты, которые можно будет добавлять в кошельки пользователей. Затем вы создадите проект Google Cloud и учетную запись службы. Они будут использоваться для программного создания классов пропусков и объектов аналогично серверной части. Наконец, вы предоставите учетной записи службы Google Cloud право управлять пропусками в вашей учетной записи эмитента Google Wallet.

Можно создавать классы и объекты паролей в публичных клиентских приложениях, таких как мобильные приложения. Однако безопаснее создавать пароли в частном клиенте, например, на бэкэнд-сервере, или получать их из клиентских приложений посредством аутентифицированных и защищенных запросов.

Зарегистрируйте аккаунт эмитента Google Wallet.

Для создания и распространения пропусков для Google Wallet необходима учетная запись эмитента. Зарегистрироваться можно через консоль Google Pay & Wallet . Первоначально у вас будет доступ к созданию пропусков в демонстрационном режиме. Это означает, что только определенные тестовые пользователи смогут добавлять созданные вами пропуски. Управление тестовыми пользователями осуществляется в консоли Google Pay & Wallet.

Для получения более подробной информации о демонстрационном режиме см. раздел «Общие требования к пропуску» .

1. Откройте консоль Google Pay и Wallet.
2. Следуйте инструкциям на экране, чтобы создать учетную запись эмитента.
3. Выберите API Google Wallet
4. Подтвердите, что вы понимаете условия предоставления услуг и политику конфиденциальности.
5. Скопируйте значение идентификатора эмитента в текстовый редактор или другое место.
6. На вкладке «Управление» выберите «Настроить тестовые учетные записи» .
7. Добавьте все адреса электронной почты, которые вы будете использовать в этом практическом занятии.

Включите API Google Wallet

1. Войдите в консоль Google Cloud.
2. Если у вас еще нет проекта в Google Cloud, создайте его сейчас (подробнее см. раздел «Создание и управление проектами »).
3. Включите API Google Wallet (также известный как API Google Pay for Passes) для своего проекта.

Создайте учетную запись службы и ключ.

Для вызова API Google Wallet необходимы учетная запись службы и ключ учетной записи службы. Учетная запись службы — это идентификатор, который вызывает API Google Wallet. Ключ учетной записи службы содержит закрытый ключ, который идентифицирует ваше приложение как учетную запись службы. Этот ключ является конфиденциальным, поэтому храните его в секрете.

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

Создайте учетную запись службы

1. В консоли Google Cloud откройте раздел «Учетные записи служб» .
2. Введите имя, идентификатор и описание для вашей учетной записи службы.
3. Выберите СОЗДАТЬ И ПРОДОЛЖИТЬ
4. Выберите ГОТОВО

Создайте ключ учетной записи службы.

1. Выберите свой сервисный аккаунт
2. Выберите меню «КЛАВИШИ».
3. Выберите «ДОБАВИТЬ КЛЮЧ» , затем «Создать новый ключ».
4. Выберите тип ключа JSON.
5. Выберите СОЗДАТЬ

Вам будет предложено сохранить файл ключа на свой локальный компьютер. Не забудьте запомнить его местоположение.

Установите переменную среды GOOGLE_APPLICATION_CREDENTIALS

Переменная среды GOOGLE_APPLICATION_CREDENTIALS используется SDK Google для аутентификации в качестве сервисной учетной записи и доступа к различным API для проекта Google Cloud.

1. Следуйте инструкциям в документации по ключам учетной записи Google Cloud Service , чтобы установить переменную среды GOOGLE_APPLICATION_CREDENTIALS
2. Убедитесь, что переменная среды установлена ​​в новом терминале (MacOS/Linux) или командной строке (Windows) (возможно, потребуется запустить новый сеанс, если он уже открыт).

   echo $GOOGLE_APPLICATION_CREDENTIALS
   

Авторизуйте учетную запись службы.

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

1. Откройте консоль Google Pay и Wallet.
2. Выберите пользователей
3. Выберите «Пригласить пользователя» .
4. Введите адрес электронной почты учетной записи службы (например [e-mail] ).
5. В раскрывающемся меню «Уровень доступа» выберите «Разработчик» или «Администратор» .
6. Выберите «Пригласить»

3. Запустите пример приложения Node.js.

Продолжительность: 10:00

На этом этапе вы запустите пример приложения Node.js, которое будет выступать в роли интернет-магазина и бэкэнд-сервера.

Клонируйте репозиторий с примерами.

В репозитории google-pay/wallet-web-codelab содержится пример проекта на Node.js и различные скриптовые файлы, имитирующие бэкэнд-сервер, используемый для предоставления классов паролей и объектов. Вам нужно будет отредактировать их, чтобы добавить кнопку «Добавить в Google Wallet» на экран с подробной информацией о продукте.

1. Клонируйте репозиторий на свой локальный рабочий компьютер.

   git clone https://github.com/google-pay/wallet-web-codelab.git
   

Установите зависимости проекта.

1. Откройте клонированный репозиторий в терминале или командной строке.
2. Перейдите в каталог web (это приложение, которое вы будете модифицировать в оставшейся части этого практического занятия).

   cd web
   

3. Установите зависимости Node.js.

   npm install .
   

4. Запустите приложение

   node app.js
   

5. Откройте приложение, работающее по адресу http://localhost:3000

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

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

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

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

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

Классы паролей можно создавать непосредственно в консоли Google Pay и Wallet или с помощью API Google Wallet. В этом практическом задании вы создадите универсальный класс паролей с помощью API. Это соответствует процессу создания классов паролей на частном бэкэнд-сервере.

1. Откройте файл web/app.js
2. Замените значение issuerId на свой идентификатор эмитента из консоли Google Pay и Wallet.

   // TODO: Define Issuer ID
   const issuerId = 'ISSUER_ID';
   

3. Найдите функцию createPassClass
4. В функции создайте аутентифицированный HTTP-клиент и используйте API Google Wallet для создания нового класса пароля.

   // TODO: Create a Generic pass class
   let genericClass = {
     'id': `${classId}`,
     'classTemplateInfo': {
       'cardTemplateOverride': {
         'cardRowTemplateInfos': [
           {
             'twoItems': {
               'startItem': {
                 'firstValue': {
                   'fields': [
                     {
                       'fieldPath': "object.textModulesData['points']"
                     }
                   ]
                 }
               },
               'endItem': {
                 'firstValue': {
                   'fields': [
                     {
                       'fieldPath': "object.textModulesData['contacts']"
                     }
                   ]
                 }
               }
             }
           }
         ]
       },
       'detailsTemplateOverride': {
         'detailsItemInfos': [
           {
             'item': {
               'firstValue': {
                 'fields': [
                   {
                     'fieldPath': "class.imageModulesData['event_banner']"
                   }
                 ]
               }
             }
           },
           {
             'item': {
               'firstValue': {
                 'fields': [
                   {
                     'fieldPath': "class.textModulesData['game_overview']"
                   }
                 ]
               }
             }
           },
           {
             'item': {
               'firstValue': {
                 'fields': [
                   {
                     'fieldPath': "class.linksModuleData.uris['official_site']"
                   }
                 ]
               }
             }
           }
         ]
       }
     },
     'imageModulesData': [
       {
         'mainImage': {
           'sourceUri': {
             'uri': 'https://codelabs.developers.google.com/static/add-to-wallet-web/images/google-io-2021-card.png'
           },
           'contentDescription': {
             'defaultValue': {
               'language': 'en-US',
               'value': 'Google I/O 2022 Banner'
             }
           }
         },
         'id': 'event_banner'
       }
     ],
     'textModulesData': [
       {
         'header': 'Gather points meeting new people at Google I/O',
         'body': 'Join the game and accumulate points in this badge by meeting other attendees in the event.',
         'id': 'game_overview'
       }
     ],
     'linksModuleData': {
       'uris': [
         {
           'uri': 'https://io.google/2022/',
           'description': 'Official I/O \'22 Site',
           'id': 'official_site'
         }
       ]
     }
   };
   
   let response;
   try {
     // Check if the class exists already
     response = await httpClient.request({
       url: `${baseUrl}/genericClass/${classId}`,
       method: 'GET'
     });
   
     console.log('Class already exists');
     console.log(response);
   } catch (err) {
     if (err.response && err.response.status === 404) {
       // Class does not exist
       // Create it now
       response = await httpClient.request({
         url: `${baseUrl}/genericClass`,
         method: 'POST',
         data: genericClass
       });
   
       console.log('Class insert response');
       console.log(response);
     } else {
       // Something else went wrong
       console.log(err);
       res.send('Something went wrong...check the console logs!');
     }
   }
   

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

5. Создайте универсальный объект прохода.

На этом шаге вы настроите свое приложение Node.js для создания универсального объекта пароля с использованием класса, созданного ранее. Существует два способа создания объектов паролей для пользователей.

Создайте объект пароля на бэкэнд-сервере.

В этом подходе объект пароля создается на бэкэнд-сервере и возвращается в клиентское приложение в виде подписанного JWT. Это лучше всего подходит для случаев с высокой степенью использования, поскольку гарантирует существование объекта до того, как пользователь попытается добавить его в свой кошелек.

Объект пароля создается при добавлении пользователем его в свой кошелек.

В этом подходе объект пароля определяется и кодируется в подписанный JWT на бэкэнд-сервере. Затем в клиентском приложении отображается кнопка « Добавить в Google Wallet» , которая ссылается на этот JWT. Когда пользователь нажимает кнопку, JWT используется для создания объекта пароля. Этот подход лучше всего подходит для случаев, когда уровень вовлеченности пользователей нестабилен или неизвестен, поскольку он предотвращает создание объектов пароля без их использования. Этот подход будет использован в практическом задании.

1. Откройте файл web/app.js
2. Найдите функцию createPassObject
3. В функции определите новый объект пароля для вашего пользователя.

   // TODO: Create a new Generic pass for the user
   let objectSuffix = `${req.body.email.replace(/[^\w.-]/g, '_')}`;
   let objectId = `${issuerId}.${objectSuffix}`;
   
   let genericObject = {
     'id': `${objectId}`,
     'classId': classId,
     'genericType': 'GENERIC_TYPE_UNSPECIFIED',
     'hexBackgroundColor': '#4285f4',
     'logo': {
       'sourceUri': {
         'uri': 'https://developers.google.com/static/wallet/site-assets/images/pass-builder/pass_google_logo.jpg'
       }
     },
     'cardTitle': {
       'defaultValue': {
         'language': 'en',
         'value': 'Google I/O \'22'
       }
     },
     'subheader': {
       'defaultValue': {
         'language': 'en',
         'value': 'Attendee'
       }
     },
     'header': {
       'defaultValue': {
         'language': 'en',
         'value': 'Alex McJacobs'
       }
     },
     'barcode': {
       'type': 'QR_CODE',
       'value': `${objectId}`
     },
     'heroImage': {
       'sourceUri': {
         'uri': 'https://developers.google.com/static/wallet/site-assets/images/pass-builder/google-io-hero-demo-only.jpg'
       }
     },
     'textModulesData': [
       {
         'header': 'POINTS',
         'body': '1234',
         'id': 'points'
       },
       {
         'header': 'CONTACTS',
         'body': '20',
         'id': 'contacts'
       }
     ]
   };
   
   // TODO: Create the signed JWT and link
   res.send("Form submitted!");
   

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

6. Создайте кнопку «Добавить в Google Wallet».

На заключительном этапе вы создадите подписанный JWT и вернёте ссылку, которую можно использовать в кнопке «Добавить в Google Wallet» . Когда пользователь нажмет кнопку, ему будет предложено сохранить пароль в своём кошельке.

1. Создайте JWT-запросы, закодируйте их с помощью закрытого ключа учетной записи службы и верните кнопку «Добавить в Google Wallet» со встроенной ссылкой.

   // TODO: Create the signed JWT and link
   const claims = {
     iss: credentials.client_email,
     aud: 'google',
     origins: [],
     typ: 'savetowallet',
     payload: {
       genericObjects: [
         genericObject
       ]
     }
   };
   
   const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
   const saveUrl = `https://pay.google.com/gp/v/save/${token}`;
   
   res.send(`<a href='${saveUrl}'><img src='wallet-button.png'></a>`);
   

2. Перезагрузите запущенное приложение в браузере.
3. Введите свой адрес электронной почты в форму и выберите «Создать пропуск».
4. Когда появится кнопка «Добавить в Google Wallet» , выберите её.

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

7. Поздравляем!

Поздравляем, вы успешно интегрировали API Google Wallet в веб-версию!

Узнать больше

Ознакомьтесь с полной интеграцией в репозитории google-pay/wallet-web-codelab на GitHub.

Создайте пропуска и запросите доступ к производственной среде.

Когда вы будете готовы выдавать собственные пропуска в рабочей среде, перейдите в консоль Google Pay & Wallet, чтобы запросить доступ к рабочей среде.

Для получения более подробной информации см. раздел «Предварительные требования к веб-API» .