百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

手机端通过企业微信授权登录网页 企业微信授权登陆

yuyutoo 2024-11-11 16:48 2 浏览 0 评论

前提:

前段时间写了个通过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%E9%AA%8C%E8%AF%81%E6%8E%A5%E5%8F%A3

到此功能就算完成了。使用手机尝试访问网站也正常进入成功。

相关推荐

jQuery VS AngularJS 你更钟爱哪个?

在这一次的Web开发教程中,我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题,即jQuery和AngularJS之间的区别是什么?也就是说jQueryVSAngularJS?...

Jquery实时校验,指定长度的「负小数」,小数位未满末尾补0

在可以输入【负小数】的输入框获取到焦点时,移除千位分隔符,在输入数据时,实时校验输入内容是否正确,失去焦点后,添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...

如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例

要在pbootCMS前台调用自定义表单,您需要在后台创建表单并为其添加字段,然后在前台模板文件中添加相关代码,如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...

编程技巧:Jquery实时验证,指定长度的「负小数」

为了保障【负小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...

编程技巧:Jquery实时验证,指定长度的「正小数」

为了保障【正小数】的正确性,做成了通过Jquery,在用户端,实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...

jquery.validate检查数组全部验证

问题:html中有多个name[],每个参数都要进行验证是否为空,这个时候直接用required:true话,不能全部验证,只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...

Vue进阶(幺叁肆):npm查看包版本信息

第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...

layui中使用lay-verify进行条件校验

一、layui的校验很简单,主要有以下步骤:1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签,加上lay-...

jQuery是什么?如何使用? jquery是什么功能组件

jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库,它简化了客户...

django框架的表单form的理解和用法-9

表单呈现...

jquery对上传文件的检测判断 jquery实现文件上传

总体思路:在前端使用jquery对上传文件做部分初步的判断,验证通过的文件利用ajaxFileUpload上传到服务器端,并将文件的存储路径保存到数据库。<asp:FileUploadI...

Nodejs之MEAN栈开发(四)-- form验证及图片上传

这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R...

大数据开发基础之JAVA jquery 大数据java实战

上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途,本期就给大家带来了JAVAweb的第二个知识点jquery,大数据开发基础之JAVAjquery,这是本篇文章的主要...

推荐四个开源的jQuery可视化表单设计器

jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器,开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...

取消回复欢迎 发表评论: