微信小程序授權(quán)登錄以及用戶信息相關(guān)接口調(diào)整導(dǎo)致授權(quán)框不彈出 ...

發(fā)表時(shí)間：2021-4-22

發(fā)布人：葵宇科技

瀏覽次數(shù)：164

前言：4月8號升級了小程序業(yè)務(wù)后提交了版本并上線。突然一個(gè)同事說體驗(yàn)版的點(diǎn)擊“登錄”按鈕無效。當(dāng)時(shí)覺得應(yīng)該不會呀，這幾天一直用手機(jī)調(diào)試，每天也在不停的登錄授權(quán)，彈框一直有的呀。然后為了驗(yàn)證同事的效果，速將PC版的緩存全部清除，然后一臉懵逼，果然怎么點(diǎn)“登錄”都無效果，然后繼續(xù)用手機(jī)測試，也無效果了。然后在微信里看正式版的小程序，發(fā)現(xiàn)暫無異常。幾個(gè)同事都第一反應(yīng)：肯定是微信官方又改了啥。要不然代碼一直沒動(dòng)，咋突然這樣呢。果然，唉。

官方已發(fā)部了調(diào)整說明文檔，大家可以參考微信官方說明文檔

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

在沒看官方文檔之前，自己在尋找授權(quán)不彈框原因，在調(diào)試的過程中，發(fā)現(xiàn)wx.getSetting()返回值有變，代碼如下：

 1  wx.getSetting({
 2       success: function (res) {
 3         if (res.authSetting['scope.userInfo']) {
 4           // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱
 5           wx.getUserInfo({
 6             success: function (res) {}
 7           })
 8         }
 9       }
10     })

發(fā)現(xiàn)wx.getSetting的success返回結(jié)果如下，發(fā)現(xiàn)返回值中無“res.authSetting['scope.userInfo']”，網(wǎng)上查了，2018年有說廢棄了，但又說又能用，很懵。既然這樣，那我先跳過這一步，直接彈出授權(quán)，獲取用戶信息吧。

獲取用戶信息接口返回值如下：用戶頭像昵稱都是默認(rèn)頭像和默認(rèn)昵稱

然后根據(jù)官方的說明文檔，簡單的以demo形式展示一下

方法一：直接用最新獲取用戶接口，就可以彈出授權(quán)，但開發(fā)者工具要升級，官方說 1.052103022版本（若不是，可點(diǎn)此下載）才支持，我的版本是1.05.2102010也是支持的

注意一點(diǎn)：開發(fā)者工具的調(diào)試基礎(chǔ)庫一定要選2.16.0，否則還是調(diào)試不了，截圖如下：

整理的簡單代碼如下：

<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獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
    wx.getUserProfile({
      //desc是必須要有的
      desc: '用于完善會員資料', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
 })

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

2.如果Pc微信沒有升級不支持wx.getUserProfile，可以進(jìn)行代碼兼容，這樣在手機(jī)端調(diào)試或者體驗(yàn)版中能看到效果的。但是微信官方也明確說了：“預(yù)計(jì)自2021年4月13日起，getUserInfo將不再彈出彈窗，并直接返回匿名的用戶個(gè)人信息”，官方也提供了參考示例

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

<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獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
    wx.getUserProfile({
      desc: '用于完善會員資料', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取用戶信息，預(yù)計(jì)自2021年4月13日起，getUserInfo將不再彈出彈窗，并直接返回匿名的用戶個(gè)人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

3.以上簡單的彈出用戶授權(quán)信息，但我們的業(yè)務(wù)中一般就不是這樣的簡單的了。上面的方法登錄后，只要頁面切換或者刷新，又要重新讓用戶授權(quán)，這種體驗(yàn)肯定是極不好的。下面以我們的業(yè)務(wù)需求整理一我們的demo發(fā)下來。我們的業(yè)務(wù)需求是：新用戶進(jìn)小程序后，點(diǎn)擊“登錄”即彈出授權(quán)用戶信息，然后直接記錄用戶的相關(guān)信息，這樣無論是切換頁面或者下次進(jìn)來小程序，都不會讓用戶繼續(xù)登錄，而且根據(jù)不同的用戶展示不同的功能權(quán)限。簡單整理代碼如下：

我這邊是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');//根據(jù)openid判斷用戶有沒有授權(quán)登錄過。如果登錄過，直接查用戶的信息以及相關(guān)功能。如果未登錄過。將顯示“登錄”按鈕，讓用戶登錄。
      if(openId){ }//執(zhí)行已登錄過后的操作
      else { } //沒有登錄的操作
    },
    bindGetUserInfo:function(event){
      wx.showLoading({
        title: '加載中',
      })
      var that = this;
      wx.getSetting({
        success: res => {  
          wx.getUserProfile({
            desc: '用于完善會員信息', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫
            success: (result) => {            
              wx.login({
                success:function(loginRes) {
                  var code=loginRes.code; //登錄憑證，根據(jù)務(wù)需求，如果你的業(yè)務(wù)中不需要，可以不用調(diào)用wx.login()方法
                  if(code){
                    wx.request({
                      url: decodeUserInfo,//自己的服務(wù)接口地址，用來解密數(shù)據(jù)
                      method: 'GET',
                      header: {'Accept': 'application/json', },
                      data: { encryptedData: result.encryptedData, iv: result.iv, code: code},
                      success: function (data) {
                        //4.解密成功后 獲取自己服務(wù)器返回的結(jié)果
                        if (data.data.status == 1) {                                           
                          that.setData({
                            userInfo: data.data.userInfo, //自己的接口返回的用戶信息（昵稱、頭像等）
                            hasUserInfo: true
                          });                                                                      
                          var openId = userInfo.openId; //返回openid                   
                          wx.setStorageSync('openId', openId); //緩存openid以便下次進(jìn)來用此調(diào)用存于自己服務(wù)器上的用戶信息
                          that.setData({ openId: openId});                                               
                        } else { } 
                        wx.hideLoading();
                      },
                      fail: function () {
                        console.log('解密失敗')
                        wx.hideLoading();
                      }
                    })
                  }else{
                    wx.showToast({
                      title: '獲取code失敗',
                    })
                  }
                }
              })
            }
          })
        }
      })
    },
})