<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Шлем помогает защитить ваши приложения Express, установив различные заголовки HTTP. Установите пакет, а затем выполните его.</p></section>

Install and Require Helmet

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Хакеры могут использовать известные уязвимости в Express / Node, если они видят, что ваш сайт работает от Express. X-Powered-By: Экспресс отправляется по каждому запросу, поступающему из Express по умолчанию. Средство helmet.hidePoweredBy () удалит заголовок X-Powered-By. Вы также можете явно настроить заголовок на что-то еще, чтобы отключить людей. например app.use (helmet.hidePoweredBy ({setTo: 'PHP 4.2.0'}))</p></section>

Hide Potentially Dangerous Information Using helmet.hidePoweredBy()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Ваша страница может быть помещена в <code>&#x3C;frame></code> или <code>&#x3C;iframe></code> без вашего согласия. Это, в частности, может привести к атакам с помощью clickjacking. Clickjacking - это метод обмана пользователя во взаимодействии со страницей, отличной от того, что, по мнению пользователя, является. Это может быть достигнуто при выполнении вашей страницы во вредоносном контексте с помощью iframing. В этом контексте хакер может поместить скрытый слой поверх вашей страницы. Скрытые кнопки могут использоваться для запуска плохих сценариев. Это промежуточное программное обеспечение устанавливает заголовок X-Frame-Options. Он ограничивает, кто может разместить ваш сайт в кадре. Он имеет три режима: DENY, SAMEORIGIN и ALLOW-FROM. Нам не нужно, чтобы наше приложение было обрамлено. Вы должны использовать <code>helmet.frameguard()</code> передавая объект конфигурации <code>{action: 'deny'}</code> .</p></section>

Mitigate the Risk of Clickjacking with helmet.frameguard()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Межсайтовый скриптинг (XSS) является частым типом атаки, когда вредоносные скрипты вводятся на уязвимые страницы с целью кражи конфиденциальных данных, таких как файлы cookie сеансов или пароли. Основное правило снизить риск атаки XSS очень просто: «Никогда не доверяйте пользовательскому вводу». Как разработчик, вы всегда должны дезинфицировать все входящие извне. Сюда входят данные, поступающие из форм, URL-адреса запроса GET и даже из органов POST. Sanitizing означает, что вы должны найти и закодировать символы, которые могут быть опасны, например &#x3C;,>. Современные браузеры могут помочь смягчить риск, приняв более совершенные стратегии программного обеспечения. Часто они настраиваются через заголовки http. HTTP-заголовок X-XSS-Protection является основной защитой. Браузер обнаруживает потенциальный вложенный сценарий с использованием эвристического фильтра. Если заголовок включен, браузер меняет код сценария, нейтрализуя его. Он по-прежнему имеет ограниченную поддержку.</p></section>

Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Браузеры могут использовать контент или MIME-нюхание, чтобы адаптироваться к различным типам данных, исходящим из ответа. Они переопределяют заголовки Content-Type для угадывания и обработки данных. Хотя это может быть удобно в некоторых сценариях, это также может привести к некоторым опасным атакам. Это промежуточное ПО устанавливает заголовок X-Content-Type-Options в nosniff. Это указывает браузеру не обходить предоставленный Content-Type.</p></section>

Avoid Inferring the Response MIME Type with helmet.noSniff()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Некоторые веб-приложения будут служить ненадежным HTML для загрузки. Некоторые версии Internet Explorer по умолчанию открывают эти HTML-файлы в контексте вашего сайта. Это означает, что ненадежная HTML-страница может начать делать плохие вещи в контексте ваших страниц. Это промежуточное ПО устанавливает заголовок X-Download-Options в noopen. Это не позволит пользователям IE выполнять загрузку в контексте доверенного сайта.</p></section>

Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen()

<section id="description">
<p> Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . HTTP Strict Transport Security (HSTS) - это политическая политика веб-безопасности, которая помогает защитить веб-сайты от атак с понижением протокола и захвата файлов cookie. Если ваш веб-сайт можно получить через HTTPS, вы можете попросить браузеры пользователей избегать использования небезопасного HTTP. Установив заголовок Strict-Transport-Security, вы указываете браузерам использовать HTTPS для будущих запросов за определенное время. Это будет работать для запросов, поступивших после первоначального запроса. Настройте helmet.hsts (), чтобы использовать HTTPS в течение следующих 90 дней. Передайте объект конфигурации {maxAge: timeInSeconds, force: true}. У глюка уже включен hsts. Чтобы переопределить свои настройки, вам нужно установить для поля «значение силы» значение true в объекте конфигурации. Мы будем перехватывать и восстанавливать заголовок Glitch, после проверки его на тестирование. Примечание. Для настройки HTTPS на пользовательском веб-сайте требуется получение домена и сертификат SSL / TSL. </p></section>

Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Чтобы повысить производительность, большинство браузеров предварительно выбирают записи DNS для ссылок на странице. Таким образом, IP-адрес назначения уже известен, когда пользователь нажимает на ссылку. Это может привести к чрезмерному использованию службы DNS (если у вас есть большой веб-сайт, посетивший миллионы людей ...), вопросы конфиденциальности (один подслушиватель может сделать вывод о том, что вы находитесь на определенной странице) или изменение статистики страницы (некоторые ссылки могут появляются, даже если их нет). Если у вас есть высокая безопасность, вы можете отключить предварительную выборку DNS за счет штрафа за производительность.</p></section>

Disable DNS Prefetching with helmet.dnsPrefetchControl()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Если вы выпускаете обновление для своего сайта и хотите, чтобы пользователи всегда загружали более новую версию, вы можете (попытаться) отключить кеширование в браузере клиента. Это может быть полезно и в разработке. Кэширование имеет преимущества производительности, которые вы потеряете, поэтому используйте эту опцию только тогда, когда есть настоящая необходимость.</p></section>

Disable Client-Side Caching with helmet.noCache()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . Эта проблема подчеркивает одну многообещающую новую защиту, которая может значительно снизить риск и влияние многих типов атак в современных браузерах. Установив и настроив политику безопасности контента, вы можете предотвратить ввод чего-либо непредвиденного в вашу страницу. Это защитит ваше приложение от уязвимостей XSS, нежелательного отслеживания, вредоносных фреймов и т. Д. CSP работает, определяя белый список источников контента, которым доверяют. Вы можете настроить их для каждого вида ресурсов, которые могут понадобиться веб-странице (скрипты, таблицы стилей, шрифты, фреймы, медиа и т. Д.). Существует несколько директив, поэтому владелец веб-сайта может иметь подробный контроль. См. HTML 5 Rocks, KeyCDN для более подробной информации. К сожалению, CSP не поддерживается старым браузером. По умолчанию директивы широко открыты, поэтому важно установить директиву defaultSrc как резервную. Шлем поддерживает стили именования defaultSrc и default-src. Отказ применяется к большинству неуказанных директив. В этом упражнении используйте helmet.contentSecurityPolicy () и настройте его, указав директиву по умолчаниюSrc на ["self"] (список разрешенных источников должен быть в массиве), чтобы по умолчанию доверять только ваш адрес веб-сайта. Задайте также директиву scriptSrc, чтобы разрешить загрузку скриптов с вашего сайта и из домена «trusted-cdn.com». Подсказка: в ключе «ключевое слово» одиночные кавычки являются частью самого ключевого слова, поэтому его нужно заключить в двойные кавычки для работы.</p></section>

