摘要:接口安全域名主要是在調用微信時用到。到這里為止測試號配置就完成了二微信網頁授權篇接口地址為這里你可以使用此地址上的接口進行自己編寫,也可以使用別人封裝好的。
說明:由于最近開發公眾號,特寫篇文章來記錄下開發流程和開發中的坑。
開發用的技術為 react + express , nodejs作為中間層。
首先申請接口測試號
地址:https://mp.weixin.qq.com/wiki...
上面為測試號配置頁面
這里的接口配置信息 需要和 微信進行一次通信,才能夠填寫。
這一層通信是在nodejs層里進行的。
在項目里創建一個路由,通信代碼如下:
const sha1 = require("sha1"); router.get("/wx", function(req, res) { const { signature, timestamp, nonce, echostr } = req.query; const token = config.token; let str = [token, timestamp, nonce].sort().join(""); const sha = sha1(str); if( sha === signature) { console.log("驗證成功") res.send(echostr); } else { console.log("驗證失敗") res.send("驗證失敗"); } });
這里的URL就是填寫你通信路由的地址,Token要和 通信代碼中的 token保持一致。
然后點擊 提交 按鈕,微信就會向你填寫的URL發起請求。URL和Token無誤,即可提交成功。
主要是在調用微信JS-SDK時用到。
這里我們有做一個朋友圈分享功能,要調用SDK的頁面和分享的鏈接,要填寫在安全域名下,才能成功
(在下面的微信JS-SDK使用會講到)
這里的域名填寫你項目的域名(例如): xxx.com 即可,不需要加http/https。
到這里為止測試號配置就完成了!!!
接口地址為:https://mp.weixin.qq.com/wiki...
這里你可以使用此地址上的接口進行自己編寫,也可以使用別人封裝好的SDK。
這里我使用的別人封裝好的SDK
https://github.com/node-webot...
這里也是在node層進行處理
$ npm install wechat-oauth var OAuth = require("wechat-oauth"); var client = new OAuth("your appid", "your secret’);
生成引導用戶點擊的URL。
var url = client.getAuthorizeURL("redirectUrl", "state", "scope");
如果是PC上的網頁,請使用以下方式生成
var url = client.getAuthorizeURLForWebsite("redirectUrl");
獲取Openid和AccessToken
用戶點擊上步生成的URL后會被重定向到上步設置的 redirectUrl,并且會帶有code參數,我們可以使用這個code換取access_token和用戶的openid
client.getAccessToken("code", function (err, result) { var accessToken = result.data.access_token; var openid = result.data.openid; });
復制代碼獲取用戶信息
如果我們生成引導用戶點擊的URL中scope參數值為snsapi_userinfo,接下來我們就可以使用openid換取用戶詳細信息(必須在getAccessToken方法執行完成之后)
client.getUser(openid, function (err, result) { var userInfo = result; });
通過以上這幾個步驟,就可以拿到用戶的信息!!!
三. 微信JS-SDK使用篇(這里以朋友圈分享為例子)微信JS-SDK說明文檔
地址:https://mp.weixin.qq.com/wiki...
sdk使用:(這里搬用下官網的文檔,這里可詳細參考文檔,這里唯一麻煩一點的地方就是 簽名算法)
步驟一:綁定域名
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
步驟二:引入JS文件
在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/...
步驟三:通過config接口注入權限驗證配置
wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。 appId: "", // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: "", // 必填,生成簽名的隨機串 signature: "",// 必填,簽名 jsApiList: [] // 必填,需要使用的JS接口列表 });
這里的timestamp,nonceStr,signature需要通過接口獲取,接下來我們就來獲取 timestamp,nonceStr,signature(在node層處理)
這里第一步就需要獲取access_token,
要調取微信的SDK,必須要獲取access_token,access_token是公眾號的全局唯一接口調用憑據,公眾號調用各接口時都需使用access_token,access_token有效期為2個小時,而調取access_token接口的次數限制為2000,所以需要存儲下來(存的方式看你自己)
獲取access_token接口:
https://mp.weixin.qq.com/wiki...
獲取access_token 和timestamp,nonceStr,signature代碼如下:
const rp = require("request-promise’); const {sign} = require(‘./sign"); rp(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appID}&secret=${config.appsecret}`) .then(function (response) { const access_token = JSON.parse(response).access_token; setCookie(res, "at", access_token); rp(`https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi`) .then(function (response2) { let ticket = JSON.parse(response2).ticket; let signObj = sign(ticket, config.originUrl + req.originalUrl); setCookie(res, "timestamp", signObj.timestamp); setCookie(res, "nonceStr", signObj.nonceStr); setCookie(res, "signature", signObj.signature); /*...*/ }).catch(function () { /*...*/ }); }).catch(function () { /*...*/ });
這里setCookie是我自己寫的存cookie的方法,
這里的sign是微信的簽名算法:
sign.js
"use strict"; const jsSHA = require("jssha"); var createNonceStr = function () { return Math.random().toString(36).substr(2, 15); }; var createTimestamp = function () { return parseInt(new Date().getTime() / 1000) + ""; }; var raw = function (args) { var keys = Object.keys(args); keys = keys.sort(); var newArgs = {}; keys.forEach(function (key) { newArgs[key.toLowerCase()] = args[key]; }); var string = ""; for (var k in newArgs) { string += "&" + k + "=" + newArgs[k]; } string = string.substr(1); return string; }; /** * @synopsis 簽名算法 * * @param jsapi_ticket 用于簽名的 jsapi_ticket * @param url 用于簽名的 url ,注意必須動態獲取,不能 hardcode * * @returns */ exports.sign = function (jsapi_ticket, url) { var ret = { jsapi_ticket: jsapi_ticket, nonceStr: createNonceStr(), timestamp: createTimestamp(), url: url }; var string = raw(ret); let shaObj = new jsSHA(string, "TEXT"); ret.signature = shaObj.getHash("SHA-1", "HEX"); return ret; };
此時我們已經把timestamp,nonceStr,signature存了起來,然后我們來到前臺頁面獲取(我這里使用的react)
componentDidMount () { wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。 appId: appID, // 必填,公眾號的唯一標識 timestamp: Cookies.get("timestamp"), // 必填,生成簽名的時間戳 nonceStr: Cookies.get("nonceStr"), // 必填,生成簽名的隨機串 signature: Cookies.get("signature"), // 必填,簽名 jsApiList: [ "onMenuShareTimeline", "onMenuShareAppMessage" ] // 必填,需要使用的JS接口列表 }); }
步驟四:在需要的地方調用接口,
代碼如下:
wx.ready(function() { //分享給朋友 wx.onMenuShareTimeline({ title: "", // 分享標題 link: href, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: imgUrl, // 分享圖標 }); wx.onMenuShareAppMessage({ title: "", // 分享標題 link: href, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: imgUrl, // 分享圖標 }); });
這里就完成了對微信JS-SDK的調用!!!
第一次寫文章,很多地方有漏洞,不完善,希望各位指出。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98310.html
摘要:本文是淺析微信支付系列文章的第三篇,主要會講一下在開發前的一些注意事項。淺析微信支付系列已經更新兩篇了喲,沒有看過的朋友們可以看一下。開通微信支付需要注冊登陸微信商戶平臺,微信支付相關的信息都需要在這個平臺上進行操作。 本文是【淺析微信支付】系列文章的第三篇,主要會講一下在開發前的一些注意事項。 淺析微信支付系列已經更新兩篇了喲~,沒有看過的朋友們可以看一下。 淺析微信支付:前篇大綱...
摘要:微信年月日發公告稱,個人主體注冊公眾號數量上限由個調整為個。大家都知道每個微信公眾號在進行開發時,授權回調的域名只能設置一個,正常的開發一般一套環境就對應一個域名。 微信2018年11月16日發公告稱,個人主體注冊公眾號數量上限由2個調整為1個。企業類主體注冊公眾號數量上限由5個調整為2個。這個對馬上要注冊公眾號的企業來說頓時心情不好了。 大家都知道每個微信公眾號在進行開發時,授權回調...
摘要:描述由于馬上要做一波公眾號開發,今天先調研,把基本的服務器接起來。手腳架地址文檔微信公眾號公眾號開發首先你要有個公眾號,這里就不說了按照流程申請。腳手架的說明微信公眾號接入的時候要做很多事情,為了簡化開發,提供一個版本的服務器。 描述 由于馬上要做一波公眾號開發,今天先調研,把基本的服務器接起來。微信公眾號服務器在接入的時候要做一些煩躁的事情,改配置的時候要進行握手,api調用要做一些...
摘要:時間年月日星期五說明本文部分內容均來自慕課網。本套課程介紹微信公眾號開發,主要涉及公眾號介紹編輯模式介紹開發模式介紹等。慕課網是垂直的互聯網技能免費學習網站。 時間:2017年08月11日星期五說明:本文部分內容均來自慕課網。@慕課網:http://www.imooc.com教學源碼:https://github.com/zccodere/s...學習源碼:https://github...
摘要:本文是淺析微信支付系列文章的第二篇,主要講解一下普通商戶接入的支付方式以及其中的不同之處。淺析微信支付前篇大綱微信支付是集成在微信客戶端的支付功能,用戶可以通過手機完成快速的支付流程。目前微信支付支持手機系統有蘋果安卓和。 本文是【淺析微信支付】系列文章的第二篇,主要講解一下普通商戶接入的支付方式以及其中的不同之處。 上篇文章講了本系列的大綱,沒有看過的朋友們可以看一下。 淺析微信支...
摘要:本篇是該系列的第一篇,本地開發環境搭建以及接入微信。若確認此次請求來自微信服務器,原樣返回參數內容,則接入生效,成為開發者成功,否則接入失敗。 一、簡介 關于微信公眾號的介紹就省略了,自行搜索。注冊過程也不說了。我們會直接注冊測試號來實現代碼。這將會是個全面講解微信公眾號開發的系列教程。本篇是該系列的第一篇,本地開發環境搭建以及接入微信。在開始之前最好去看看開發者文檔微信公眾平臺技術文...
閱讀 3403·2021-11-24 09:38
閱讀 3189·2021-11-22 09:34
閱讀 2098·2021-09-22 16:03
閱讀 2349·2019-08-29 18:37
閱讀 371·2019-08-29 16:15
閱讀 1761·2019-08-26 13:56
閱讀 853·2019-08-26 12:21
閱讀 2198·2019-08-26 12:15