(Вероятно) Наиболее полное руководство по веб-разработке для новичков

Или полный стек для людей, которые ничего не знают о полном стеке

Мы собираемся создать полнофункциональное веб-приложение, работающее на вашем локальном сервере.

Что это обозначает?

Это означает, что у вас будет BackEnd (сервер) и FrontEnd (клиент), и они будут подключены. В более практическом плане это означает, что у вас будет веб-сайт, способный хранить данные об отдельных пользователях и отображать различные данные в соответствии с запросом пользователя. Представьте себе очень, очень (очень) простую версию Facebook.

В качестве сервера мы будем использовать node.js и express, а клиент будет работать с механизмом шаблонов EJS. У нас будет база данных mysql и вход через Google Authentication. Наконец, мы воспользуемся Javascript и Query, чтобы заставить взаимодействовать внешний и внутренний интерфейсы.

Кто я?

Не так давно я был точно таким же, как вы, и понятия не имел о веб-разработчиках. Большинство гидов предполагают уровень знаний, которого у вас нет при обучении в первый раз, поэтому я здесь, чтобы немного спуститься по лестнице позади себя и провести вас через все это за руку.

Предостережения

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

Объем

Веб-приложения размещаются на сервере - «мозге». Этот сервер может быть на вашем собственном компьютере, в дата-центре Amazon или где-то еще. Вы заметите, что в этом руководстве я использую localhost, то есть я использую свой собственный компьютер. Таким образом, это веб-приложение не подключено к Интернету, оно существует только в пределах досягаемости моего локального сервера, то есть моего компьютера. Мы называем это разработкой: преобразование сервера в сетевой хост (например, AWS) приведет к производству. Навыки веб-разработчиков изучаются в процессе разработки, поэтому мы не рассматриваем здесь производство.

Это руководство предназначено для пользователей Mac. Это также должно быть полезно для пользователей Windows, но, вероятно, вам придется выполнить дополнительные действия в Google, в частности, для настройки инструментов.

Репозиторий кода

Вот ссылка на финальную версию этого проекта - вы можете скачать финальную версию всех файлов здесь

СОДЕРЖАНИЕ

1. Введение - Инструменты

2. Стройте мозг: сервер

2.1 Установка

2.2 Первые строки кода

3. Создайте мозг: файл routes.js

3.1 Развитие мозга: понимание

4. Учимся улыбаться: соединяем мозг с лицом с помощью routes.js

5. Использование аутентификации Google для входа.

6. Память: создание базы данных

7. Обучение запоминанию: передача данных в базу данных.

8. Создание вашего приложения

8.1 Просмотр профиля и вход

8.2 Редактировать профиль

8.3 Выйти

9. Красивое лицо: как все должно выглядеть

10. Приложение: Дополнительная литература и ресурсы

1. Введение

Инструменты

Код Visual Studio

Если у вас нет VS Code, скачайте сейчас. Это лучший редактор для написания кода.

Терминал

Это терминал, также известный как консоль. Если вы не использовали его раньше, это может быть страшное место. И это. Но это также очень удобно, и как только вы выучите всего несколько команд, вы сможете плавно перемещаться по нему.

Если вы работаете в Windows, вам придется скачать git bash

Https://gitforwindows.org

Вы можете использовать ls, чтобы просмотреть "список" содержимого папки, к которой вы только что перешли.

Git

Я широко использовал Git и Github для этого проекта. Если вы не хотите, он вам не понадобится, но именно там хранится весь мой код, и вы можете найти его окончательную версию. Для новичков важно хотя бы знать о Git / Github.

2. СОЗДАЙТЕ МОЗГ: СЕРВЕР

Начало настройки

Факт жизни кодирования заключается в том, что загрузка и установка инструментов, необходимых для выполнения кода, так же сложна, как и любая реальная проблема кодирования, с которой вы столкнетесь позже. Самое неприятное в том, что когда вы загружаете эти вещи, вы обязательно новичок и понятия не имеете, что делаете. Несмотря на то, что это хорошо вооружает вас важнейшим подходом Google It к решению проблем кодирования, может быть сложно начать работу, поэтому я постараюсь сделать это настолько простым, насколько смогу.

2.1 Установка

Местоположение: Терминал - ›Я собираюсь использовать эти флаги" местоположения "повсюду, чтобы помочь вам ориентироваться в том, в каком инструменте или файле вы должны находиться

Node.js - самый важный инструмент

Обратите внимание, что список ниже является кратким изложением этого руководства *

  1. Загрузите установщик node.js (Mac или Windows) здесь.
  2. Убедитесь, что он установлен, набрав which node в терминале, затем введите node --version - вы должны увидеть что-то вроде следующего
$which node
/usr/bin/node
$node --version
v12.15.0