Set a Content Security Policy with helmet.contentSecurityPolicy()

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-infosec/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-infosec/">GitHub</a> . app.use (helmet ()) будет автоматически включать все промежуточное программное обеспечение, введенное выше, за исключением noCache () и contentSecurityPolicy (), но при необходимости они могут быть активированы. Вы также можете отключить или настроить любое другое промежуточное программное обеспечение индивидуально, используя объект конфигурации. // Пример <code>app.use(helmet({</code> <code>frameguard: { // configure</code> <code>action: 'deny'</code> <code>},</code> <code>contentSecurityPolicy: { // enable and configure</code> <code>directives: {</code> <code>defaultSrc: ["self"],</code> <code>styleSrc: ['style.com'],</code> <code>}</code> <code>},</code> <code>dnsPrefetchControl: false // disable</code> <code>}))</code> Мы вводили каждое промежуточное программное обеспечение отдельно для целей обучения и для удобства тестирования. Использование «родительского» шлема () промежуточного программного обеспечения является самым простым и более чистым, для реального проекта.</p></section>

Configure Helmet Using the ‘parent’ helmet() Middleware

<section id="description">
<p>Создайте полное приложение JavaScript для стека, которое функционально похоже на это: <a href="https://incongruous-beard.glitch.me/" target="_blank">https://incongruous-beard.glitch.me/</a> . Работа над этим проектом предполагает, что вы будете писать свой код на Glitch в нашем стартовом проекте. После завершения этого проекта вы можете скопировать свой общедоступный URL-адрес глюка (на домашнюю страницу вашего приложения) на этот экран, чтобы проверить его! При желании вы можете написать свой проект на другой платформе, но он должен быть общедоступным для нашего тестирования. Запустите этот проект на Glitch, используя <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-metricimpconverter/">эту ссылку</a> или клонируйте <a href="https://github.com/freeCodeCamp/boilerplate-project-metricimpconverter/">этот репозиторий</a> на GitHub! Если вы используете Glitch, не забудьте сохранить ссылку на ваш проект где-нибудь в безопасности!</p></section>

Metric-Imperial Converter

<section id="description">
<p>Создайте полное приложение JavaScript для стека, которое функционально похоже на это: <a href="https://protective-garage.glitch.me/" target="_blank">https://protective-garage.glitch.me/</a> . Работа над этим проектом предполагает, что вы будете писать свой код на Glitch в нашем стартовом проекте. После завершения этого проекта вы можете скопировать свой общедоступный URL-адрес глюка (на домашнюю страницу вашего приложения) на этот экран, чтобы проверить его! При желании вы можете написать свой проект на другой платформе, но он должен быть общедоступным для нашего тестирования. Запустите этот проект на Glitch, используя <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-issuetracker/">эту ссылку</a> или клонируйте <a href="https://github.com/freeCodeCamp/boilerplate-project-issuetracker/">этот репозиторий</a> на GitHub! Если вы используете Glitch, не забудьте сохранить ссылку на ваш проект где-нибудь в безопасности!</p></section>

Issue Tracker

<section id="description">
<p>Создайте полное приложение JavaScript для стека, которое функционально похоже на это: <a href="https://spark-cathedral.glitch.me/" target="_blank">https://spark-cathedral.glitch.me/</a> . Работа над этим проектом предполагает, что вы будете писать свой код на Glitch в нашем стартовом проекте. После завершения этого проекта вы можете скопировать свой общедоступный URL-адрес глюка (на домашнюю страницу вашего приложения) на этот экран, чтобы проверить его! При желании вы можете написать свой проект на другой платформе, но должны быть общедоступны для нашего тестирования. Запустите этот проект на Glitch, используя <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-library/">эту ссылку</a> или клонируйте <a href="https://github.com/freeCodeCamp/boilerplate-project-library/">этот репозиторий</a> на GitHub! Если вы используете Glitch, не забудьте сохранить ссылку на ваш проект где-нибудь в безопасности!</p></section>

Personal Library

<section id="description">
<p>Создайте полное приложение JavaScript для стека, которое функционально похоже на это: <a href="https://sphenoid-crater.glitch.me/" target="_blank">https://sphenoid-crater.glitch.me/</a> . Работа над этим проектом предполагает, что вы будете писать свой код на Glitch в нашем стартовом проекте. После завершения этого проекта вы можете скопировать свой общедоступный URL-адрес глюка (на домашнюю страницу вашего приложения) на этот экран, чтобы проверить его! При желании вы можете написать свой проект на другой платформе, но должны быть общедоступны для нашего тестирования. Запустите этот проект на Glitch, используя <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-stockchecker/">эту ссылку</a> или клонируйте <a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/">этот репозиторий</a> на GitHub! Если вы используете Glitch, не забудьте сохранить ссылку на ваш проект где-нибудь в безопасности!</p></section>

Stock Price Checker

<section id="description">
<p>Создайте полное приложение JavaScript для стека, которое функционально похоже на это: <a href="https://horn-celery.glitch.me/" target="_blank">https://horn-celery.glitch.me/</a> . Работа над этим проектом предполагает, что вы будете писать свой код на Glitch в нашем стартовом проекте. После завершения этого проекта вы можете скопировать свой общедоступный URL-адрес глюка (на домашнюю страницу вашего приложения) на этот экран, чтобы проверить его! При желании вы можете написать свой проект на другой платформе, но он должен быть общедоступным для нашего тестирования. Запустите этот проект на Glitch, используя <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-project-messageboard/">эту ссылку</a> или клонируйте <a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/">этот репозиторий</a> на GitHub! Если вы используете Glitch, не забудьте сохранить ссылку на ваш проект где-нибудь в безопасности!</p></section>

Anonymous Message Board

<section id="description">
<p>As a reminder, this project is being built upon the following starter project on <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a>.</p></section>

Learn How JavaScript Assertions Work

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Используйте assert.isDefined () или assert.isUndefined (), чтобы пройти тесты</p></section>

Test if a Variable or Function is Defined

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Используйте assert.isOk () или assert.isNotOk (), чтобы пройти тесты. .isOk (правдивый) и .isNotOk (falsey) пройдут.</p></section>

Use Assert.isOK and Assert.isNotOK

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Используйте assert.isTrue () или assert.isNotTrue (), чтобы пройти тесты. .isTrue (true) и .isNotTrue (все остальное). .isFalse () и .isNotFalse () также существуют.</p></section>

Test for Truthiness

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . .equal (), .notEqual () .equal () сравнивает объекты, используя '=='</p></section>

Use the Double Equals to Assert Equality

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . .strictEqual (), .notStrictEqual () .strictEqual () сравнивает объекты, используя '==='</p></section>

Use the Triple Equals to Assert Strict Equality

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . .deepEqual (), .notDeepEqual () .deepEqual () утверждает, что два объекта имеют глубокую равность</p></section>

Assert Deep Equality with .deepEqual and .notDeepEqual

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . .isAbove () => a> b, .isAtMost () => a &#x3C;= b</p></section>

Compare the Properties of Two Elements

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . .isBelow () => a &#x3C;b, .isAtLeast => a> = b</p></section>

Test if One Value is Below or At Least as Large as Another

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . (приблизительный) (фактический, ожидаемый, диапазон, [сообщение]) actual = expected +/- range Выберите минимальный диапазон (третий параметр), чтобы тест всегда проходил, он должен быть меньше 1</p></section>

Test if a Value Falls within a Specific Range

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> .</p></section>

Test if a Value is an Array

Test if an Array Contains an Item

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #isString утверждает, что фактическое значение является строкой.</p></section>

Test if a Value is a String

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #include (on #notInclude) также работает для строк! Он утверждает, что фактическая строка содержит ожидаемую подстроку</p></section>

