當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/12 编程问答 48 豆豆

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

微信網頁授權獲取用戶OpenID

文章目錄

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

📌微信網頁授權的前提

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

💥網頁授權域名配置

-操作步驟：

登錄微信后臺點擊接口權限網頁授權修改網頁域名授權下載配置文件將文件放在綁定域名服務器根目錄

點擊保存如果微信后臺沒有報錯說明域名配置成功

💥前端獲取Code

前端拉起微信OAuth2.0授權

直接看圖：

關鍵字段說明

字段來源注釋

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

解析code

以微信官方的授權地址為例：
微信授權（請在微信環境打開）

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

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

code 注意事項

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

💥后端根據code獲取用戶OpenID

通過code換取網頁授權

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

請求參數說明
返回參數說明：

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

根據access_tokena獲取用戶信息

????????如果網頁授權作用域為snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。請求方法http：GET（請使用https協議）
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

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

access_token注意事項

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

💥詳情以及錯誤信息請查驗微信開發者文檔–>微信網頁開發

🚀傳送門：微信開發者文檔

📧 通過微信公眾號發送模板消息

相信絕大多數應用獲取微信用戶的openid都是為了通過微信公眾號向用戶發送模板消息。
發送模板消息需要注意以下幾點：

需要目標用戶已經關注了當前公眾號
后臺推送模板消息需要在微信公眾號后臺配置ip 白名單，主要是獲取token 是需要白名單校驗

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

發送模板消息

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

{"touser":"OPENID", //接收消息用戶的openid"template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY", //模板消息id"url":"http://weixin.qq.com/download", //消息外鏈"miniprogram":{ //設置跳轉小程序"appid":"xiaochengxuappid12345", //小程序appid"pagepath":"index?foo=bar" //跳轉小程序的頁面地址}, "data":{ //發送消息字段，需要和模板消息字段對應"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.若要實現小程序跳轉，需要在微信公眾平臺將小程序和微信公眾號進行綁定，否則無法跳轉。
2.目標小程序必須是已經正式上線，不能是開發版或者是體驗版。

微信公眾號與小程序進行綁定

進入微信公眾號后臺，點擊小程序管理

點擊添加

點擊關聯小程序

管理員掃碼驗證，輸入小程序APPID搜索到目標小程序，點擊綁定。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。