admin管理员组文章数量:1588264
写在前面
微信网页授权登陆是微信网页开发的第一步,由于框架限制需要使用.NET WebAPI的前后端分离模式进行开发,所以经过几天的摸索,写了这个简单的微信网页授权的实现Demo,本篇文章为微信公众号的配置与前端页面的实现,后端部分在下一篇文章中,链接也在文章底部。特别说明,本文章适用于微信内网页应用的授权登陆,不适用于普通网站的扫码授权登录,将在后续文章中进行论述。
后端篇:https://blog.csdn/weixin_42550800/article/details/94983616
正式开始
首先,我们需要对微信网页授权的机制有所了解,许多场景下,我们只需要获取微信用户的相关信息,包括昵称、头像、OpenId等信息。(OpenID是用户在访问公众号应用时分配的唯一标识,要注意的是,同一个用户在不同的微信公众号的OpenID不同)。
在确定了这个需求后,就要了解微信的授权机制。首先用户在微信中访问对应的网页应用,当应用检测到没有对应的用户信息时就会跳转到授权页面,用户选择同意或者不同意后返回到要跳转的页面(回调页面)。在回调页面中对微信的授权服务器进行请求,则可以顺利获取用户的相关信息。在请求过程中需要携带相关参数在正文中进行论述。
配置公众号
(相关操作需要认证后的服务号,如果没有认证服务号在左侧菜单底部选择开发者工具->公众平台测试账号进行相关配置)
正常配置如下:
1.登陆微信公众平台后进入功能设置
2. 配置授权域名
配置步骤不进行赘述,参见配置过程中的官方提示。值得注意的是这里只能配置两个域名,而且不能带端口,如果需要使用多个域名或端口则需使用Ngnix或其它的代理。所有前端页面必须在该域名下才能进行授权,不然会报错。
3.获取AppId和Secret
开发->基本配置 ,配置完成后开始网页编写
前端实现
目标:实现授权登陆并获取头像、昵称、所在省份城市
首先需要引入JQ <script src="http://code.jquery/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/open/js/jweixin-1.4.0.js"></script>
<script src="http://code.jquery/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/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 微信网页授权的实现(一)前端篇 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725776603a1041914.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论