Test if a String Contains a Substring

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #match Подтверждает, что фактическое значение соответствует регулярному выражению второго аргумента.</p></section>

Use Regular Expressions to Test a String

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #property утверждает, что фактический объект имеет заданное свойство. Используйте #property или #notProperty, где это необходимо.</p></section>

Test if an Object has a Property

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #typeOf утверждает, что тип значения - заданная строка, как определено Object.prototype.toString. Используйте #typeOf или #notTypeOf, где это необходимо</p></section>

Test if a Value is of a Specific Data Structure Type

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . #instanceOf утверждает, что объект является экземпляром конструктора. Используйте #instanceOf или #notInstanceOf, где это необходимо</p></section>

Test if an Object is an Instance of a Constructor

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Замените assert.fail (). Проверьте состояние и текст. Пройдите тест. Не отправляйте имя в запросе, а конечная точка отвечает «hello Guest».</p></section>

Run Functional Tests on API Endpoints using Chai-HTTP

Run Functional Tests on API Endpoints using Chai-HTTP II

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . В следующем примере мы увидим, как отправлять данные в полезную нагрузку (тело) запроса. Мы собираемся протестировать запрос PUT. Конечная точка «/ путешественников» принимает объект JSON, который принимает структуру: {фамилия: [фамилия путешественника прошлого]}. Маршрут отвечает: {name: [имя], фамилия: [фамилия], даты : [birth - death years]} см. код сервера для получения более подробной информации. Отправить {фамилия: «Коломбо»}. Замените assert.fail () и выполните тестовый проход. Проверить 1) статус, 2) тип, 3) body.name, 4) body.surname Следуйте приведенному выше порядку утверждения, мы полагаемся на него.</p></section>

Run Functional Tests on an API Response using Chai-HTTP III - PUT method

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Это упражнение аналогично предыдущему. Посмотрите на это для деталей. Отправить {фамилия: 'da Verrazzano'}. Замените assert.fail () и выполните тестовый проход. Проверить 1) статус, 2) тип, 3) body.name, 4) body.surname Следуйте приведенному выше порядку утверждения, мы полагаемся на него.</p></section>

Run Functional Tests on an API Response using Chai-HTTP IV - PUT method

<section id="description">
<p>As a reminder, this project is being built upon the following starter project on <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a>.</p>
<p>In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.</p>
<p>A headless browser is a web browser without a graphical user interface. These kind of tools are particularly useful for testing web pages as they are able to render and understand HTML, CSS, and JavaScript the same way a browser would.</p></section>

Run Functional Tests using a Headless Browser

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-mochachai/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/">GitHub</a> . Это упражнение аналогично предыдущему. Посмотрите на код для маршрутов. Следуйте порядку утверждений, мы полагаемся на это.</p></section>

Run Functional Tests using a Headless Browser II

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Механизм шаблонов позволяет использовать статические файлы шаблонов (например, написанные в <em>Pug</em> ) в вашем приложении. Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями, которые могут быть предоставлены вашим сервером, и преобразует шаблон в статический HTML-файл, который затем отправляется клиенту. Такой подход упрощает разработку HTML-страницы и позволяет отображать переменные на странице без необходимости вызова API-клиента от клиента. Чтобы настроить <em>Pug</em> для использования в вашем проекте, вам нужно будет добавить его как зависимость сначала в package.json. <code>"pug": "^0.1.0"</code> Теперь, чтобы сказать Node / Express использовать механизм шаблонов, вам нужно будет сказать вашему экспресс- <b>приложению,</b> чтобы <b>установить</b> «мопс» в качестве «механизма просмотра». <code>app.set('view engine', 'pug')</code> Наконец, вы должны изменить свой ответ на запрос маршрута указателя на <code>res.render</code> путь к представлению view <em>/ pug / index.pug</em> . Если все пойдет так, как планировалось, вы должны обновить домашнюю страницу своих приложений и увидеть небольшое сообщение о том, что вы успешно разорвали мопс из нашего файла Pug! Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Set up a Template Engine

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Одна из величайших особенностей использования механизма шаблонов - это возможность передавать переменные от сервера к файлу шаблона перед его переносом в HTML. В вашем файле Pug вы собираетесь использовать переменную, ссылаясь на имя переменной как <code>#{variable_name}</code> строке с другим текстом на элементе или используя равную сторону элемента без пробела, такого как <code>p= variable_name</code> которое устанавливает это p элементов текст, равный переменной. Мы настоятельно рекомендуем посмотреть синтаксис и структуру Pug <a href="https://github.com/pugjs/pug">здесь,</a> на их GITUBES README. Мопс - это использование пробелов и вкладок для отображения вложенных элементов и сокращения количества кода, необходимого для создания красивого сайта. Если посмотреть на наш файл-мопс «index.pug», включенный в ваш проект, мы использовали <em>заголовок</em> и <em>сообщение</em> переменных. Чтобы передать их только с нашего сервера, вам нужно будет добавить объект в качестве второго аргумента в ваш <em>res.render</em> с переменными и их значение. Например, передайте этот объект вместе с установкой переменных для вашего индексного представления: <code>{title: 'Hello', message: 'Please login'</code> Он должен выглядеть так: <code>res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});</code> Обновите свою страницу, и вы увидите те значения, которые отображаются в вашем представлении, в правильном месте, как указано в файле index.pug! Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Use a Template Engine's Powers

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Пришло время настроить <em>Passport,</em> чтобы мы, наконец, могли позволить пользователю зарегистрироваться или войти в учетную запись! В дополнение к Passport мы будем использовать Express-session для обработки сеансов. Использование этого промежуточного программного обеспечения сохраняет идентификатор сеанса как куки-файл в клиенте и позволяет нам получить доступ к данным сеанса, используя этот идентификатор на сервере. Таким образом мы сохраняем информацию личного счета из cookie, используемой клиентом, чтобы проверить на нашем сервере, что они аутентифицированы, и просто держите <em>ключ</em> для доступа к данным, хранящимся на сервере. Чтобы настроить Passport для использования в вашем проекте, вам нужно будет добавить его как зависимость сначала в package.json. <code>"passport": "^0.3.2"</code> Кроме того, добавьте экспресс-сессию как зависимость теперь. Экспресс-сессия имеет массу расширенных функций, которые вы можете использовать, но пока мы просто используем основы! <code>"express-session": "^1.15.0"</code> Вам нужно будет настроить настройки сеанса и инициализировать Passport. Обязательно сначала создайте «сеанс переменных» и «паспорт», чтобы требовать «экспресс-сессию» и «паспорт» соответственно. Чтобы настроить ваше экспресс-приложение для использования, используйте сеанс, и мы определим лишь несколько основных параметров. Не забудьте добавить 'SESSION_SECRET' в ваш .ENV-файл и дать ему случайное значение. Это используется для вычисления хэша, используемого для шифрования вашего файла cookie! <pre> app.use (сессия ({
  secret: process.env.SESSION_SECRET,
  resave: true,
  saveUninitialized: true,
})); </pre> Кроме того, вы можете пойти и сказать, что ваше экспресс-приложение <b>использует</b> «passport.initialize ()» и «passport.session ()». (Например, <code>app.use(passport.initialize());</code> ) Представьте свою страницу, если вы считаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить проект завершен до этого момента <a href="https://gist.github.com/JosephLivengood/338a9c5a326923c3826a666d430e65c3">здесь</a> .</p></section>

