В моем первом уроке среднего уровня вы узнаете, как защитить свое приложение React с помощью Auth0. Весь код доступен в этом репозитории GitHub. Перед тем, как начать это руководство, вам необходимо создать приложение для реагирования, используя приведенную ниже единственную команду npm, которая загрузит и установит все библиотеки, необходимые для этого проекта. Для завершения этого процесса может потребоваться несколько секунд.
npm init response-app response-auth0
Выполните следующую команду внутри каталога, чтобы запустить вновь созданное приложение.
npm start
Теперь вы готовы защитить свое приложение React с помощью Auth0.
Сначала создайте папку с именем components внутри каталога src. Затем добавьте четыре файла с именами Main.js, Secret.js, NoteFound. js и Callback.js. Обновите эти вновь созданные файлы, как показано ниже.
Main.js
Secret.js
NoteFound.js
Callback.js
После добавления четырех файлов выше обновите index.js и App.js, как показано ниже.
index.js
App.js
Теперь у нас есть базовое приложение для реагирования, в котором почти все готово. Единственное, что нам нужно добавить, это аутентификацию или авторизацию в это приложение. В следующем уроке мы объясним, как вы можете добавить аутентификацию и авторизацию в это приложение с помощью Auth0.
Аутентификация в React с Auth0
Если вы новичок в Auth0, сначала вам нужно создать нового клиента в Auth0. Процесс регистрации займет максимум 5 минут.
После регистрации в учетной записи Auth0 вам нужно будет зарегистрировать приложение React на панели управления. Для этого перейдите на страницу Приложение и нажмите Создать приложение. После щелчка по нему Auth0 покажет страницу, как показано ниже. На этой странице вставьте «React Auth0» в Имя и выберите Одностраничное веб-приложение в качестве типа приложения.
Затем, когда вы нажмете кнопку Создать, Auth0 перенаправит вас в раздел Быстрый запуск вашего нового приложения . Оттуда перейдите на вкладку настроек и вставьте http: // localhost: 3000 / callback в URL-адреса разрешенного обратного вызова поле. Auth0 требует эту конфигурацию в качестве меры безопасности. В этой конфигурации Auth0 будет перенаправлять пользователей только на URL-адреса, зарегистрированные в этом поле.
Теперь нажмите кнопку Сохранить изменения внизу страницы и оставьте эту страницу открытой. Вскоре вам нужно будет скопировать пару значений с этой страницы.
Интеграция Auth0 в ваше приложение
Чтобы интегрировать Auth0 в ваше приложение, первое, что вам нужно сделать, это установить библиотеку auth0-js. Чтобы установить эту библиотеку, выполните команду ниже в папке проекта.
npm install - сохранить auth0-js
Затем, чтобы настроить эту библиотеку с использованием данных вашего приложения Auth0, вам нужно будет создать файл с именем Auth.js внутри каталог src и вставьте в него следующий код:
Примечание. Вам необходимо заменить ‹YOUR_AUTH0_DOMAIN› › на свойство домена (например, response-app.auth0.com) и ‹ ‹YOUR_AUTH0_CLIENT_ID› › со свойством идентификатора клиента, которое Auth0 показывает в вашем приложении Auth0.
В приведенном выше коде authorize метод auth0 для перенаправления пользователей на страницу входа Auth0. Когда пользователи заполняют форму и завершают процесс аутентификации, Auth0 перенаправляет их обратно в ваше приложение по адресу http: // localhost: 3000 / callback.
В этом случае URL-адрес перенаправления будет содержать важную информацию для вашего приложения (например, токен идентификатора). Чтобы получить эту информацию, вы должны заставить handleAuthentication вызывать метод parseHash для auth0 и сохраните эту информацию в локальном хранилище браузера.
Используя метод getProfile (), вы получите id_token из localStorage браузера и декодируете токен jwt, чтобы получить информация о пользователе. Вы будете использовать метод logout () для выхода из приложения, очистив локальное хранилище.
Когда все будет в порядке, вам необходимо обновить App.js, index.js, Main.js, Secret.js, Callback.js в вашем Приложение React. С внесенными ниже изменениями секретная страница будет защищена, и пользователю необходимо сначала войти в систему, нажав кнопку входа в систему, чтобы получить доступ к секретной странице. В противном случае это приведет к переходу на NotFound.js.
App.js
index.js
Main.js
Secret.js
Callback.js
После обновления вышеуказанных файлов выполните команду npm start внутри папки проекта. Если все в порядке, ваше приложение React автоматически откроется на вкладке браузера по умолчанию. Затем нажмите кнопку «Войти», и вы должны перенаправить на свой клиент Auth0 для аутентификации пользователя. Есть несколько вариантов входа в это приложение, таких как Facebook, Google, Linkedin и Auth0.
После успешной аутентификации пользователя вы автоматически перенаправляетесь в секретную область приложения для реагирования.
Вывод
В этой статье у вас была возможность узнать, как правильно защитить приложение React с помощью Auth0. Теперь у вас есть знания и подходящие инструменты для разработки вашего следующего приложения React с надлежащей аутентификацией и авторизацией. Я надеюсь, что мой первый рассказ о Medium помог вам на практике обезопасить ваше приложение React. Пожалуйста, поделитесь этим, чтобы другие тоже могли получить пользу.
