寫在前面
微信網頁授權登陸是微信網頁開發的第一步，由於框架限制需要使用.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>
//替換爲獲取的APPID
var 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>