Как создать приложение с помощью API Monzo Bank
Мониторинг своих расходов - один из рекомендуемых способов опередить свои финансы, который стал чрезвычайно простым благодаря таким банковским инновациям, как Monzo. Мы будем общаться с Monzo API, чтобы получить список учетных записей и транзакций. Мы не будем создавать одностраничное приложение, поскольку здесь основное внимание уделяется демонстрации доступа к API через внутренний код.
Раньше мне было страшно исследовать OAuth, и я уверен, что другие тоже могут разделять это чувство. Однако благодаря изменениям, внесенным в OAuth 2, работа с API стала проще. Мы надеемся снизить входной барьер, чтобы вы могли с уверенностью попробовать это сами и добиться успеха в этой области. Определенно существует обмен учетными данными, но после этого все идет гладко. На диаграмме ниже показано, что ожидается от этого потока:
Поток можно описать следующим образом:
- Пользователь попадает на экран приветствия
- Пользователь нажимает кнопку «Войти».
- Пользователь попадает на экран авторизации Monzo.
- Пользователь вводит свой адрес электронной почты и нажимает «Отправить».
- Пользователь проверяет свою электронную почту и нажимает ссылку «Войти в Monzo».
- Пользователь перенаправляется обратно в наше приложение, в котором отображаются его учетные записи Monzo.
- Пользователь нажимает на учетную запись, направляя его на страницу со всеми транзакциями, принадлежащими этой конкретной учетной записи.
Создайте клиент OAuth для нашего приложения
Прежде чем мы напишем наше приложение, нам нужно будет создать клиент OAuth на веб-сайте разработчика Monzo. Перейдите на веб-сайт и нажмите Войдите в свою учетную запись Monzo, чтобы получить доступ к игровой площадке. Как только вы окажетесь внутри:
- Нажмите «Клиенты» на главной панели навигации в правом верхнем углу.
- Нажмите "Новый клиент OAuth".
- Укажите Имя, URL-адреса переадресации и Описание. В этом примере нас не волнуют другие поля.
- Нажмите «Отправить», чтобы создать своего клиента.
Следуя приведенным выше инструкциям, вы вернетесь к экрану «Управление клиентами OAuth с вашей записью в списке (если не отображается, попробуйте обновить страницу). Выберите созданного клиента и запишите идентификатор клиента и секрет клиента. Они нам понадобятся на следующем шаге.
Начнем кодирование!
Для удобства мы будем работать с пакетами NPM экспресс и запрос. Давайте установим их, запустив npm i express request --save в каталоге нашего проекта. Затем мы настроим наш сервер и страницу приветствия с помощью приведенного ниже фрагмента:
Выполнение вышеуказанного настраивает нас на экран приветствия, содержащий наш призыв к действию, чтобы инициировать остальную часть потока. Переменная accessToken будет заполнена позже. Это будет содержать информацию о сеансе текущего пользователя. Существует гораздо более безопасный способ обработки сеанса, который оставит эту задачу вам. А пока продолжим.
При нажатии кнопки «Войти» страница будет перенаправлена на страницу авторизации Monzo, содержащую значения полей формы в строке запроса. Чтобы справиться с успешным перенаправлением из Monzo, нам нужно определить конечную точку, которая будет принимать код авторизации, отправленный нам после перенаправления пользователя в наше приложение. До app.listen(3000); у нас есть:
Наша конечная точка названа на основе URL-адреса перенаправления, который мы установили при создании нашего клиента OAuth. После успешного перенаправления Monzo отправит значения строки запроса для ключей «код» и «состояние». Мы будем использовать «код» в следующем запросе для получения токена доступа. Это продлится несколько часов. Затем мы сохраним этот токен доступа в нашей переменной accessToken, которую мы создали ранее. Мы также перенаправим пользователя на экран / accounts. Давайте создадим это сейчас.
Получить информацию из учетной записи пользователя
Теперь, когда у нас есть токен, мы можем составить список учетных записей:
Откроется неупорядоченный список информации об учетной записи со ссылкой для просмотра истории транзакций выбранной учетной записи. Это потребует, чтобы наша последняя конечная точка получила и отобразила эту информацию о транзакции:
Сумма возвращается в виде пенсов, поэтому потребуется форматирование, как показано во фрагменте. Полное решение доступно по этой сути. Демо можно увидеть ниже:
Вывод
На этом наш урок завершен. Как всегда, лучший способ учиться - это делать. Надеюсь, вы нашли время опробовать фрагменты кода и кое-что узнали из результата. На данный момент ссылка на электронную почту кажется основным способом авторизации вашего приложения пользователем, хотя Monzo может вносить улучшения.
Что вы думаете о решении? Дайте мне знать в комментариях.
Дальнейшее чтение
- Monzo Developer API
- Упрощенный протокол OAuth 2 Аарона Пареки
