微信公众号授权登录(asp.net + angular)

微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的。微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继续开发,开放平台开发流程与新浪微博授权差不多,后者开发流程稍有不同,而且可以用测试号进行开发。下面暂时以公众号为例说明。


注册账号,建立公众号

不管怎么样,得先注册一个微信公众号,如果有基础的话,可以在进行开发者资质认证,获取更多高级接口。

13908708-94c19340475a6cb0.png
注册公众号



认证/选择测试账号

完成开发者资质认证可以获取很多高级接口权限,当然认证需要RMB还需要营业执照等,门槛挺高的,所以开发阶段我们一般选择用测试号来进行开发调试。新建测试号位置为登录后选择开发者工具,在里面选择公众平台测试账号,再扫码进去即可获取到一个为期一年的具备绝大部分接口的测试账号。

13908708-feba6029595cbde4.png
测试号信息
13908708-f4a23dee38a4c632.png
测试号接口


修改接口配置信息

在测试号中填写接口配置信息,用于响应微信官方服务器发送的token验证(注意:此时是修改测试账号配置,正式账号不需要修改,而且URL是一个外网能访问的地址,可以是aspx也可以是ashx,只要有返回值即可)

13908708-5964f751fa125193.png
接口配置信息


下面介绍一下验证流程

我们填写完URL和Token后,微信官方服务器将访问我们所填写的URL,访问过程中其服务器自动带上几个参数,我们在代码中接收参数并进行加密排序等,再把它发过来的随机字符串原样返回,如果微信服务器检测到发出的随机字符串和返回的字符串一致,则完成验证。(注意:如果实在不懂如何加密排序,可以直接把随机字符串原样返回,不做判断,当然这样安全性不高)


加密流程

新建一个web窗体或一般处理程序(两个都差不多的),判断请求参数echoStr是否为空,如果为空直接忽略即可,如果不为空,再把请求参数signature、timestamp、nonce一一取出来,同时把配置文件中配置的Token读取出来(Token是测试账号接口配置信息里面填写的Token),然后把token、timestamp、nonce拼接成数组,再排序一下(Array.Sort(arrTmp)),再把排序后的数组组合成字符串,最后对该字符串进行SHA1加密,如果加密后的代码与签名signature一样,则代表通过验证,可以放心把随机参数echoStr返回,不相等要么是代码写错要么不是微信官方服务器的请求,忽略该请求。


具体代码

13908708-9d1882a40738baa5.png
asp.net验证代码


修改JS接口安全域名

因为接口配置与js接口安全域名修改位置差不多,所以在这里直接修改安全域名。安全域名是指将来要用jssdk的页面域名

13908708-c91fd90596688b39.png
修改安全域名


配置授权回调页面域名

在测试账号体验接口中找到网页服务->网页账号,然后修改器域名回调地址(回调域名是指在该域名下均可以进行登录授权)

13908708-9a890550f605e29f.png
回调域名(这个很重要)




引导用户授权

添加跳转去授权页面的链接,一般可以在文章、对话和菜单中添加,为了方便,我直接在菜单中添加(关于如何添加自定义菜单,可以在开发者工具中选择在线接口调试工具,在里面进行配置)。链接的地址格式如下

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中APPID为测试账号的appid,REDIRECT_URI为回调地址(授权域名下的,注意回调地址要填写编码后的url),SCOPE为权限选择(有两种选择,一种是snsapi_base,snsapi_userinfo,一般选择后者),STATE是自定义参数,可以不改,其他原样不变。

授权成功后回调地址将带上code参数和state参数。


根据code换取access_token

根据回调地址的code换取access_token(票据),需要的参数为appid和appsecret,具体代码如下(注意code只能用一次,第二次会报错,其次,code在手机端获取,复制后粘贴到电脑测试)

13908708-b7701d751eabc3d3.png
获取token
13908708-b66c2d154bdbaf1e.png
token实体类

返回值包括access_token和openid等


根据openid获取用户信息

根据票据和用户openid获取用户详细信息(注意openid与unionid不同,unionid是全局唯一,而openid只能做到公众号内唯一,如果需要绑定全网用户,建议根据openid获取unionid再做处理),具体代码如下

13908708-14581fb54e11c1c4.png
获取用户信息并实现登陆
13908708-da24d6072b4d5cd7.png
用户实体类


前台代码

13908708-216729421febea5e.png
angular 回调地址中提交信息从而登陆





参考:

https://mp.weixin.qq.com

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

13908708-9984d27473d8a687.png
示范测试号
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值