Set up Passport

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Сериализация и десериализация являются важными понятиями в отношении аутентификации. Сериализация объекта означает преобразование его содержимого в небольшой <em>ключ, по</em> существу, который затем может быть десериализован в исходный объект. Это то, что позволяет нам узнать, кто передал сервер без необходимости отправлять данные аутентификации, такие как имя пользователя и пароль, при каждом запросе на новую страницу. Чтобы правильно установить это, нам нужно иметь функцию сериализации и функцию десериализации. В паспорте мы создаем их с <code>passport.serializeUser( OURFUNCTION )</code> и <code>passport.deserializeUser( OURFUNCTION )</code> . Сериализуемый вызов вызывается с двумя аргументами, полным пользовательским объектом и обратным вызовом, используемым паспортом. Возвращенный в обратном вызове должен быть уникальным ключом для идентификации этого пользователя - самым простым из них является использование пользователями _id в объекте, поскольку оно должно быть уникальным по мере его создания MongoDb. Аналогичным образом десериализуется вызов с этим ключом и функцией обратного вызова для паспорта, но на этот раз нам нужно взять этот ключ и вернуть полный объект пользователей на обратный вызов. Чтобы выполнить поиск по запросу Mongo _id, вам нужно будет создать <code>const ObjectID = require('mongodb').ObjectID;</code> , а затем для его использования вы вызываете <code>new ObjectID(THE_ID)</code> . Обязательно добавьте MongoDB в качестве зависимости. Вы можете увидеть это в следующих примерах: <pre> passport.serializeUser ((пользователь, сделано) => {
   done (null, user._id);
 }); </pre><br><pre> passport.deserializeUser ((id, done) => {
        db.collection ( 'пользователи'). findOne (
            {_id: новый ObjectID (id)},
            (err, doc) => {
                done (null, doc);
            }
        );
    }); </pre> ПРИМЕЧАНИЕ. Этот deserializeUser выдает ошибку до тех пор, пока мы не настроим БД на следующем шаге, поэтому закомментируем весь блок и просто <code>done(null, null)</code> вызов <code>done(null, null)</code> в функции deserializeUser. Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Serialization of a User Object

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Прямо сейчас мы не загружаем объект на самом деле, так как мы не создали нашу базу данных. Это можно сделать разными способами, но для нашего проекта мы будем подключаться к базе данных один раз, когда мы запустим сервер и сохраним постоянное соединение для полного жизненного цикла приложения. Чтобы сделать это, добавьте MongoDB в качестве зависимости и потребуйте его на своем сервере. ( <code>const mongo = require('mongodb').MongoClient;</code> ) Теперь мы хотим подключиться к нашей базе данных, а затем начать прослушивание запросов. Цель этого - не разрешать запросы до подключения нашей базы данных или ошибки базы данных. Для достижения этой цели вы захотите охватить сериализацию и прослушиватель приложений следующим образом: <pre> mongo.connect (process.env.DATABASE, (err, db) => {
    if (err) {
        console.log («Ошибка базы данных:« + ошибка »);
    } else {
        console.log («Успешное подключение к базе данных»);
<pre> <code> //serialization and app.listen</code> </pre>
<p> }}); </p></pre> Теперь вы можете раскомментировать блок в deserializeUser и удалить <code>done(null, null)</code> . Обязательно установите <em>DATABASE</em> в свой .ENV-файл в строку подключения вашей базы данных (например: <code>DATABASE=mongodb://admin:pass@mlab.com:12345/my-project</code> ). Вы можете создать бесплатную базу данных на <a href="https://mlab.com/welcome/">mLab</a> . Поздравляем - вы закончили настройку сериализации! Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить проект завершен до этого момента <a href="https://gist.github.com/JosephLivengood/e192e809a1d27cb80dc2c6d3467b7477">здесь</a> . </p><p></p>
</section>

Implement the Serialization of a Passport User

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Стратегия - это способ аутентификации пользователя. Вы можете использовать стратегию, позволяющую пользователям проходить аутентификацию на основе локально сохраненной информации (если вы сначала регистрируетесь) или от различных поставщиков, таких как Google или GitHub. Для этого проекта мы создадим локальную стратегию. Чтобы просмотреть список 100 стратегий, посетите сайт Passports <a href="http://passportjs.org/">здесь</a> . Добавьте <em>паспорт-локальный</em> в качестве зависимости и добавьте его на свой сервер следующим образом: <code>const LocalStrategy = require('passport-local');</code> Теперь вам нужно будет указать паспорт, чтобы <b>использовать</b> экземпляр объекта LocalStartegy с несколькими определенными настройками. Удостоверьтесь, что это, а также все, начиная с этого момента, инкапсулировано в соединение с базой данных, поскольку оно полагается на него! <pre> passport.use (новая LocalStrategy (
  функция (имя пользователя, пароль, сделанный) {
    db.collection ('users'). findOne ({имя пользователя: имя пользователя}, функция (err, user) {
      console.log ('Пользователь' + имя пользователя + 'пытался войти.');
      if (err) {return done (err); }
      if (! user) {return done (null, false); }
      if (password! == user.password) {return done (null, false); }
      return done (null, user);
    });
  }
)); </pre> Это определяет процесс, который нужно предпринять, когда мы пытаемся аутентифицировать кого-то локально. Сначала он пытается найти пользователя в нашей базе данных с введенным именем пользователя, затем он проверяет, соответствует ли пароль, а затем, если не было обнаружено ошибок, которые мы проверили, например неправильный пароль, возвращается объект-пользователи, и они проверку подлинности. Многие стратегии настроены с использованием разных настроек, но в общем, легко настроить его на основе README в этом репозитории стратегий. Хорошим примером этого является стратегия GitHub, в которой нам не нужно беспокоиться о имени пользователя или пароле, потому что пользователь будет отправлен на страницу авторизации GitHub для аутентификации, и пока они войдут в систему и согласятся, GitHub возвращает свой профиль для нам использовать. На следующем шаге мы определим, как на самом деле вызывать стратегию аутентификации для проверки пользователя на основе данных формы! Отправьте свою страницу, когда вы думаете, что у вас есть это прямо до этого момента.</p></section>

Authentication Strategies

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . В поставляемом файле index.pug есть форма входа. Ранее он был скрыт из-за встроенного javascript, <code>if showLogin</code> с формой с отступом после него. До того, как showLogin как переменная никогда не определялась, он никогда не отображал блок кода, содержащий форму. Идем дальше, и на res.render для этой страницы добавьте новую переменную в объект <code>showLogin: true</code> . Когда вы обновляете свою страницу, вы должны увидеть форму! Эта форма настроена на <b>POST</b> on <em>/ login,</em> поэтому здесь мы должны настроить прием POST и аутентифицировать пользователя. Для этой задачи вы должны добавить маршрут / логин, чтобы принять запрос POST. Для аутентификации на этом маршруте вам нужно добавить промежуточное программное обеспечение, чтобы сделать это, прежде чем отправлять ответ. Это делается путем передачи другого аргумента с промежуточным программным обеспечением перед вашей <code>function(req,res)</code> с ответом! Промежуточное программное обеспечение для использования - <code>passport.authenticate('local')</code> . <em>passport.authenticate</em> также может принимать некоторые параметры в качестве аргумента, такие как: <code>{ failureRedirect: '/' }</code> который невероятно полезен, поэтому обязательно добавьте его также. В качестве ответа после использования промежуточного программного обеспечения (которое будет вызываться только при прохождении промежуточного программного обеспечения аутентификации) необходимо перенаправить пользователя в <em>/ profile,</em> и этот маршрут должен отобразить представление «profile.pug». Если аутентификация прошла успешно, пользовательский объект будет сохранен в <em>req.user</em> . Теперь, когда вы вводите имя пользователя и пароль в форме, оно должно перенаправляться на главную страницу <em>/,</em> а в консоли вашего сервера должно быть «Пользователь {USERNAME], пытающийся войти в систему». поскольку в настоящее время мы не можем войти в систему для пользователя, который не зарегистрирован. Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить проект завершен до этого момента <a href="https://gist.github.com/JosephLivengood/8a335d1a68ed9170da02bb9d8f5b71d5">здесь</a> .</p></section>

How to Use Passport Strategies

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Как и в случае, любой пользователь может просто перейти к / профилю, прошли ли они проверку подлинности или нет, набрав URL-адрес. Мы хотим предотвратить это, проверив, проверен ли пользователь первым, прежде чем отображать страницу профиля. Это прекрасный пример того, когда создавать промежуточное ПО. Задача здесь заключается в создании функции промежуточного программного обеспечения, обеспечивающей <code>ensureAuthenticated(req, res, next)</code> , которая проверяет, аутентифицирована ли пользователь, вызывая passports isAuthenticated по <em>запросу,</em> который в свою очередь проверяет, что <em>req.user</em> должен быть определен. Если это так, то следует вызвать <em>next ()</em> , иначе мы можем просто ответить на запрос с перенаправлением на нашу домашнюю страницу для входа. Реализация этого промежуточного программного обеспечения: <pre> функция makeAuthenticated (req, res, next) {
  if (req.isAuthenticated ()) {
      return next ();
  }
  res.redirect ( '/');
}; </pre> Теперь добавьте <em>makeAuthenticated</em> в качестве промежуточного программного обеспечения в запрос для страницы профиля перед аргументом запроса get, содержащего функцию, которая отображает страницу. <pre> app.route ( '/ профиль')
  .get (обеспечитьAuthenticated, (req, res) => {
       res.render (process.cwd () + '/ views / pug / profile');
  }); </pre> Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Create New Middleware

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Теперь, когда мы можем гарантировать, что пользователь, получающий аутентификацию <em>/ profile</em> , может использовать информацию, содержащуюся в «req.user» на нашей странице! Идем дальше и передаем объект, содержащий переменное <em>имя пользователя,</em> равное 'req.user.username', в метод рендеринга вида профиля. Затем перейдите в свой <code>h2.center#welcome Welcome, #{username}!</code> profile.pug и добавьте строку <code>h2.center#welcome Welcome, #{username}!</code> создавая элемент h2 с классом «center» и id «welcome», содержащий текст «Добро пожаловать» и имя пользователя! Также в профиле добавьте ссылку на <em>/</em> выйти. В этом маршруте будет установлена ​​логика для неавторитизации пользователя. <code>a(href='/logout') Logout</code> Отправьте свою страницу, если вы считаете, что у вас все в порядке.</p></section>

How to Put a Profile Together

<section id="description">
<p>As a reminder, this project is being built upon the following starter project on <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a>.</p>
<p>Creating the logout logic is easy. The route should just unauthenticate the user and redirect to the home page instead of rendering any view.</p>
<p>In passport, unauthenticating a user is as easy as just calling <code>req.logout();</code> before redirecting.</p><p><pre><code class="language-js">app.route('/logout')
  .get((req, res) => {
    req.logout();
    res.redirect('/');
});
</code></pre></p>
<p>You may have noticed that we're not handling missing pages (404), the common way to handle this in Node is with the following middleware. Go ahead and add this in after all your other routes:</p>
<p><pre><code class="language-js">app.use((req, res, next) => {
  res.status(404)
    .type('text')
    .send('Not Found');
});
</code></pre></p>
<p>Submit your page when you think you've got it right.</p>
</section>

Logging a User Out

<section id="description">
<p>As a reminder, this project is being built upon the following starter project on <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a>.</p>
<p>Now we need to allow a new user on our site to register an account. On the res.render for the home page add a new variable to the object passed along- <code>showRegistration: true</code>. When you refresh your page, you should then see the registration form that was already created in your index.pug file! This form is set up to <b>POST</b> on <em>/register</em> so this is where we should set up to accept the POST and create the user object in the database.</p>
<p>The logic of the registration route should be as follows: Register the new user > Authenticate the new user > Redirect to /profile</p>
<p>The logic of step 1, registering the new user, should be as follows: Query database with a findOne command > if user is returned then it exists and redirect back to home <em>OR</em> if user is undefined and no error occurs then 'insertOne' into the database with the username and password and as long as no errors occur then call <em>next</em> to go to step 2, authenticating the new user, which we've already written the logic for in our POST /login route.</p><p><pre><code class="language-js">app.route('/register')
  .post((req, res, next) => {
    db.collection('users').findOne({ username: req.body.username }, function(err, user) {
      if (err) {
        next(err);
      } else if (user) {
        res.redirect('/');
      } else {
        db.collection('users').insertOne({
          username: req.body.username,
          password: req.body.password
        },
          (err, doc) => {
            if (err) {
              res.redirect('/');
            } else {
              next(null, user);
            }
          }
        )
      }
    })
  },
    passport.authenticate('local', { failureRedirect: '/' }),
    (req, res, next) => {
      res.redirect('/profile');
    }
  );
</code></pre></p>
<p>Submit your page when you think you've got it right. If you're running into errors, you can check out the project completed up to this point <a href="https://gist.github.com/JosephLivengood/6c47bee7df34df9f11820803608071ed">here</a>.</p>
</section>

Registration of New Users

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Сейчас все, что у вас есть, находится в файле server.js. Это может привести к сложному управлению кодом, который не очень расширяем. Создайте 2 новых файла: Routes.js и Auth.js. Оба должны начинаться со следующего кода: <pre> module.exports = function (app, db) {
<p> } </p></pre> Теперь в верхней части файла вашего сервера требуются такие файлы: <code>const routes = require('./routes.js');</code> Сразу после того, как вы установили успешное соединение с базой данных, создайте экземпляр каждого из них, например: <code>routes(app, db)</code> Наконец, возьмите все маршруты на своем сервере и вставьте их в свои новые файлы и удалите их из файла вашего сервера. Также возьмите makeAuthenticated, так как мы создали эту функцию промежуточного программного обеспечения для маршрутизации. Теперь вам нужно будет правильно добавить зависимости, которые используются, например, <code>const passport = require('passport');</code> , в верхней части над линией экспорта в файле routes.js. Продолжайте добавлять их до тех пор, пока не возникнет больше ошибок, и ваш серверный файл больше не имеет никакой маршрутизации! Теперь сделайте то же самое в файле auth.js со всеми вещами, связанными с аутентификацией, такими как сериализация и настройка локальной стратегии, и сотрите их из файла вашего сервера. Обязательно добавьте зависимости и вызовите <code>auth(app,db)</code> на сервере в том же месте. Обязательно иметь <code>auth(app, db)</code> перед <code>routes(app, db)</code> так как наш маршрут регистрации зависит от начального паспорта! Поздравляем вас, вы в конце этого раздела Advanced Node и Express и получите красивый код для этого! Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы столкнулись с ошибками, вы можете посмотреть пример завершенного проекта <a href="https://glitch.com/#!/project/delicious-herring">здесь</a> . </p><p></p>
</section>

Clean Up Your Project with Modules

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . Основной путь такого рода аутентификации будет следовать в вашем приложении: <ol><li> Пользователь нажимает кнопку или ссылку, отправляя их на наш маршрут для аутентификации с использованием определенной стратегии (EG. GitHub) </li><li> Ваш маршрут требует <code>passport.authenticate('github')</code> который перенаправляет их в GitHub. </li><li> Страница, на которую пользователь приземляется, на GitHub, позволяет им войти в систему, если они еще не были. Затем он просит их одобрить доступ к своему профилю из нашего приложения. </li><li> Затем пользователь возвращается в наше приложение с определенным URL-адресом обратного вызова с их профилем, если он одобрен. </li><li> Теперь они аутентифицированы, и ваше приложение должно проверить, является ли он возвращаемым профилем, или сохранить его в своей базе данных, если это не так. </li></ol> Стратегии с OAuth требуют наличия, по крайней мере, <em>идентификатора</em> <em>клиента и секретности клиента,</em> который позволяет проверить, откуда идет запрос на аутентификацию, и если он действителен. Они получены с сайта, на котором вы пытаетесь внедрить аутентификацию с помощью, например, GitHub, и являетесь уникальными для вашего приложения. <b>ОНИ НЕ РАЗМЕЩАЮТСЯ</b> и никогда не должны загружаться в общедоступный репозиторий или записываться непосредственно в ваш код. Обычная практика заключается в том, чтобы поместить их в ваш <em>.ENV-</em> файл и ссылаться на них так: <code>process.env.GITHUB_CLIENT_ID</code> . Для этой задачи мы собираемся использовать стратегию GitHub. Получение <em>идентификатора клиента и секретности <em>из GitHub выполняется в настройках профиля вашего аккаунта в разделе «Настройки разработчика», а затем « <a href="https://github.com/settings/developers">Приложения OAuth</a> ». Нажмите «Зарегистрировать новое приложение», назовите свое приложение, вставьте URL-адрес на свою страницу с глюком ( <b>не URL-адрес кода проекта</b> ) и, наконец, URL-адрес обратного вызова, вставьте тот же URL-адрес, что и на главной странице, но с помощью «/ auth / github / callback '. Здесь пользователи будут перенаправлены на нас для обработки после проверки подлинности на GitHub. Сохраните возвращаемую информацию как «GITHUB_CLIENT_ID» и «GITHUB_CLIENT_SECRET» в вашем .ENV-файле. В вашем ремикс-проекте создайте 2 маршрута, принимающих запросы GET: / auth / github и / auth / github / callback. Первый должен только называть паспорт для аутентификации «github», а второй должен вызывать паспорт для аутентификации «github» с перенаправлением отказа на «/», а затем, если это успешно перенаправляется на «/ profile» (аналогично нашему последнему проекту). Пример того, как выглядит '/ auth / github / callback', аналогичен тому, как мы обрабатывали обычный логин в нашем последнем проекте:</em></em> <pre> <em><em>app.route ( '/ Войти')
  .post (passport.authenticate ('local', {failRedirect: '/'}), (req, res) => {
    res.redirect ( '/ профиль');
  });</em></em> </pre> <em><em>Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить проект до этого момента <a href="https://gist.github.com/JosephLivengood/28ea2cae7e1dc6a53d7f0c42d987313b">здесь</a> .</em></em></p>
</section>

Implementation of Social Authentication

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . Последняя часть настройки вашей аутентификации GitHub - это создание самой стратегии. Для этого вам нужно будет добавить зависимость «паспорт-github» к вашему проекту и потребовать его как GithubStrategy, например, <code>const GitHubStrategy = require('passport-github').Strategy;</code> , Чтобы настроить стратегию GitHub, вы должны указать <b>паспорт,</b> чтобы <b>использовать</b> экземпляр <b>GithubStrategy</b> , который принимает 2 аргумента: объект (содержащий <em>clientID</em> , <em>clientSecret</em> и <em>callbackURL</em> ) и функцию, которая будет вызываться, когда пользователь будет успешно аутентифицирован, что мы определим если пользователь является новым и какие поля сначала сохраняются в объекте базы данных пользователя. Это распространено во многих стратегиях, но для некоторых из них может потребоваться дополнительная информация, как указано в github этой конкретной стратегии README; например, Google требует также <em>область видимости,</em> которая определяет, какую информацию запрашивает ваш запрос, и просит пользователя одобрить такой доступ. Текущая стратегия, которую мы реализуем, имеет свое использование, изложенное <a>здесь</a> , но мы все это проверим здесь, на freeCodeCamp! Вот как ваша новая стратегия должна смотреть на этот момент: <pre> passport.use (новый GitHubStrategy ({
    clientID: process.env.GITHUB_CLIENT_ID,
    clientSecret: process.env.GITHUB_CLIENT_SECRET,
    callbackURL: / * ВСТАВЬТЕ URL-адрес CALLBACK, ВХОДЯЩИЙ В ГИТУМ ЗДЕСЬ * /
  },
  function (accessToken, refreshToken, profile, cb) {
      console.log (профиль);
      // Логика базы данных здесь с обратным вызовом, содержащим наш пользовательский объект
  }
)); </pre> Ваша аутентификация еще не будет выполнена, и на самом деле вывести ошибку, без логики базы данных и обратного вызова, но она должна зайти на консоль вашего профиля GitHub, если вы попробуете! Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Implementation of Social Authentication II

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socialauth/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socialauth/">GitHub</a> . Конечной частью стратегии является обработка профиля, возвращенного из GitHub. Нам нужно загрузить объект базы данных пользователей, если он существует, или создать его, если это не так, и заполнить поля из профиля, а затем вернуть объект пользователя. GitHub предоставляет нам уникальный <em>идентификатор</em> в каждом профиле, который мы можем использовать для поиска, чтобы сериализовать пользователя (уже реализовано). Ниже приведен пример реализации, которую вы можете использовать в своем проекте: она входит в функцию, которая является вторым аргументом для новой стратегии, прямо под <code>console.log(profile);</code> в настоящее время: <pre> db.collection ( 'socialusers'). findAndModify (
    {id: profile.id},
    {},
    {$ SetOnInsert: {
        id: profile.id,
        name: profile.displayName || 'Джон Доу',
        фото: profile.photos [0] .value || »,
        email: profile.emails [0] .value || «Нет общедоступной электронной почты»,
        created_on: новая дата (),
        провайдер: profile.provider || "
    } $ Установить: {
        last_login: новая дата ()
    }, $ Вкл: {
        login_count: 1
    }},
    {upsert: true, new: true},
    (err, doc) => {
        return cb (null, doc.value);
    }
); </pre> С помощью findAndModify он позволяет вам искать объект и обновлять его, а также обновлять объект, если он не существует, и каждый раз получать новый объект обратно в нашей функции обратного вызова. В этом примере мы всегда устанавливаем last_login так же, как и сейчас, мы всегда увеличиваем значение login_count на 1, и только когда мы вставляем новый объект (новый пользователь), мы заполняем большинство полей. Также следует отметить использование значений по умолчанию. Иногда возвращаемый профиль не будет заполнен всей информацией или он будет выбран пользователем, чтобы оставаться закрытым; поэтому в этом случае мы должны обработать его, чтобы предотвратить ошибку. Теперь вы сможете войти в свое приложение - попробуйте! Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить пример готового кода этого мини-проекта <a href="https://glitch.com/#!/project/guttural-birch">здесь</a> .</p></section>

