當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信网页授权真实项目实例

發(fā)布時(shí)間：2024/3/12 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了微信网页授权真实项目实例小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

微信網(wǎng)頁授權(quán)獲取用戶OpenID

文章目錄

微信網(wǎng)頁授權(quán)獲取用戶OpenID
- - :pushpin:微信網(wǎng)頁授權(quán)的前提
  - :boom:網(wǎng)頁授權(quán)域名配置
  - :boom:前端獲取Code
  - - 前端拉起微信OAuth2.0授權(quán)
  - 解析code
  - code 注意事項(xiàng)
- :boom:后端根據(jù)code獲取用戶OpenID
- - 通過code換取網(wǎng)頁授權(quán)
  - 根據(jù)access_tokena獲取用戶信息
  - access_token注意事項(xiàng)
- :boom:詳情以及錯(cuò)誤信息請查驗(yàn)微信開發(fā)者文檔-->微信網(wǎng)頁開發(fā)
- - - :rocket:[傳送門：微信開發(fā)者文檔](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html)
- 📧 通過微信公眾號發(fā)送模板消息
- - 發(fā)送模板消息
  - 微信公眾號與小程序進(jìn)行綁定

📌微信網(wǎng)頁授權(quán)的前提

通過微信認(rèn)證的微信號或者申請微信測試號
🚀傳送門：測試號申請
必須要有自己的服務(wù)器以便和微信后臺交互
公眾平臺接口調(diào)用僅支持80端口。(網(wǎng)頁授權(quán)獲取OpenID實(shí)測無此限制)

💥網(wǎng)頁授權(quán)域名配置

-操作步驟：

登錄微信后臺點(diǎn)擊接口權(quán)限網(wǎng)頁授權(quán)修改網(wǎng)頁域名授權(quán)下載配置文件將文件放在綁定域名服務(wù)器根目錄

點(diǎn)擊保存如果微信后臺沒有報(bào)錯(cuò)說明域名配置成功

💥前端獲取Code

前端拉起微信OAuth2.0授權(quán)

直接看圖：

關(guān)鍵字段說明

字段來源注釋

appid	微信公眾后臺	微信公眾號唯一標(biāo)示
redirect_uri	開發(fā)者	希望用戶在授權(quán)之后跳轉(zhuǎn)進(jìn)入的頁面，需要進(jìn)行encode編碼
response_type		直接寫code
scope		snsapi_base （不彈出授權(quán)頁面，直接跳轉(zhuǎn)，只能獲取用戶openid），snsapi_userinfo （彈出授權(quán)頁面，可通過openid拿到昵稱、性別、所在地。并且，即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息）
state	開發(fā)者	其它網(wǎng)頁需要但微信無法提供的參數(shù)，由開發(fā)者自行設(shè)置

解析code

以微信官方的授權(quán)地址為例：
微信授權(quán)（請?jiān)谖⑿怒h(huán)境打開）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

????????當(dāng)用戶點(diǎn)擊以上鏈接之后，一旦用戶同意授權(quán)用戶將跳轉(zhuǎn)到redirect_uri指向的地址，即http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php（url經(jīng)過 urlEncode 編碼）這是前端路徑會攜帶code參數(shù)，如果設(shè)置了state參數(shù)同時(shí)還會攜帶state參數(shù)。
????????用戶跳轉(zhuǎn)的地址：http://nba.bluewebgame.com/oauth_response.php？code=Code&state= State
????????此時(shí)前端只需要將code參數(shù)從頁面地址中解析出來并傳給后端即可。

code 注意事項(xiàng)

同一code只能使用一次，使用后隨即無效
同一code只有5分鐘時(shí)間，超時(shí)需要重新獲取。（即需要用戶再次點(diǎn)擊授權(quán)鏈接）

💥后端根據(jù)code獲取用戶OpenID

通過code換取網(wǎng)頁授權(quán)

????????獲取code后，請求以下鏈接獲取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

請求參數(shù)說明
返回參數(shù)說明：

至此，已經(jīng)獲取到微信用戶的OpenID了，若需要獲取用戶昵稱和頭像等信息繼續(xù)往下請求

根據(jù)access_tokena獲取用戶信息

????????如果網(wǎng)頁授權(quán)作用域?yàn)閟nsapi_userinfo，則此時(shí)開發(fā)者可以通過access_token和openid拉取用戶信息了。請求方法http：GET（請使用https協(xié)議）
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

請求參數(shù)說明
返回參數(shù)說明
至此獲取用戶OpenID和基本信息流程結(jié)束

access_token注意事項(xiàng)

獲取的token2小時(shí)之內(nèi)有效，過期需要重新獲取
微信限制了獲取token的頻次，不允許頻繁獲取，因此開發(fā)者最好將token在后臺緩存起來，待token快過期時(shí)再更新token。

💥詳情以及錯(cuò)誤信息請查驗(yàn)微信開發(fā)者文檔–>微信網(wǎng)頁開發(fā)

🚀傳送門：微信開發(fā)者文檔

📧 通過微信公眾號發(fā)送模板消息

相信絕大多數(shù)應(yīng)用獲取微信用戶的openid都是為了通過微信公眾號向用戶發(fā)送模板消息。
發(fā)送模板消息需要注意以下幾點(diǎn)：

需要目標(biāo)用戶已經(jīng)關(guān)注了當(dāng)前公眾號
后臺推送模板消息需要在微信公眾號后臺配置ip 白名單，主要是獲取token 是需要白名單校驗(yàn)

開啟IP白名單的步驟如下：
1、登錄公眾平臺，進(jìn)入開發(fā)->基本配置頁面

發(fā)送模板消息

url : https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN
method : post
post參數(shù)見下方代碼：

{"touser":"OPENID", //接收消息用戶的openid"template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY", //模板消息id"url":"http://weixin.qq.com/download", //消息外鏈"miniprogram":{ //設(shè)置跳轉(zhuǎn)小程序"appid":"xiaochengxuappid12345", //小程序appid"pagepath":"index?foo=bar" //跳轉(zhuǎn)小程序的頁面地址}, "data":{ //發(fā)送消息字段，需要和模板消息字段對應(yīng)"first": {"value":"恭喜你購買成功！","color":"#173177"},"keyword1":{"value":"巧克力","color":"#173177"},"keyword2": {"value":"39.8元","color":"#173177"},"keyword3": {"value":"2014年9月22日","color":"#173177"},"remark":{"value":"歡迎再次購買！","color":"#173177"}}}

備注：
1.若要實(shí)現(xiàn)小程序跳轉(zhuǎn)，需要在微信公眾平臺將小程序和微信公眾號進(jìn)行綁定，否則無法跳轉(zhuǎn)。
2.目標(biāo)小程序必須是已經(jīng)正式上線，不能是開發(fā)版或者是體驗(yàn)版。

微信公眾號與小程序進(jìn)行綁定

進(jìn)入微信公眾號后臺，點(diǎn)擊小程序管理

點(diǎn)擊添加

點(diǎn)擊關(guān)聯(lián)小程序

管理員掃碼驗(yàn)證，輸入小程序APPID搜索到目標(biāo)小程序，點(diǎn)擊綁定。

總結(jié)

以上是生活随笔為你收集整理的微信网页授权真实项目实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。