* Если эти шаги не помогли, я также нашел это руководство в истории чата WhatsApp с другом, который помог мне начать все это. Наконец, если ничего не получается, вы можете попробовать официальную установку узла.

Вам не нужно точно знать, что такое узел или что он делает, но именно он позволяет запускать ваш код javascript, лежащий в основе «мозга» в приведенной выше схеме. После установки узла вам необходимо перейти к папке в терминале. Например, вы можете сделать что-то вроде следующего:

Перейти на рабочий стол

cd Desktop

Создайте новую папку на рабочем столе (вы также можете легко сделать это стандартным способом и щелкнуть правой кнопкой мыши, но это хорошо, чтобы получить базовые знания в терминале, поскольку мы будем часто его использовать)

mkdir WebDev

Перейдите в эту папку (очевидно, вы можете называть ее как хотите)

cd WebDev

Затем инициализируйте узел

npm init

Вот как должно выглядеть вышесказанное для вас. После нажатия Enter в npm init просто продолжайте нажимать Enter - это означает, что вы принимаете параметры по умолчанию для своего приложения узла, и это нормально.

Для получения дополнительной помощи по настройке сервера: прочтите руководство ниже

Теперь нам нужно установить остальные инструменты (пакеты), которые мы собираемся использовать: скопируйте и вставьте все эти команды установки за один раз в свой терминал (всегда в одной папке - WebDev)

npm install express 
npm install google-auth-library 
npm install request
npm install mysql                                                 npm install ejs 
npm install body-parser

В сторону: для хорошего объяснения узла см. первые 10 минут этого видео

2.2 ПЕРВЫЕ СТРОКИ КОДА

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

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

Давайте создадим новый файл в коде VS и назовем его server.js - и снова (и всегда) просто убедитесь, что вы находитесь в папке WebDev, которую вы создали выше.

Местоположение: server.js

server.js

(js означает, что это файл javascript; мы будем часто использовать javascript)

Комментарии в javascript:

// Two forward slashes ("//") creates comments in javascript

Для начала определите несколько переменных

Что тут происходит?

Поначалу это трудно понять, но в основном вы говорите, что нам нужен инструмент под названием express, и когда мы напишем express позже в этом файле, это инструмент, о котором мы говорим - который вы действительно можете увидеть в следующей строке, когда мы определяем наше приложение как express (). Затем мы устанавливаем port - я думаю об этом как о почтовом ящике; здесь мы размещаем наш сервер (значение по умолчанию - 80). И тогда path, как указано выше, это просто еще один инструмент, который мы будем использовать.

Код для запуска сервера

Не волнуйтесь, если у вас пока нет javascript. Когда вы только начинаете, это выглядит неаккуратно. Но даже если вы многого не понимаете, я бы посоветовал вам не копировать и вставлять - удивительно, сколько еще вы узнаете, написав код самостоятельно.

Местоположение: терминал

Запустим сервер! Мы используем команду node и имя только что созданного файлового сервера.

node server.js

Хорошо, если вы дошли до этого места, значит, вы создали сервер на своем компьютере! Следующим закономерным вопросом может быть «что такое сервер?».

Что ж, сервер будет в основном мозгом вашего сайта. Клиент или FrontEnd может считаться лицом вашего сайта. Мозг (сервер) отправляет эмоции (данные) лицу (клиенту), которое затем улыбается или хмурится. Самые простые клиенты не являются динамическими, поэтому серверы не нужны - они никогда не меняются. Они основаны на файлах HTML. Однако, поскольку мы делаем нашу страницу динамической, мы собираемся использовать EJS. EJS - это шаблонизатор, один из простых способов создания динамических веб-страниц (или «лиц»). Возможно, вы слышали о React или Vue и т. Д .; они достигают одного и того же, но работают по-разному и выходят за рамки нашей компетенции.

Местоположение: homepage.html

Вернувшись в редактор Vs Code, откройте новый файл с именем homepage.html и сохраните его в той же папке, что и ваш сервер. Итак, если вы обратили внимание на предыдущий абзац, то вы знаете, что создание файла HTML означает, что мы создаем статический веб-сайт, что вредит всей цели.

На данный момент все в порядке, мы просто собираемся сначала запустить эту страницу в браузере, а затем поработать над тем, чтобы сделать ее динамической. Итак, первое, что вам нужно сделать, это добавить базовый HTML-код.

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

Сделаем ставку на акции

Итак, у нас есть два разных элемента нашего веб-приложения; сначала мы запустили сервер - наш BackEnd, а затем мы написали простой html-документ, который является началом нашего FrontEnd.