Implementation of Social Authentication III

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . Добавьте Socket.IO в качестве зависимости и требуйте / создайте его на своем сервере, определенном как «io», с HTTP-сервером в качестве аргумента. <code>const io = require('socket.io')(http);</code> Первое, что нужно обработать, - это прослушивание нового соединения с клиентом. Ключевое слово <dfn>on</dfn> делает именно это - прослушивает конкретное событие. Для этого требуется 2 аргумента: строка, содержащая заголовок события, который выдается, и функция, с которой данные передаются. В случае нашего прослушивателя соединений мы используем <em>socket</em> для определения данных во втором аргументе. Сокет - это отдельный клиент, который подключен. Для прослушивания соединений на нашем сервере добавьте следующее между комментариями в своем проекте: <pre> io.on ('connection', socket => {
  console.log («Пользователь подключен»);
}); </pre> Теперь для подключения клиента вам просто нужно добавить следующее к вашему client.js, которое загружается страницей после проверки подлинности: <pre> / * global io * /
var socket = io (); </pre> Комментарий подавляет ошибку, которую вы обычно видите, так как «io» в файле не определен. Мы уже добавили надежный CDN в библиотеку Socket.IO на странице в chat.pug. Теперь попробуйте загрузить приложение и пройти аутентификацию, и вы должны увидеть на своей консоли сервера «Пользователь подключился»! <strong>Заметка</strong> <br> <code>io()</code> работает только при подключении к сокету, размещенному на том же url / сервере. Для подключения к внешнему сокету, размещенному в другом месте, вы должны использовать <code>io.connect('URL');</code> , Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Set up the Environment

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . <dfn>Emit</dfn> - самый распространенный способ общения, который вы будете использовать. Когда вы выдаете что-то с сервера на «io», вы отправляете имя события и данные во все подключенные сокеты. Хорошим примером этой концепции будет исчисление текущего количества подключенных пользователей каждый раз, когда подключается новый пользователь! <hr> Начните с добавления переменной, чтобы отслеживать пользователей непосредственно перед тем, где вы сейчас слушаете подключения. <code>var currentUsers = 0;</code> Теперь, когда кто-то подключается, вы должны увеличить счетчик перед исчислением счета, поэтому вам нужно добавить инкремент в прослушиватель соединения. <code>++currentUsers;</code> Наконец, после увеличения счетчика, вы должны испустить событие (все еще внутри прослушивателя соединения). Событие должно быть названо «user count», и данные должны быть просто «currentUsers». <code>io.emit('user count', currentUsers);</code> <hr> Теперь вы можете реализовать способ для вашего клиента слушать это событие! Аналогично прослушиванию соединения на сервере вы будете использовать ключевое слово <em>on</em> . <pre> socket.on ('user count', function (data) {
  console.log (данные);
}); </pre> Теперь попробуйте загрузить приложение и выполнить проверку подлинности, и вы должны увидеть в своей клиентской консоли «1», представляющий текущий счет пользователя! Попробуйте загрузить больше клиентов и пройти проверку подлинности, чтобы увидеть, как число увеличивается. Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Communicate by Emitting

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . Вы можете заметить, что до сих пор вы только увеличивали количество пользователей. Обращение с отключением пользователя так же просто, как обращение с исходным подключением, за исключением того, что вам нужно прослушивать его для каждого сокета по сравнению со всем сервером. <hr> Для этого добавьте в существующий прослушиватель подключений слушатель, который прослушивает «разъединение» в сокете без передачи данных. Вы можете протестировать эту функциональность, просто зарегистрировавшись на консоли, которую пользователь отключил. <code>socket.on('disconnect', () => { /*anything you want to do on disconnect*/ });</code> Чтобы клиенты постоянно обновляли количество текущих пользователей, вы должны уменьшить currentUsers на 1, когда произойдет отключение, затем выпустите событие «счет пользователя» с обновленным счетчиком! <strong>Заметка</strong> <br> Подобно «разъединению», все другие события, которые сокет может испускать на сервер, должны обрабатываться в подключающемся прослушивателе, где у нас есть «сокет». Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Handle a Disconnect

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . В настоящее время вы не можете определить, кто подключен к вашему веб-соке. В то время как контейнер req.user представляет собой объект пользователя, то есть только тогда, когда ваш пользователь взаимодействует с веб-сервером и с веб-сокетами, у вас нет запроса (запроса), и для этого нет пользовательских данных. Один из способов решить проблему знания того, кто связан с вашим веб-сокетом, - это разбор и декодирование файла cookie, который содержит сессию паспорта, а затем десериализацию его для получения пользовательского объекта. К счастью, на NPM есть пакет только для этого, который превращает сложную задачу в нечто простое! <hr> Добавьте «passport.socketio» в качестве зависимости и укажите его как «passportSocketIo». Теперь мы просто должны сказать Socket.IO, чтобы использовать его и установить параметры. Убедитесь, что это добавлено до существующего кода сокета, а не в существующем прослушивателе подключений. Для вашего сервера он должен выглядеть следующим образом: <pre> io.use (passportSocketIo.authorize ({
  cookieParser: cookieParser,
  ключ: «express.sid»,
  secret: process.env.SESSION_SECRET,
  store: sessionStore
})); </pre> Вы также можете передать «успех» и «сбой» функцией, которая будет вызываться после завершения процесса проверки подлинности, когда клиент пытается подключиться. Пользовательский объект теперь доступен на вашем объекте сокета как <code>socket.request.user</code> . Например, теперь вы можете добавить следующее: <code>console.log('user ' + socket.request.user.name + ' connected');</code> и он будет подключаться к серверной консоли, которая подключилась! Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы работаете в ошибки, вы можете проверить проект до этого момента <a href="https://gist.github.com/JosephLivengood/a9e69ff91337500d5171e29324e1ff35">здесь</a> .</p></section>

