2. 程式人生 > >微信小程式全棧（一）.通過授權登入解密獲取使用者的openid和unionid

微信小程式全棧（一）.通過授權登入解密獲取使用者的openid和unionid

阿新 • • 發佈：2018-12-21

    最近做一個微信小程式，有個功能需要甲觸發A事件然後B收到甲的訊息。毫無疑問就是要獲取openid存下來與使用者綁定了。然後可能有公眾號對接進來，於是還是要求一個unionid。這就不可避免要涉及一個獲取流程。

   本來我以為是小程式端簡簡單單獲取一下騰訊的介面直接就返回回資料了，後來去官方文件看了一下是前端把密文，偏移量，code發給後臺，後臺通過騰訊介面傳送自己的AppId，AppSecret和認證型別獲取一個json物件，再用這個json物件解析出session_key，即會話金鑰，從而通過和密文，偏移量解密得出使用者的資訊放到hashmap裡面再進行自己的業務。

wxml檔案

<!--pages/authorize/index.wxml-->
<view class="container">
<form bindsubmit="bindSave">
<view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>1.同意當前小程式獲得我的微信頭像;</view>
<view style='width:100%;padding-left:30rpx;font-size: 28rpx;margin-top:30rpx;'>2.同意當前小程式獲取我的微信暱稱等其他資訊;</view>
<button open-type="getUserInfo" bindgetuserinfo="login" class="weui-button">授權並登入</button>
</form>
<!-- <view class="logged" >
<image class="logged-icon" src="../../images/"/>
<view class="logged-text">近期你已經授權登陸過{{title}}</view>
<view class="logged-text">自動登入中</view>
</view> -->
</view>

wxss檔案

/* pages/authorize/index.wxss */
page{
  height: 100%;
}

.container{
  background-color: #f5f5f9;
  justify-content: initial;
}

.form-box{
  width: 100%;
  background-color: #fff;
  margin-top: 20rpx;
}
.row-wrap{
    width: 720rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin-left: 30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
    /*justify-content: space-between;*/
}
.row-wrap .label{
    width: 160rpx;
    color: #000
}
.row-wrap .label-right{
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
}
.row-wrap .label-right input{
    height: 100%;
    font-size: 28rpx;
    padding-right: 30rpx;
}
.row-wrap .right-box{
    margin-right: 30rpx; 
}
.arrow-right{
    width: 15rpx;
    height: 24rpx;
}
.save-btn,
.cancel-btn{
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-top:30rpx; 
    border-radius: 6rpx;
    box-sizing: border-box;
}
.save-btn{
    background-color: #e64340;
    color:#fff;
}
button[type="default"]{
    background-color: #ffffff;
    color:#000;
}
.addr-details{
    height: auto;
    padding: 30rpx 0;
    margin-left:30rpx;
    border-bottom: 1rpx solid #eee;
    display: flex;
    font-size: 28rpx;
}
.addr-details .label{
    margin:auto 0 auto 0;
    width: 160rpx;
    color: #000
}
.addr-details textarea{
    box-sizing: border-box;
    width: 480rpx;
    overflow: scroll;
}
picker {
    min-width: 20rpx;
    height: 100%;
    margin-right: 20rpx;
}
.hui{
    color: #777;
}
.logged {
  margin-top: 100px;
}

.logged .logged-icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 20px auto;
}

.logged .logged-text {
  font-size: 14px;
  color: #000;
  text-align: center;
  margin: 10px 0;
}
 