Теперь мы хотим соединить два - мы хотим разместить страницу html на сервере. Это не повлияет на внешний вид, но изменит место загрузки файла . Если вы посмотрите на адресную строку своей html-страницы в браузере, она просто покажет вам путь к файлу, что не очень впечатляет. Что мы собираемся сделать, так это поменять местами это так, чтобы данные вызывались с сервера, что и происходит в реальном Интернете.

Поскольку мы используем локальный сервер, мы будем использовать localhost. Но если вы использовали сервер Amazon для размещения реального веб-сайта в Интернете, принципы точно такие же.

3. СОЗДАЙТЕ МОЗГ: ФАЙЛ ROUTES.JS

Location routes.js

Вернитесь в VS Code и создайте новый файл с именем routes.js, запишите код, который вы видите ниже, в этот новый файл.

Вы можете написать все, что вам нравится, где находится текст, не стесняйтесь экспериментировать с ним - часто бывает забавно написать свое имя. Это также хороший способ понять, как все эти механизмы взаимодействуют.

Местоположение: server.js

А теперь вернемся к серверу - в настоящий момент наш файл маршрутов застрял, отвязан в глуши вашего проекта. Нам нужно убедиться, что ваш сервер знает, где он находится. Это всего две строки (в основном вы сообщаете серверу, где находится файл routes.js, а затем говорите ему использовать файл routes.js)

Местоположение: терминал

Вернитесь к терминалу и снова запустите приложение:

(на случай, если он все еще работает с прошлого раза, используйте ctrl + c, чтобы завершить последний сеанс)

node server.js

Теперь откройте новое окно в веб-браузере и введите следующее:

http://localhost:80/

Если повезет, вот что вы увидите!

3.1 РАЗВИТИЕ МОЗГА: РАЗВИТИЕ ПОНИМАНИЯ

Возможность пропуска: давайте немного разберемся

Не стесняйтесь пропустить эту часть, но если вы не очень понимаете, что происходит, вам следует сделать еще несколько запросов к серверу. Если вы до этого момента копировали и вставляли, я бы посоветовал вам вместо этого читать и печатать - просто удивительно, как много вы узнаете, набирая дословно чужой код.

Хорошо, сначала выключим сервер: ctrl + c

Location routes.js

Хорошо, давайте вернемся к папке маршрутов - здесь мы получаем запросы. Вы знаете, как использовать «/» для перехода к различным частям веб-сайта? Это в основном то, что мы создаем в папке маршрутов с этими запросами на получение.

Добавьте это непосредственно под первым запросом на получение (строка 7 в фрагменте кода выше)

app.get('/lyrics', (request, response)=>{
        response.send("And that smell of sweet perfume comes drifting through The cool night air like Shalimar")
    });

Сохраните это, затем снова запустите свой сервер (узел server.js). Вернитесь в свой браузер и введите в адресную строку

http://localhost:80/lyrics

Вы должны увидеть текст песни Madame George. И если вы сделаете это снова, остановите сервер, добавьте следующий код в routes.js, сохраните изменения и перезапустите сервер.

app.get('/name', (request, response)=>{
response.send('hey [put your name here], are you getting the hang of this yet?')
})

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

4. УЧИТЬСЯ УЛЫБКЕ: СОЕДИНЕНИЕ МОЗГА К ЛИЦУ С помощью ROUTES.JS

Вернемся к повествованию: использование сервера для отображения нашего html файла

Итак, все еще в файле маршрутов, мы собираемся добавить новый запрос на получение

Location routes.js

Не копируйте и вставляйте это просто, как видите, путь к файлу - это то место, где html-файл хранится на моем компьютере. Вам необходимо изменить этот путь к своему компьютеру - см. Ниже.

Чтобы получить путь к файлу, щелкните правой кнопкой мыши (в Finder или Vs Code и скопируйте путь)

Как только вы это сделаете, мы снова станем танцевать наш маленький серверный танец. Убедитесь, что он остановлен (ctrl + c в терминале), сохраните изменения в routes.js, запустите сервер (node server.js) и затем вернитесь в свой браузер. На этот раз введите это в адресную строку

http://localhost/home

И вы должны увидеть предыдущую html-страницу. На этот раз вы не просто загружаете файл, как в Word или Excel, но он поступает с вашего сервера через маршрутизатор. Разница невелика, но теперь, когда этот html-файл размещен на сервере, все, что вам нужно сделать, это поменять местный сервер на онлайн-сервер, и ваша маленькая html-страница уже может быть онлайн!

И чтобы было по-настоящему ясно, давайте добавим контент в HTML-файл.

Вам не обязательно перезапускать сервер, чтобы увидеть эти изменения, просто убедитесь, что HTML-код сохранен, и перезагрузите веб-страницу.

5. ИСПОЛЬЗОВАНИЕ АУТЕНТИФИКАЦИИ GOOGLE ДЛЯ ВОЙТИ

