Вход с Apple в веб-приложение Angular

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

Как мы знаем, самые популярные социальные аутентификации - это вход в систему с помощью Google и Facebook. И теперь Apple также прыгнула в это ведро стека, чтобы стать супер крутым сторонним поставщиком авторизации.

В этой статье мы рассмотрим интеграцию входа в систему Apple с помощью Angular / React / Node или любого фреймворка JavaScript.

Отлично, правда? Начнем…

Базовый процесс входа в Apple:

1. Нажмите кнопку« Войти через Apple »
2. Текущая родительская вкладка вашего приложения откроет страницу входа Apple в новой дочерней вкладке с некоторыми метаданными в URL-адресе браузера в качестве параметров запроса.
3. Пользователь аутентифицирует личность после использования учетных данных Apple и перенаправляется обратно на URL-адрес, который является родительской вкладкой, с которой мы перешли.
4. Apple отправит запрос «FORM_POST» с данными на URL-адрес перенаправления, указанный в конфигурации учетной записи разработчика Apple.
5. Пользователь завершает и проверяет процесс регистрации на своем сайте. И теперь вы можете применить свой следующий запрос к процессу для авторизованного пользователя.

Здесь я прилагаю простую диаграмму, поясняющую описанные выше шаги:

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

Обязательные метаданные из учетной записи разработчика Apple:

1. Идентификатор клиента: мы получим его из конфигурации идентификаторов служб в качестве значения идентификатора. Пример: «com.myapp.bundle.backend»
2. URL-адрес перенаправления: это URL-адрес, который мы добавим в настройках конфигурации веб-аутентификации → URL-адреса веб-сайтов → URL-адреса возврата / перенаправления. Пример: https://www.abc.com/api/auth-apple-signin

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

• Сначала войдите в учетную запись разработчика Apple и нажмите Сертификаты, идентификаторы и профили.
• На боковой панели выберите «Идентификаторы», затем щелкните синий значок плюса.
• На первом этапе выберите идентификаторы приложений.
• Выберите платформу «iOS», введите несколько описательных слов в описание и выберите Bundle ID: «Explicit» и введите значение, как показано в следующем примере. «Com.myapp.bundle» → замените текст myapp своим app_name.
• Теперь прокрутите вниз и установите флажок «Войти через Apple».
• Подтвердите и перейдите к настройке следующего шага - Идентификаторы служб.
• Введите описание и введите «com.myapp.bundle.backend» в поле идентификатора, а также установите флажок «Войти с помощью Apple» и нажмите «Настроить».
• Теперь вы находитесь на экране конфигурации веб-аутентификации, где вам нужно выбрать свое приложение из основного идентификатора приложения (убедитесь, что вы выбрали тот, который начинается с имени вашего приложения).
• Введите домен / поддомен в URL-адреса веб-сайтов, с которых вы будете отправлять запрос на сервер Apple (вы можете добавить несколько URL-адресов; не добавляйте localhost или IP-адрес, поскольку это не разрешено, например: https://www.abc .com /).
• Также введите URL-адреса перенаправления, по которым Apple отправит ответ после аутентификации пользователя. Пример: https://www.abc.com/api/auth-apple-signin

Когда мы завершили настройку и получили необходимые метаданные, давайте перейдем к коду.

• На первом этапе нам нужно создать URL-адрес, предоставленный Apple, и перенаправить на него, чтобы пользователь мог ввести туда учетные данные Apple:
• URL: «https://appleid.apple.com/auth/authorize/QUERY_PARAMS
• Нам нужно добавить некоторые метаданные в качестве параметров запроса, чтобы сервер Apple мог проверить наш запрос на основе этих данных.

Meta Data :
client_id -> com.myapp.bundle.backend
redirect_uri -> https://www.abc.com/api/auth-apple-signin

response_type -> Type of response we want from apple

scope -> Required user’s data back after authenticate with apple

response_mode -> form_post ( Type format of response )

• Щелкните здесь, чтобы узнать больше о параметрах запроса.
• Щелкните здесь, чтобы узнать больше о процессе входа, описанном в документации Apple.

Apple отправит данные обратно в redirect_uri, и это будет обработано на стороне сервера. Итак, вопрос в том, как мы передадим эти данные в Angular, чтобы наше приложение могло перейти к следующей операции? И чтобы решить эту проблему, нам нужно применить некоторые нестандартные вещи.

• window.open (‘ URL ’): этот метод используется для открытия новой дочерней вкладки из текущей родительской вкладки.
• window.addEventListener ('message'): этот метод активирует прослушиватель на родительской вкладке, который ожидает данных, поэтому, когда мы получим данные от Apple в redirect_uri, после этого эти данные будут отправлено обратно как ответ от API этому слушателю как событие сообщения.
• jwtHelper.decodeToken (event.data.id_token): декодирование этого токена предоставит данные пользователя, которые включают электронную почту, подписку и срок действия.
• Электронная почта может быть отображена / скрыта, поскольку Apple предоставляет пользователям возможность конфиденциальности. Итак, для проверки личности пользователя мы используем значение sub, поскольку оно является постоянным и уникальным.

Помните:

1. Apple отправляет имя пользователя firstName и lastName, когда пользователь входит в систему в первый раз, только в форме данных. Итак, нам нужно проверить этот объект → event.data.user
2. import {JwtHelperService} из ‘ @ auth0 / angular-jwt → используйте этот помощник JWT для декодирования токенов и получения из них значений.

Теперь давайте создадим один маршрут API, который будет обрабатывать запросы от Apple.

• Маршрут API будет таким же, как мы указали в значении redirect_uri.
• В настоящее время пользователь находится на дочерней вкладке, которая является входом в систему Apple, а наша родительская вкладка ожидает / прослушивает событие для получения данных.
• Нам нужно передать ответ как тег скрипта, и метод window.opener проверяет, открыта ли дочерняя вкладка, затем закрывает ее с помощью метода window.close и выполняет переход обратно на нашу родительскую вкладку и предоставляет данные для события прослушивания.
• window.opener.postMessage (data, parent_URL): этот метод запускает событие message в нашем веб-приложении и предоставляет данные.
• API получит данные в req.body, поскольку мы передали в Apple параметры запроса response_mode: form_post.

Вы можете применить следующую операцию по запросу после успешного получения данных в событии.

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

Ешьте ›Сон› Код ›Повторить

Благодарю вас!

Больше контента на plainenglish.io