2021-10-20 小程序獲取用戶unionid 以及登錄流程圖

unionid 機制說明：

同一用戶，對同一個微信開發平台下的不同應用，unionid是相同的。

同一個微信開發平台下的相同主體的 app, 公眾號，小程序。如果用戶已經關注過公眾號，或者曾經登錄過app或者公眾號，則用戶打開小程序時，可以通過
wx.login 獲取到該用戶 unionid，無須用戶再次授權。

注意：如果用戶沒有登錄過app，公眾號，也沒有關注過公眾號的情況下，通過 wx.login 是獲取不到 unionid 的。


// 第一種情況，在登錄小程序之前，此用戶已經關注過公眾號,登錄過公眾號,已經使用微信登錄的方式登錄過app。此時用戶只需要通過2步就可以獲取到
// unionid 了。
第一步：
   獲取 code (用code來換取openid,session_key等)
   let that = this;
   wx.login({
      success: function(res){
         if(res.code){
            that.getUserInfo(res.code);
         }else{
            console.log('獲取用戶登錄失敗')
         }
      }
   })

第二步：獲取用戶信息（利用 wx.login 返回的code獲取用戶的信息）
   getUserInfo:function(code){
      wx.request({
         url:'//后端接口',
         method:'POST',
         data:{
           code: code, // 傳的參數（后端通過code去調用微信的接口 - jscode2session）
           // https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&
          //  grant_type=authorization_code
         // 傳入參數code,appid,appsecret后獲取到微信返回的unionid,openid,session_key等
         },
         success:function(res){
           // 可以返回前端需要的用戶信息（包括 unionid, openid, user_id 等）
         }
      })
   }
   


第二種情況：
   即是：第一次登錄該小程序，通過 wx.login 傳入的code是獲取不到unionid以及openid等信息。
   解決方法：
      第一步：獲取code（用來換取openid以及session_key等）
      let that = this;
      wx.login({
         success:function(res){
            if(res.code){
               that.getEncData(res.code);
            }else{
               // 登錄失敗
            }
         }
      })

      第二步： 獲取加密數據和加密算法初始向量
      getEncData:function(code){
         wx.getUserInfo({
            withCredentials: true, // 為true時，此時返回的數據中包含iv，encryptedData等敏感信息，反之則沒有。
            success:function(res){
               that.getUserInfo(code, res.encryptedData, res.iv)
            }
         })
      }
      第三步： 獲取用戶信息（利用wx.login返回的code獲取用戶的信息）
      getUserInfo:function(code, enc, iv){
         wx.request({
            url:'//后端登錄接口',
            method:'POST',
            data:{
              code:code,
              encryptedData:enc,
              iv:iv
            },
            success:function(res){
              // 可以獲取到用戶信息（包括 unionid, openid, user_id等）
            }
         })
      }
     
   
// 總結：
第一種： 前端判斷是否有 unionid。 前端在向后端上傳 code 並且后端返回數據以后，前端判斷返回值中是否有 unionid 或者 unionid 為null。
   null的情況下去調用帶有用戶登錄狀態的wx.getUserInfo接口，然后將返回的 encryptedData 和 iv 敏感數據傳給后端，后端解密出相應的數據再
   返回給前端。

第二種： 后端判斷是否有 unionid。 前端在調用帶有登錄狀態的 wx.getUserInfo 接口，然后把此接口返回的 encryptedData 和 iv 敏感數據傳給
   后端，后端在拿到前端code之后去請求微信的接口拿 unionid，如果返回的 unionid 為空，再拿前端傳的 encryptedData 和 iv以及之前的
   session_key 解密出 unionid 。

 

小程序登錄流程：

 

 

 

 

 

參考鏈接：

     https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/union-id.html - 微信官網

     https://developers.weixin.qq.com/community/develop/article/doc/000ee05d9f8cc8ce35194b7cb5b413

     https://www.cnblogs.com/yaoyuqian/p/8203792.html