<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-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>