背景:

前段時(shí)間做了一個(gè)H5項(xiàng)目，H5項(xiàng)目需要放在微信公眾號(hào)里面,并且需要通過(guò)微信授權(quán)拿到openId,所以就需要實(shí)現(xiàn)h5授權(quán)微信這個(gè)功能了。

原理:

其實(shí)原理就是前端在本項(xiàng)目首頁(yè)去請(qǐng)求微信端提供的一個(gè)地址,并且在地址上配置微信所需要的參數(shù),比如最重要的就是你要配置微信最后獲取到參數(shù)之后跳轉(zhuǎn)你自己項(xiàng)目的地址,所以這就是h5授權(quán)微信的方式，通過(guò)用戶項(xiàng)目跳轉(zhuǎn)微信提供的地址,微信會(huì)把你所需要的參數(shù)拼接在你所填寫的地址上面,最后跳轉(zhuǎn)回來(lái),你就可以直接從路徑上獲取了。????????

參考地址:微信公眾號(hào)官方文檔?網(wǎng)頁(yè)授權(quán) | 微信開放文檔

實(shí)現(xiàn)方式:

由于實(shí)現(xiàn)起來(lái)原理都是一個(gè),所以大概有三種實(shí)現(xiàn)方式,分為前端獲取和后端獲取

方法一:(前端獲取授權(quán))

我們自己去請(qǐng)求微信的地址,?并且?guī)闲枰膮?shù)

https://open.weixin.qq.com/connect/oauth2/authorize?appid=$%7Bappid%7D&redirect_uri=$%7BencodeURIComponent%28local%29%7D&response_type=code&scope=snsapi_userinfo&state=123&connect_redirect=1#wechat_redirect

    getCode() {
      // 非靜默授權(quán)，第一次有彈框
      var local = window.location.href; // 獲取頁(yè)面url
      var appid = '你們公眾號(hào)項(xiàng)目的appid'
      window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
      const unionId = this.getQueryString('unionId')
      const openId = this.getQueryString('openId')
    if(unionId&&openId) {
      // 授權(quán)成功之后直接存儲(chǔ)在vuex中
      this.$store.commit('setwxRowData',this.RowData)
    }
    },
    getQueryString(name) {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const value = params.get(name);
      return value ? decodeURIComponent(value) : null;
    }

我的代碼邏輯是先判斷地址欄上和vuex中有沒(méi)有openId,unionId，如果都沒(méi)有說(shuō)明需要進(jìn)行授權(quán)，于是我們?cè)趍ounted里面去調(diào)用授權(quán)的方法進(jìn)行授權(quán),授權(quán)成功拿到數(shù)據(jù)之后我們可以把數(shù)據(jù)存儲(chǔ)在vuex中,之后的話在進(jìn)入項(xiàng)目我們直接從vuex里面去取就行了,如果請(qǐng)求接口提示openId,unionId失效的話,我們則清空vuex里面存儲(chǔ)的數(shù)據(jù)重新授權(quán)獲取新的參數(shù)即可。

 mounted() {
    var unionId = this.getQueryString('unionId')
    var unionId = this.getQueryString('openId')
    if(!unionId&&unionId){
      // 不存在則去授權(quán)
      this.getCode();
    }else {
      // 存在直接獲取進(jìn)行業(yè)務(wù)編寫即可
    }
  },

存在的問(wèn)題:

微信跳轉(zhuǎn)的地址需要備案好的地址,所以我們?cè)诒镜鼐褪菬o(wú)法調(diào)試的,跳轉(zhuǎn)回來(lái)會(huì)報(bào)一個(gè)redirect_url參數(shù)錯(cuò)誤的問(wèn)題

解決方式:需要進(jìn)行內(nèi)網(wǎng)穿透

要在本地進(jìn)行H5微信授權(quán)的聯(lián)調(diào)，可以按照以下步驟進(jìn)行操作：

1. 在微信公眾平臺(tái)上創(chuàng)建一個(gè)測(cè)試號(hào)，并獲取測(cè)試號(hào)的AppID。

2. 在本地開發(fā)環(huán)境中創(chuàng)建一個(gè)H5頁(yè)面，用于進(jìn)行微信授權(quán)。

3. 在H5頁(yè)面中引入微信JS-SDK，并使用測(cè)試號(hào)的AppID初始化。

4. 在H5頁(yè)面中編寫授權(quán)邏輯，包括調(diào)用微信JS-SDK的接口進(jìn)行授權(quán)驗(yàn)證、獲取用戶信息等。

5. 在本地啟動(dòng)一個(gè)Web服務(wù)器，將H5頁(yè)面部署到該服務(wù)器上。

6. 在微信公眾平臺(tái)的測(cè)試號(hào)設(shè)置中，配置授權(quán)回調(diào)域名為本地Web服務(wù)器的域名。

7. 在本地瀏覽器中訪問(wèn)H5頁(yè)面，進(jìn)行微信授權(quán)的測(cè)試。

需要注意的是，由于微信授權(quán)需要在公網(wǎng)環(huán)境下進(jìn)行，所以在本地進(jìn)行聯(lián)調(diào)時(shí)，需要將本地Web服務(wù)器暴露到公網(wǎng)，可以使用工具如ngrok來(lái)實(shí)現(xiàn)內(nèi)網(wǎng)穿透，將本地服務(wù)器映射到一個(gè)公網(wǎng)地址上。