Это не является строго частью основного скелета полнофункционального веб-приложения, но оно добавляет ему немного профессионализма, и если вы хотите создать что-то, что имеет пользователей и пароли, вам нужна безопасность профессионального уровня.

К счастью, это на самом деле довольно просто сделать, в основном мы будем следовать руководству Google, чтобы сделать это. Кроме того, хотя этот видеоурок немного устарел, он довольно хорошо сделан и подходит для ленивого просмотра. Поскольку руководство Google довольно подробное, я не буду вдаваться в подробности этой части.

Шаг 1. Прочтите руководство Google

Https://developers.google.com/identity/sign-in/web/sign-in

Шаг 2. Создайте учетные данные

Шаг 3. Выберите веб-приложение

Добавьте имя и скопируйте / вставьте свой локальный хост в поле «Авторизованные источники JavaScript»:

http://localhost

Шаг 4. Перейдите на вкладку экрана согласия OAuth.

Шаг 5. Сделайте свое приложение внешним (хотя для наших целей это, вероятно, не имеет значения)

Шаг 6. Введите имя и свой адрес электронной почты.

Шаг 7. Нажмите «Добавить или удалить области» и добавьте адрес электронной почты и профиль пользователя.

Обязательно прокрутите вниз все флажки и нажмите «Обновить», затем «Сохранить и продолжить».

Снова перейдите к разделу "Тестовые пользователи"

Шаг 8: Вернуться к VS Code

Как указано в руководстве Google, нам нужно добавить на нашу страницу следующий код. Скопируйте свой идентификатор клиента отсюда

Местоположение: homepage.html

и вставьте это сюда

Добавьте кнопку входа, Google любезно предоставит вам код для этого

<div class=”g-signin2" data-onsuccess=”onSignIn”></div>

В совокупности у вас должно получиться что-то вроде этого

Если вы перезапустите свой сервер (снова ctrl + c, а затем node server.js), ваш веб-сайт должен начать обретать форму!

6. ПАМЯТЬ: СОЗДАНИЕ БАЗЫ ДАННЫХ

Нам нужно создать «память». Это будет казаться немного абстрактным, и вы можете получить программное обеспечение, чтобы сделать вещи более конкретными, если хотите, но в конечном итоге я думаю, что это, вероятно, отвлекает от механизмов, поэтому мы будем придерживаться голого, абстрактного подхода.

Расположение: Терминал

РЕДАКТИРОВАТЬ: альтернативный (и, вероятно, более простой) способ установки mysql для Mac

  1. Установите homebrew (только для Mac - около пяти минут)
  2. Используйте homebrew для установки mysql:
brew install mysql

3. Затем выполните остальные шаги, как показано ниже.

brew install mysql-server
sudo mysql_secure_installation
mysql.server start

4. Запустите sql

mysql -u root -p

Введите пароль, который вы выбрали на шаге 3, когда вам будет предложено на шаге 4.

Прежде всего, установите mysql - вы можете следовать этому руководству по ссылке (также кажется, что это простой способ настроить). Эту часть написать немного сложнее, так как я установил ее на свой компьютер в течение многих лет и не могу точно вспомнить, как это сделать. Так что вместо этого я нашел то, что похоже на хороший ресурс. Если не работает, проверьте StackOverflow или Reddit (и прокомментируйте ниже, если найдете лучшее решение!)

sudo apt update
sudo apt install mysql-server
sudo mysql_secure_installation


Установите на Mac и откройте mysql с помощью терминала
В MacOS исполняемый файл Mysql находится в / usr / local / mysql / bin / mysql, и вы можете легко войти в него с помощью … stackoverflow.com



Чтобы запустить mysql, введите:

mysql -u root -p

Затем, когда будет предложено ввести пароль, напишите (обратите внимание, терминал не показывает набранные вами символы при вводе паролей, т. Е. Не показывает ** или что-то еще)

root

Небольшая заметка об SQL для тех, кто не знаком:

SQL - это «язык запросов», используемый в компаниях практически повсеместно. Это простой и в высшей степени логичный язык, который позволяет пользователю извлекать данные из базы данных. Базовый синтаксис следующий:

SELECT [variable_1], [variable_2]..., [variable_n]
FROM [database_name]
WHERE [variable_n] = [some condition];

(и, очевидно, вы нажимаете ENTER, чтобы запустить команду SQL)

Так, например

SELECT user_name, user_email
FROM full_stack_database
WHERE user_age = 29;

Создание нашей базы данных

show databases;

У меня есть множество других баз данных из других проектов и обучения / тестирования, но вы все равно должны увидеть одну или две базы данных по умолчанию.

Мы собираемся создать новый следующим образом:

CREATE DATABASE fullstack_db;

Очень просто

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

