参考 企业微信官方开发中心
实现原理
- 前端请求企业微信获取code
- 拿企业微信返回的code请求后端判断是否已绑定系统账户
- 后端根据企业微信code请求获取accessToken,然后根据accessToken获取到用户企业微信userId
- 后端返回是否绑定以及绑定的系统用户名
这里判断如果绑定了也可以直接登录到系统,然后返回token,我这里功能少直接用用户名与后端做交互
没有绑定返回未绑定标识,前端根据标识跳转登录并绑定的页面
- 根据后端返回的绑定与否做处理
- 如果未绑定,则再次请求企业微信获取code(code只能使用一次),然后跳转绑定页面(页面一)进行绑定
也可以在第四步判断是否绑定时,如果未绑定则返回userId(企业微信的),成功则返回token或者系统用户名
完成绑定之后再跳转至首页,后续请求后端都可以使用token或者系统用户名进行权限校验
- 如果已绑定,则直接跳转首页(页面二)
准备H5页面
这里需要2个以上的H5页面,第一个用来授权登录绑定系统账户的,类似如下图
输入系统的用户名和密码请求后台绑定企业微信
一个系统首页,我这里就一个显示积分的页面
如果是请求的两次获取code,那么则需要两个回调url,而且回调url的域名必须通过企业微信网页授权域名校验
前端部分
在第一个页面加载时请求微信获取code,请求的url如下
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
后续就如实现原理所讲,拿企业微信code请求后端判断是否绑定系统账户,根据返回是否绑定跳转不同的页面
后端部分
需要根据企业微信code去请求获取access_token,请求access_token的url如下
https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET
拿到access_token之后就可以去请求获取用户身份
https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=ACCESS_TOKEN&code=CODE
企业微信App
首先得先有一个企业微信APP,关于企业微信APP的添加以及扫码登录参考 实现企业微信扫码登录
- 增加H5跳转
注意跳转的页面设置为页面一 - 域名校验设置
这里的[angyum.com:10031]必须到端口,不需要http或https前缀,回调url要以此url为基础,举例
http://angyum.com:10031/appoint/index.html#/login
http://angyum.com:10031/appoint/index.html#/start
- 如果你的服务器ip不在企业可信IP中,也需要设置
可信IP可以设置多个,用分号隔开
- 最后如果还需要给其他同事添加此APP的访问权限,如下
评论区