wap2app（五）-- 微信授權登錄以及踩過的坑

應用場景是：用Hbuilder打包app，在app中點擊微信授權登錄或者某一操作，調起微信授權登錄，用戶授權後拿到用戶信息。

一、登錄插件配置

先配置微信登錄參數 appid和appsecret，在manifest.json 文件中選擇SDK配置，登錄鑒權  勾選微信登錄，填入在開放平臺申請的app參數。

在manifest.json 文件中選擇 源碼視圖，找到“OAuth”，配置為

"OAuth" : {
    "description" : "登錄授權"
},

 官方相關查閱地址：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/192

二、在網站中添加授權登錄代碼

我的需求是：在網站中點擊微信授權登錄，判斷是否來自wap2app，如果來自wap2app則調起微信授權登錄。在網站中加入如下代碼：

1.點擊微信授權登錄，獲取微信授權服務：

var auths=null;
$("body").on("click",".loginBtn",function(){
    // 微信授權登錄
    if(navigator.userAgent.indexOf("Html5Plus") > -1){
        plus.oauth.getServices( function(services){
            auths = services;
            authLogin();
        }, function(e){
            alert("獲取分享服務列表失敗："+e.message+" - "+e.code);
        } );
    }

})

2.登錄認證

//登錄
function authLogin(){
    var s = auths[0];
    if ( !s.authResult ) {
        s.login( function(e){
            // 獲取登錄操作結果
            var result = e.target.authResult;
            alert( "登錄認證成功："+JSON.stringify(result) );
            authUserInfo()
        }, function(e){
            alert("登錄認證失敗！");
        }, {} );
    }
}

3.獲取用戶信息

// 獲取登錄用戶信息操作
function authUserInfo(){
    var s = auths[0];
    if ( !s.authResult ) {
        alert("未登錄授權！");
    } else {
        s.getUserInfo( function(e){
            alert( "獲取用戶信息成功："+JSON.stringify(s.userInfo) );

            //拿到用戶信息，進行相關處理，ajax傳用戶數據到伺服器等
            var prame = JSON.stringify(s.userInfo);

        }, function(e){
            alert( "獲取用戶信息失敗："+e.message+" - "+e.code );
        } );
    }
}

4.退出登錄

function authLogout(){
    for ( var i in auths ) {
        var s = auths[i];
        if ( s.authResult ) {
            s.logout(function(e){
                alert( "註銷登錄認證成功！" );
            }, function(e){
                alert( "註銷登錄認證失敗！" );
            });
        }
    }
}

 官方相關查閱地址：http://www.html5plus.org/doc/zh_cn/oauth.html

在hbuilder中運行會發現可以調起微信授權，且可以獲取用戶信息，如下圖：

點擊確認登錄後，返回用戶信息和unionid等信息，如下圖：

但是打包後會一直提示登錄認證失敗，無法授權，也沒有調起微信授權的頁面，主要有以下兩個錯誤：

一、報錯 code = -2,用戶取消

解決辦法：研究了很久，發現主要是兩個原因：1.使用了網站的appid和appsecret，應該是申請的app應用的appid和appsecret，2.應該使用自有證書

依舊還是報錯 code = -2,檢查是否線上上運行，即在開放平臺綁定的功能變數名稱必須與該項目的功能變數名稱一致，即我們常說的，微信分享、微信登錄必須線上上測試

二、報錯 code = -100如下圖：

問題1：檢查應用簽名是否錯誤

問題2：檢查開放平臺的配置授權回調功能變數名稱是否配置，且是否配置正確（www.baidu.com格式）

解決辦法：

微信開放平臺移動應用中的應用簽名錯誤，若申請應用時開發信息中數據填寫錯誤，直接修改，已審核通過的不需要重寫審核。

應用簽名的要求：

1.MD5格式 2.簽名為小寫；3.去除冒號。都為必須條件。

在Hbuilder中配置時，簽名也必須是修改後的格式（md5、小寫、去冒號）。

Hbuilder中配置應用簽名時，打開manifest.json文件，打開“源碼視圖”（基礎配置，圖標配置，啟動圖配置，SDK配置，模塊許可權配置中都是沒有應用簽名配置的，所以很容易遺漏修改它的值），找到 plus --> signature，修改signature的值為符合條件的值即可

以上打包之後，不在報錯，但是還有一個問題，在app中點擊微信授權後，除了首次會調起微信授權手動授權的界面，再次授權時直接就彈出了用戶信息，即直接執行了，缺少用戶在終端確認的請求授權過程

alert( "登錄認證成功："+JSON.stringify(result) );

這是因為，授權的微信號只有首次授權時才會調起微信授權的頁面，當退出微信授權再次進入時，點擊授權會跳轉之後再跳回來，自動獲取到用戶信息。

打包app，微信授權登錄常遇到的問題總結：

1.使用了網站的appid和appsecret，應該是申請的app應用的appid和appsecret

2.應該使用自有證書

3.微信開放平臺移動應用中的應用簽名錯誤，必須滿足3點：1.MD5格式 2.簽名為小寫；3.去除冒號。都為必須條件。

4.(網站或打包app)微信授權登錄，必須在開放平臺配置授權回調功能變數名稱，且必須是www形式的，如www.baidu.com，否則授權登錄一直報錯

5.開發微信分享、微信登錄等微信相關的功能，在開放平臺或者公眾平臺綁定的功能變數名稱必須與該項目的功能變數名稱一致，即我們常說的，微信分享、微信登錄必須線上上測試