1.准備工作:
申請微信公眾號,准備好微信開發者工具及后端開發工具。
2.微信公眾號測試號配置流程:
接口配置為一個公網可以訪問的地址,用來接收微信服務器的驗證請求,請求內容為:
開發者通過檢驗signature對請求進行校驗(下面有校驗方式)。若確認此次GET請求來自微信服務器,請原樣返回echostr參數內容,則接入生效,成為開發者成功,否則接入失敗。
加密/校驗流程如下:
1)將token、timestamp、nonce三個參數進行字典序排序
2)將三個參數字符串拼接成一個字符串進行sha1加密
3)開發者獲得加密后的字符串可與signature對比,標識該請求來源於微信。
地址:鏈接
微信公眾號后端驗證最后返回true或false,大致邏輯為(以jfinal框架為例):
public void validate() { //將token、timestamp、nonce String token = "***"; String timestamp = getPara("timestamp"); String nonce = getPara("nonce"); String signature = getPara("signature"); String fullStr = token + timestamp + nonce; String result = ""; try { result = this.shaEncode(fullStr); } catch (Exception ex) { } boolean result1 = result.equals(signature); String echostr = getPara("echostr"); renderText(result1 == true ? echostr : "false"); }
其中token和微信頁面填寫內容一致。
配置后,再配置內容:JS接口安全域名,即直接寫配置網址即可。如:http://******.com
有一個地方特別需要注意:體驗接口權限表-->網頁授權獲取用戶基本信息(授權回調頁面域名),只能填寫網址,而不能帶http或者https!
3.開發流程:
關注需要開發的公眾號,然后用微信開發者工具打開【公眾號網頁項目】,然后在地址欄輸入公眾號地址,即可打開頁面進行調試。這和用微信端打開公眾號效果一樣,但是多了調試環境,可以很方便查看效果及調試信息。
本公眾號需要綁定微信才能查看,因此其流程為:
進入首頁,然后首頁根據登錄情況進行跳轉,如果已經登錄則直接顯示首頁內容,如果沒有登錄則跳轉到登錄頁面。登錄頁面直接發送請求到微信服務器,請求根據當前微信用戶獲取其code,有2種方式:
方式一:
自定義一個微信授權頁面,在頁面端發出請求到微信服務器,登錄頁先請求,將redirect_uri設置為新頁面地址,請求內容如下:
var wx_link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base#wechat_redirect'; window.location.href = wx_link; var code =GetQueryString('code');
然后在新頁面設置一個確定登錄按鈕,點擊按鈕發出請求到公眾號服務器,服務器再發出請求到微信服務器,獲取openid(涉及到公眾號配置信息,只能在服務器端進行)。此方法涉及登錄頁和確認微信登錄頁之間的跳轉,比較繁瑣,效果不怎么好,適合有實力的大公司,一般情況下不建議。
方式二(推薦):
直接利用微信官方的授權登錄頁面。流程如下:
在公眾號登錄頁面,ready事件中判斷是否有code參數,有則發回服務器獲取openid,沒有則直接跳轉到微信授權頁面,代碼如下:
function getCode(obj) { var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=*********&redirect_uri=http://***************/login&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect'; window.location.href = url; }
這樣在微信授權頁面點擊確認登錄后,會返回當前頁面,並攜帶code參數。此時,再根據code,向后端發出獲取openid的請求。后端獲取openid的方法大致為:
public void openId() { String code = getPara("code"); String AppId = ""; String AppSecret = ""; String openidUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + AppId + "&secret=" + AppSecret + "&code="+code + "&grant_type=authorization_code"; String result = HttpKit.get(openidUrl); Object jsonObject = JSON.parse(result); renderJson(jsonObject); }
這樣,前端獲取到openid后,與當前登錄用戶進行綁定,將綁定關系寫入數據庫即可。