Frontend basics: January 2018

Sunday, January 28, 2018

Подключение по SSH без ввода пароля

Проблема

Каждый раз приходится вводить логин и пароль при подключении к серверу по SSH?

В этой статье описан процесс настройки подключения без ввода пароля.

Исследование

В интернете есть много разных статей по этой теме. Остаётся найти верную информацию, и в дальнейшем использовать

Немного о SSH: https://ru.wikipedia.org/wiki/SSH
Статья на Хабре: https://habrahabr.ru/post/331348/#t6
Хорошая статья: Генерация открытого SSH ключа
Лучшая статья: https://www.ssh.com/ssh/copy-id

Создание ключа

Мой сервер находится на хостинге HTS.
На своем компьютере создаём для него ключ. Вводим команду в консоле:

ssh-keygen -t rsa

Даём ключу название hts_rsa. Будет сгенерировано два файла, которые находятся в папке .ssh. Чтобы посмотреть эти файлы, выполните команду:

> cd ~
> ls -l .ssh/hts*

Вывод выглядит примерно так:

hts_rsa
hts_rsa.pub

Копируем ключ на сервер HTS:

> ssh-copy-id -i ~/.ssh/hts_rsa.pub login@host

Подключаемся к серверу с помощью нашего ключа:

> ssh -i ~/.ssh/hts_rsa login@host

Итого

У меня есть папка scripts, куда я добавляю новый скрипт hts-connect.sh. Теперь я подключаюсь к своему серверу, выполнив простую команду:

> ~/scripts/hts-connect.sh

Автоматическая загрузка сайта на хостинг

upd 07.11.2021: теперь для проектов используется инструмент для автоматизации github action:
https://github.com/features/actions
FTP Deploy:
https://github.com/SamKirkland/FTP-Deploy-Action

Проблема

Каждый раз при изменении сайта мне приходится копировать изменения на хостинг. Для этого я выполняю такие действия:

открываю FTP клиент;
подключаюсь к серверу;
удаляю файлы на сервере;
копирую новые файлы на сервер;
отключаюсь и закрываю FTP клиент.

В данном посте я хочу автоматизировать эти действия.

Исследование

Единственное что мне было неизвестно: как выполнить команду на удаленном сервере.

Ответ по ссылке:
https://stackoverflow.com/a/7363641/1775459

Написание скрипта

Скрипт оказался маленьким. Это хорошо:

#!/bin/bash

# Скрипт выкладывает данные на сервак

LOGIN="тут ваш логин"
HOST="тут имя вашего сервера"

scp -r ./dist $LOGIN@$HOST:~/tmpdir

ssh $LOGIN@$HOST 'bash -s' <<'ENDSSH'
# эти команды выполнятся на вашем удаленном сервере
rm -rf yourwebsite
mv tmpdir yourwebsite
ENDSSH

Некоторые пояснения к скрипту:

Команда scp копирует папку dist на сервер в соответствующую папку. Папка dist - это папка, в которой находятся файлы сайта. Если файлы вашего сайта находятся в другой папке, необходимо указать именно ее.
Новые файлы на сервере копируются сначала в новую папку tmpdir. Это временная папка.
Старые файлы полностью удаляются, а на их место перемещается все содержимое временной папки.

Итого

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

Wednesday, January 17, 2018

Виджет для авторизации ВКонтакте

Проблема

Есть потребность вести учет пользователей на своем сайте, но нет желания тратить много усилий на создание авторизации на сервере?

Разберемся, как добавить на сайт виджет авторизации ВКонтакте.

Исследование

Первым делом прочитать документацию:

https://vk.com/dev/Auth

Безуспешная попытка №1

Создаю на сайте ВКонтакте новое приложение и прописываю настройки:

Затем создаю страницу и тестирую её на локальном компьютере по адресу http://localhost:3000/:

<!DOCTYPE html>
<html>
<head>
<title>Виджет для авторизации ВКонтакте</title>
<script src="https://vk.com/js/api/openapi.js?151" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// здесь использовать ID вашего приложения
VK.init({
apiId: 6334072
});
</script>
<div id="vk_auth"></div>
<script type="text/javascript">
VK.Widgets.Auth('vk_auth', {});
</script>
</body>
</html>

Не работает.
Пишу в службу поддержки ВК.
Жду...

Отвечают:

Успешная попытка №2

Коллеги подсказали, а поисковик подтвердил, что ВК работает только с портом 80: https://ru.stackoverflow.com/a/612222

Обновляю настройки приложения:

Настраиваю локальный сайт на 80 порт.
Работает.

Кодинг

Теперь, когда все заработало, я добавляю кнопку "Поприветствовать", которая будет выполнять функцию приветствия для авторизованного пользователя.

Делаю самую простую обработку кнопки и запрос к Open API ВКонтакте.

На сайте ВК создаю еще одно приложение id, которое используется на сайте.

Выкладываю сайт на Github Pages. При выходе из аккаунта появляется ошибка:

Github Pages не разрешает встраивание iframe, поэтому сайт приходится выложить на другой хостинг, на котором установлен LAMP, и прописать в .htaccess файле следующий код:

<IfModule mod_headers.c>
Header set X-Frame-Options "ALLOW-FROM https://vk.com/"
</IfModule>

Посмотреть сайт можно здесь: ~~http://vkauth.vadimcpp.ru~~

Посмотреть исходники можно здесь: https://github.com/VadimCpp/webdev2018vkauth

Итого

Минусы

Документация ВКонтакте оставляет желать лучшего. Помощь от службы поддержки идет долго. Пост занял много времени. Виджет глючит на мобильных устройствах.

Плюсы

Нет

Вывод

На написание поста ушло около 6 часов. Есть проблемы в работе виджета. Использовать виджет авторизации на своем сайте － никогда.

Следующие статьи

В следующем посте я расскажу, как реализовать вход на сайт с помощью Open API ВКонтакте без использования виджета авторизации.