Как получить доступ к WeChat JS-SDK в проекте

внешний интерфейс алгоритм WeChat JavaScript
Как получить доступ к WeChat JS-SDK в проекте

Функции WeChat JS-SDK

Если вы нажмете, то, я думаю, вы должны знать, для чего можно использовать JS-SDK WeChat. Официальная документация WeChat описывает это следующим образом.

WeChat JS-SDK — это набор инструментов для веб-разработки, основанный на WeChat, предоставляемый общедоступной платформой WeChat для веб-разработчиков.

Используя WeChat JS-SDK, веб-разработчики могут использовать WeChat для эффективного использования возможностей систем мобильных телефонов, таких как фотография, выбор изображения, голос, местоположение и т. предоставить пользователям WeChat лучший опыт работы в Интернете.

Используя JS-SDK WeChat, вы можете позволить своей веб-странице вызывать такие функции, как фото, голос, оплата, местоположение и сканирование, которые можно использовать только в WeChat в WeChat. После следующих шагов и пошаговой настройки вы сможете правильно внедрить JS-SDK WeChat в проект.

Импортировать файл WeChat JS

Ссылка на файл javascript WeChat:Горячая вода Думаю QQ.com/open/is/price…

Но поддерживает загрузку только с использованием стандартного метода загрузки модулей AMD/CMD. Итак, я нашел выпущенный js-sdk на официальном сайте npm, который поддерживает внедрение CommonJS. Адрес npm находится по адресуздесь. Вы можете установить его в свой проект с помощью следующей команды.

npm install weixin-js-sdk

После установки вы можете использовать следующие два способа импорта.

/* 使用CommonJs规范引入 */
const wx = require('weixin-js-sdk');

/* 使用ES6模块引入 */
import wx from 'weixin-js-sdk';

Реализовать алгоритм подписи разрешений для wx.config

Если вы будете следовать большинству руководств, они позволят вам использовать внедрение wx.config для получения разрешений. Но предпосылка использования wx.config заключается в том, что вы должны сначала реализовать алгоритм подписи разрешений. Ключом к алгоритму авторизованной подписи является jsapi_ticket. Что касается jsapi_ticketm, официальное описание выглядит следующим образом.

Прежде чем генерировать подпись, вы должны сначала понять jsapi_ticket.jsapi_ticket — это временный билет, используемый корпоративной учетной записью для вызова интерфейса WeChat JS. В обычных условиях срок действия jsapi_ticket составляет 7200 секунд, которые можно получить через access_token. Поскольку количество вызовов API для получения jsapi_ticket очень ограничено, частое обновление jsapi_ticket ограничит вызовы API и повлияет на их собственный бизнес Разработчики должны глобально кэшировать jsapi_ticket в своих собственных службах.

Что это значит? Глядя на официальную документацию, вы можете немного запутаться. Вероятно, это означает: вы хотите использовать мой SDK? Да, я дам вам ваучер на звонок, действительный в течение 2 часов. Количество раз, которое я отправляю вам этот ваучер, ограничено каждый день, поэтому вы должны хорошо его хранить, иначе вы не сможете получить ваучер, если захотите его снова.

Это обычное (очень) вульгарное (кожное) объяснение. Ниже приведено обычное объяснение. Чтобы получить jsapi_ticket, вам нужно перейти по следующему адресу:Корпоративный API.WeChat.QQ.com/CGI-bin/individual…Отправить запрос HttpGET. Этот URL-адрес является адресом запроса номера предприятия. Если вы являетесь физическим лицом, вам необходимо запросить:API.WeChat.QQ.com/CGI-bin/предложил…Этот адрес требует двух параметров, access_token и type.Если вы получаете jsapi_ticket, тип является фиксированным, а значение равно jsapi. Билет можно получить в обратном порядке. И вам нужно кэшировать возвращенные билеты на стороне сервера. Этот билет является сертификатом в популярном объяснении выше. Он действителен в течение двух часов. После этого все места, в которых необходимо использовать билет в передней части, должны быть оценены в задней части. Если срок действия билета еще не истек , он будет взят из кеша и возвращен во внешний интерфейс.Отправьте другой интерфейс GET, сохраните его в кеше после получения и верните во внешний интерфейс. Если запрос нормальный, будут возвращены следующие данные.

{
    'errcode': 0,
    'errmsg': 'ok',
    'ticket': 'bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA',
    'expires_in': 7200,
}

Получив jsapi_ticket, мы можем запустить алгоритм подписи авторизации. Ход алгоритма следующий.

