1. 程式人生 > >微信小程式Ⅴ [獲取登入使用者資訊,重點openID(詳解)]

微信小程式Ⅴ [獲取登入使用者資訊,重點openID(詳解)]

♩ 背景

  • 其實這篇文章幾個月前就寫完了,但是這段時間,微信小程式官方文件有了更新,同事在我自己的實際操作過程中,發先之前寫的過於繁雜,所以現在進行簡化梳理,歡迎指摘.
  • 語言框架:ThinkPHP3.2.3
  • 更新時間:2018-07-10

♪ 步驟梳理

  • 下面是小程式官方提供流程圖:

♫ 具體實現

一、登入獲取使用者唯一資訊 openID/unionID

  • 此方式,只需要兩步操作即可,但是需要小程式端和專案伺服器的程式碼配合進行操作,建議參考下官方說明 wx.login(OBJECT)
步驟梳理:
> (1).獲取臨時登入憑證—— code
> (2
).將上述獲得的 code 通過request 請求傳送給程式碼伺服器 > (3).請求介面地址:https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code > ;# 成功則會返回我們所需要的 "openID/unionID"
  • 具體實現:

①. 服務端程式碼處理

  • 後面將會進行原始碼的上傳,具體程式碼在 "WxController.class.php" 中,可作參考

②.小程式端 js
編碼

  • 我在此處設定了一個 "button" 按鈕,通過點選而呼叫其中的方法邏輯,其實在實際開發中,自行將其中的程式碼提取呼叫就可;
/**
* 獲取使用者唯一憑證
*/
bingGetOpenID: function() {
    wx.login({
      success: function(data) {
        console.log('獲取登入 Code:' + data.code)
        var postData = {
          code: data.code
        };
        wx.request({
          url: 'http://fetowNew.com/wxApi/wx/getOpenID'
,//注意改成自己的伺服器請求地址哦! data: postData, method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', }, success: function(res) { //回撥處理 console.log('getOpenID-OK!'); console.log(res.data); }, fail: function(error) { console.log(error); } }) }, fail: function() { console('登入獲取Code失敗!'); } }) },

③. 執行效果如下:

  • 注意觀察我的資料獲取情況,你會發現其中包含了 "unionID",這是因為我在微信開放平臺進行了繫結操作,如果你沒有這樣的操作,那麼就不會有這個資料

提示:
UnionID 只在滿足一定條件的情況下返回。具體參看 UnionID機制說明
注意配置資訊的填寫,需要正確填寫自己的資料哦,應該歧義不大

二、新方法獲取使用者資訊

  • 如果你接觸小程式時間較早,應該會知道,微信小程式官方之前是使用介面 wx.getUserInfo() 方法進行操作的,但是因為近期版本更新,現在有了新的方法,推薦閱讀文件瞭解, wx.getUserInfo(OBJECT) 介面獲取使用者資訊

①. 第一步,頁面使用button引導

官方文件已做註明:請使用 <button open-type="getUserInfo"></button> 引導使用者主動進行授權操作

  • 最簡單的使用方式就是,使用頁面中的 Button 進行引導操作即可:
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bingGetUserInfo">獲取使用者資訊</button>

②. 第二步,js檔案進行繫結事件處理

  • 在對應的 js檔案中,建立相應的方法 bingGetUserInfo()
  /**
   * 獲取使用者資訊
   */
  bingGetUserInfo:function(e){
  console.log(e.detail);
  },
  • 上述方法執行後的列印資料截圖如下:

③. 第三步,後續處理

  • 根據上一步得到的 e.detail 打印出的物件資料,直接進行提取所需要的資料(比如微信暱稱和頭像連結、性別等);
  • 然後通過 wx.request() 儲存到自己的伺服器中即可;

注意(後面步驟,可繼續也可停止,自行決定!):

> 其實,獲取當前登入使用者的 "openID/unionID" 資訊在前面"(一)"已經可以簡單的獲得了;
> 但是如果想繼續當前的步驟的話:
  • 我們完全可以直接通過獲得的 "encryptedData",然後對其進行 演算法對稱解密操作,就可以獲取到使用者的 openID/unionID 這些敏感資料,並且文件中也提供了不同語言的示例程式碼
步驟梳理:
1).獲取臨時登入憑證(code)
2).根據上一步中微信端傳來的引數 "code",在本地伺服器中請求微信的介面地址,從而得到"session_key"
    >介面地址為:"https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code"
3).服務端獲取資料簽名加密資訊

④. 進一步的實現處理

  • 小程式 js程式碼的補充擴充套件,其實還是前面的 bingGetUserInfo()方法:

    提示

    以我的 PHP 程式碼為例,呼叫 WXBizDataCryptController 類的 wxDecrypt() 方法,傳入前面所獲得的所有引數即可

  • 附一張資料反饋截圖:

提示:
> 此時只要進行資料轉化即可得到我們所需要的 "openid/unionid" 重要資訊;
> 比如,我需要用到此資訊去資料庫比對該使用者的業務資訊等;
> 當然,我建議的是在服務端獲取到資料後就與自己的資料庫進行匹配處理即可

♬ 附錄

♦ 推薦參考:

♥ 原始碼下載