// pages/authorize/index.js
var app=getApp();
var API_URL = app.globalData.baseUrl +'/userMobile'+'/login';
Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  },
  login:function(e){
    wx.login({
      success: function(r){
        var code=r.code;//登陸憑證
        console.log(code)
        if(code){
          wx.getUserInfo({
            success: function(res){
              console.log({encryptedData: res.encryptedData,iv:res.iv,code:code})
              wx.request({
                url: API_URL,
                method: 'POST',
                header: {
                  'content-type': 'application/json'
                },
                data:{
                 "encryptedData": res.encryptedData,
                 "iv": res.iv,
                 "code":code
                },
                success: function(data){
                  //解密成功後返回自己伺服器返回的結果
                  if(data.data.status==1){
                     var userInfo_=data.data.userInfo;
                     app.globalData.userInfo=userInfo_;
                     console.log(userInfo_)
                    wx.redirectTo({
                      url: '../../pages/area/area',
                    })
                  }else{
                    console.log('解密失敗')
                  }
                },
                fail: function(){
                  console.log('系統錯誤')
                }
              })
            },
            fail:function(){
              console.log('獲取使用者資訊失敗')
            }
          })
        }
      }
    })
  }
})

然後是後臺程式碼：

 @ApiOperation("小程式使用者登陸")
   @PostMapping("/login")
    public R decodeUserInfo(@RequestBody MobileUser mobileUser){
       if(mobileUser.getCode()==null||mobileUser.getCode().length()==0){
           return R.error("code不能為空").put("status",0);
       }
       String wxspAppid="*******************";//你的appid
       String wxspSecret="******************";//你的appsecret
       String grant_type="authorization_code";//一般都是這個認證型別

       String params="appid="+wxspAppid+"&secret="+wxspSecret+"&js_code="+mobileUser.getCode()+"&grant_type="+grant_type;
       //傳送請求
       String sr= HttpRequest.sendGet("https://api.weixin.qq.com/sns/jscode2session", params);
       JSONObject json= JSON.parseObject(sr);

       String session_key=json.get("session_key").toString();
       String openid=(String) json.get("openid");
       try{
       String result= AesCbcUtil.decrypt(mobileUser.getEncryptedData(),session_key,mobileUser.getIv(),"UTF-8");
       if(null!=result&&result.length()>0){
           JSONObject userInfoJSON=JSON.parseObject(result);
           Map userInfo=new HashMap();
           userInfo.put("openId", userInfoJSON.get("openId"));
           userInfo.put("nickName", userInfoJSON.get("nickName"));
           userInfo.put("gender", userInfoJSON.get("gender"));
           userInfo.put("city", userInfoJSON.get("city"));
           userInfo.put("province", userInfoJSON.get("province"));
           userInfo.put("country", userInfoJSON.get("country"));
           userInfo.put("avatarUrl", userInfoJSON.get("avatarUrl"));
           // 解密unionId & openId;
           if (userInfoJSON.get("unionId")!=null) {
               userInfo.put("unionId", userInfoJSON.get("unionId"));
           }
           return R.ok("成功").put("status",1).put("userInfo",userInfo);
       }else{
           return R.error("失敗").put("status",0);
       }
       }catch(Exception e){
       logger.error(e.toString());
       return R.error();
       }
  //return R.ok();
   }

usermobile的包體

public class MobileUser {
    private String encryptedData;
    private String iv;
    private String code;

    public String getCode() {
        return code;
    }

    public String getEncryptedData() {
        return encryptedData;
    }

