angular.js - Angular開(kāi)發(fā)的單頁(yè)面應(yīng)用，如何正確地實(shí)現(xiàn)在微信里的網(wǎng)頁(yè)授權(quán)和調(diào)用js sdk
問(wèn)題描述
一個(gè)微信公眾號(hào)的外鏈網(wǎng)頁(yè)，使用angular做成了單頁(yè)應(yīng)用，目前碰到了 微信網(wǎng)頁(yè)授權(quán) 和 調(diào)用 js sdk 的問(wèn)題
微信授權(quán)據(jù)我所目前所知，調(diào)用了微信授權(quán)后，單頁(yè)應(yīng)用的入口 url 會(huì)長(zhǎng)成這樣（假定域名為:example.com）：
①http://example.com?code=aaabbb/#/home
或者(啟用了html5 mode) 長(zhǎng)成這樣：
②http://example.com/home?code=aaabbb
?code=aaabbb, 是微信授權(quán)后重定向時(shí)填充的，有了這個(gè)才能進(jìn)一步去獲取用戶(hù)信息，參見(jiàn) 微信開(kāi)發(fā)文檔 > 獲取code
至此，還不會(huì)出現(xiàn)問(wèn)題
調(diào)用 js sdk由于Android微信客戶(hù)端不支持pushState的H5新特性，url②廢棄(親測(cè)，確實(shí)不能通過(guò)驗(yàn)證)，所以入口url是這樣：
http://example.com?code=aaabbb/#/home
現(xiàn)在問(wèn)題來(lái)了，如果沒(méi)有?code=aaabbb就能通過(guò)簽名驗(yàn)證, 然后成功調(diào)用 js sdk，但實(shí)際情況是：如果需要授權(quán)?code=aaabbb必然存在，簽名驗(yàn)證必定失敗。那么到底如何做到授權(quán)和調(diào)用sdk均可用？？？
我目前的想法和做法是：微信授權(quán)重定向到http://example.com?code=aaabbb/#/home后，拿到code，然后再location.href = http://example.com/#/home。這樣做是能拿到用戶(hù)信息，并且成功調(diào)用sdk，但問(wèn)題是每次進(jìn)入應(yīng)用，會(huì)刷新兩次,這樣用戶(hù)體驗(yàn)極差，而且有強(qiáng)迫癥的我也接受不了。
請(qǐng)教各位給個(gè)靠譜的方案
問(wèn)題解答
回答1：純前端是沒(méi)法實(shí)現(xiàn)了，只能將授權(quán)回調(diào)頁(yè)面域名配置到后臺(tái)服務(wù)器，再由后臺(tái)重定向
回答2：可以用過(guò)indexOf()取出code值
var url = ’http://example.com?code=aaabbb/#/home’;var n = url.indexOf(’code=’)+5;var m = url.indexOf(’/#’);var code = url.substr(n, m-1)；
這樣就能拿到code值
回答3：純前端沒(méi)法實(shí)現(xiàn)，恰巧最近我做過(guò)類(lèi)似的項(xiàng)目，也是用的 angularjs，通過(guò) angular-route.js 實(shí)現(xiàn)單頁(yè)面程序。
在單頁(yè)面程序 （index.html）中 通過(guò) ajax 調(diào)用后臺(tái) 接口，如果成功返回：{status:true,...}如果未登錄失敗返回：{status:falst,next:’login’,errmsg:’錯(cuò)誤’}其他錯(cuò)誤返回：{status:falst,next:’接下來(lái)的操作’,errmsg:’錯(cuò)誤’}
如果返回狀態(tài) result.status==false，result.next==’login’:
case 'login': $http.get($api.callback($api.login)).success(function(val){//通過(guò)后臺(tái)返回 授權(quán)地址location.href = val.loginUrl; }); return;
授權(quán)跳轉(zhuǎn)到 wxlogin.php，驗(yàn)證登錄成功后，設(shè)置SESSION后，跳轉(zhuǎn)到 單頁(yè)面程序(index.html)接下來(lái)程序會(huì)繼續(xù)調(diào)用接口，因?yàn)橐呀?jīng) 登錄了，所以 返回：{status:true,...}
回答4：樓主最終還是location.href='http://m.propowerdrill.cn/wenda/13892.html'?么
回答5：這個(gè)應(yīng)該怎么解決了,樓主發(fā)下答案來(lái)解決一下,我準(zhǔn)備也用vue開(kāi)發(fā)微信
網(wǎng)公網(wǎng)安備