小程序的登錄和數據解密全解析

shadajin 發布于2019-08-22 16:36 / 560人閱讀

摘要：好了，回到正文來，聊咱們的小程序。致敬登錄大部分邏輯代碼統統來自手把手教會你小程序登錄鑒權登錄流程上圖是官方給出的登錄流程，我們來捋下邏輯。用來校驗當前用戶的是否有效，微信不會把的有效期告知開發者，用戶越頻繁使用小程序，有效期越長。

不知不覺已經一個月沒有寫東西了，墮落的日子居然過的這么心（chou）安（bu）理（yao）得（lian），罪過啊。

好了，回到正文來，聊咱們的小程序。

致敬

登錄大部分邏輯代碼統統來自手把手教會你小程序登錄鑒權

登錄流程

上圖是官方給出的登錄流程，我們來捋下邏輯。

1、用戶使用wx.login獲取臨時code,有效期為5分鐘

2、將臨時code傳到我們自己的后端服務，調用微信的API獲取用戶的session_key和openid

3、后端自定義新的密鑰并關聯返回的session_key和openid，將新的密鑰返給前端

4、前端發送請求的時候，帶著密鑰，后端進行解析后返回數據

session_key和openid

1、session_key會話密鑰，用來確定會話的操作的有效性和用來加密解密用戶數據，服務器自己存儲即可，不應該將密鑰返給前端和對話使用

2、openid用戶唯一標識，同樣只用于服務器,可以用來標識用戶的唯一性

接下來，我們說下它們的獲取,通過服務端調用微信API獲取

API：https://api.weixin.qq.com/sns/jscode2session

參數如下：

// 小程序頁面
wx.login({
    success:(ret)=>{
        wx.request({
            url: "http://test.com", // 后端服務器
            data:{
                code : ret.code
            }
        })
    }
})

后端服務我們使用request模塊來發送請求

// 后端服務
let options = {
  url: "https://api.weixin.qq.com/sns/jscode2session",
  qs:{
      appid: appid,  
      secret: secret,
      js_code: code,
      grant_type:"authorization_code"
  }
}

// 默認請求方式是get
request(options, (err, response, body) => {
    if(err) return err
    return body  // {openid:"openid", session_key:"session_key"} 不是真正的返回 看下面的代碼
})

生成新的密鑰 skey

上面我們獲取了session_key和openid，下文兩個字斷稱keyID，接下來我們生成一個新的密鑰返回前端并將新密鑰關聯keyID。

我們使用crypto模塊的sha1算法生成密鑰

const crypto = require("crypto")

function getShaKey(data){
    return crypto.createHash("sha1").update(data, "utf8").digest("hex")
}

上面的代碼返回我們就改成這個新的skey，前端將這個密鑰存在storage里面，請求的時候帶上這個skey，就完成了自定義登錄態。

wx.checkSession

用來校驗當前用戶的session_key是否有效，微信不會把session_key的有效期告知開發者，用戶越頻繁使用小程序，session_key有效期越長。

wx.checkSession({
    success:function(){  // 當前session_key有效
        ... // 可以寫我們的業務代碼
    },
    fail:function(){   // 當前session_key已過期
        wx.login()  // 重新登錄，獲取新的session_key
    }
})

當session_key過期的時候，我們調用登錄API，更新session_key生成新的skey，并關聯二者關系。

工具函數的封裝

前面我們將流程大概串了下，接下來我們把上面的流程寫成寫成公用的函數

// 驗證session_key狀態
function checkSession(){
    return new Promise((resolve, reject) => {
        wx.checkSession({
            success:function(){
                resolve(true)
            },
            fail:function(){
                reject(false)
            }
        })
    })
}

// 登錄

function login(){
    return new Promise((resolve, reject) => {
        wx.login({
            success: (ret) => {
                wx.request({
                    url:"本地服務地址",
                    method: "POST",
                    data:{
                        code: ret.code
                    },
                    success: (response) =>{
                        wx.setStorageSync("skey", response.data.key)  // 將skey存在storage里面
                        resolve(response.data.key)
                    }
                    
                })
            }
        })
        
    })
}

// 請求

function ajax(url, data, method="GET", config={}){
    let skey = wx.getStorageSync("skey") // 獲取skey
    if(!skey){  // 沒有skey，首次登錄
        return new Promise((resolve, reject) => {
            login()
            reject("請登錄")
        })
    } else {
        return new Promise((resolve, reject) => {
      checkSession().then( _=> {
        if (_){ // session_key有效
          wx.request({
            url,
            method: method.toLocaleUpperCase(),
            data,
            header: Object.assign({}, { skey }, config),
            success: (ret) => {
              resolve(ret.data)
            }
          })
        } else { // session_key失效
          login()
          reject("session_key失效")
        }
      })
    })

    }
}

