微信小程序登陸流程及解析用戶openid session_key，獲取用戶信息

爲優化用戶體驗，使用 wx.getUserInfo 接口直接彈出受權框的開發方式將逐步再也不支持。從2018年4月30日開始，小程序與小遊戲的體驗版、開發版調用 wx.getUserInfo 接口，將沒法彈出受權詢問框，默認調用失敗。正式版暫不受影響。開發者可以使用如下方式獲取或展現用戶信息：

UnionID 機制說明

若是開發者擁有多個移動應用、網站應用、和公衆賬號（包括小程序），可經過 UnionID 來區分用戶的惟一性，由於只要是同一個微信開放平臺賬號下的移動應用、網站應用和公衆賬號（包括小程序），用戶的 UnionID 是惟一的。換句話說，同一用戶，對同一個微信開放平臺下的不一樣應用，unionid是相同的。因此咱們有時候須要獲取這個UnionID

 

這個圖簡單的能夠看作三部分

1.微信小程序客戶端

2.微信官方服務器

3.第三方服務器（這個能夠看作是本身的）

具體步驟以下;

1. 客戶端得到code，並將code傳給第三方服務端

微信小程序端調用wx.login，獲取登陸憑證（code），並調用接口，將code發送到第三方客戶端

2. 第三方服務端用code換session_key和openid

小程序端將code傳給第三方服務器端，第三方服務器端調用接口，用code換取session_key和openid

3. 第三方服務端生成新的session（3rd_session）

第三方服務器端拿到請求回來的session_key和openid，先留着，不能給客戶端；而後用操做系統提供的真正隨機數算法生成一個新的session，叫3rd_session

4. 第三方服務端創建對應關係，並存儲

將3rd_session做爲key，微信服務端返回的session_key和openid做爲值，保存起來

5. 第三方服務端將3rd_session發送到客戶端

客戶端只拿到3rd_session就夠了，大人說話小孩別插嘴，小程序不須要知道session_key和openid

6. 正常請求

小程序每次請求都將3rd_session放在請求頭裏，第三方服務端解析判斷合法性，並進行正常的邏輯處理

好了，廢話很少說了，直接上代碼：

1 <!--index.wxml-->
2 <view class='content'>
3   <button open-type='getUserInfo' type='primary' size='default' bindtap="getUserInfo">登陸</button>
4 </view>

//index.js
//獲取應用實例
const app = getApp()
var OPEN_ID = ''//儲存獲取到openid  
var SESSION_KEY = ''//儲存獲取到session_key
var AVATARURL = ''
var NICKNAME = ''
var GENDER = ''
var PROVINCE = ''
var CITY = ''
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    //判斷小程序的API，回調，參數，組件等是否在當前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    isHide: false,
  },


  /**
   * 生命週期函數--監聽頁面加載
   */

  onLoad: function () {
    var that = this;
    var nickName ='';
    var avatarUrl =''
    // 查看是否受權
    wx.getSetting({
      success: function (res) {
        
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function (res) {
              // 用戶已經受權過,不須要顯示受權頁面,因此不須要改變 isHide 的值
              that.setData({
                nickName:res.userInfo.nickName,
                avatarUrl:res.userInfo.avatarUrl
              })
            }
          });
        
        } else {
          // 用戶沒有受權
          // 改變 isHide 的值，顯示受權頁面
          that.setData({
            isHide: true,
          });
        }
      }
    });
  },

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

  },

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

  },

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

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

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

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用戶按了容許受權按鈕
      var that = this;
      // 獲取到用戶的信息了，打印到控制檯上看下
      console.log("用戶的信息以下：");
      console.log(e.detail.userInfo);
      NICKNAME = e.detail.userInfo.nickname;
      GENDER = e.detail.userInfo.gender;
      PROVINCE = e.detail.userInfo.province;
      CITY = e.detail.userInfo.city;

      //受權成功後,經過改變 isHide 的值，讓實現頁面顯示出來，把受權頁面隱藏起來
      wx.login({
        success: res => {
          // 獲取到用戶的 code 以後：res.code
          console.log("用戶的code：" + res.code)
          // 能夠傳給後臺，再通過解析獲取用戶的 openid
          // 或者能夠直接使用微信的提供的接口直接獲取 openid ，方法以下：
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session', //接口地址
            data: {
              appid: '註冊的appid',
              secret: '生成的sercret',
              js_code: res.code,
              grant_type: 'authorization_code'
            },
            header: {
              'content-type': 'application/json' //默認值
            },
            success: function (res) {
              console.log(res.data)
              OPEN_ID = res.data.openid;//獲取到的openid  
              SESSION_KEY = res.data.session_key;//獲取到session_key  
              console.log(OPEN_ID)
              console.log(SESSION_KEY)
              //若是返回成功，則將OPEN_ID和SESSION_KEY提交請求給本地服務器
              wx.request({
                url: 'http://127.0.0.1:8080/wxapplogin/login.jsp',
                data: {
                  open_id: OPEN_ID,
                  session_key: SESSION_KEY,
                  gender: GENDER,
                  province: PROVINCE,
                  city: CITY
                },
                header: {
                  'content-type': 'application/json' //默認值
                },
                method: 'GET'
              })
            }
          });
        }
      });
      that.setData({
        isHide: false,
      });
    } else {
      //用戶按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點擊了拒絕受權，將沒法進入小程序，請受權以後再進入!!!',
        showCancel: false,
        confirmText: '返回受權',
        success: function (res) {
          // 用戶沒有受權成功，不須要改變 isHide 的值
          if (res.confirm) {
            console.log('用戶點擊了「返回受權」');
          }
        }
      });
    }
  }
})

 

當點擊按鈕以後出發getUserInfo()函數，咱們在這個函數裏面定義：

經過發送臨時的code請求到微信的服務器，咱們經過獲取這個code再來解析用戶的openid和session_key

請求地址url爲：

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

appid爲註冊小程序時給定的，每個微信小程序的appid也是惟一的，secret也會生成

當請求成功以後會從服務器返回openid和session_key,這裏也能夠寫成

https://api.weixin.qq.com/sns/jscode2session?appid='本身的appid'&secret='本身的密鑰'

完成以後咱們來獲取從服務器返回的值，若是請求成功，先打印出來，再傳到本身的服務器上

 

OK,下面這個圖是當點擊按鈕以後自動生成的code,在控制檯答打印一下，每一次的都不同

 

能夠從控制檯看到返回的數據，下面我們再把這個數據放到本身的服務器上保留之後用

 

 這個url是本身的服務器地址，爲了方便測試，咱們先用本地主機試一下，代碼後續若是所有完成，再部署到服務器

這個地方有個主意事項，若是在開發者工具控制檯出現如下錯誤：

顯示。。。不在request合法域名列表中，能夠在微信公衆後臺添加該域名，也能夠在開發者工具裏面臨時測驗：點擊不校驗域名就OK了

 

 

因此若是點擊index.wxml後控制檯打印code並請求微信服務器，接着請求本身的服務器，就是這麼個流程：

咱們後端用java接受一下：

 

先打印到控制檯，OK了，能夠啊看到值傳過去了，下面能夠啊將值傳到數據庫裏面，我就不用多寫了，呀呀呀，有啥問題能夠隨時評論留言討論