另外，為了方便調(diào)試和排查問(wèn)題，可以在H5頁(yè)面中添加日志輸出，查看授權(quán)過(guò)程中的返回結(jié)果和錯(cuò)誤信息。

總結(jié)來(lái)說(shuō)，H5微信授權(quán)的本地聯(lián)調(diào)需要?jiǎng)?chuàng)建測(cè)試號(hào)、配置授權(quán)回調(diào)域名、啟動(dòng)本地Web服務(wù)器，并使用微信JS-SDK進(jìn)行授權(quán)驗(yàn)證和獲取用戶信息。通過(guò)內(nèi)網(wǎng)穿透工具將本地服務(wù)器暴露到公網(wǎng)，可以在本地瀏覽器中進(jìn)行授權(quán)的測(cè)試。

可以對(duì)如下文章進(jìn)行參考

微信h5開發(fā)網(wǎng)頁(yè)授權(quán)-本地如何開發(fā)調(diào)試？_微信開發(fā)者如何測(cè)試本地h5登錄_沐雪架構(gòu)師的博客-CSDN博客

配置好之后就可以正常進(jìn)行授權(quán)了

允許之后就會(huì)跳轉(zhuǎn)到自己項(xiàng)目并且?guī)衔覀兯枰膮?shù)?

?方法二:(前后端結(jié)合獲取授權(quán))

優(yōu)點(diǎn):前后端結(jié)合獲取其實(shí)原理還是一樣的原理，實(shí)現(xiàn)方式與前端自己獲取主要變化是,我們不在需要去請(qǐng)求微信端的地址,后臺(tái)會(huì)在微信公眾平臺(tái)上做一個(gè)地址映射,我們直接去請(qǐng)求后臺(tái)提供的地址，原理是一樣的,當(dāng)我們請(qǐng)求后臺(tái)地址的時(shí)候,他會(huì)去幫我們請(qǐng)求微信地址,最后跳轉(zhuǎn)回來(lái)并且把參數(shù)帶給我們,這樣我們就解決了方法一前端獲取參數(shù)調(diào)試需要做地址映射的步驟

 getCode() {
      // 非靜默授權(quán)，第一次有彈框
      var local = window.location.href; // 獲取頁(yè)面url
      // 后臺(tái)提供的地址 (https://cgw.cunwedu.com.cn/wx/whitelist/user/render/wechat_mp/A11)
      // 配置參數(shù):由于后臺(tái)進(jìn)行配置了,我們這就不需要傳遞appid了,只需要帶上跳轉(zhuǎn)回來(lái)的地址即可
      window.location.href=`https://cgw.cunwedu.com.cn/wx/whitelist/user/render/wechat_mp/A11?part=${encodeURIComponent(local)}`
    },
    getQueryString(name) {
      const queryString = window.location.search;
      const params = new URLSearchParams(queryString);
      const value = params.get(name);
      return value ? decodeURIComponent(value) : null;
    }
  }

mounted里面進(jìn)行執(zhí)行,這里邏輯與方法一一樣

?mounted() {
? ? var unionId = this.getQueryString('unionId')
? ? var unionId = this.getQueryString('openId')
? ? if(!unionId&&unionId){
? ? ? // 不存在則去授權(quán)
? ? ? this.getCode();
? ? }else {
? ? ? // 存在直接獲取進(jìn)行業(yè)務(wù)編寫即可
? ? }
? },

方法三:(后端獲取授權(quán))

原理也是一樣,也是跳轉(zhuǎn)獲取參數(shù),?這個(gè)時(shí)候后端會(huì)給你提供一個(gè)地址,你直接訪問(wèn)他的地址就行了,他的地址會(huì)直接在微信授權(quán)成功之后拿到參數(shù),這個(gè)時(shí)候后端會(huì)跳轉(zhuǎn)我們項(xiàng)目的地址,并且把參數(shù)，帶給我們,這對(duì)于前端來(lái)說(shuō),就輕松了很多,我們只需要直接從地址欄上獲取就行了

例如http://hy-dev.xiaofugui.com.cn/sd/oauth/render/123456789/2 是后臺(tái)提供的地址,https://xd-h5-dev.xiaofugui.com.cn是我們h5的項(xiàng)目地址,我們?cè)L問(wèn)后臺(tái)提供的地址之后,他就會(huì)跳轉(zhuǎn)我們h5地址并且?guī)蠀?shù),例如https://xd-h5-dev.xiaofugui.com.cn?openId=1234&unionId=12345

對(duì)于前端來(lái)說(shuō),項(xiàng)目里面直接獲取使用即可

  mounted() {
    var unionId = this.getQueryString('unionId')
    var openId = this.getQueryString('openId')
    if(unionId&&openId&) {
      this.$store.commit('setwxRowData',this.RowData)
    }
  },

h5授權(quán)微信分享到這里就結(jié)束了,謝謝大家的觀看。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-647354.html

到了這里，關(guān)于前端H5實(shí)現(xiàn)微信授權(quán)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！