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

 轉載時請注明出處及相應鏈接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9850717.html，文章標題備注轉載，如：xxx【轉載】,謝謝！