微信公眾號(hào)開(kāi)發(fā) 自定義菜單跳轉(zhuǎn)頁(yè)面并獲取用戶信息實(shí)例詳解
微信公眾號(hào)開(kāi)發(fā) 自定義菜單
請(qǐng)先讀完本文再進(jìn)行配置開(kāi)發(fā)
請(qǐng)先前往微信平臺(tái)開(kāi)發(fā)者文檔閱讀“網(wǎng)頁(yè)授權(quán)獲取用戶基本信息”的接口說(shuō)明
在微信公眾賬號(hào)開(kāi)發(fā)中,往往有定義一個(gè)菜單,然后用戶點(diǎn)擊該菜單就進(jìn)入用戶個(gè)人中心的功能,通常應(yīng)用于各個(gè)公眾賬號(hào)中的會(huì)員服務(wù)。
如何在微信自定義菜單中將用戶導(dǎo)航到個(gè)人中心頁(yè)面呢?
首選需要通過(guò)用戶點(diǎn)擊獲取用戶openid,而通過(guò)用戶的點(diǎn)擊跳轉(zhuǎn)獲取用戶openid就必須在菜單中動(dòng)態(tài)綁定用戶的openid,或者在菜單的跳轉(zhuǎn)URL中填寫(xiě)微信提供的鏈接,官方給了兩個(gè)鏈接類型
一種是Scope為snsapi_base的鏈接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
另一種是Scope為snsapi_userinfo的鏈接
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
這兩種鏈接的區(qū)別如下
應(yīng)用授權(quán)作用域,snsapi_base (不彈出授權(quán)頁(yè)面,直接跳轉(zhuǎn),只能獲取用戶openid),snsapi_userinfo (彈出授權(quán)頁(yè)面,可通過(guò)openid拿到昵稱、性別、所在地。并且,即使在未關(guān)注的情況下,只要用戶授權(quán),也能獲取其信息)
網(wǎng)上很多說(shuō)法是將鏈接的url直接作為微信自定義菜單中view類型中的url(在填寫(xiě)是url時(shí)需要配置網(wǎng)頁(yè)授權(quán)回調(diào)域名和appid),本人試了一下這種做法然而不能成功
{ "type":"view", "name":"會(huì)員中心", "url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你配置接收微信認(rèn)證的地址?response_type=code&scope=snsapi_base&state=1#wechat_redirect" },
返回結(jié)果是創(chuàng)建菜單失敗
創(chuàng)建菜單失敗 errcode:{40033} errmsg:{invalid charset. please check your request, if include \uxxxx will create fail! hint: [91..gA0792vr23]}
我試了一下將后面的地址進(jìn)行urlEncode,還是同樣的錯(cuò)誤。
后來(lái)我想了一個(gè)辦法
在自定義菜單中填寫(xiě)自己的url,在填寫(xiě)的url中將用戶重定向到snsapi_base的url中,然后再在snsapi_base中配置獲取用戶openid以及用戶其他信息,最后跳轉(zhuǎn)到一個(gè)頁(yè)面,也就是通常的會(huì)員中心頁(yè)面。
流程如下
請(qǐng)看代碼
{ "type":"view",
"name":"會(huì)員中心",
"url":"http://配置的網(wǎng)址/redirect"}
其中通過(guò)url將用戶跳轉(zhuǎn)到
http://配置的網(wǎng)址/redirect
然后在處理方法中調(diào)用一次重定向即可
//類上的配置 @Controller @RequestMapping("/wechat") public class WeChatController{ @RequestMapping(value = "/redirect", method = RequestMethod.GET) public String weixinRedirect(HttpServletRequest request, HttpServletResponse response) { return "redirect:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你的服務(wù)器處理地址?response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect"; } }
服務(wù)器會(huì)將微信認(rèn)證 跳轉(zhuǎn)到你的服務(wù)器處理地址,也就是上面
redirect_uri=你的服務(wù)器處理地址中的地址
這里配置為
你的服務(wù)器地址/oauth
代碼如下
@RequestMapping(value = "/oauth", method = RequestMethod.GET) public String weixinOAuth(HttpServletRequest request, HttpServletResponse response, Model model) { //得到code String CODE = request.getParameter("code"); String APPID = "你的APPID"; String SECRET = "你的SECRET"; //換取access_token 其中包含了openid String URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code".replace("APPID", APPID).replace("SECRET", SECRET).replace("CODE", CODE); //URLConnectionHelper是一個(gè)模擬發(fā)送http請(qǐng)求的類 String jsonStr = URLConnectionHelper.sendGet(URL); //System.out.println(jsonStr); //out.print(jsonStr); JSONObject jsonObj = new JSONObject(jsonStr); String openid = jsonObj.get("openid").toString(); //有了用戶的opendi就可以的到用戶的信息了 //地址為https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN //得到用戶信息之后返回到一個(gè)頁(yè)面 model.addAttribute("user", wechatUser); return "vip/userInfo"; }
效果如下
而且這種方式當(dāng)用戶用其他瀏覽器打開(kāi)時(shí),會(huì)出錯(cuò),保證了只能在微信中使用,保障了安全性。而且地址欄不會(huì)有其他用戶個(gè)人信息的暴露。
如有疑問(wèn),可以查看官網(wǎng),謝謝大家的閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信公眾號(hào)支付(一)如何獲取用戶openId
- 微信公眾號(hào)-獲取用戶信息(網(wǎng)頁(yè)授權(quán)獲?。?shí)現(xiàn)步驟
- .NET微信公眾號(hào)獲取OpenID和用戶信息
- php判斷用戶是否關(guān)注微信公眾號(hào)
- 微信公眾號(hào)判斷用戶是否已關(guān)注php代碼解析
- Java微信公眾號(hào)開(kāi)發(fā)之通過(guò)微信公眾號(hào)獲取用戶信息
- .NET微信公眾號(hào) 用戶分組管理
- ASP.NET微信公眾號(hào)之用戶分組管理web頁(yè)面
- ASP.NET Core2靜默獲取微信公眾號(hào)的用戶OpenId實(shí)例代碼
- 微信公眾號(hào)實(shí)現(xiàn)掃碼獲取微信用戶信息(網(wǎng)頁(yè)授權(quán))
- 微信公眾號(hào)用戶與網(wǎng)站用戶的綁定解決方案分析
相關(guān)文章
簡(jiǎn)介JavaScript中toTimeString()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中toTimeString()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06你必須知道的JavaScript 中字符串連接的性能的一些問(wèn)題
每種程序語(yǔ)言中都會(huì)涉及到字符竄連接,而這個(gè)小小的字符竄連接問(wèn)題很可能會(huì)影響到系統(tǒng)的整體性能,本文主要探討JavaScript中字符串連接的性能問(wèn)題2013-05-05簡(jiǎn)介JavaScript中charAt()方法的使用
這篇文章主要介紹了JavaScript中charAt()方法的使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06ES6下javascript解構(gòu)賦值常見(jiàn)用法總結(jié)
這篇文章主要介紹了在ES6下javascript賦值常見(jiàn)用法總結(jié),需要的朋友可以參考下2022-01-01ajax不執(zhí)行success回調(diào)而是執(zhí)行了error回調(diào)
最近在看jQuery的API文檔,在使用到j(luò)Query的ajax時(shí),如果指定了dataType為json,老是不執(zhí)行success回調(diào),而是執(zhí)行了error回調(diào)函數(shù),極度郁悶2012-12-12Javascript學(xué)習(xí)筆記之 對(duì)象篇(一) : 對(duì)象的使用和屬性
Javascript 中的一切都可以視為對(duì)象,除了兩個(gè)特例:null 和 undefined。2014-06-06