Authentication with Socket.IO

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . Многие чаты могут оповещаться, когда пользователь подключается или отключается, а затем отображает это для всех подключенных пользователей в чате. Увидев, что вы уже выбрали событие для подключения и отключения, вам просто нужно будет изменить это событие для поддержки такой функции. Наиболее логичным способом является отправка 3-х частей данных с событием: имя пользователя, подключенного / отключенного, текущий счетчик пользователей, и если это имя связано или отключено. <hr> Измените имя события на «user» и, поскольку данные передают объект вместе с именами полей «name», «currentUsers» и «boolean» connected (если это правда, если соединение или false для отключения отправленного пользователя). Не забудьте внести изменения в обе точки, у которых было событие «счетчик пользователей», и установить отключить один, чтобы послал false для поля «подключено» вместо true, как событие, испущенное при подключении. <code>io.emit('user', {name: socket.request.user.name, currentUsers, connected: true});</code> Теперь у вашего клиента будет вся необходимая информация, чтобы правильно отображать текущий счет пользователя и аннуитет, когда пользователь подключается или отключается! Чтобы обработать это событие на стороне клиента, мы должны прослушать «пользователь», а затем обновить текущий счет пользователя, используя jQuery, чтобы изменить текст <code>#num-users</code> на «{NUMBER} пользователей онлайн», а также добавить <code>&#x3C;li></code> в неупорядоченный список с id 'messages' с '{NAME} имеет {join / left} чат.'. Реализация этого может выглядеть следующим образом: <pre> socket.on ('user', function (data) {
  $ ('# num-users'). text (data.currentUsers + 'пользователи онлайн);
  var message = data.name;
  if (data.connected) {
    сообщение + = 'присоединилось к чату.';
  } else {
    сообщение + = 'покидает чат.';
  }
  $ ('# messages'). append ($ ('&#x3C;li>'). html ('&#x3C;b>' + message + '&#x3C;\ / b>'));
}); </pre> Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Announce New Users

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-socketio/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-socketio/">GitHub</a> . Пришло время, когда вы разрешаете клиентам отправлять чат-сообщение на сервер, чтобы выдать всем клиентам! Уже в вашем файле client.js вы должны увидеть, что уже есть блок обработки кода, когда отправляется форма messgae! ( <code>$('form').submit(function(){ /*logic*/ });</code> ) <hr> В коде, который вы обрабатываете отправку формы, вы должны выпустить событие после определения «messageToSend», но перед <code>#m</code> текстового поля <code>#m</code> . Событие должно быть названо «сообщение чата», и данные должны быть просто «messageToSend». <code>socket.emit('chat message', messageToSend);</code> Теперь на вашем сервере вы должны слушать сокет для сообщения чата с сообщением «сообщение». Как только событие будет получено, оно должно затем передать сообщение чата всем <code>io.emit</code> с данными, являющимися объектом, содержащим «имя» и «сообщение». Теперь, на вашем клиенте, вы должны теперь прослушать «сообщение чата», а при его получении добавьте элемент списка в <code>#messages</code> с именем двоеточие и сообщение! В этот момент чат должен быть полностью функциональным и отправлять сообщения всем клиентам! Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы столкнулись с ошибками, вы можете проверить проект до этого момента <a href="https://gist.github.com/JosephLivengood/3e4b7750f6cd42feaa2768458d682136">здесь для сервера</a> и <a href="https://gist.github.com/JosephLivengood/41ba76348df3013b7870dc64861de744">здесь для клиента</a> .</p></section>

