Приложения групп. Подписка на новости

Началось всё с того, как мой друг попросил меня опубликовать на его странице от его имени пост с моего iPad"а. Дальше я… Не знаю, как это описать… А потом задумался о том, как же официальные приложения ВК для мобильных устройств и планшетов выполняют какие-либо действия.

Сначала подумал, что приложение отправляет через POST или GET во ВКонтактик какие-то данные. Потом понял, что, скорее всего, приложение авторизуется через API. Зашёл на страницу «Разработчикам» в ВК, выбрал «Standalone/Mobile-приложения», выбрал «OAuth-авторизация». Увидел, как приложение должно авторизовываться. Оно должно создавать окно с диалогом авторизации, с такой ссылкой:
oauth.vk.com/authorize?client_id=APP_ID&scope=PERMISSIONS&redirect_uri=REDIRECT_URI&display=DISPLAY&v=API_VERSION&response_type=token
Итак, сначала нужно узнать id официального приложения.

Я решил начать с приложения для iOS, а именно для iPad.

Запостил на своей стене запись с него, открыл на десктопе. Навёл мышку на значок Яблока, и увидел желаемое «vk.com/app3682744». С этим, самым простым, мы справились. Права я решил установить только доступ к стене (и, автоматически, к основной информации), если что-то надо будет ещё добавить, это можно будет сделать потом. И, конечно, нужно включить кроме «wall» ещё и «offline» - доступ к API в любое время со стороннего сервера. Иначе, делать что-либо сможет только сервер, куда приложение отсылает все действия, и через который всё делается (возможно этот сервер - сервер ВК, но я решил не выяснять, так как это мне не нужно. Сервер прописывается в настройках приложения). И так, сейчас наша ссылка выглядит как oauth.vk.com/authorize?client_id=3682744&scope=wall ,offline&redirect_uri=REDIRECT_URI&display=DISPLAY&v=API_VERSION&response_type=token
С redirect_uri разберёмся потом, как с самым сложным. «display» - внешний окна авторизации, page, popup или mobile. Выберем page.
«v» выставим последнюю, 5.7. response_type изменять не нужно, нам получить токен и надо.

Теперь будем думать над «redirect_uri». Нам нужна страница, которая покажет токен. И тут я замечаю «Если Вы разрабатываете браузерное Javascript-приложение...». Понимаю, что именно это нам подходит, так как мы обращаемся со «стороннего сервера». Там написано, что в таком случае надо указать «oauth.vk.com/blank.html ». Так и сделаем. Теперь наша ссылка выглядит так: oauth.vk.com/authorize?client_id=3682744&v=5.7&scope=wall ,offline&redirect_uri=http://oauth.vk.com/blank.html&display=page&response_type=token

Нажимаем на «разрешить».

Приложения групп - это кроссплатформенные приложения, которые запускаются со страницы групп ОК или из публикаций в ленте.
Пользователь может открыть приложение в полной версии сайта, в мобильной версии m.ok.ru и в мобильных приложениях ОК для iOS и Android.
С технической точки зрения, это HTML приложение, запускаемое в iframe на полной версии сайта, во WebView в мобильных приложениях или в отдельной вкладке мобильного браузера.

В процессе разработки своего приложения для групп вам понадобятся следующие руководства:

Регистрация приложения

Для добавления приложения на сайт ОК необходимо:

  1. Зарегистрироваться на портале ОК и привязать к своему аккаунту email – на этот email будут приходить письма, содержащие регистрационные данные приложений.
  2. Получить права разработчика по ссылке https://ok.ru/devaccess .
  3. После получения прав разработчика откройте раздел Игры и в левом меню выберите “Мои загруженные”. В списке нажмите Добавить приложение: https://ok.ru/dk?st.cmd=appEdit и нажмите кнопку Добавить платфому.
  4. Для регистрация приложения для групп укажите платформы: Web(HTML) , HTML(Mobile) и Приложение для групп . Укажите размеры приложения (они будут применяться для открытия на полной версии сайта).
  5. Указать официальную группу приложения и ID топика, в котором подробно рассказывается, как пользоваться и настроить приложение, рассматриваются популярные примеры использования.
  6. Указать специфичные для приложения групп параметры: кнопка запуска по-умолчанию, возможность открывать на отдельной странице, устанавливать по прямой ссылке и ограничить приложение только для модераторов групп.