后端代碼

后端使用koa框架，代碼見文末github地址

解密

官方提供了多種編程語言的示例代碼點擊下載

這里我們使用微信運動API為例

var app = getApp()  // 我們將工具函數都放在了app的示例上面
Page({
    onLoad:function(){
        app.Util.login().then(_ => {  // 先登錄然后獲取數據
      this.getrunData()
    })
    },
    getrunData(){
    wx.getWeRunData({
      success: (ret) => {
        app.Util.ajax("本地服務地址", { iv: ret.iv, data: ret.encryptedData}, "post").then(_=>{
          console.log(_)
        }, (err)=>{
          console.log(err)
        })
      }
    })
  },

})

返回結果如下

以上，我們完成了小程序簡單的登錄鑒權和數據解密

效果圖鎮樓

結尾

登錄鑒權我們只是將用戶狀態放在了內存里，實際項目中肯定要放在數據庫中，可以拜讀下大神文章，里面說到了數據庫的操作。

再次致敬

本文完整代碼請戳github

GPU云服務器云服務器個人小程序和公司小程序的區別小程序的開發和發布小程序和公眾號的區別 php 小程序登錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94501.html

微信小程序Java登錄流程（ssm實現具體功能和加解密隱私信息問題解決方案）

摘要：文章有不當之處，歡迎指正，如果喜歡微信閱讀，你也可以關注我的微信公眾號好好學，獲取優質學習資源。一登錄流程圖二小程序客戶端獲取用戶信息非必填默認為請求服務端的登錄接口臨時登錄憑證用戶非敏感信息簽名用戶敏感信息解密算法的向量調用服務端登錄接口文章有不當之處，歡迎指正，如果喜歡微信閱讀，你也可以關注我的微信公眾號：好好學java，獲取優質學習資源。一、登錄流程圖 showImg(htt...

QiShare 2019-08-16 12:44 評論0 收藏0
小程序登錄、微信網頁授權（Java版）

摘要：小程序登錄微信網頁授權版首先呢，登錄授權授權登錄，是一樣的意思，不用糾結。寫小程序授權登錄的代碼前，需要了解清楚與的區別，這里再簡單介紹一下騰訊有個微信開放平臺，只有企業才能注冊賬號，可理解為微信體系里，最頂級的賬號。小程序登錄、微信網頁授權（Java版）首先呢，登錄、授權、授權登錄，是一樣的意思，不用糾結。寫小程序授權登錄的代碼前，需要了解清楚openid與unionid的區別...

joywek 2019-08-16 14:02 評論0 收藏0
微信小程序開發：python+sanic 實現小程序登錄注冊

摘要：參考鏈接微信小程序七日談第五天你可能要在登錄功能上花費大力氣理解認證及實踐網站微信登錄實現最后，感謝女朋友支持。開發微信小程序時，接入小程序的授權登錄可以快速實現用戶注冊登錄的步驟，是快速建立用戶體系的重要一步。這篇文章將介紹 python + sanic + 微信小程序實現用戶快速注冊登錄全棧方案。微信小程序登錄時序圖如下： showImg(https://segmentfaul...

antz 2019-08-20 18:25 評論0 收藏0
微信小程序開發：python+sanic 實現小程序登錄注冊

摘要：參考鏈接微信小程序七日談第五天你可能要在登錄功能上花費大力氣理解認證及實踐網站微信登錄實現最后，感謝女朋友支持。開發微信小程序時，接入小程序的授權登錄可以快速實現用戶注冊登錄的步驟，是快速建立用戶體系的重要一步。這篇文章將介紹 python + sanic + 微信小程序實現用戶快速注冊登錄全棧方案。微信小程序登錄時序圖如下： showImg(https://segmentfaul...

Nino 2019-07-30 14:24 評論0 收藏0
微信小程序授權登錄、解密unionId出錯

摘要：注沒有在微信開放平臺做開發者資質認證的就不要浪費時間了，沒認證無法獲取，認證費用元年，微信授權登錄流程第一步獲取用戶臨時登錄憑證第二步獲取加密過的數據和解密參數第三步把步驟一二中的傳到開發者自己服務端第三步服務端獲取到之后用方法請求如下微信注：沒有在微信開放平臺做開發者資質認證的就不要浪費時間了，沒認證無法獲取unionId，認證費用300元/年，emmmm.... 微信授權登錄流程...

tinysun1234 2019-08-26 12:21 評論0 收藏0