    public String getIv() {
        return iv;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public void setEncryptedData(String encryptedData) {
        this.encryptedData = encryptedData;
    }

    public void setIv(String iv) {
        this.iv = iv;
    }

}

後臺接發資料的工具類HttpRequest

public class HttpRequest {
    /**
     * 向指定URL傳送GET方法的請求
     *
     * @param url
     *            傳送請求的URL
     * @param param
     *            請求引數，請求引數應該是 name1=value1&name2=value2 的形式。
     * @return URL 所代表遠端資源的響應結果
     */
    public static String sendGet(String url, String param) {
        String result = "";
        BufferedReader in = null;
        try {
            String urlNameString = url + "?" + param;
            URL realUrl = new URL(urlNameString);
            // 開啟和URL之間的連線
            URLConnection connection = realUrl.openConnection();
            // 設定通用的請求屬性
            connection.setRequestProperty("accept", "*/*");
            connection.setRequestProperty("connection", "Keep-Alive");
            connection.setRequestProperty("user-agent",
                    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            // 建立實際的連線
            connection.connect();
            // 獲取所有響應頭欄位
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍歷所有的響應頭欄位
            for (String key : map.keySet()) {
                System.out.println(key + "--->" + map.get(key));
            }
            // 定義 BufferedReader輸入流來讀取URL的響應
            in = new BufferedReader(new InputStreamReader(
                    connection.getInputStream()));
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
        } catch (Exception e) {
            System.out.println("傳送GET請求出現異常！" + e);
            e.printStackTrace();
        }
        // 使用finally塊來關閉輸入流
        finally {
            try {
                if (in != null) {
                    in.close();
                }
            } catch (Exception e2) {
                e2.printStackTrace();
            }
        }
        return result;
    }

    /**
     * 向指定 URL 傳送POST方法的請求
     *
     * @param url
     *            傳送請求的 URL
     * @param param
     *            請求引數，請求引數應該是 name1=value1&name2=value2 的形式。
     * @return 所代表遠端資源的響應結果
     */
    public static String sendPost(String url, String param) {
        PrintWriter out = null;
        BufferedReader in = null;
        String result = "";
        try {
            URL realUrl = new URL(url);
            // 開啟和URL之間的連線
            URLConnection conn = realUrl.openConnection();
            // 設定通用的請求屬性
            conn.setRequestProperty("accept", "*/*");
            conn.setRequestProperty("connection", "Keep-Alive");
            conn.setRequestProperty("user-agent",
                    "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;SV1)");
            // 傳送POST請求必須設定如下兩行
            conn.setDoOutput(true);
            conn.setDoInput(true);
            // 獲取URLConnection物件對應的輸出流
            out = new PrintWriter(conn.getOutputStream());
            // 傳送請求引數
            out.print(param);
            // flush輸出流的緩衝
            out.flush();
            // 定義BufferedReader輸入流來讀取URL的響應
            in = new BufferedReader(
                    new InputStreamReader(conn.getInputStream()));
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
        } catch (Exception e) {
            System.out.println("傳送 POST 請求出現異常！"+e);
            e.printStackTrace();
        }
        //使用finally塊來關閉輸出流、輸入流
        finally{
            try{
                if(out!=null){
                    out.close();
                }
                if(in!=null){
                    in.close();
                }
            }
            catch(IOException ex){
                ex.printStackTrace();
            }
        }
        return result;
    }

}

解密的方法工具類:

public class AesCbcUtil {


    static {
        //BouncyCastle是一個開源的加解密解決方案，主頁在http://www.bouncycastle.org/
        Security.addProvider(new BouncyCastleProvider());
    }

    /**
     * AES解密
     *
     * @param data      //密文，被加密的資料
     * @param key      //祕鑰
     * @param iv       //偏移量
     * @param encodingFormat //解密後的結果需要進行的編碼
     * @return
     * @throws Exception
     */
    public static String decrypt(String data, String key, String iv, String encodingFormat) throws Exception {
//    initialize();

        //被加密的資料
        byte[] dataByte = Base64.decodeBase64(data);
        //加密祕鑰
        byte[] keyByte = Base64.decodeBase64(key);
        //偏移量
        byte[] ivByte = Base64.decodeBase64(iv);


        try {
            Cipher cipher = Cipher.getInstance("AES/CBC/PKCS7Padding");

            SecretKeySpec spec = new SecretKeySpec(keyByte, "AES");

            AlgorithmParameters parameters = AlgorithmParameters.getInstance("AES");
            parameters.init(new IvParameterSpec(ivByte));

            cipher.init(Cipher.DECRYPT_MODE, spec, parameters);// 初始化

            byte[] resultByte = cipher.doFinal(dataByte);
            if (null != resultByte && resultByte.length > 0) {
                String result = new String(resultByte, encodingFormat);
                return result;
            }
            return null;
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (NoSuchPaddingException e) {
            e.printStackTrace();
        } catch (InvalidParameterSpecException e) {
            e.printStackTrace();
        } catch (InvalidKeyException e) {
            e.printStackTrace();
        } catch (InvalidAlgorithmParameterException e) {
            e.printStackTrace();
        } catch (IllegalBlockSizeException e) {
            e.printStackTrace();
        } catch (BadPaddingException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }

        return null;
    }

}

注意這裡解密完成後如果需要進行token認證的系統，理論上是可以通過JWT利用傳過來的三個資料造出token並儲存到資料庫從而進行認證的。有shiro的系統也是可以在config裡面進行遮蔽操作的。

大概完成周期一個禮拜，給自己定個小目標。

相關推薦

微信小程式全棧（一）.通過授權登入解密獲取使用者的openid和unionid

    最近做一個微信小程式，有個功能需要甲觸發A事件然後B收到甲的訊息。毫無疑問就是要獲取openid存下來與使用者綁定了。然後可能有公眾號對接進來，於是還是要求一個unionid。這就不可避免要涉及一個獲取流程。    本來我以為是小程式端簡簡單單獲取一下騰訊的介面直接

tp5微信小程式全棧開發一——流程體系介紹

二、產品所用技術 1、thinkphp5 編寫業務邏輯 訪問資料庫 向客戶端提供資料 2、mysql 資料儲存 資料表設計 與業務緊密結合 3、微信 支付 善於模仿借鑑，學習微信介面設計 4、小程式 直接與使用者互動 體驗很重要 三、流程和體系 1、服務端 thinkph

mpvue寫微信小程式-圖片引入（一）

1、快速上手（http://mpvue.com/mpvue/quickstart/）       按官網給出流程，建立：         執行後，在微信工具檢視： 編輯器中檢視目錄結構： 為了執行的

微信小程式——學習筆記（一）：json

json配置檔案—— 1> app.json：作用於整個小程式全域性配置   頁面路徑——page(陣列[字串="路徑+檔名"])      "pages":["pages/index/index","pages/log/index"]

微信小程式學習筆記（一）之框架及工具

文章目錄 一、app.json的配置 1. 決定頁面檔案路徑 2. 配置視窗表現 3. 配置tab標籤導航 4. 設定網路超時時間 5. 配置debug模式 二、App()函式使用

基於java的微信小程式的實現（一）專案介紹

一，專案介紹 佐倉短視訊是一個以java為後臺編寫的短視訊類的微信小程式專案 使用者可以實現登入，註冊，視訊檢視，視訊上傳，個人資訊檢視，頭像上傳等功能 二，技術選型和效果預覽 本專案後端採用spring boot +spring data jpa的技術實現

【轉載】微信小程式-開發入門（一）

微信小程式已經火了一段時間了，之前一直也在關注，就這半年的發展來看，相對原生APP大部分公司還是不願意將主營業務放到微信平臺上，以免受制於騰訊，不過就小程式的應用場景（用完即走和二維碼分發等）還是很值得我們學習的，技術上面如果瞭解React的話，會發現他們在元件化上面有很多雷同之處。說白了，小程式就是基於微信

微信小程式學習筆記（一）----微信小程式入門簡介，開發者工具基礎使用

到現在學習小程式已經不早了，但是無論什麼時候開始都不晚，只要學就OK。 看到所有小程式開發的教程全部都是以註冊賬號開始的，但是註冊賬號的過程無論是官方文件還是其他的經驗帖子都已經有一堆了，而且本身這個過程也並不具有什麼技術性，實在是很多收費的教程視訊用來前期拖時間的一種方式

微信小程式-開發入門（一）

微信小程式已經火了一段時間了，之前一直也在關注，就這半年的發展來看，相對原生APP大部分公司還是不願意將主營業務放到微信平臺上，以免受制於騰訊，不過就小程式的應用場景（用完即走和二維碼分發等）還是很值得我們學習的，技術上面如果瞭解React的話，會發現他們在元件化上面有很

微信小程式開發入門（一）