Эта логика должна быть реализована в бэкэнде. Почему указано ниже. Потребуется использовать URL-адрес страницы js-sdk, а также jsapi_ticket, noncestr (случайная строка), timestamp (текущая временная метка) для лексикографического порядка. Отсортируйте, а затем используйте формат пары "ключ-значение" URL (т. е. ключ1=значение1&ключ2=значение2…) для объединения в строковую строку. Затем зашифруйте эту строку с помощью sha1, и результатом будет подпись. Затем верните во внешний интерфейс подпись, метку времени, nonceStr, и wx.config должен использовать эти данные. Тогда вам нужно обратить особое внимание на их использование здесь.Официальный документ внимания выглядит следующим образом.

Меры предосторожности

  1. Noncestr и временная метка, используемые для подписи, должны совпадать с nonceStr и временной меткой в ​​wx.config.

  2. URL-адрес, используемый для подписи, должен быть полным URL-адресом страницы, вызывающей интерфейс JS.

  3. Из соображений безопасности разработчики должны реализовать логику подписи на стороне сервера.

Официальные документы здесь на самом деле не такие уж и официальные, на самом деле они говорят нам о том, что реализация вышеописанной логики подписи должна быть на сервере, а noncestr и timestamp должны быть такими же, как те, что используются в подписи на стороне сервера, и страница, которая вызывает WeChat js-sdk URL-адрес должен совпадать с URL-адресом, используемым для подписи на стороне сервера. Все на сервере можно получить прямо из реферера в шапке запроса.

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

Внедрить конфигурацию проверки разрешений через интерфейс конфигурации

Официальное описание выглядит следующим образом.

Все страницы, которые должны использовать JS-SDK, должны сначала вводить информацию о конфигурации, иначе они не могут быть вызваны (один и тот же URL-адрес нужно вызывать только один раз, а веб-приложение SPA, которое меняет URL-адрес, может вызываться каждый раз при изменении URL-адреса). В настоящее время клиент WeChat для Android. Новая функция pushState H5 не поддерживается, поэтому использование pushState для реализации страниц веб-приложения приведет к сбою подписи. Эта проблема будет исправлена ​​в Android 6.2).

После импорта правильного файла javascript WeChat (см. выше) вы можете внедрить конфигурацию проверки разрешений, вызвав следующий код на странице. Ниже приведен официальный пример кода.

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

Ниже я привожу пример данных.

// data就是上一步说的后端返回的那些数据，包含signature、nonceStr、timestamp
const data = await getJsSDK();

wx.config({
    debug: true,
    appId: '你的appId',
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: [
      'onMenuShareTimeline', // 分享到朋友圈
      'onMenuShareAppMessage', // 分享给朋友
      'onMenuShareQQ',// 分享到QQ
      'onMenuShareWeibo',// 分享到腾讯微博
      'onMenuShareQZone',// 分享到QQ空间
    ]
});

Внедренные функции жизненного цикла

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

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

интерфейс разделения вызовов

Вызов определенного общего интерфейса в ready(). Например, поделиться с кругом друзей, друзей, пространство QQ. код показывает, как показано ниже. Я дал все хуки функции интерфейса. На самом деле обычно используются только успех и отмена. Зависит от ваших личных потребностей.

wx.ready(function(){
  /* 分享到朋友圈 */
  wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名必须与当前企业的可信域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 用户确认分享后执行的回调函数
    },
    cancel: function () {
      // 用户取消分享后执行的回调函数
    },
    trigger: function () {
      // 监听Menu中的按钮点击时触发的方法
    },
    complete: function () {
      // 接口调用完成时执行的回调函数，无论成功或失败都会执行
    },
    fail: function () {
      // 接口调用失败时执行的回调函数
    },
  });
});

Официальная документация WeChat дает здесь специальное напоминание.

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

Вероятно, это означает, что не пытайтесь динамически изменять значение заголовка и ссылки в функции ловушки, потому что совместное использование является синхронной операцией, и операция совместного использования завершается, когда возвращается значение ajax. По сравнению с этим следует отметить, что поле ссылки, его доменное имя должно совпадать с доменным именем домена безопасности JS, настроенным в фоновом режиме WeChat, иначе обмен не удастся. На данный момент доступ к WeChat js-sdk завершен. Если у вас есть какие-либо вопросы, пожалуйста, оставьте сообщение или свяжитесь со мной напрямую.

написать на обороте

Последнее, что следует отметить, это то, что если URL-адрес страницы изменится, вызов js-sdk под новым URL-адресом должен снова вызвать интерфейс подписи и снова подписать новый URL-адрес, иначе вызов будет неудачным.

Адрес официального документа WeChat:здесь

Добро пожаловатьличный блог

Категории