Сначала убедитесь, что мы используем только что созданную базу данных.

use fullstack_db;

… А затем создать таблицу в базе данных.

CREATE TABLE `user_profile` (
 `user_id` int(11) unsigned NOT NULL AUTO_INCREMENT,       `google_user_id`   varchar(50)   DEFAULT '', 
 `first_name`      varchar(50)   DEFAULT '', 
 `full_name`       varchar(50)   DEFAULT '',
 `email`           varchar(50)   DEFAULT '',
 `profile_picture` varchar(1000) DEFAULT '',
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Скопируйте и вставьте приведенное выше в mysql в своем терминале следующим образом:

Здесь вы определяете пустую таблицу - мне нравится думать об этом как о складе. Вам необходимо создать все полки на складе по точной спецификации, чтобы они соответствовали доставленным товарам и все подходило. В этом случае товар - это данные, а полки - поля (столбцы).

Давайте добавим вторую таблицу для пользовательского контента, который они будут добавлять.

CREATE TABLE `user_content` (
`content_id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `user_id` int(11) DEFAULT NULL,
  `content` varchar(500) DEFAULT NULL,
  `content_type` varchar(500) DEFAULT NULL,
  `content_desc` varchar(500) DEFAULT NULL,
  `content_position` int(11) DEFAULT NULL,
  PRIMARY KEY (`content_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--

Чтобы выйти из фреймворка mysql, введите (и, если вы ошиблись, просто DROP TABLE user_profile; и начните снова - просто)

exit

Подведем итоги

У нас есть пустая база данных, то есть нам нужно куда-то поместить данные, но теперь нам нужно выяснить, откуда эти данные, а затем нам нужен способ действительно передать эти данные в база данных. Сначала давайте получим данные, а потом мы сможем вернуться к их вставке в базу данных.

7. УЧИТЕСЬ ПОМНИТЬ: ЗАПИСАНИЕ ДАННЫХ В БАЗУ ДАННЫХ

7.1 Получение данных

Какие данные мы собираемся использовать? Итак, в таблице, которую мы создали выше, у нас есть поле user_id, поле name и поле profile_picture. Давайте заполним эти поля.

Местоположение: homepage.html

И для ясности: здесь я буквально следую руководству Google и копирую / вставляю их код. Этот код написан на javascript, поэтому мы должны использовать теги script, чтобы сообщить браузеру, что это javascript, как вы можете видеть во фрагменте кода ниже.

После того, как вы скопировали и сохранили это, обновите страницу в браузере (это не изменение на стороне сервера, поэтому перезапускать сервер не нужно). Теперь откройте инструменты разработчика (Safari: option + command + c; Chrome: option + command + j), и после того, как вы нажмете «Войти», вы должны увидеть информацию о вашей учетной записи Google, напечатанную в консоли!

Чтобы увидеть, что здесь происходит, давайте немного поиграемся с печатью в консоли. Добавьте следующий код в строку 22 файла homepage.html.

console.log("This is a message BEFORE extracting my Google data")

и добавьте это в строку 30

console.log("And this is a message AFTER extracting my Google data")

и добавьте это где угодно между двумя тегами ‹script›

console.log('and here's a message about nothing')

Теперь, снова то же самое, сохраните файл html и обновите страницу

Теперь должно быть ясно, что console.log - это просто оператор печати, и если вы поместите его между тегом ‹script›, вы можете распечатать все, что захотите. в консоли браузера.

Местоположение: config.js

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

Проще говоря, файл конфигурации настраивает подключение к базе данных. Вы можете видеть, что в строках 6–9 мы помещаем детали созданной ранее базы данных. Это довольно технический вопрос, и вам не обязательно разбираться в деталях происходящего.

Местоположение: server.js

Нам также нужно добавить несколько строк в наш файл сервера, чтобы все соединения, которые мы собираемся создать, действительно работали.

8. СОЗДАНИЕ ПРИЛОЖЕНИЯ

Мы сделаем это в трех разделах. Я создал визуальную схему для каждого раздела, чтобы помочь получить общее представление о том, что происходит с кодом.

  1. Просмотреть профиль и войти в систему
  2. Редактировать профиль
  3. выход

8.1. Просмотрите профиль и войдите в систему

Щелкните здесь, чтобы увидеть полную диаграмму

Местоположение: homepage.html

Теперь, когда мы вышли на финишную прямую, мы собираемся немного вернуться к предыдущей работе, которую мы проделали, чтобы сделать вещи немного более профессиональными. Раньше все сводилось к тому, чтобы что-то работало, теперь речь идет о предоставлении чего-то, что очень похоже на настоящее веб-приложение.

Во-первых, давайте упростим главную страницу. Позже мы добавим CSS, так что не волнуйтесь, если сейчас это выглядит дерьмово.

Приведенный ниже код создаст эту страницу. Обратите внимание на два момента: мы добавили jQuery и Bootstrap. Загрузочная программа используется только для форматирования используемых кнопок, jQuery будет использоваться позже, когда мы добавим Javascript на эту страницу.

Здесь мы добавляем Javascript на главную страницу. Вы можете видеть, что приведенный ниже код соответствует тому, что находится на диаграмме в начале этого раздела. Давайте углубимся в это:

GetCookieVlaue

Мы определяем эту функцию, которую используем позже, чтобы получить значение файла cookie, который был сохранен в браузере. Хороший пример использования этого - блок кода состояния сеанса, который проверяет, есть ли какое-либо значение, связанное с файлом cookie USER_SESSION_TOKEN.

onSignIn

Мы видели это раньше, за исключением того, что здесь он немного более индустриализирован. Эта функция дает нам идентификатор пользователя google (id_token) и ОТПРАВЛЯЕТ его в BackEnd. Эта функция запускается SignInButton, который находится во фрагменте кода выше.

ProfileRoute

Это запрос POST - он отправляет (отправляет) файл cookie из браузера в BackEnd, если этот токен подтвержден как действительный, мы перенаправляемся на страницу профиля пользователя через код:

window.location.href = ProfileUrl

Выйти

Мы вернемся к этому позже.

Aside: What is a token?

Токен - это рабочая лошадка для аутентификации. Думайте об этом как о проставленном билете: если у вас есть билет, и он действителен (т. Е. Не просрочен и предназначен для правильного поезда / поездки и т. Д.), Вы можете получить доступ. Эта статья дает хороший обзор. Как вы увидите ниже, токен отскакивает от Google (в данном случае), сервера / бэкэнда и браузера / внешнего интерфейса.

Хорошо, теперь перейдем к BackEnd.

Местоположение: routes.js

Весь этот FrontEnd javascript бесполезен, если он не может разговаривать с чем-то в BackEnd. Код хорошо прокомментирован, поэтому в сочетании с диаграммой, которую я нарисовал выше, вы должны иметь возможность понять, что происходит, но позвольте мне обратить ваше внимание на несколько важных моментов.

Google auth

Код между строками 5–36 в основном взят непосредственно из руководств Google. Я добавил несколько комментариев и код, необходимый для получения сведений о пользователе из его токена. Как вы можете видеть, эта информация хранится в «полезной нагрузке».

/ Главная

Это маршрут, который позволяет вам ввести localhost: 80 / Home, и вы действительно что-то увидите. Как видите, механика довольно проста. Если этот запрос отправляется в BackEnd, он находит homepage_file и отправляет его обратно в ответе. Другими словами, он сообщает браузеру отобразить файл.

/ Войти

Вы можете видеть в строке 57, что мы получаем запрос на вход в систему, который был отправлен через FrontEnd. Косая черта, которую вы видите здесь, - это то, что находится в URL-адресе браузера.

В основном здесь происходит то, что мы используем функцию verify, которую мы определили выше. Это говорит нам, действителен ли токен, который был отправлен из FrontEnd. Если он действительно действителен, мы в первую очередь устанавливаем этот токен как файл cookie в браузере. Это важно, потому что с этого момента мы будем использовать этот файл cookie практически для всего остального, что мы делаем.

Затем мы снова получаем все пользовательские данные из функции verify. Затем мы проверяем, существует ли кто-нибудь с этим google_user_id в базе данных user_profile. Если они это делают, мы просто отправляем ответ, сообщающий FrontEnd, что пользователь уже существует, если нет, то мы вставляем все его данные в базу данных user_profile. У каждого пользователя есть одна строка, идентифицируемая их уникальным идентификатором пользователя Google, однако мы также используем номер строки для генерации идентификатора их приложения. Итак, первый идентификатор пользователя Google связан с пользователем приложения 1 и так далее.

/ ProfileRoute

Этот маршрут запускается после того, как пользователь нажимает кнопку Мой профиль. Как упоминалось выше, это выполняет функцию ProfileRoute на FrontEnd. Эта ссылка BackEnd сначала проверяет токен, отправленный функцией ProfileRoute. Затем он использует функцию verify, чтобы получить идентификатор пользователя в Google, а затем пользователи, которые в свою очередь находят идентификатор приложения пользователя.

A Note on IDs

В этом проекте мы используем два идентификатора. Идентификатор Google пользователя генерируется из id_token, который мы получаем, когда пользователь входит в систему с помощью входа в систему Google. Когда этот токен проверяется на BackEnd, частью его полезной нагрузки является идентификатор пользователя Google. Но лучше не отображать эти идентификаторы, вместо этого у пользователя (и его профиля) должен быть идентификатор приложения. Этот идентификатор генерируется, когда они впервые входят в систему - пользователь 1 является первым пользователем, выполнившим вход. Два идентификатора связаны в таблице user_profile, и мы используем этот факт в логике безопасности позже.

/ ProfileRoute [ctd…]

Как только соответствующий идентификатор пользователя приложения был найден, мы возвращаемся во FrontEnd для перенаправления. Как написано выше, если токен был успешно проверен, пользователь перенаправляется на ProfileUrl.

/ ProfilePage

Если вы прочитаете код для ProfileUrl, вы увидите, что в основном это три части: 1) localhost + 2) / ProfilePage + 3)? User_id =. У всех наших запросов будет первая часть; вторая часть идентифицирует соответствующий маршрут на BackEnd. Третья часть называется параметром - она ​​позволяет нам отправить идентификатор пользователя с запросом.

