企业微信web端登录(手机端通过企业微信授权登录网页)
前段时间写了个通过web页面企业微信授权登录网页。
使用企业微信登录个人网站之:一、企业微信自建应用
使用企业微信登录个人网站之:二、html前端二维码展示
使用企业微信登录个人网站之:三、获取access_token及登录信息
但是后来有一次部门聚餐,突然临时要更新代码到外网服务器去,当时我们没有准备电脑,然后想要通过手机登录vpn进行网站更新,然后就发现悲剧了。
1、手机登录竟然也需要二维码,我们需要2个手机对着扫描才行;
2、然后是页面匹配没做好,手机登录时候二维码展示不全;
导致我们最后只能手机登录远程电脑桌面,然后再打开web浏览器操作。可想而知那个字体得多小,操作得多麻烦。
所以这几天看了下企业微信的api文档,并对网站进行了调整。
下面这是效果图:
通过企业微信里面点击链接后会自动跳转到对应的网站,不需要进行扫描二维码等操作,自动识别当前用户。
修改内容:
这里就不从最开始怎么搭建企业微信授权方面说起了,那部分前面文章已经说过了。
1、企业微信管理端部分:添加自定义菜单和需要跳转法人网站,可以每次很方便的直接点击进入网站,避免了手机每次要记录、输入网站地址的麻烦。
效果图:
在企业微信的工作台对应应用下面会出现一个菜单框,点击可以直接进入企业微信管理端刚刚配置的链接。
2、后端部分:
我这里没有在访问前端页面时候通过判断是否是手机访问来做页面跳转,我后端是用python写的,所以我直接在后端加了个装饰器。
过程:
在访问登录页面前,直接先判断是不是手机用户,是就直接去企业微信进行用户授权验证,授权成功就直接进入主页,从而跳过登录页面。
实现:
#判断访问类型是不是手机
def ISMobilePhone(request):
MobilePhone = re.compile('Android|webOS|iPhone|iPod|BlackBerry')
ISPhone = MobilePhone.findall(request.META.get('HTTP_USER_AGENT'))
return ISPhone
##装饰器判断用户是否登录
def checklogin(func):
def wrapper(*args, **kwargs):
request = args[0]
user_dict = request.session.get('is_login',None)
#没登陆
if not user_dict:
#确定访问类型是不是手机
ISPhone = ISMobilePhone(request)
if ISPhone:
##是手机,访问后端手机登录方法
return redirect('/phone_login/')
##不是手机,访问后端网页登录方法
return redirect('/login/')
#已登录,什么也不操作,正常结束装饰器
return func(*args, **kwargs)
return wrapper
#去企业微信请求code信息,并重定向新的访问页面
def phone_login(request):
corpid = "XXXX" ##公司id
return redirect('https://open.weixin.qq.com/connect/oauth2/authorize?appid={corpid}&redirect_uri=http://XXXXX/wx_login&respo
nse_type=code&scope=snsapi_base&state=reg#wechat_redirect'.format(corpid=corpid))
@checklogin
def index(request):
user_dict = request.session.get('is_login',None)
return render_to_response('index.html', {'username':user_dict['name']})
def wx_login(request):
pass ##这里不再写了,以前写过了。这一段是通过code判断用户授权方面是否正常,授权正常就直接返回主页。
使用手机企业微信点击页面登录和扫描二维码有点不同,手机企业微信操作可以直接使用wechat_redirect参数来带上用户身份信息,所以少了页面登陆时候手机点确认登录的过程。这里只需要获取code来验证用户是有权限进行相关应用操作的用户。
代码运行过程:
1、手机用户访问index.html,在后端想要访问index函数;
2、装饰器checklogin在访问前先进行相关操作;
3、checklogin函数判断到访问用户并没有登录,并且是手机用户;
4、跳转到访问phone_login; ##return redirect('/phone_login/')
5、phone_login直接去企业微信官网请求code信息,并重定向的回调链接地址为wx_login ##redirect_uri
6、wx_login函数这里就不再写了,以前的文档已经写过了,这段是通过前面企业微信返回的code进行授权验证,授权正常就直接返回主页页面。
企业微信官方文档:
企业如果需要员工在跳转到企业网页时带上员工的身份信息,需构造如下的链接:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=STATE#wechat_redirect
员工点击后,页面将跳转至 redirect_uri?code=CODE&state=STATE,企业可根据code参数获得员工的userid。
上面企业微信部分官方链接:https://qydev.weixin.qq.com/wiki/index.php?title=OAuth验证接口
到此功能就算完成了。使用手机尝试访问网站也正常进入成功。
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com