Send and Display Chat Messages

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/">GitHub</a> . Хэши BCrypt очень надежны. Хэш - это в основном отпечаток исходных данных - всегда уникальный. Это достигается путем подачи исходных данных в алгоритм и возврата результата фиксированной длины. Чтобы еще больше усложнить этот процесс и сделать его более безопасным, вы также можете <em>солить</em> свой хэш. Соление вашего хэша включает в себя добавление случайных данных в исходные данные до процесса хэширования, что еще более усложняет процесс хэширования. Хэши BCrypt всегда будут выглядеть как <code>$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm</code> который имеет структуру. Первый маленький бит данных <code>$2a</code> определяет, какой хэш-алгоритм использовался. Следующая часть <code>$13</code> определяет <em>стоимость</em> . Стоимость - это то, сколько энергии требуется для вычисления хэша. Он находится в логарифмическом масштабе 2^стоимости и определяет, сколько раз данные передаются через алгоритм хэширования. Например, по цене 10 вы можете хэш-код на 10 паролей на среднем компьютере, однако по цене 15 требуется 3 секунды за хэш ... и взять его дальше, по цене 31 требуется несколько дней для завершения хэша. В настоящее время стоимость 12 считается очень безопасной. Последняя часть вашего хэша <code>$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm</code> , выглядит как 1 большая строка чисел, периодов и букв, но на самом деле это две отдельные части информации. Первые 22 символа - соль в обычном тексте, а остальные - хэшированный пароль! <hr> Чтобы начать использовать BCrypt, добавьте его как зависимость в свой проект и потребуйте его как «bcrypt» на вашем сервере. Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Understand BCrypt Hashes

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/">GitHub</a> . Поскольку хеширование рассчитано на интенсивность вычислений, рекомендуется делать это асинхронно на вашем сервере, чтобы избежать блокировки входящих соединений, пока вы hash. Все, что вам нужно сделать для хэша, асинхронный пароль - это вызов <code>bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => { /*Store hash in your db*/ });</code> <hr> Добавьте эту хеширующую функцию на свой сервер (мы уже определили переменные, используемые в этой функции для вас) и запишите ее на консоль, чтобы вы ее увидели! На этом этапе вы обычно сохраняете хэш в своей базе данных. Теперь, когда вам нужно выяснить, являются ли новые данные теми же данными, что и хеш, вы просто используете функцию сравнения <code>bcrypt.compare(myPlaintextPassword, hash, (err, res) => { /*res == true or false*/ });</code> , Добавьте это в свою существующую хеш-функцию (поскольку вам нужно дождаться завершения хеша до вызова функции сравнения) после того, как вы зарегистрируете завершенный хэш и запишите «res» на консоль в сравнении. Вы должны увидеть в консоли хэш, тогда напечатано «true»! Если вы измените «myPlaintextPassword» в функции сравнения на «someOtherPlaintextPassword», тогда он должен сказать false. <pre> bcrypt.hash ('passw0rd!', 13, (err, hash) => {
  console.log (хэш); //$2a$12$Y.PHPE15wR25qrrtgGkiYe2sXo98cjuMCG1YwSI5rJW1DSJp0gEYS
  bcrypt.compare ('passw0rd!', hash, (err, res) => {
      console.log (RES); //правда
  });
}); </pre> Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>