И снова вы можете сделать это вручную, просто введя этот URL-адрес в свой браузер. И действительно, именно так вы бы посмотрели на профиль своего друга: он отправляет вам свой идентификатор пользователя, и вы добавляете его в конец URL-адреса.

Как видно из кода, / ProfilePage использует user_id, найденный в запросе запроса, и использует его для поиска соответствующей строки в таблице user_profile. Затем он берет все данные из этой строки (имя, изображение профиля и т. Д.) И отправляет их вместе со страницей профиля:

response.render("ProfilePage.ejs,{...});

Note: What is EJS?

EJS - это «механизм шаблонов»: он создает файлы - шаблоны, которые очень похожи на обычный HTML-файл, за исключением некоторых частей, которые являются заполнителями, которые можно динамически обновлять и изменять. Это очень простая версия таких вещей, как реагирование, которые обычно используются в профессиональных настройках. Файл EJS «визуализируется» и может отображаться с массивом данных, как вы можете видеть в строках 143–146 выше. Эти отдельные фрагменты данных будут «вставлены» в соответствующие места на ProfilePage.

Также обратите внимание, что по умолчанию сервер будет искать ваши файлы EJS в папке под названием «views», поэтому обязательно следуйте этой структуре папок (вы можете увидеть мою структуру папок в моем репозитории git).

Местоположение: ProfilePage.ejs

Ниже находится файл ProfilePage.ejs. Для простоты я намеренно удалил стили CSS и некоторые функции Javascript - мы вернемся к этому позже. Что здесь нужно знать?

Обратите внимание, что в некоторых строках есть забавные теги%, например, в строке 16:

<%=data.name%>

Это «слот», о котором я упоминал выше. В этот слот помещаются данные, которые были отправлены из BackEnd по строкам 143–146. В данном случае имя пользователя.

Следует отметить еще несколько интересных моментов: мы определяем ту же функцию GetCookieFunction, что и раньше, и используем ее так же, как и раньше. Мы получаем идентификатор страницы профиля, который, как мы знаем, является синонимом идентификатора пользователя с кодом:

var urlParams = new URLSearchParams(window.location.search); var user_id = urlParams.get('user_id);

Наконец, мы делаем запрос на загрузку видеоконтента, связанного с этим идентификатором пользователя / профиля. Этот маршрут определен в строке 163 BackEnd выше.

8.2: Редактировать профиль

Местоположение: ProfilePage.ejs

Эта диаграмма суммирует основные моменты кода и описывается ниже кода.

Щелкните здесь, чтобы увидеть полную диаграмму

Все еще на странице профиля и все еще в разделе Javascript, напишите следующий код. Ниже я объясню, что он делает.

Маршрут владельца

Цель этого маршрута - проверить, принадлежит ли отображаемая страница пользователю. Мы делаем это, сравнивая две вещи: идентификатор страницы, который также является идентификатором пользователя и может быть найден в URL-адресе браузера.

Как и любой сайт социальной сети, любой может просмотреть любую страницу, просто изменив URL-адрес - на практике это позволяет пользователю отправить своему другу, который не является пользователем, ссылку на свою страницу. Это также означает, что любой пользователь может видеть страницу любого другого пользователя.

URL-адрес дает нам идентификатор страницы / пользователя. Затем мы хотим сравнить этот идентификатор с идентификатором пользователя, который вошел в систему (при условии, что он действительно вошел в систему). Как мы видели ранее, зарегистрированный статус пользователя управляется токеном Google, который мы сохранили как токен в маршруте входа. Взятые вместе, мы можем сравнить идентификатор пользователя просматриваемой страницы со связанным идентификатором Google ID вошедшего в систему пользователя. Если они совпадают, значит, «владелец» страницы просматривает страницу, и поэтому мы предоставляем им права редактирования в форме отображения окна «Добавить видео YouTube».

Маршрут добавления видео

Цель этого маршрута - дать пользователю возможность заполнить свою страницу контентом. В частности, в этом случае видео на YouTube (хотя на самом деле ничто не мешает пользователю разместить что-нибудь еще).

Механизм этого прост: мы извлекаем данные, отправленные пользователем в форме на FrontEnd, и отправляем эту «VideoLink» вместе с токеном и ProfileId. Затем VideoLink добавляется в таблицу user_content в строке, соответствующей ProfileId.

Однако особенности этого немного сложнее. Несмотря на безопасность, обеспечиваемую маршрутом Владелец (см. Выше), который гарантирует, что возможность редактировать страницу остается «скрытой», если только пользователь, если профиль «владелец», мы не хотим добавить секунду уровень безопасности путем двойной проверки того, что пользователь действительно является правильным владельцем страницы и что он имеет право отправлять данные POST в BackEnd для этого профиля. К счастью, логика этого точно такая же, как и в маршруте Владелец - мы сравниваем ProfileId с идентификатором Google, взятым из проверенного токена. Если сохраненный идентификатор Google, который соответствует ProfileId, совпадает с токеном Google Id, тогда пользователь владеет профилем и, следовательно, может его редактировать.

8.3. Выйти

Здесь у нас не будет много времени. Если вы поняли последние несколько разделов, это будет легко.

Щелкните здесь, чтобы увидеть полную диаграмму

Расположение: Homepage.html

Местоположение: routes.js

Основной процесс здесь заключается в том, что пользователь нажимает кнопку «Выход», которая отправляет запрос по маршруту Выход на BackEnd. Этот маршрут удаляет файл cookie USER_SESSION_TOKEN, хранящийся в браузере, что эффективно удаляет все права на «вход», которыми обладал пользователь. После этого мы возвращаемся к FrontEnd, который, в свою очередь, перенаправляет нас на маршрут LoggedOutPage на backend. Этот маршрут отображает файл EJS LoggedoutPage.

Расположение: LoggedOutPage.ejs

Эта страница на самом деле не нужна, поэтому мы просто быстро создадим файл в папке просмотров, как показано ниже:

Последний шаг: полировка с помощью CSS

В качестве последнего шага мы собираемся добавить CSS, чтобы добавить такие вещи, как фон, и разместить все объекты в нужных местах. CSS следует помещать в теги <style> в теле вашего html-кода. См. Стили для домашней страницы и профиля ниже.

Местоположение: Homepage.html

Расположение: ProfilePage.ejs

9. Красивое лицо: как все должно выглядеть

Вы можете скачать окончательную версию всего кода из моего репозитория Github здесь, также здесь перечислены отдельные файлы, если вам не комфортно с Git.

9. ПРИЛОЖЕНИЕ: ДОПОЛНИТЕЛЬНАЯ ЧТЕНИЕ И РЕСУРСЫ

Как я научился (хорошие руководства вы можете прочитать рядом с этим / после этого)

Настройка сервера

Ресурс, к которому я постоянно возвращаюсь, чтобы начать работу с сервером и делать простые запросы, - это этот пост из трех частей:



Создайте свой первый API с помощью Node.js и Express: подключите базу данных
В первом учебном пособии« Понимание RESTful API мы узнали, что такое архитектура REST и какие методы HTTP-запроса … code.tutsplus.com »



Это руководство по YouTube - хорошее руководство после прочтения вышеупомянутого поста.

Javascript и jQuery

Если вам удастся не заметить этого парня, это действительно отличный (и короткий!) Учебник о том, как работает jQuery.

Использование Google Войти

Документы Google: аутентификация токена идентификатора пользователя при входе в Google



Аутентифицироваться с внутренним сервером | Вход в Google для веб-сайтов
Если вы используете вход в Google с приложением или сайтом, который обменивается данными с внутренним сервером, вам может потребоваться указать… developers.google .com



Бутстрап

Это фреймворк для простого создания профессионально выглядящих веб-сайтов. Вы можете прочитать об этом подробнее здесь - у CodeAcademy также есть несколько хороших уроков по этому поводу.

SQL-инъекция (безопасность)

Короткое видео о том, как предотвратить взлом с помощью SQL-инъекций. ("Здесь тоже)

Хороший простой пример того, как работает sql-инъекция



SQL-инъекция
SQL-инъекция - это метод внедрения кода, который может разрушить вашу базу данных. SQL-инъекция - одна из самых распространенных… www.w3schools.com



Настройка и запуск вашего сайта в реальном Интернете выходит за рамки этого поста, но если вы все же продолжите размещать свой сайт на сервере (AWS, Digital Ocean и т. Д.), Вам почти наверняка понадобится ключ SSL. Мне потребовалось очень много времени, чтобы понять, как это получить, но как только я посмотрел это видео, мне стало очень ясно.