在AngularJS應用中整合微信認證授權遇到的坑

前言      

      專案開發過程中，移動端新近增加了一個功能“微信授權登入”，由於自己不是負責移動端開發的，但最後他人負責的部分未達到預期效果。不能準確實現微信授權登入。最後還得靠自己做進一步的優化工作，誰讓自己是負責人呢？原來負責人就是負責最後把所有的BUG解決掉。

      首先，熟悉一下微信授權部分的原始碼，如下所示:

/*-------------- 微信授權登陸 --------------*/
 

// 擴充套件 API 載入完畢後觸發“plusready"事件
document.addEventListener("plusready", function() {
// 擴充套件API載入完畢，現在可以正常呼叫擴充套件API
plus.oauth.getServices(function(services) {
// services.length可獲取當前執行環境支援授權登入認證服務數目
if (services.length > 0) {
auths = services;
} else {
alert("當前執行環境不支援授權登入認證服務！");
}
}, function(e) {
alert("獲取分享服務列表失敗："
 
 + e.message + " - " + e.code);
});
}, false);
 
// 微信授權登入操作
$scope.authLogin = function(){
for(var i = 0; i < auths.length; i++){
console.log(auths[i].description);
if(auths[i].description == "微信"){
var s = auths[i];
break;
}
}
if (!s.authResult) {
console.log("微信尚未授權");
s.login(
//登入認證成功
function(e)
 
{
console.log("微信登入認證成功!");
var objuser = s.userInfo;
var uname = objuser.nickname;
console.log(objuser.nickname);
localStorage.uid = uname;
localStorage.logined = "2";
$rootScope.userinfo = {
'logined': "2",
'username': uname
};
console.log(localStorage.logined);
$scope.set_defaultaddr();
//登入後查詢訂單
$scope.getBillBadge();
if (sessionStorage) {
        console.log(sessionStorage.getItem("hisURL"));
        if(sessionStorage.getItem("hisURL")=='/tab/med_search')
        $rootScope.familyBox();
        $location.path(sessionStorage.getItem("hisURL"));
        }
},
//登入認證失敗
function(e){
alert( "登入認證失敗！" );
});
}else{
console.log("已經登入認證！");
}

      授權認證步驟:獲取授權登入認證服務——>授權登入認證服務

      手機之間在運行同一款軟體時由於系統差異也是存在表現差異。如下圖所示,上圖為紅米Android4.4.4版本上的測試結果，下圖為魅族5.0.1版本上的測試結果。很明顯下圖手機不能實現定位功能。

      更明顯的差異存在於授權部分，呼叫授權服務時返回的陣列內容不同，從下圖可明顯看出微信與QQ在返回陣列中的位置不同。

       參考文獻:http://www.html5plus.org/doc/zh_cn/oauth.html

                       http://ask.dcloud.net.cn/article/192

平臺支援：

Android - 2.2+ (不支援)

iOS - 5.0+ (不支援)

注:Js中判斷兩字串是否相等，使用“==”判斷。不能使用equals。

又出現了問題，在手機上除錯一切正常，等到打包成APK就出現不能授權(提示登入認證失敗)的問題。

alert( "登入認證失敗！" + e.message+" - "+e.code);如下圖所示:

還是直接在手機測試，出現下面的現象:

感覺處於一種死迴圈的狀態，但自己也一時找不到可以修改的地方。

注：

      微信登入配置的引數必須要提交線上打包才能生效（真機除錯的時候使用的是HBuilder基座的引數）

      折騰了一天，微信授權登入還是未能完成。，頭痛....

      好吧，我輸了。

第二天晚上

      繼續昨天未完的問題。嘗試根據返回的錯誤資訊進行修正。

      通過查閱資料終於發現問題所在了。授權中配置的引數必須來自微信開放平臺申請所得，而非公眾平臺。那麼二者之間又存在什麼樣的區別呢？接下來繼續講解。

微信開放平臺和公眾平臺的區別？

      簡單來講，微信公眾平臺是我們常見的公眾號，包括訂閱號、服務號和企業號，主要用於不具備太強技術開放能力，擁有一定運營能力的品牌、商戶、媒體以及個人，作為一個自媒體平臺或者服務視窗來用，是面向更廣大的人群使用的。

      微信開放平臺是一個開發者平臺，針對的是有較強技術開發能力、能夠研發同微信對接的應用開發者來使用的，面向的是技術公司和開發者，不是面向所有人都可以使用的。

      因此對於分不清二者區別的人來講，用公眾平臺就對了，能用得上開放平臺的人肯定都是對開放平臺功能有一定了解的人群。

      那麼，微信開放平臺與公眾平臺註冊所得資訊通用嗎？

      答案是NO！因為註冊時就不允許使用同一郵箱註冊。

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智慧的隊伍中來！http://www.captainbed.net