微信授权接口的使用设计与实现

前面两篇文章介绍了微信的接口开发和微信JS-SDK接口的开发与使用。

微信JS-SDK签名接口的使用与开发开发一个微信聊天机器人

今天给大家演示一下微信授权的接口的实现,首先这个接口的实现有好多种方法,所以咱们有必要根据需求设计一下,将接口设计的通用和灵活。

微信授权认证是基于Auth2.0来实现的,关于OAuth2.0大家可以去看一下阮一峰的这篇文章 :

理解OAuth2.0 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

微信授权虽然是基于Auth2.0,但是比Auth2.0要简单。一些PC网站是基于QQ或微博实现的,在实现验证时需要用户登陆,即输入账号和密码,但是在微信中则不需要,因为微信APP已经登陆了。

不知道大家有没有这样的体验,在微信中访问某个网页时,点击某个按钮或者点击朋友圈中的某个链接,会跳出一个网页,网页中有一个按钮需要大家点击确认授权,如下图:

这里就说明这个网页用到了微信用户授权的接口。

接下来咱们看一下文档:

从文档中得知,在使用微信授权的时候,要先设置微信授权域名,如何设置呢?文档中是这样写的:

在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头。如图:

因为我这里的公众号并未认证,所以没有相应的接口权限,所以不能设置,但是咱们可以用测试号来设置,拿测试号来做开发。如图:

点击修改会弹出一个窗口:

注意:这里授权回调域名只能填写域名,而不是url,域名只是一个字符串,url是带协议的,这里大家要区分好。

接下来再来看文档,看到这样一段文字:

1、引导用户进入授权页面同意授权,获取code

2、通过code换取网页授权access_token(与基础支持中的access_token不同)

3、如果需要,开发者可以刷新网页授权access_token,避免过期

4、通过网页授权access_token和openid获取用户基本信息(支持UnionID机制

第一步引导用户进入授权页面同意授权,获取code。这里面有两个问题:

1、引导用户进入授权页,什么是授权页,这个授权页面的地址是什么?

2、什么是code?

带着问题读文档,根据文档的内容,其实就是让用户点击一个拼接好的url,这个url叫做授权url授权url里面有如下5个参数:

appid、redirect_uri、response_type、scope、state

第一个参数appid不用多说;

第二个参数redirect_uri,是回调地址(记住这个名称),这个redirect_uri中的域名一定要与上面填写的授权回调域名相同,只要域名相同即可,除了域名之外的其他部分可以随便设置;

第三个参数是固定值response_type=code;

第四个参数分为两种情况snsapi_base 与 snsapi_userinfo ,这里我们只考虑第二种情况;

第五个参数state是一个标识位可以省略,可以带一些自定义参数,比方说用户从哪里进入的你的页面:state=“微信扫码”。

拼接完成的url如下:

将这个url放在页面的a标签中:

引导用户点击这个链接(将按钮名称改为开始游戏,点击开始抽奖),用户点击后,会弹出一个页面,如下:

简化流程图:

用户点击 确认登陆(是否授权) 页面会跳转到 redirect_url(回调地址),就是上面拼接url的时候传递的redirect_url参数,并且跳转回来会带上code参数和state参数。

有些同学会问,为什么会跳转到redirect_url(回调地址),并且url上带有参数呢?因为这是OAuth2.0验证机制,大家都遵循这个验证机制。返回的url如下:

redirect_url?code="skhdsaddkasj"&state="自定义参数";

因为我们设计的接口是前后端分离的,所以需要前端人员将code和state(state可以省略)获取到之后,再发送到后端接口换取用户信息。

此时我们明确了一个接口的数据交互,前端工程师发送code,后端接口返回用户信息。

现在问题产生了,后端工程师拿到code之后怎么做呢?继续看文档:

从文档中看出,后端人员拿到code之后需要请求一个微信的接口,从而获取access_token和openid值。这里暂不考虑缓存(每个人获取的access_token是不一样的缓存意义不大)。

第三步 刷新token,这步也可以省略,因为上面的access_token没有使用缓存。直接下一步。

第四步拉取用户信息,看文档:

可以看出来,又得再次请求微信的接口,这次请求需要用到上次获取的access_token和openid,还有另外一个一个lang参数,这个参数是设置返回信息的语言的,这里设置为zh_CN(中文);

实现代码如下:

这里我们使用了一个叫做superagent的npm包,这个包后端服务发送请求的,比nodejs原生的http模块好用,大家有兴趣可以去npm官网看一下官方文档,比较简单,这里不做赘述。

从上面的代码中可以明显看到我们使用了回调嵌套,因为第二个请求依赖第一个请求的返回值,并且在这个路由开头首先接收前端向后端放的code。

第一个请求获取access_token,第二个请求获取用户信息,并返回给前端人员,至此,我们完成了用code换取用户信息的接口。

这样开发的好处是,前端开发人员拼接授权地址,并且拼接过程中规定回调地址,回调地址显示最终的活动页面,这个页面要做两个事情:

1、从url中截取code。

2、将code发送到后端接口换取用户信息。

代码如下:

程序的流程图如下:

微信公众号开发一共写了三篇文章,相对来说有点难度,因为涉及到前后端的结合,既有前端用户交互,又有后端数据交互,需要读者掌握后端知识和前端知识,只有这样才能设计并使用这些接口,微信公众号开发基本就三种情况:

1、微信接口开发

开发一个微信聊天机器人

2、微信js-sdk接口使用与开发

微信JS-SDK签名接口的使用与开发

3、微信授权接口设计使用与开发(本篇文章)

当然有机会我会把微信支付的前后端交互流程给大家展示一下。

原文发布于微信公众号 - nodejs全栈开发(geekclass)

原文发表时间:2018-05-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券