精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

經(jīng)常做小程序的小伙伴都曾遇到過這個問題，那就是小程序授權(quán)登錄，官方文檔經(jīng)常更新，API不時更新迭代，對于基礎庫版本等等，都有著既定要求。

按照以往方式再去做，發(fā)現(xiàn)行不通，折騰一上午，整個人沉默了，原來是官方又進行了大改......

目前為止，微信小程序登錄授權(quán)，有三種方式，第一種是無感登錄，第二種是手機號登錄，第三種是用戶信息授權(quán)登錄

比較經(jīng)典的就是飛豬小程序和順豐小程序，如果你不知道怎么做，可以去看看它們的樣式，一目了然

比如下面這個登錄首頁面，就屬于經(jīng)典的手機號登陸

點擊快速登錄，小程序會迅速調(diào)用用戶的手機號授權(quán)

再放一個案例，那就是用戶信息授權(quán)登錄，顧名思義，該登陸主要為了獲取用戶信息（姓名、性別、地址、昵稱等等），用于給個人中心模塊做鋪墊，圖中人名我這邊和諧掉，因為也是我前兩天剛做完的業(yè)務。

至于無感登錄，這里就不演示了，因為無感無感，顧名思義就是沒有感覺，用戶是看不出來授權(quán)的，所以直接講方法就好！

順便放上小程序開發(fā)文檔：微信小程序官方文檔

1.無感登錄

首先無感登錄是最簡單的，步驟只有兩步，第一步是前端調(diào)用官方文檔API——wx.login，拿到登陸憑證code，通過wx.request（）發(fā)起網(wǎng)絡請求，隨即傳給后端。

第二步，后端那邊利用code + appid + appsecret這三個數(shù)值，調(diào)用微信的auth.code2Session接口，拿到用戶唯一標識openid 和 會話密鑰session_key，隨即定義token，將之與openid和session_key關(guān)聯(lián)，最后再返回給前端。

前端拿到token，就很簡單了，按照正常操作即可，比如拿token設置請求頭、存入vuex、pinia等等，順理成章直接寫即可，大家都能明白。

總結(jié)一點：無感登錄，說白了，就是拿小程序token的過程，夠直白了吧！

至于有人會問，appid和appsecret是什么？看下圖即可！（都在你的小程序后臺里）

微信小程序開放平臺：官方傳送門

具體講一下方法，順便把代碼附在下面，大家可以直接移植！

首先要注意的是，調(diào)用wx.login的時候，你的小程序基礎庫版本，不能低于2.3.1

可以在你的原生小程序工具查看

其次再看看wx.login的傳參+返回值，重點關(guān)注success和fail，一個是成功回調(diào)，一個是失敗回調(diào)

返回值是code，有時效限制，這里要注意的是，前端的appId，要和后端的appId一致。

有的人拿不同的appId去調(diào)用接口，最后會導致500報錯！

代碼示例：（用uniapp的，將wx.login替換為uni.login即可），example.com/onLogin 這個是事例網(wǎng)址，需要替換為你們后端的接口，主要用來獲取token。

// php 代碼解讀
wx.login({
  success (res) {
    if (res.code) {
      //發(fā)起網(wǎng)絡請求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登錄失敗！' + res.errMsg)
    }
  }
})?

2.手機號登陸

需要注意的是，個人賬號，無法使用手機號登錄功能，并且該功能是收費的。

標準單價每次組件調(diào)用成功，收0.03元，每個小程序賬號將有1000次體驗額度，該1000次的體驗額度為正式版、體驗版和開發(fā)版小程序共用，超額后，體驗版和開發(fā)版小程序調(diào)用同正式版小程序一樣，均收費。

這一要說明一點的是，相信很多人在網(wǎng)上都看到類似encryptedData、iv獲取手機號的方法，25年為止，微信又改版了，手機號登錄的流程又得到了簡化。（前提是使用付費服務）

流程為：調(diào)用bindgetphonenumber，返還code，這個code是限時+一次性的，服務器只需要拿著這個code去和微信換手機號就可以了

傳送門一：官方手機組件

傳送門二獲取手機號最新方法 

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>?

這里要注意一點，如果你用的是uniapp，那么bindgetphonenumber需要換為@getphonenumber

還是通過wx.login拿code，然后調(diào)用這個接口，具體要和后端商量，前端的工作并不多，調(diào)用而已

參數(shù)需要這幾個

與此同時，返回值手機號就來了

所以手機號登錄沒那么復雜，重點是需要付費，不付費的話，讓用戶自行輸入表單，也行，看具體業(yè)務實現(xiàn)方式

3.用戶信息授權(quán)登錄

對于用戶授權(quán)登錄的問題，那么就繞不過wx.getUserInfo和wx.getUserProfile的歷史淵源了。

早期的小程序開發(fā)，大家都是通過wx.getUserInfo拿到用戶頭像昵稱，結(jié)果2021年4月，微信社區(qū)改版，導致getUserInfo不再有授權(quán)流程，開發(fā)者只能獲取到匿名信息。

比如名字，大家都叫做“微信用戶”，而頭像，接口返回的都是統(tǒng)一灰色頭像。

可這樣就帶來一個問題，那就是不同用戶，昵稱頭像都一樣，完全不方面管理，所以wx.getUserProfile接口應運而生！

這一有一個行為，大家要注意，wx.getUserInfo獲取用戶信息，不會有底部彈窗，而wx.getUserProfile則會出現(xiàn)下方的底部彈窗（樣式看開頭），根據(jù)你的需求自行選擇。

再到2022年10月，微信社區(qū)又改版了，就連wx.getUserProfile這個接口，也不給開發(fā)者權(quán)限了，用戶名+頭像，全部變成了統(tǒng)一的“微信用戶”+灰色頭像。

講完這段歷史，我教你怎么用，如果你想獲取到用戶的真實信息，那么你可以把小程序基礎庫，降低版本，可以選為2.25.4，也比較穩(wěn)定。

小程序官方對于低版本的基礎庫，還是會提供完整功能的。我的建議是，你直接用wx.getUserProfile就好，底部也有彈窗信息。

getUserProfile(e) {
  wx.getUserProfile({
    desc: '用于完善會員資料', 
    success: (res) => {
      this.setData({
        userInfo: res.userInfo,
        hasUserInfo: true
      })
    }
  })
}?

作者：西紅柿燉前男友
鏈接：https://juejin.cn/post/7457926197163687970
來源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。?