Параметры запуска

Кроме перечисленных при запуске приложения со страницы группы, будут передаваться дополнительные параметры:

Параметр viewer_type (роль пользователя в группе) может иметь следующие строковые значения:

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

Дополнительные параметры

Чтобы при запуске передать в приложение произвольные параметры, используйте при генерации ссылки query часть ссылки после символа?, укажите необходимые параметры.

Например,

https://ok.ru/group/1111111111111/app/77777777777?param1=545435345¶m2=HELLO

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

Отправка личных сообщений

Приложение может отправлять сообщения от имени сообщества, в котором оно установлено, используя Bot API .
Предлагаем такую схему работы:

  • Когда приложение будет запущено администратором группы (с viewer_type=ADMIN ), запросить право на отправку личных сообщений от имени группы. Используя Javascript SDK , вызвать виджет запроса пермиссии. Пример вызова:

OKSDK.Widgets.askGroupAppPermissions(‘GROUP_BOT_API_TOKEN’, return_url);

    Если администратор нажмет “Разрешить” , в API_callback (см. FAPI JS) или на return_url придет access_token для работы с BotAPI .
    Токен можно получить один раз и запомнить на стороне приложения, но администратор может в любой момент его инвалидировать через Настройки группы .

    У пользователя запросить разрешение на отправку сообщений от группы, используя Javascript SDK вызвать виджет запроса пермиссии.
    Пример вызова:

OKSDK.Widgets.askGroupAppPermissions(‘MESSAGES_FROM_GROUP’, return_url);

  • Использовать Bot API для отправки сообщений пользователям.
    Для посылки сообщения необходимо отправить POST запрос в формате JSON на url (используя access_token полученный на первом шаге):

https://api.ok.ru/graph/me/messages/chat:C3ecb9d02a600?access_token=TOKEN

{ "recipient" : { "user_ids" : [ "user:1111111111111" , "user:222222222222" , "user:3333333333333" ] }, "message" : { "text" : "Привет" } }
  • Отправка сообщения с фото
{ "recipient" : { "user_ids" : [ "user:1111111111111" , "user:222222222222" , "user:3333333333333" ] }, "message" : { "attachment" : { "type" : "image" , "payload" : { "url" : "https://st.mycdn.me/res/i/ok_logo.png" } } } }

В одном запросе можно передать максимум 100 получателей сообщения. В ответ придёт JSON массив true/false , кому получилось отправить сообщение.

Публикация постов в ленты пользователей и группу

Для публикации постов в ленты пользователей и группу (в том числе с блоком ссылки на игру с картинкой), предлагаем использовать виджет публикации из Javascript SDK :

OKSDK . Widgets . post ( return_url , { "attachment" : { "media" : [ { "type" : "text" , "text" : "Hello, world!" }, { "type" : "link" , "url" : "http://ok.ru/group/11111111111/app/22222222222?param1=AAAAAAAAAAA" , "imageUrl" : "http//yoursite.com/640x320.png" , "buttonKey" : "ANSWER" } ] }, "groupId" : 777777777777 } );
  • Для публикации поста в группу, естественно, приложение должно быть запущено от имени админа или модератора группы.
  • Если не передавать groupId, то пост опубликуется в ленту пользователя.
  • Размер картинки должен быть не меньше 640x320. Для лучшего отображения на всех платформах без обрезаний рекомендуем использовать горизонтальные картинки с пропорцией сторон 2:1 (идеально именно 640x320).
  • Для публикации используется аналогичный формат параметра attachment, как и в методе mediatopic.post .
  • Значения для параметра buttonKey: RUN, PLAY, OPEN, LINK, VIEW, READ, CALL, LISTEN, JOIN, WRITE, MORE, BUY, BUY_TICKET, FILL, CONTACT, ANSWER, PASS_TEST, ENROLL

Передача заголовка, описания и картинки при публикации ссылки

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

