wap2app（五）-- 微信受權登陸以及踩過的坑

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

1、登陸插件配置

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

在manifest.json 文件中選擇 源碼視圖，找到「OAuth」，配置爲

"OAuth" : {
    "description" : "登陸受權"
},

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

2、在網站中添加受權登陸代碼

個人需求是：在網站中點擊微信受權登陸，判斷是否來自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等信息，以下圖：

可是打包後會一直提示登陸認證失敗，沒法受權，也沒有調起微信受權的頁面，主要有如下兩個錯誤：

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

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

依舊仍是報錯 code = -2,檢查是否在線上運行，即在開放平臺綁定的域名必須與該項目的域名一致，即咱們常說的，微信分享、微信登陸必須在線上測試

2、報錯 code = -100以下圖：

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

問題2：檢查開放平臺的配置受權回調域名是否配置，且是否配置正確（www.baidu.com格式）

解決辦法：

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

應用簽名的要求：

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

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

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.開發微信分享、微信登陸等微信相關的功能，在開放平臺或者公衆平臺綁定的域名必須與該項目的域名一致，即咱們常說的，微信分享、微信登陸必須在線上測試

 轉載時請註明出處及相應連接，本文永久地址：http://www.javashuo.com/article/p-pnywvovp-hp.html，文章標題備註轉載，如：xxx【轉載】,謝謝！