 小程式學習入門--（一） 最近自己學習微信小程式的過程當中自己總結出來的知識點，我會不斷地更新和完善！ 小程式的開發工具 一臺電腦 熟悉HTML、CSS、JS基本語法

微信小程式元件通訊（一）

　　當我們擼前端頁面的時候，當發現一個頁面內容很多、且有一定的分類，就應當考慮是否需要將頁面拆分成一個個元件。當使用元件的時候，不可避免的需要知道父子頁面通訊以及兄弟頁面的通訊。 　　1、父向子通訊 是通過properity去傳遞即可。properity是元件對外屬性，有三個屬性：type(必須)、valu

微信小程式學習總結（一）

建立專案 如圖所示 選點此校驗就行啦，右邊有個詳情也點開瞅兩眼。 上傳測試和騰訊這塊點不了是為啥呢，因為你建立專案的時候沒有填寫AppID，下一題。 具體的東西下載下來

微信小程式之簡介（一）

小程式： 對於微信小程式，張小龍是這樣說的：小程式是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，使用者掃一掃或搜一下即可開啟應用。也體現了「用完即走」的理念，使用者不用關心是否

微信小程式基礎入門（一）：小程式介面介紹&創造自己的第一個小程式

承接小程式配置之後 ，先對小程式開發軟體的介面進行介紹： 然後進入第一個小程式的構造：獲取使用者登陸資訊 通過左上角的 “+”新增頁面 然後建立第一個功能頁面 然後頁面構造完成：各部分程式碼： app.

微信小程式跳坑（一）——navigateTo跳轉連結失靈

一般在小程式的跳轉中，有常見的2種方法： 1，用ontap標籤來呼叫js函式裡面的navigateTo實現跳轉 如注意連結的層次，官方給出的目錄層次不建議超過5層的。本目錄的層次結構如下：2，用navigator標籤直接實現 文字跳轉但是，問題來了》》 在這裡提一個很詭異的問

taro 打包微信小程式執行失敗（一）

善始者實繁，克終者蓋寡。 技術棧：angular + ionic + vue + mint-ui + react-native + teaset + h5plus + mui + nodejs + webpack + gulp + ES6 + vux + typescript

微信小程式開發基礎（一）「配置」與「邏輯層」

微信小程式作為微信生態重要的一環，在實際生活、工作、商業中的應用越來越廣泛。想學習微信小程式開發的朋友也越來越多，本文將在小程式框架的基礎上就微信小程式專案開發所必需的基礎知識及語法特點進行了詳細總結和闡述，包括配置、函式、語法、事件及其處理、資料繫結、模組、樣式等。想開發小程式，這些內容是必須掌握的。 全

微信小程序的開發（一）

ram tle ati java ndt 喜歡 top lex navig 我現在在學習，微信小程序開發，剛剛看看一篇對我特別有用的博客文章，我就把摘抄過來了，好好的學習一下。 序言 開始開發應用號之前，先看看官方公布的「小程序」教程吧！（以下內容來自微信官方公布的「小程序

微信小程序學習記錄（一）

地址 n) taf forest 對象復制 strong display exp 價格 如何定義一個全局變量： 1，在根目錄下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_curre

微信小程式之微信登陸 —— 微信小程式教程系列（20）

簡介： 微信登陸，在新建一個微信小程式Hello World專案的時候，就可以看到專案中出現了我們的微信頭像，其實這個Hello World專案，就有一個簡化版的微信登陸。只不過是，還沒有寫入到咱們自家的後臺中而已。 新建一個Hello World專案，找到a