Hash and Compare Passwords Asynchronously

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-bcrypt/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/">GitHub</a> . Хеширование синхронно так же легко сделать, но может вызвать отставание, если использовать его на стороне сервера с высокой стоимостью или с хешированием, сделанным очень часто. Хеширование с помощью этого метода так же просто, как вызов <code>var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);</code> <hr> Добавьте этот метод хэширования к вашему коду, а затем запишите результат на консоль. Опять же, используемые переменные уже определены на сервере, поэтому вам не нужно их корректировать. Вы можете заметить, что даже если вы используете тот же пароль, что и в асинхронной функции, результат в консоли отличается - это связано с тем, что соль произвольно генерируется каждый раз, как видно из первых 22 символов в третьей строке хэша , Теперь, чтобы сравнить ввод пароля с новым хэшем синхронизации, вы должны использовать метод compareSync: <code>var result = bcrypt.compareSync(myPlaintextPassword, hash);</code> с результатом будет логическое значение true или false. Добавьте эту функцию и войдите в консоль в результате, чтобы увидеть ее работу. Представьте свою страницу, когда вы думаете, что у вас все в порядке. Если вы столкнулись с ошибками во время этих проблем , вы посмотрите на пример завершенного код можно <a href="https://gist.github.com/JosephLivengood/9a2698fb63e42d9d8b4b84235c08b4c4">здесь</a> .</p></section>

Hash and Compare Passwords Synchronously

<section id="description">
<p>Напомним, что этот проект строится на следующем стартовом проекте <a href="https://glitch.com/#!/import/github/freeCodeCamp/boilerplate-advancednode/">Glitch</a> или клонируется из <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/">GitHub</a> . Возвращаясь к разделу информационной безопасности, вы, возможно, помните, что хранение паролей с открытым текстом <em>никогда не бывает в</em> порядке. Теперь пришло время реализовать BCrypt для решения этой проблемы. <hr> Добавьте BCrypt в качестве зависимости и требуйте его на своем сервере. Вам нужно будет обрабатывать хэширование в двух ключевых областях: где вы обрабатываете регистрацию / сохранение новой учетной записи и когда вы проверяете, что пароль правильный для входа. В настоящее время на нашем пути регистрации вы вводите пароль пользователя в базу данных следующим образом: <code>password: req.body.password</code> . Простым способом реализации сохранения хеша является добавление следующего до вашей логики базы данных <code>var hash = bcrypt.hashSync(req.body.password, 12);</code> и заменяет <code>req.body.password</code> в базе данных, сохраняя только <code>password: hash</code> . Наконец, по нашей стратегии проверки подлинности мы проверяем следующее в нашем коде перед завершением процесса: <code>if (password !== user.password) { return done(null, false); }</code> . После внесения предыдущих изменений теперь <code>user.password</code> является хешем. Прежде чем вносить изменения в существующий код, обратите внимание на то, как оператор проверяет, не является ли пароль НЕ равным, а затем возвращает не аутентифицированный. Имея это в виду, ваш код может выглядеть следующим образом, чтобы правильно проверить введенный пароль против хэша: <code>if (!bcrypt.compareSync(password, user.password)) { return done(null, false); }</code> Это все, что нужно для реализации одной из самых важных функций безопасности при хранении паролей! Представьте свою страницу, когда вы думаете, что у вас все в порядке.</p></section>