微信小程序 [獲取登錄用戶信息,重點openID(詳解)]

? 背景

  • 其實這篇文章幾個月前就寫完了,但是這段時間,微信小程序官方文檔有了更新,同事在我自己的實際操作過程中,發(fā)現(xiàn)之前寫的過于繁雜,所以現(xiàn)在進行簡化梳理,歡迎指摘.

? 步驟梳理

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


? 具體實現(xiàn)

一、登錄獲取用戶唯一信息 openID/unionID

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

①. 服務(wù)端代碼處理

  • 后面將會進行源代碼的上傳,具體代碼在 "WxController.class.php" 中,可作參考

②.小程序端 js編碼

  • 我在此處設(shè)置了一個 "button" 按鈕,通過點擊而調(diào)用其中的方法邏輯,其實在實際開發(fā)中,自行將其中的代碼提取調(diào)用就可;
/**
* 獲取用戶唯一憑證
*/
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',//注意改成自己的服務(wù)器請求地址哦!
          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) {
            //回調(diào)處理
            console.log('getOpenID-OK!');
            console.log(res.data);
          },
          fail: function(error) {
            console.log(error);
          }
        })
      },
      fail: function() {
        console('登錄獲取Code失敗!');
      }
    })
  },

③. 運行效果如下:

  • 注意觀察我的數(shù)據(jù)獲取情況,你會發(fā)現(xiàn)其中包含了 "unionID",這是因為我在微信開放平臺進行了綁定操作,如果你沒有這樣的操作,那么就不會有這個數(shù)據(jù)

提示:
UnionID 只在滿足一定條件的情況下返回。具體參看 UnionID機制說明
注意配置信息的填寫,需要正確填寫自己的數(shù)據(jù)哦,應(yīng)該歧義不大

二、新方法獲取用戶信息

  • 如果你接觸小程序時間較早,應(yīng)該會知道,微信小程序官方之前是使用接口 wx.getUserInfo() 方法進行操作的,但是因為近期版本更新,現(xiàn)在有了新的方法,推薦閱讀文檔了解, wx.getUserInfo(OBJECT) 接口獲取用戶信息

①. 第一步,頁面使用button引導(dǎo)

官方文檔已做注明:請使用 <button open-type="getUserInfo"></button> 引導(dǎo)用戶主動進行授權(quán)操作

  • 最簡單的使用方式就是,使用頁面中的 Button 進行引導(dǎo)操作即可:
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bingGetUserInfo">獲取用戶信息</button>

②. 第二步,js文件進行綁定事件處理

  • 在對應(yīng)的 js文件中,創(chuàng)建相應(yīng)的方法 bingGetUserInfo()
  /**
   * 獲取用戶信息
   */
  bingGetUserInfo:function(e){
  console.log(e.detail);
  },
  • 上述方法執(zhí)行后的打印數(shù)據(jù)截圖如下:


③. 第三步,后續(xù)處理

  • 根據(jù)上一步得到的 e.detail 打印出的對象數(shù)據(jù),直接進行提取所需要的數(shù)據(jù)(比如微信昵稱和頭像鏈接、性別等);
  • 然后通過 wx.request() 存儲到自己的服務(wù)器中即可;

注意(后面步驟,可繼續(xù)也可停止,自行決定?。?/h3>
> 其實,獲取當前登錄用戶的 "openID/unionID" 信息在前面"(一)"已經(jīng)可以簡單的獲得了;
> 但是如果想繼續(xù)當前的步驟的話:
  • 我們完全可以直接通過獲得的 "encryptedData",然后對其進行 算法對稱解密操作,就可以獲取到用戶的 openID/unionID 這些敏感數(shù)據(jù),并且文檔中也提供了不同語言的示例代碼
步驟梳理:
1).獲取臨時登錄憑證(code)
2).根據(jù)上一步中微信端傳來的參數(shù) "code",在本地服務(wù)器中請求微信的接口地址,從而得到"session_key"
    >接口地址為:"https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code"
3).服務(wù)端獲取數(shù)據(jù)簽名加密信息

④. 進一步的實現(xiàn)處理

  • 小程序 js代碼的補充擴展,其實還是前面的 bingGetUserInfo()方法:

提示

以我的 PHP 代碼為例,調(diào)用 WXBizDataCryptController 類的 wxDecrypt() 方法,傳入前面所獲得的所有參數(shù)即可

  • 附一張數(shù)據(jù)反饋截圖:


提示:
> 此時只要進行數(shù)據(jù)轉(zhuǎn)化即可得到我們所需要的 "openid/unionid" 重要信息;
> 比如,我需要用到此信息去數(shù)據(jù)庫比對該用戶的業(yè)務(wù)信息等;
> 當然,我建議的是在服務(wù)端獲取到數(shù)據(jù)后就與自己的數(shù)據(jù)庫進行匹配處理即可

? 附錄

? 推薦參考:

? 源碼下載

CSDN-源碼鏈接 歡迎指摘

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 背景小程序一個比較重要的能力就是獲取用戶信息,也就是使用 wx.getUserInfo接口。我們發(fā)現(xiàn)幾乎所有的小程...
    未央大佬閱讀 15,785評論 0 23
  • 轉(zhuǎn)載鏈接 注:本文轉(zhuǎn)載知乎上的回答 作者:初雪 鏈接:https://www.zhihu.com/question...
    pengshuangta閱讀 29,279評論 9 295
  • 給提問的開發(fā)者的建議:提問之前先查詢 文檔、通過社區(qū)右上角搜索搜索已經(jīng)存在的問題。 寫一個簡明扼要的標題,并且...
    極樂叔閱讀 14,615評論 0 3
  • 書讀百遍,其義自見。 不想改變的人,總會有無數(shù)理由去解釋改變的壞處。 這幾天天氣下雨,天陰陰的,自己變得壓抑了許多...
    A把時間當做朋友閱讀 175評論 1 4
  • 心理健康有利成長 心理健康,能使我們充分的感受生活的美好。生活中有許多美好的事物,大至祖國的欣欣向榮和社會的...
    聽lqy閱讀 484評論 0 1

友情鏈接更多精彩內(nèi)容