企业微信三方开发(三):网页授权登录
目录
前言一
-
企业微信登录分两种:网页授权登录和扫码授权登录。
区别除了字面意思一个需要扫码一个不需要扫码外。还一个重要应用上的区别就是网页授权登录必须在微信客户端完成。
此文是关于如何实现网页授权登录的。 -
登录的整体逻辑分三段,从用户点击登录按钮开始:
- 点击登录按钮,访问OAuth2网页授权链接获取微信授权code【前端处理】
- 通过授权code换取用户成员票据user_ticket在内的用户信息【后端处理】
- 通过user_ticket获取用户敏感信息【后端处理】
-
这里OAuth2网页授权链接获取授权code在前端完成。我们前端使用uni-app框架,其好处是搭建方便、支持跨端、语言为现在很热门的vue。
-
微信企业三方开发访问授权链接不支持本地调试,官方意见是自己搭建线上调试平台,然后通过企业微信访问调试。这里我就只好用我自己线上的服务器和域名进行开发调试。
技术栈及工具
- 前端开发框架:uni-app
- 前端开发工具:HBulider
- 后端开发框架:spring-boot
- 后端开发工具: idea
一、OAuth2到底是什么?
在做授权登录时,无论是微信还企业微信,包括许多其它厂的登录。我们都会碰到一个概念——OAuth
通常也写作OAuth2.0,其中2.0是他的版本号
1.1、首先要对授权登录有个正确的概念
通常说到登录,就涉及两方:用户 和 应用
比如我在使用微信,那么我就是用户,微信app就是应用。
登录逻辑也很简单:我只需要注册用户名及密码到微信服务器,即可用用户名和密码登录
而授权登录则涉及三方: 用户,认证服务器 ,应用
比如我想使用CSDN,需要注册登录。如果我直接选择用我的微信账号登录,这就是一个授权登录过程。其中用户就是我,认证服务器就是微信的服务器,应用则是CSDN
其中微信的授权登录就是采用的OAuth 2.0授权码模式
1.2、OAuth2.0的授权码模式
OAuth是一套授权模式的统称,其中用的最多的就是授权码模式。
上图就是OAuth2.0授权码模式的流程,我们再结合微信授权登录CSDN的情形讲解一下:
- 首先我点击CSDN的微信登录按钮,CSDN服务器会构造OAuth2链接(具体链接参看微信文档,参数包括CSDN的身份ID,以及重定向URI,这个URI也就是CSDN登录成功的页面),进入到微信的授权页
- 我在微信的授权页点击同意授权,微信会跳转到重定向URI,也就是CSDN登录成功页并附上授权码
- 进入登录成功页时,CSDN服务器会拿着授权码以及调用凭证AccessToken(由微信指定接口获取)向微信服务器获取我的基本信息。整个授权过程完成。
可以看到OAuth2.0很明显的优点,CSDN完全不用知道更不需要存储我的微信账号和密码,就能判断我的微信就是我的微信,即我就是我!
二、网页授权
明白了OAuth2.0,下面构建OAuth2.0链接以及其中的参数也就不需要多讲。
2.1、新建uni-app项目
因为正好在用uni-app做小程序,所以这里就选择了这个框架,具体创建方式直接查看,这里我们已经创建了一个叫easyou-agency的项目。
这里前端用什么框架不重要,关键是需要发送http请求
2.2、 构建网页授权链接
注意参数 scope,主要用于设置手动授权还是静默授权。 区别就是授权时需不需要点击授权按钮。
如果选择手动授权,需给应用配置权限
接下来继续写代码,先新建两个页面,index和login
login页面需要访问构建的URL:
>
="width: 96%;margin: 0 auto;">
>