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