{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блоги: заметки с тегом проекти", "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": false, "_itunes_explicit": "no", "home_page_url": "https:\/\/blogengine.ru\/blogs\/tags\/proekti\/", "feed_url": "https:\/\/blogengine.ru\/blogs\/tags\/proekti\/json\/", "icon": false, "authors": [ { "name": "Илья Бирман", "url": "https:\/\/blogengine.ru\/blogs\/", "avatar": false } ], "items": [ { "id": "119851", "url": "https:\/\/stefaniuk.website\/all\/create-workplace-messenger-bot\/", "title": "Как я делал бота для Facebook workplace", "content_html": "

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

Вебхуки<\/h2>\n

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

Подробнее о Webhook в официальной документации<\/a><\/p>\n

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

Показать код метода-обработчика GET запроса<\/p>\n

public IActionResult Receive(\u2028[FromQuery(Name = "hub.mode")] string mode,\u2028\r\n    [FromQuery(Name = "hub.challenge")] string challenge,\u2028\r\n    [FromQuery(Name = "hub.verify_token")] string verifyToken)\r\n{\u2028\r\n   if (string.IsNullOrEmpty(verifyToken)) {\u2028\r\n       return Unauthorized();\u2028\r\n    }\u2028\u2028\r\n    if (verifyToken.Equals(FacebookEnvironment.FacebookVToken)) {\u2028\r\n        return Ok(challenge);\u2028\r\n    }\u2028\r\n    return Unauthorized();\u2028\r\n}<\/code><\/pre>
В качестве verify_token используется токен, который мы указали при регистрации нашего хука.<\/p>\n<\/div>
Показать код метода-обработчика POST запроса<\/p>\n
public async Task<IActionResult> Receive([FromBody]FbResponse response = null)\r\n{\r\n    if (response is null) {\r\n        return BadRequest();\r\n    }\r\n\r\n    if (response.Object != "page") {\r\n        return Ok();\r\n    }\r\n\r\n    foreach (var entry in response.Entries) {\r\n        foreach (var message in entry.Messaging) {\r\n            await PrepareMessageAsync(message);\r\n        }\r\n    }\r\n    return Ok("EVENT_RECEIVED");\r\n}<\/code><\/pre><\/div>
Авторизация запросов Facebook<\/h2>\n
Для авторизации Facebook использует специальный http заголовок (X-Hub-Signature), в нем он передает некую сигнатуру с помощью которой мы можем авторизовать запрос. Для того чтобы добавить такую функциональность в наш контроллер, добавим фильтр.<\/p>\n
Пример кода, для проверки подписи<\/p>\n
private const string Sha1Prefix = "sha1=";\r\n\r\npublic static bool Validate(string signature, string contentString) {\r\n    if (!signature.StartsWith(Sha1Prefix, StringComparison.OrdinalIgnoreCase)) {\r\n        return false;\r\n    }\r\n    var secret = Encoding.ASCII.GetBytes(FacebookEnvironment.AppSecret);\r\n    var signatureWithoutPrefix = signature.Substring(Sha1Prefix.Length);\r\n    var content = Encoding.ASCII.GetBytes(contentString);\r\n    return GetIsHashValid(secret, signatureWithoutPrefix, content);\r\n}\r\n\r\nprivate static bool GetIsHashValid(byte[] secret, string signature, byte[] content) {\r\n    using var hmac = new HMACSHA1(secret);\r\n    var hash = hmac.ComputeHash(content);\r\n    var hashString = ToHexString(hash);\r\n    return hashString.Equals(signature);\r\n}\r\n\r\nprivate static string ToHexString(IReadOnlyCollection<byte> bytes)\r\n{\r\n    var builder = new StringBuilder(bytes.Count * 2);\r\n    foreach (var b in bytes)\r\n    {\r\n        builder.AppendFormat("{0:x2}", b);\r\n    }\r\n\r\n    return builder.ToString();\r\n}<\/code><\/pre><\/div>
Тестирование бота<\/h2>\n
Как установить letsencrypt сертификат для IIS<\/a>. Если же вы используете связку в виде ubuntu и nginx вам подойдет эта инструкция<\/a>.<\/p>\n
Для тестирования нужно развернуть бот на сервере, который смотрит в мир. Также необходимо чтобы у сервера было доменное имя и валидный SSL сертификат. В моем случае, в качестве сервера выступала машина на винде, так как другой внутри нашей сети не было. Как мне показалось захостить приложение написанное на .NET Core намного проще под Ubuntu + nginx нежели под Windows + IIS. В качестве поставщика сертификатов выбрал letsencrypt, так как они предоставляют бесплатный сертификат на 3 месяца, с возможностью дальнейшего обновления.<\/p>\n",
            "date_published": "2019-11-26T19:22:26+05:00",
            "date_modified": "2023-06-03T05:26:31+05:00",
            "tags": [
                "asp.net core",
                "dotnet",
                "програмування",
                "проекти",
                "робота"
            ],
            "author": {
                "name": "Bohdan Stefaniuk",
                "url": "https:\/\/stefaniuk.website\/",
                "avatar": "https:\/\/stefaniuk.website\/pictures\/userpic\/userpic@2x.jpg?1565716580"
            },
            "_date_published_rfc2822": "Tue, 26 Nov 2019 19:22:26 +0500",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "119851",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": null,
                "og_images": []
            }
        },
        {
            "id": "119849",
            "url": "https:\/\/stefaniuk.website\/all\/e2-power-ups\/",
            "title": "Эгея Power-Ups",
            "content_html": "
Решил опубликовать несколько своих доработок, которые добавляют в движок новые функции. Вы можете их свободно использовать в любых ваших целях.<\/p>\n
Список улучшений<\/h2>\n
    \n
  1. Кнопка «подробнее» или кат внутри заметок<\/li>\n
  2. Заметки на полях<\/li>\n
  3. Хайлайты<\/li>\n
  4. Мини галерея<\/li>\n<\/ol>\n
    Кнопка «подробнее» или кат<\/h2>\n
    Когда пишешь статью и у тебя много исходников, удобно их скрыть под кат, чтобы они не увеличивали размер статьи не отвлекали от текста. Для этого добавил поддержку катов внутри заметок. Для этого нужно сделать 2 вещи:<\/p>\n
      \n
    1. Пометить текст, который будет выступать в качестве кнопки: .cut-button Название кнопки.<\/li>\n
    2. Следующим элементов разместить блок div с классом cut-content и в него поместить нужный контент для скрытия.<\/li>\n<\/ol>\n
      Как это выглядит в коде:<\/p>\n
      .cut-button Два лучших вопроса для собеседования\r\n<div class="cut-content">\r\nКак бы вы описали идеального кандидата на эту должность?\r\nКак вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?\r\n<\/div><\/code><\/pre>
      Как это работает<\/p>\n
      Два лучших вопроса для собеседования<\/p>\n
      Как бы вы описали идеального кандидата на эту должность?
      \nКак вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?<\/p>\n<\/div>
      Стилизация в виде карточке<\/h2>\n
      Если необходимо выделить какой-то блок текста в заметке можно использовать хайлайты. Для этого достаточно обернуть текст, который хотите выделить в div с классом highlight.<\/p>\n
      Как выглядит в коде:<\/p>\n
      <div class="highlight">\r\nКак бы вы описали идеального кандидата на эту должность?\r\nКак вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?\r\n<\/div><\/code><\/pre>
      Как работает<\/p>\n
      Как бы вы описали идеального кандидата на эту должность?
      \nКак вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?<\/p>\n<\/div>
      Заметки на полях<\/h2>\n
      Блог с реализацией заметок: http:\/\/mopsicus.ru<\/a><\/a>.<\/p>\n
      Эту функциональность я подсмотрел в другом блоге и решил перенести в свой. Пригодится, когда нужно указать ссылку на ресурс по теме или просто примечание. Также добавил возможность указывать тип заметки. По умолчанию заметка не занимает отдельный абзац в тексте.<\/p>\n
      Как выглядит в коде:<\/p>\n
      .note Блог с реализацией заметок:  ((http:\/\/mopsicus.ru\/all\/aegea-field-notes\/ http:\/\/mopsicus.ru)).\r\n.note-md Блог с реализацией заметок: ((http:\/\/mopsicus.ru\/all\/aegea-field-notes\/ http:\/\/mopsicus.ru)).<\/code><\/pre>
      Как выглядит на мобиле:<\/p>\n
      \n\"\"\n
      Во всю ширину экрана.<\/div>\n<\/div>\n<\/div>
      \n\"\"\n
      Обтекаемый текст.<\/div>\n<\/div>\n<\/div>
      Мини галерея<\/b>
      \nМожно вывести несколько изображений в ряд. Пока что это реализовано тольк для 3 и 4 картинок. В будущем планирую добавить возможность открывать изображение на весь экран.<\/p>\n
      Как выглядит в коде:<\/p>\n
      <div class="card-gallery card-gallery-4">\r\n    <!-- Список ссылок на изображения -->\r\n<\/div>\r\n\r\n<div class="card-gallery card-gallery-3">\r\n    <!-- Список ссылок на изображения -->\r\n<\/div><\/code><\/pre>
      Как выглядит на страницу<\/p>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      \n\"\"\n<\/div>\n
      Где скачать?<\/h2>\n
      Все исходники выложил на github<\/a>. Там же вы найдете инструкцию по установке.<\/p>\n
      PS<\/h2>\n
      Если у вас есть предложения, оставляйте их в комментариях, а лучше в issue на github-е. Как будет время, займусь реализацией предложений.<\/p>\n