Заголовок блока ссылки составляется на основе тега: ,<br> описание - на основе тега: <meta name="desсription"> ,<br> картинка - на основе тега: <meta property="og:image" content="url"/> , либо из картинок, найденных в коде запрашиваемой страницы.</p><p>При отсутствии этих тегов или если страница вернула ошибку, веб-граббер возьмет заголовок и описание из метаданных приложения в ОК, а картинку предложит загрузить пользователю самостоятельно.</p><p>При запросе на сайт приложения за данными для блока ссылки, веб-граббер составит анонимный запрос без данных сессии и пользователя, передавая только следующие параметры:</p><p>При вызове добавляется параметр <i>grabber=1 </i>. По этому признаку можно определить, что запрос с веб-граббера и приложению не обязательно выдавать весь <i>html </i>, ограничившись лишь <i>title </i>, <i>description </i> и <i>image </i> в <i>head </i>-е кода страницы.</p><h2>Установка приложения с внешнего сайта по прямой ссылке</h2><p>Вы можете разместить на своем сайте кнопку для установки приложения в группы пользователя. Используйте ссылку такого вида:</p><p>https://ok.ru/appinstall/APP_ID</p><p>Здесь APP_ID - ID приложения.</p><p>Также рекомендуем использовать этот виджет установки приложения, в случаях, когда приложение было запущено без параметра group_id. Например, пользователь запустил его из списка приложений, а не из группы. В этом случае рисовать красивую заглушку и кнопку с ссылкой на этот виджет.</p><h2>Переход по внешней ссылке из приложения (открытие в браузере из мобильного приложения)</h2><p>Групповые приложения в наших Android/iOS мобильных приложениях открываются во WebView и визуально выглядят, как часть нашего приложения.<br> В большинстве приложений вызов каких-то страниц не во WebView, а в браузере - не понадобится.<br> Но иногда, например, когда приложение использует свой механизм оплаты - мы не разрешаем открывать внутри WebView такие страницы. Пользователь должен четко понимать, что он производит оплату не в Одноклассники, а напрямую в ваш сервис.</p><p>Такие страницы должны быть открыты на мобильных приложениях в браузере.<br> Для этого нужно:</p><ul><li>При инициализации Javascript SDK передать параметр <b>use_extlinks: true </b>. Например:</li> </ul>var config = { app_id : 0 , app_key : "" , use_extlinks : true }; OKSDK . init (config , function () { //on success }, function (error ) { //on error }); <ul><li>Пометить ссылку классом <b>js-sdk-extlink </b>. Например:</li> </ul><p>Заплатить</p><h2>Модерация и размещение в каталоге</h2><p>Список всех приложений, которые доступны для добавления в свои группы, администратор может просмотреть в разделе <i>«Настройки» </i> -> <i>«Приложения» </i>.</p><p>В этот каталог попадают только одобренные приложения, которые соответствуют Правилам размещения групповых приложений .<br> Чтобы подать заявку на модерацию и разместить свое приложение в каталоге, создайте заявку на странице модерации с указанием платформы <i>“Приложение групп” </i>.<br> В заявке должна содержаться вся <a href="/how-to-open-file/kak-uznat-tochnyi-analiz-kanala-youtube-statistika-kanalov-youtube-gde/">необходимая информация</a> о приложении.</p> <p>Как его получить? Например, если вы пользуетесь ВКонтакте под Android, то это приложение есть у вас в <a href="https://vk.com/apps?act=settings" rel="nofollow noreferrer">списке ваших приложений</a> , называется "Android". Откройте инструменты разработчика в вашем браузере, чтобы наблюдать выполняемые запросы, и нажмите «Настройки» напротив. POST-параметром aid передаётся как раз id приложения:</p> <p>Другое дело, что во-первых, изменилась <a href="https://vk.com/dev/auth_mobile" rel="nofollow noreferrer">схема запроса</a> - надо указывать больше параметров. А во-вторых разработчики ВК тоже читают Хабр, и давно прикрыли эту «дыру», позволяющую получить такой простой доступ к видеозаписям. То, как можно получить standalone токен для <a href="/browsers/pereklyuchateli-obychnoe-prilozhenie-upravlyaemye-formy-programmnoe/">обычных приложений</a>, для этого доверенного приложения не срабатывает.</p> <p>Так что с идентификатором приложения разобрались, но доступа к видео это не даёт.</p> <p><b>Что можно сделать </b></p> <p><a href="https://vk.com/apps?act=manage" rel="nofollow noreferrer">Зарегистрируйте</a> <a href="/good-to-know/sozdaem-mobilnye-prilozheniya-v-wordpress-s-pomoshchyu-apppresser-sozdaem-mobilnye/">собственное приложение</a> ВК типа standalone . Якобы оно будет работать с вашего мобильника/автономного устройства. Только таким доступны методы получения прямых ссылок на видео.</p> <p>Далее, если оно будет работать на вашем сервере, нужно авторизоваться ВКонтакте с IP именно этого сервера, т.к. токен привязывается к адресу и с других адресов будет требовать капчу, или просто не сработает. Чтобы так авторизоваться, понадобится <a href="/program/protokol-telnet-metody-dostupa-konsol-telnet-i-ssh-aux/">SSH доступ</a> к серверу, чтобы сделать через него "тоннель". На вашем компьютере наберите что-то вроде:</p><p>Ssh -f login@11.22.33.44 -L 8888:127.0.0.1:8888 -N </p><p>где 11.22.33.44 - ip вашего сервера. Это «прокинет порт» 8888 с вашего компа через тот сервер. В браузере укажите порт прокси 8888. И теперь вы выходите в инет под ip адресом вашего сервера. Залогиньтесь во ВКонтакте и <a href="https://vk.com/dev/auth_mobile" rel="nofollow noreferrer">авторизуйте</a> ваше созданное приложение по ссылке вида:</p><p>Https://oauth.vk.com/authorize?client_id=999999999&scope=video,offline&redirect_uri=https://oauth.vk.com/blank.html&display=mobile&v=5.34&response_type=token </p><p>где вместо 999999999 поставьте id вашего созданного приложения. Просто составьте эту ссылку, включив необходимы разрешения, и откройте её в браузере (через тоннель). Откроется страница входа в ВК, потом запрос разрешения. Когда подтвердите, вас перенаправит на ссылку вида https://oauth.vk.com/blank.html&token=xxx – вот этот токен вам и нужен. Скопируйте, сохраните в вашем приложении.</p> <p>Обратите внимание на параметр expires в ссылке с token"ом. Если не забыли среди разрешений указать offline , то будет expires=0 , что означает бессрочный токен, который сможет прослужить вам хоть несколько лет. В противном случае токен сдохнет через час и придётся заново проделывать эту авторизацию.</p> <p>Здравствуйте дорогие мои читатели блога. Сегодняшнюю статью я хотел бы посвятить получению Api id номера от ВКонтакте. Может кто то спросит, а зачем он вообще нам нужен и чем он полезен блогу?</p> <p>План сегодняшней статьи не большой</p> <blockquote><p>Для чего нужен api id блогу?</p> <p>Как его получить?</p> </blockquote> <h1>Для чего нужен api id Вконтакте блогу на WordPress.</h1> <p>Api id номер может понадобиться для <a href="/windows/skachat-rasshirenie-vkopt-vkopt---brauzernyi-plagin-dlya-socialnoi-seti/">социальных плагинов</a>. Люди оставляя лайки и комментарии, через кнопки и виджеты вконтакте, должны связаться с сервером, чтобы VK.COM знал, на каком сайте оставляют комментарии или лайки его зарегистрированные пользователи.</p> <p>Так же этот номер нужен, чтобы людям не требовалось вводить свои данные. Но основа этого номера- это работа социальных плагинов на сайте под управлением WordPress</p> <h2>Как его получить?</h2> <p>Вот и подошли к главному. Как же получить api id Вконтакте?</p> <p>Для этого нужно перейти в <span>раздел разработчиков </span>, Далее нажать создать приложение, в появившемся окне выбрать вкладку Вэб-сайт, так же вводим название вашего приложения, адрес вашего сайта и базовый домен.<span><br><img src='https://i2.wp.com/blograbotainternet.ru/wp-content/uploads/2015/11/vkip.jpg' align="center" width="100%" loading=lazy></p> <blockquote><p>Адресом будет — http://mysite.ru</p> <p>Базовый домен — mysite.ru</p> <p>mysite — адрес вашего сайта</p> </blockquote> <p><br><img src='https://i2.wp.com/blograbotainternet.ru/wp-content/uploads/2015/11/%D0%B7%D0%B0%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5.jpg' align="center" width="100%" loading=lazy></p> <p><br><img src='https://i2.wp.com/blograbotainternet.ru/wp-content/uploads/2015/11/%D0%BF%D0%BE%D0%B4%D1%82%D0%B2%D0%B5%D1%80%D0%B6%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5.jpg' align="center" width="100%" loading=lazy></p> <p>После подтверждения номера телефона вы попадёте на страницу с информацией о вашем приложении, нужно нажать вкладку настройки и попадаем на страницу, где и лежит наш api id ВКонтакте.</p> <p><br><img src='https://i2.wp.com/blograbotainternet.ru/wp-content/uploads/2015/11/%D0%BA%D0%BB%D1%8E%D1%87%D0%B8.jpg' align="center" width="100%" loading=lazy></p> <p>Пользуйтесь на здоровье. Надеюсь вы получили для себя <a href="/internet/sozdanie-odnostranichnika-svoimi-rukami-osnovnye-etapy/">полезную информацию</a>. До скорых встреч дорогие читатели.</p> <p>Подписывайтесь на обновления блога, чтобы не пропустить выход новых статей.</p> <p>С уважением С.Васильев</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div style="font-size:0px;height:0px;line-height:0px;margin:0;padding:0;clear:both"></div> </article> <div class='yarpp-related'> <div class="related-posts-title">Похожие публикации:</div> <ul class="related-items"> <li> <img src="/uploads/ed242a97432786ddd4dc7c3a5057c28c.jpg" width="180" height="160" alt="Функциональные zip- и rar-архиваторы для Андроид" loading=lazy> <a href='/good-to-know/skachat-arhiv-na-pk-funkcionalnye-zip--i-rar-arhivatory-dlya/' class='related-item__title'>Функциональные zip- и rar-архиваторы для Андроид</a> </li> <li> <img src="/uploads/77b38fbbb3af15c356d8b41ef12bc354.jpg" width="180" height="160" alt="Выбор жесткого диска для компьютера" loading=lazy> <a href='/word/kak-vybrat-zhestkii-disk-sovety-professionalov-vybor-zhestkogo/' class='related-item__title'>Выбор жесткого диска для компьютера</a> </li> <li> <img src="/uploads/52c46310f6c7cd9bc17a826ba99615c6.jpg" width="180" height="160" alt="Как в 3d max открыть файл 3ds" loading=lazy> <a href='/payment-systems/kak-v-3d-max-otkryt-fail-3ds-chem-otkryt-max-luchshie-operacionnye-sistemy/' class='related-item__title'>Как в 3d max открыть файл 3ds</a> </li> <li> <img src="/uploads/fa51c804620708ca06ee27c500b6a537.jpg" width="180" height="160" alt="Обзор Samsung Galaxy S4 Mini: что в имени тебе моем" loading=lazy> <a href='/how-to-open-file/kakoi-zvonok-ustanovlen-na-galaksi-s4-mini-obzor-samsung-galaxy-s4-mini-chto-v-imeni-tebe/' class='related-item__title'>Обзор Samsung Galaxy S4 Mini: что в имени тебе моем</a> </li> </ul> </div> <style> .nafAdaptMedia { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptMedia { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptMedia { width: 100%; height: 300px; } } </style> <style> .nafAdaptText { width: 100%; height: 300px; } @media(min-width: 500px) { .nafAdaptText { width: 100%; height: 300px; } } @media(min-width: 800px) { .nafAdaptText { width: 100%; height: 300px; } } </style> </div>  <div id="rightColomn"> <div class="title">Категории</div> <aside> <ul id="asidemenu" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/programs/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Программы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/windows/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Windows</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/browsers/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Браузеры</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/word/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Word</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/excel/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Excel</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/payment-systems/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Платежные системы</span></a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href='/category/download-software/' class='menu-image-title-after menu-image-not-hovered'><span class="menu-image-title">Скачать софт</span></a></li> </ul> </aside> <div class="banner" id="text-4"> <div class="textwidget"> </div> </div> </div> </div> </div> <div class="hfooter"></div> </div> <footer> <div class="container"> <ul> <li><a href='/sitemap.xml'>Карта сайта</a></li> </ul> <div class="copy"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=leally.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a>© 2024, leally.ru - Твой гид в мире компьютера и интернета </div> </div> </footer> <script type="text/javascript"> jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { "sidebar" : "banner", "margin_top" : 10, "margin_bottom" : 0, "screen_max_width" : 0, "width_inherit" : false, "widgets" : ['text-4'] } ; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); } , 1500); } ); </script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.1.10'></script> <script type='text/javascript' src='https://leally.ru/wp-content/plugins/fitvids-for-wordpress/jquery.fitvids.js?ver=1.1'></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('body').fitVids(); } ); </script><script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> </body> </html>