Блоги: заметки с тегом проекти

Как я делал бота для Facebook workplace

Bohdan Stefaniuk — Tue, 26 Nov 2019 19:22:26 +0500

Дали мне задачу: написать бота для мессенджера workplace, с помощью которого можно получать уведомления из нашей CRM и управлять разными вещами. Расскажу о разных интересных вещах с которыми я столкнулся. Бота писал с помощью ASP.NET Core Web API.

Вебхуки

Для того чтобы бот мог обрабатывать запросы и сообщения от Facebook нам надо настроить вебхуки. Webhook — механизм оповещения системы о событиях. Для того чтобы Facebook принял наш хук, он должен обрабатывать как GET так и POST запросы.

Подробнее о Webhook в официальной документации

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

Показать код метода-обработчика GET запроса

public IActionResult Receive( [FromQuery(Name = "hub.mode")] string mode, 
    [FromQuery(Name = "hub.challenge")] string challenge, 
    [FromQuery(Name = "hub.verify_token")] string verifyToken)
{ 
   if (string.IsNullOrEmpty(verifyToken)) { 
       return Unauthorized(); 
    }  
    if (verifyToken.Equals(FacebookEnvironment.FacebookVToken)) { 
        return Ok(challenge); 
    } 
    return Unauthorized(); 
}

В качестве verify_token используется токен, который мы указали при регистрации нашего хука.

Показать код метода-обработчика POST запроса

public async Task<IActionResult> Receive([FromBody]FbResponse response = null)
{
    if (response is null) {
        return BadRequest();
    }

    if (response.Object != "page") {
        return Ok();
    }

    foreach (var entry in response.Entries) {
        foreach (var message in entry.Messaging) {
            await PrepareMessageAsync(message);
        }
    }
    return Ok("EVENT_RECEIVED");
}

Авторизация запросов Facebook

Для авторизации Facebook использует специальный http заголовок (X-Hub-Signature), в нем он передает некую сигнатуру с помощью которой мы можем авторизовать запрос. Для того чтобы добавить такую функциональность в наш контроллер, добавим фильтр.

Пример кода, для проверки подписи

private const string Sha1Prefix = "sha1=";

public static bool Validate(string signature, string contentString) {
    if (!signature.StartsWith(Sha1Prefix, StringComparison.OrdinalIgnoreCase)) {
        return false;
    }
    var secret = Encoding.ASCII.GetBytes(FacebookEnvironment.AppSecret);
    var signatureWithoutPrefix = signature.Substring(Sha1Prefix.Length);
    var content = Encoding.ASCII.GetBytes(contentString);
    return GetIsHashValid(secret, signatureWithoutPrefix, content);
}

private static bool GetIsHashValid(byte[] secret, string signature, byte[] content) {
    using var hmac = new HMACSHA1(secret);
    var hash = hmac.ComputeHash(content);
    var hashString = ToHexString(hash);
    return hashString.Equals(signature);
}

private static string ToHexString(IReadOnlyCollection<byte> bytes)
{
    var builder = new StringBuilder(bytes.Count * 2);
    foreach (var b in bytes)
    {
        builder.AppendFormat("{0:x2}", b);
    }

    return builder.ToString();
}

Тестирование бота

Как установить letsencrypt сертификат для IIS. Если же вы используете связку в виде ubuntu и nginx вам подойдет эта инструкция.

Для тестирования нужно развернуть бот на сервере, который смотрит в мир. Также необходимо чтобы у сервера было доменное имя и валидный SSL сертификат. В моем случае, в качестве сервера выступала машина на винде, так как другой внутри нашей сети не было. Как мне показалось захостить приложение написанное на .NET Core намного проще под Ubuntu + nginx нежели под Windows + IIS. В качестве поставщика сертификатов выбрал letsencrypt, так как они предоставляют бесплатный сертификат на 3 месяца, с возможностью дальнейшего обновления.

Эгея Power-Ups

Bohdan Stefaniuk — Mon, 25 Nov 2019 19:30:51 +0500

Bohdan Stefaniuk:

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

Список улучшений

Кнопка «подробнее» или кат внутри заметок
Заметки на полях
Хайлайты
Мини галерея

Кнопка «подробнее» или кат

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

Пометить текст, который будет выступать в качестве кнопки: .cut-button Название кнопки.
Следующим элементов разместить блок div с классом cut-content и в него поместить нужный контент для скрытия.

Как это выглядит в коде:

.cut-button Два лучших вопроса для собеседования
<div class="cut-content">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как это работает

Два лучших вопроса для собеседования

Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?

Стилизация в виде карточке

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

Как выглядит в коде:

<div class="highlight">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как работает

Заметки на полях

Блог с реализацией заметок: http://mopsicus.ru.

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

Как выглядит в коде:

.note Блог с реализацией заметок:  ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).
.note-md Блог с реализацией заметок: ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).

Как выглядит на мобиле:

Во всю ширину экрана.

Обтекаемый текст.

Мини галерея
Можно вывести несколько изображений в ряд. Пока что это реализовано тольк для 3 и 4 картинок. В будущем планирую добавить возможность открывать изображение на весь экран.

Как выглядит в коде:

<div class="card-gallery card-gallery-4">
    <!-- Список ссылок на изображения -->
</div>

<div class="card-gallery card-gallery-3">
    <!-- Список ссылок на изображения -->
</div>

Как выглядит на страницу

Где скачать?

Все исходники выложил на github. Там же вы найдете инструкцию по установке.

PS

Если у вас есть предложения, оставляйте их в комментариях, а лучше в issue на github-е. Как будет время, займусь реализацией предложений.

Первый проект

Bohdan Stefaniuk — Thu, 27 Jun 2019 12:53:18 +0500

Bohdan Stefaniuk:

Нашел в старой переписке скриншоты игры, которую я делал когда только изучал программирование на C#. Игру делал на Unity в сеттинге сталкера. Дальше одной локации и простенького управления не зашло. Жаль что видео не сохранились.

Это был 2014 год.

Также пробовал моделировать в 3ds Max.