Apple js: Действие «Выполнить код JavaScript на веб-странице» в Быстрых командах на iPhone или iPad

Добавьте вход с помощью Apple в свое приложение React! · Изучаем код

← Главная

В AWS Amplify добавлена ​​поддержка реализации входа с помощью Apple в ваши приложения! В этом руководстве мы начнем с нуля, создав учетную запись разработчика Apple, затем включим вход с помощью Apple с помощью пользовательского интерфейса Amplify Admin, и, наконец, мы добавим его в приложение React!

1. Создайте учетную запись Apple Developer — обратите внимание, что это стоит 99 долларов и занимает до 48 часов! Вам также может потребоваться создать сертификат разработки в вашей учетной записи.

2. Перейдите в консоль AWS Amplify и создайте новое серверное приложение. Выберите имя для своего проекта, а затем откройте пользовательский интерфейс администратора после инициализации проекта.

3. Нажмите «Включить аутентификацию» в пользовательском интерфейсе администратора. В разделе «Добавить механизм входа» выберите «Войти через Apple». Пока ничего не заполняйте!

4. Затем вернитесь на портал разработчиков Apple и в своем профиле выберите «Сертификаты, идентификаторы и профили». Перейдите на страницу идентификаторов через левую панель навигации и нажмите кнопку «плюс».

5. На странице «Зарегистрировать новый идентификатор» выберите «Идентификаторы приложений», затем нажмите «Продолжить». Затем выберите «Приложение» на следующей странице и продолжите снова. Выберите описание для своего приложения, например «Усилить вход с помощью приложения Apple Practice», а затем используйте один из ваших доменов под идентификатором пакета, например com.welearncode.siwa . Прокрутите вниз и выберите «Войти через Apple». Затем «Продолжить». Наконец, просмотрите и зарегистрируйтесь.

6. Теперь мы зарегистрируем идентификатор службы. Вернитесь на страницу «Идентификаторы», затем в раскрывающемся списке справа выберите «Идентификаторы служб» и нажмите кнопку «плюс». На следующей странице оставьте выбранным «Идентификаторы служб», затем нажмите «Продолжить». Выберите описание для своей службы, например, «Усилить вход с помощью приложения Apple Practice». В разделе «Идентификатор» используйте то, что вы использовали для идентификатора пакета выше, но на этот раз с .sid в конце — например, com.welearncode.siwa.sid . Затем нажмите «Зарегистрироваться» на следующей странице.

7. Вернитесь на страницу «Идентификаторы служб» (вы должны быть перенаправлены туда!) и нажмите на созданный вами идентификатор службы. Установите флажок «Включено», затем нажмите кнопку «Настроить». На странице пользовательского интерфейса администратора Amplify, где вы настраиваете вход с помощью Apple, вы должны увидеть URL-адрес перенаправления. Скопируйте и вставьте его как в «Домены и субдомены», так и в «URL-адреса возврата». В первом поле «Домены и поддомены» удалите «https://» и «/oauth3/idpresponse» из URL-адреса, оставив только поддомены и amazoncognito.com. Затем нажмите «Далее» и «Готово».

8. Последнее, что нужно зарегистрировать на стороне Apple — ключ! Выберите «Ключ» в раскрывающемся списке слева и нажмите кнопку «плюс». Назовите свой ключ и выберите «Войти с Apple» ниже. Нажмите кнопку «Настроить» рядом с «Войти через Apple». Выберите идентификатор приложения и нажмите «Сохранить». Тогда продолжайте и зарегистрируйтесь. Загрузите ключ и сохраните его в удобном для вас месте, потому что он нам понадобится в будущем!

9. Теперь вернемся к пользовательскому интерфейсу администратора. Сейчас мы заполним форму здесь! Идентификатор вашей команды — это созданный вами идентификатор приложения. Если вы перейдете на страницу «Идентификаторы» и выберите свое приложение, выберите префикс идентификатора приложения на странице вашего приложения. Ваш идентификатор ключа можно найти, перейдя на страницу «Ключ», выбрав свой ключ, после чего он появится в разделе «Идентификатор ключа». Наконец, ваш сертификат закрытого ключа — это тот файл, который вы загрузили на последнем шаге — загрузите его. Наконец, выберите URL-адрес перенаправления — в разработке «http://localhost:3000» или аналогичный для выбранного вами порта должен работать! Тогда развертывай!

10. Теперь вы можете интегрировать функцию «Вход с Apple» в свое приложение. Для этого урока мы создадим очень простое приложение React. Сначала создайте приложение React.

 npx create-react-app siwa-test 

Затем установите библиотеки AWS Amplify.

 npm i aws-amplify 

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

 amplify pull --appId your-app-id --envName staging 

Вам могут задать несколько вопросов о вашем приложении, на которые вы сможете ответить со всеми значениями по умолчанию!

В файл index. js добавьте следующее, чтобы настроить проект.

 // index.js
импортировать awsconfig из './aws-exports'
импортировать Amplify из «aws-amplify»
Amplify.configure(awsconfig) 

Теперь удалите файл App.js по умолчанию и замените его пустым компонентом React.

 импорт './App.css'
импортировать {useEffect, useState} из «реагировать»
приложение функции () {
  вернуть 
Привет, мир!
}
export default App 

Давайте сначала реализуем пользовательский интерфейс: мы добавим условие, основанное на том, вошел ли пользователь в систему или нет, и отобразим кнопку входа или выхода. Мы импортируем Auth из aws-amplify, что поможет нам реализовать функциональность.

Для начала мы создадим пользователя в состоянии null. Затем, если этот пользователь вошел в систему, мы добавим кнопку выхода и отобразим информацию об этом пользователе. Если пользователя нет, мы отобразим кнопку входа. Мы будем использовать Amplify federatedSignIn с SignInWithApple . Сейчас мы не настраиваем пользователя, но вы можете войти в систему, используя только этот код!

 импорт './App.css'
импортировать {useState, useEffect} из «реагировать»
импортировать { Auth } из «aws-amplify»
приложение функции () {
  const [пользователь, setUser] = useState (ноль)
  если (пользователь) {
    возвращаться (
      <дел>
        
Пользователь: {JSON.stringify(user.attributes)}
         Auth.signOut()}>Выйти