.NET WebAPI 微信网页授权的实现（一）前端篇
寫在前面
微信網頁授權登陸是微信網頁開發的第一步，由于框架限制需要使用.NET WebAPI的前后端分離模式進行開發，所以經過幾天的摸索，寫了這個簡單的微信網頁授權的實現Demo，本篇文章為微信公眾號的配置與前端頁面的實現，后端部分在下一篇文章中，鏈接也在文章底部。特別說明，本文章適用于微信內網頁應用的授權登陸，不適用于普通網站的掃碼授權登錄，將在后續文章中進行論述。
后端篇：https://blog.csdn.net/weixin_42550800/article/details/94983616
正式開始
首先，我們需要對微信網頁授權的機制有所了解，許多場景下，我們只需要獲取微信用戶的相關信息，包括昵稱、頭像、OpenId等信息。（OpenID是用戶在訪問公眾號應用時分配的唯一標識，要注意的是，同一個用戶在不同的微信公眾號的OpenID不同）。
在確定了這個需求后，就要了解微信的授權機制。首先用戶在微信中訪問對應的網頁應用，當應用檢測到沒有對應的用戶信息時就會跳轉到授權頁面，用戶選擇同意或者不同意后返回到要跳轉的頁面（回調頁面）。在回調頁面中對微信的授權服務器進行請求，則可以順利獲取用戶的相關信息。在請求過程中需要攜帶相關參數在正文中進行論述。
配置公眾號
（相關操作需要認證后的服務號，如果沒有認證服務號在左側菜單底部選擇開發者工具->公眾平臺測試賬號進行相關配置）
正常配置如下：
1.登陸微信公眾平臺后進入功能設置
2. 配置授權域名
配置步驟不進行贅述，參見配置過程中的官方提示。值得注意的是這里只能配置兩個域名，而且不能帶端口，如果需要使用多個域名或端口則需使用Ngnix或其它的代理。所有前端頁面必須在該域名下才能進行授權，不然會報錯。
?3.獲取AppId和Secret
開發->基本配置? ，配置完成后開始網頁編寫?
前端實現
目標：實現授權登陸并獲取頭像、昵稱、所在省份城市
首先需要引入JQ <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
Js代碼分為Common與Center兩個類
Common中包含：getUrlParameter方法在Url中拆分對應參數
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?getWxUserInfo方法連接后臺代碼，獲取用戶信息，存入localStorage
Center中包含：? ? Init方法用來初始化界面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?enterWxAuthor方法判斷是否存儲了登陸狀態，如果沒有則跳轉至授權界面
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 如果添加此標簽將把所有跨域請求轉化為https請求 --><!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><img id="headimgurl" src=""><br />歡迎,<span id="nickname"></span><br /><span id="province"></span>,<span id="city"></span><script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script src="http://code.jquery.com/jquery-3.4.1.min.js"></script><script>//替換為獲取的APPIDvar WX_APPID = 'XXXXXXXX';//服務端地址var WX_ROOT = 'http://xxxx/api/';//一般工具類var common = {getUrlParameter:function(name) {//封裝方法var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象var r = window.location.search.substr(1).match(reg); //匹配目標參數if (r != null) return unescape(r[2]);return null; //返回參數值},/*** 授權后獲取用戶的基本信息*/getWxUserInfo:function(par){var code = common.getUrlParameter("code");if (par) code = par;$.ajax({async: false,data: {code:code},type : "GET",dataType:"json",url : WX_ROOT + "Wechat/GetUserInfo",success : function(json) {if (json){console.log(json);try {//保證寫入的wxUserInfo是正確的if (json.Accesstoken.openid) {var str_jsonData = JSON.stringify(json);localStorage.setItem('wxUserInfo',str_jsonData);//寫緩存--微信用戶信息}} catch (e) {// TODO: handle exception}}}});}}//頁面邏輯控制類var center = {init: function(){var getLocalData = localStorage.getItem('wxUserInfo');var wxUserInfo = JSON.parse(getLocalData);$('#nickname').html ( wxUserInfo.Accesstoken.nickname);$('#province').html ( wxUserInfo.Accesstoken.province);$('#city').html ( wxUserInfo.Accesstoken.city);$("#headimgurl").attr("src",wxUserInfo.Accesstoken.headimgurl);},enterWxAuthor: function(){var wxUserInfo = localStorage.getItem("wxUserInfo");if (!wxUserInfo) {var code = common.getUrlParameter('code');if (code) {common.getWxUserInfo();center.init();}else{//沒有微信用戶信息，沒有授權-->> 需要授權，跳轉授權頁面window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ WX_APPID +'&redirect_uri='+ 'http://shop.qimeng.group' +'&response_type=code&scope=snsapi_userinfo#wechat_redirect';}}else{center.init();}}}//頁面函數入口$(function() { center.enterWxAuthor();});</script> </body> </html>?
?
總結
以上是生活随笔為你收集整理的.NET WebAPI 微信网页授权的实现（一）前端篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Windows上有哪些推荐的笔记软件？
- 下一篇： 自适应云呼HTML官网源码