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

写在前面

微信网页授权登陆是微信网页开发的第一步，由于框架限制需要使用.NET WebAPI的前后端分离模式进行开发，所以经过几天的摸索，写了这个简单的微信网页授权的实现Demo，本篇文章为微信公众号的配置与前端页面的实现，后端部分在下一篇文章中，链接也在文章底部。特别说明，本文章适用于微信内网页应用的授权登陆，不适用于普通网站的扫码授权登录，将在后续文章中进行论述。

后端篇：https://blog.csdn.net/weixin_42550800/article/details/94983616

正式开始

首先，我们需要对微信网页授权的机制有所了解，许多场景下，我们只需要获取微信用户的相关信息，包括昵称、头像、OpenId等信息。（OpenID是用户在访问公众号应用时分配的唯一标识，要注意的是，同一个用户在不同的微信公众号的OpenID不同）。

在确定了这个需求后，就要了解微信的授权机制。首先用户在微信中访问对应的网页应用，当应用检测到没有对应的用户信息时就会跳转到授权页面，用户选择同意或者不同意后返回到要跳转的页面（回调页面）。在回调页面中对微信的授权服务器进行请求，则可以顺利获取用户的相关信息。在请求过程中需要携带相关参数在正文中进行论述。

配置公众号

（相关操作需要认证后的服务号，如果没有认证服务号在左侧菜单底部选择开发者工具->公众平台测试账号进行相关配置）

正常配置如下：

1.登陆微信公众平台后进入功能设置

2. 配置授权域名

配置步骤不进行赘述，参见配置过程中的官方提示。值得注意的是这里只能配置两个域名，而且不能带端口，如果需要使用多个域名或端口则需使用Ngnix或其它的代理。所有前端页面必须在该域名下才能进行授权，不然会报错。

 3.获取AppId和Secret

开发->基本配置  ，配置完成后开始网页编写 

前端实现

目标：实现授权登陆并获取头像、昵称、所在省份城市

首先需要引入JQ

Js代码分为Common与Center两个类

Common中包含：getUrlParameter方法在Url中拆分对应参数

                             getWxUserInfo方法连接后台代码，获取用户信息，存入localStorage

Center中包含：    Init方法用来初始化界面

                             enterWxAuthor方法判断是否存储了登陆状态，如果没有则跳转至授权界面

代码如下：

    
    
    
    
    
    


        
        

        欢迎,

        ,