写在前面

微信网页授权登陆是微信网页开发的第一步，由于框架限制需要使用.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 微信网页授权的实现（一）前端篇相关推荐

.netMVC企业微信网页授权+注册全局过滤器
微信网页授权达到效果:企业应用只能在微信中查看,在浏览器中打开企业页面,显示无权限! 原理,用session记录用户,如果用户已经通过微信授权,记录@Session["UserId&quo ...
不插即用！配备微信网页授权模块的CodeIgniter应用脚手架
昨天发了一篇<即插即用!适用于CodeIgniter框架的微信网页授权模块>,今天想了想干脆整理一个脚手架好了. Github仓库: CodeIgniter-Weixin_Template ...
android user-agent iso-8859-1,微信网页授权，错误40163，ios正确，安卓错误？
2018-07-18:一年时间过去了,我又回来填自己挖的坑了!! 2017年7月,我遇到了这个问题,当时在这里提了问,后来又跟踪了两天,也没彻底搞懂,反正时好时坏,,后来自己主要精力放在H5+开发上, ...
微信遇到特殊服务器,解决微信网页授权，出现errcode:40163,errmsg:codebeenused，看似微信访问了2次这个回调接口的问题...
先说说自己理解的微信机制: 微信内访问自己服务器的页面,如果访问出错,微信就会认为是微信自身的问题,那么他就会开启另外一个IP来访问这个页面(什么上海的IP,深圳的IP不等),再把访问结果发回用户端, ...
微信网页授权，获取微信code，获取access_tocken,获取用户信息
微信开发中,经常有这样的需求:获得用户头像.绑定微信号给用户发信息.. 那么实现这些的前提就是授权! 1.配置安全回调域名: 在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的" ...
ajax 微信code获取_ajax 实现微信网页授权登录的方法
项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个phper ,所以,微信开发采用的是 EasyWeCha ...
微信网页开发教程 php,PHP实现微信网页授权开发教程，php授权教程_PHP教程
PHP实现微信网页授权开发教程,php授权教程微信网页授权是服务号才有的高级功能,开发者可以通过授权后获取用户的基本信息:在此之前,想要获取消息信息只能在用户和公众号交互时根据openid获取用户信 ...
微信wechat.class.php,laravel使用组件实现微信网页授权登入
laravel框架中的实现简单实现微信网页授权登入首先引入基于laravel的easywechat的组件,laravel版本5.8 $ cd laravel $ composer require & ...
微信开发---微信网页授权、JS-SDK和微信公众号的基本设置
用了好几个小时的时间,整理了一下关于公众号的思维导图,由于CSDN不能上传相对应的文件,所以萍子一一的分解开的截图附上来,希望对大家有所帮助哦~ 因为是电脑设备自动截图,又鉴于内容比较多,可能不是太清 ...

.NET WebAPI 微信网页授权的实现（一）前端篇

写在前面

正式开始

配置公众号

前端实现

.NET WebAPI 微信网页授权的实现（一）前端篇相关推荐

最新文章

热门文章