为用户创造价值

始终追求工匠精神,是您靠谱的H5开发、小程序开发、微信开发供应商

蓝畅首页 >> 动态

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

时间:2019-09-01 21:48:58 | 来源:Infocode蓝畅

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

理解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之后怎么做呢?继续看文档:


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

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


实现代码如下:

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

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

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

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

1、从url中截取code。

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

代码如下:


程序的流程图如下:


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

1、微信接口开发

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

原文地址:https://cloud.tencent.com/developer/news/204448



关于我们:

蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务,是您靠谱的互联网开发供应商。

服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区    为您提供:H5开发,H5设计,H5外包,微信开发外包,H5商城开发,小程序商城开发,网站开发外包,H5游戏开发,小程序开发外包,小程序设计、APP开发外包,UI设计,SEO优化,视频后期制作等优质服务


 
上一篇:用Axure怎么做H5原型图设计
下一篇:2019年Web前端开发的8个趋势

相关阅读推荐:

什么是微官网?微官网开发的特点有哪些

小程序商城开发对于中小电商企业带来哪些好处

微信小程序开发快速低成本推广引流的常用方法

母婴网站建设制作与网页设计开发

公安备案的详细流程是什么,如何去操作

说说微信小程序支付是流程是什么,如何去做

Tips: 专业提供H5开发小程序开发微信开发网站开发APP开发SEO优化、以及产品规划和安全运维服务