微信小程式授權登入以及使用者資訊相關介面調整導致授權框不彈出

蘇小蘇sxs發表於2021-04-10
微信小程式

前言：4月8號升級了小程式業務後提交了版本並上線。突然一個同事說體驗版的點選“登入”按鈕無效。當時覺得應該不會呀，這幾天一直用手機除錯，每天也在不停的登入授權，彈框一直有的呀。然後為了驗證同事的效果，速將PC版的快取全部清除，然後一臉懵逼，果然怎麼點“登入”都無效果，然後繼續用手機測試，也無效果了。然後在微信裡看正式版的小程式，發現暫無異常。幾個同事都第一反應：肯定是微信官方又改了啥。要不然程式碼一直沒動，咋突然這樣呢。果然，唉。

官方已發部了調整說明文件，大家可以參考微信官方說明文件

 

沒辦法，人家是騰訊，我們只能一個字：改！

在沒看官方文件之前，自己在尋找授權不彈框原因，在除錯的過程中，發現wx.getSetting()返回值有變，程式碼如下：

 1  wx.getSetting({
 2       success: function (res) {
 3         if (res.authSetting['scope.userInfo']) {
 4           // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱
 5           wx.getUserInfo({
 6             success: function (res) {}
 7           })
 8         }
 9       }
10     })

發現wx.getSetting的success返回結果如下，發現返回值中無“res.authSetting['scope.userInfo']”，網上查了，2018年有說廢棄了，但又說又能用，很懵。既然這樣，那我先跳過這一步，直接彈出授權，獲取使用者資訊吧。

獲取使用者資訊介面返回值如下：使用者頭像暱稱都是預設頭像和預設暱稱

然後根據官方的說明文件，簡單的以demo形式展示一下

方法一：直接用最新獲取使用者介面，就可以彈出授權，但開發者工具要升級，官方說1.052103022版本（若不是，可點此下載）才支援，我的版本是1.05.2102010也是支援的

注意一點：開發者工具的除錯基礎庫一定要選2.16.0，否則還是除錯不了，截圖如下：

整理的簡單程式碼如下：

<view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button bindtap="getUserProfile"> 獲取頭像暱稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
    getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認
    // 開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗
    wx.getUserProfile({
      //desc是必須要有的
      desc: '用於完善會員資料', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
 })

以上要注意的就是wx.getUserProfile中的desc是必須要有的

2.如果Pc微信沒有升級不支援wx.getUserProfile，可以進行程式碼相容，這樣在手機端除錯或者體驗版中能看到效果的。但是微信官方也明確說了：“預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊”，官方也提供了參考示例

不想去官方看的，直接看這裡：

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像暱稱 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認
    // 開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗
    wx.getUserProfile({
      desc: '用於完善會員資料', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取使用者資訊，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

3.以上簡單的彈出使用者授權資訊，但我們的業務中一般就不是這樣的簡單的了。上面的方法登入後，只要頁面切換或者重新整理，又要重新讓使用者授權，這種體驗肯定是極不好的。下面以我們的業務需求整理一我們的demo發下來。我們的業務需求是：新使用者進小程式後，點選“登入”即彈出授權使用者資訊，然後直接記錄使用者的相關資訊，這樣無論是切換頁面或者下次進來小程式，都不會讓使用者繼續登入，而且根據不同的使用者展示不同的功能許可權。簡單整理程式碼如下：

 我這邊是pc微信版已升級，所以直接廢棄了getUserInfo介面了，直接使用getUserProfile介面了

<view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button bindtap="getUserProfile"> 獲取頭像暱稱 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
page({
    data:{ 
      userInfo: {}, 
      hasUserInfo: true
    },
    onLoad: function () {
      var openId = wx.getStorageSync('openId');//根據openid判斷使用者有沒有授權登入過。如果登入過，直接查使用者的資訊以及相關功能。如果未登入過。將顯示“登入”按鈕，讓使用者登入。
      if(openId){ }//執行已登入過後的操作
      else { } //沒有登入的操作
    },
    bindGetUserInfo:function(event){
      wx.showLoading({
        title: '載入中',
      })
      var that = this;
      wx.getSetting({
        success: res => {  
          wx.getUserProfile({
            desc: '用於完善會員資訊', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
            success: (result) => {            
              wx.login({
                success:function(loginRes) {
                  var code=loginRes.code; //登入憑證，根據務需求，如果你的業務中不需要，可以不用呼叫wx.login()方法
                  if(code){
                    wx.request({
                      url: decodeUserInfo,//自己的服務介面地址，用來解密資料
                      method: 'GET',
                      header: {'Accept': 'application/json', },
                      data: { encryptedData: result.encryptedData, iv: result.iv, code: code},
                      success: function (data) {
                        //4.解密成功後 獲取自己伺服器返回的結果
                        if (data.data.status == 1) {                                           
                          that.setData({
                            userInfo: data.data.userInfo, //自己的介面返回的使用者資訊（暱稱、頭像等）
                            hasUserInfo: true
                          });                                                                      
                          var openId = userInfo.openId; //返回openid                   
                          wx.setStorageSync('openId', openId); //快取openid以便下次進來用此呼叫存於自己伺服器上的使用者資訊
                          that.setData({ openId: openId});                                               
                        } else { } 
                        wx.hideLoading();
                      },
                      fail: function () {
                        console.log('解密失敗')
                        wx.hideLoading();
                      }
                    })
                  }else{
                    wx.showToast({
                      title: '獲取code失敗',
                    })
                  }
                }
              })
            }
          })
        }
      })
    },
})

以上就是這次微信官方調整小程式登入、使用者資訊介面後，遇到的問題以及處理方法，我所寫的是我所理解的。技術類的文章寫的很差，組織語言和表達能力也不行，見諒！

相關文章