Vue 企业微信扫码登录
最编程
2024-05-06 18:38:58
...
目录
前期准备
创建企业应用
获取AgentId和Secret以及appid(企业id)
配置回调授权登陆和网页授权可信域名(这到时候与redirect_uri保持一致)
开发部分
在public下index.html增加js引用
vue部分
前期准备
-
创建企业应用
-
获取AgentId和Secret以及appid(企业id)
-
配置回调授权登陆和网页授权可信域名(这到时候与redirect_uri保持一致)
开发部分
-
在public下index.html增加js引用
<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>
-
vue部分
<div id="wx_qrcode" class="WxQrCode" />
// 监听路有变化获取code参数值
watch: {
"$route.query": {
handler(newVal, oldVal) {
console.info(newVal, oldVal);
this.authCode = this.$route.query["code"];
this.authCode && this.getStaffInfo(); //获取到code,调用后端接口换取token
},
deep: true,
immediate: true,
},
},
//挂载调用初始化二维码方法 方法在下面
mounted() {
this.initCode();
},
// 构造实例的方法 放在methods里
initCode() {
new WwLogin({
id: "wx_qrcode",
// [appid] 企业微信的CorpID,在企业微信管理端查看
appid: "",
// [agentid] 授权方的网页应用ID,在具体的网页应用中查看
agentid: "",
// [redirect_uri] 重定向地址,需要进行UrlEncode 可以增加path
redirect_uri: encodeURIComponent("https://xxxx"),
// [state] 用于保持请求和回调的状态,授权请求后原样带回给企业。
// 该参数可用于防止csrf攻击(跨站请求伪造攻击),建议企业带上该参数,可设置为简单的随机数加session进行校验
state: "", //填写你的签名
// [href] 自定义样式链接,企业可根据实际需求覆盖 默认样式
href: "",
});
},
-
服务端代码
//控制器层 /** * 企业微信扫码登陆 * * @param jsonObject * @return */ @ApiOperation("企业微信扫码登陆") @PostMapping("/wxQrCodeLogin") public Result<JSONObject> wxQrCodeLogin(@RequestBody JSONObject jsonObject) { Result<JSONObject> result = new Result<JSONObject>(); String code = jsonObject.getString("code"); String appid = jsonObject.getString("appid"); String userId = weChatService.getUserId(code); CorpWechatUserInfoVO userInfo = weChatService.getUserInfo(userId); //校验用户有效性 SysUser sysUser = sysUserService.getUserByPhone(code); result = sysUserService.checkUserIsEffective(sysUser); if(!result.isSuccess()) { return result; } String smscode = jsonObject.getString("captcha"); // Object code = redisUtil.get(code); if (!smscode.equals(code)) { result.setMessage("手机验证码错误"); return result; } //用户信息 userInfo(sysUser, result); //添加日志 baseCommonService.addLog("用户名: " + sysUser.getUsername() + ",登录成功!", CommonConstant.LOG_TYPE_1, null); return result; }
//service层 public interface ICorpWeChatService { /** * 获取Token */ String getToken(); void getToken(String corpId); /** * 获取用户ID */ String getUserId(String code); void getUserId(String code, String corpId); /** * 获取用户信息 */ CorpWechatUserInfoVO getUserInfo(String userId); void getUserInfo(String userId, String corpId); }
//impl import com.alibaba.fastjson.JSONObject; import lombok.extern.slf4j.Slf4j; import org.jeecg.common.util.HttpUtils; import org.jeecg.common.util.RedisUtil; import org.jeecg.modules.system.service.ICorpWeChatService; import org.jeecg.modules.system.vo.CorpWechatUserInfoVO; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Lazy; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; @Slf4j @Service public class ICorpWeChatServiceImpl implements ICorpWeChatService { @Autowired @Lazy private RedisUtil redisUtil; private final String corpIdKey = ""; private final String iFBootCorpId = ""; private final String iFBootCorpSecret = ""; private final Long time = 600000L; /** * 获取用户资料uri */ private final String userIdUri = "https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo"; /** * 获取access_token uri */ private final String accessTokenUri = "https://qyapi.weixin.qq.com/cgi-bin/gettoken"; /** * 读取通讯录用户信息uri */ private final String getUserInfoUri = "https://qyapi.weixin.qq.com/cgi-bin/user/get"; @Override public String getToken() { Object accessToken = redisUtil.get(corpIdKey + iFBootCorpId); if(!StringUtils.isEmpty(accessToken)){ return accessToken.toString(); } //请求参数 String params = "corpid=" + iFBootCorpId + "&corpsecret=" + iFBootCorpSecret; //发送请求 String sr = HttpUtils.sendGet(accessTokenUri, params); //解析相应内容(转换成json对象) JSONObject json = JSONObject.parseObject(sr); //获取会话密钥(access_token) String access_token = json.get("access_token").toString(); redisUtil.set(corpIdKey + iFBootCorpId, access_token, time); return access_token; } @Override public void getToken(String appid) { } @Override public String getUserId(String code) { //请求参数 access_token=ACCESS_TOKEN&code=CODE String params = "access_token=" + getToken() + "&code=" + code; //发送请求 String sr = HttpUtils.sendGet(userIdUri, params); //解析相应内容(转换成json对象) JSONObject json = JSONObject.parseObject(sr); //获取会话密钥(access_token) String userid = json.get("userid").toString(); return userid; } @Override public void getUserId(String code, String corpId) { } @Override public CorpWechatUserInfoVO getUserInfo(String userId) { //请求参数 access_token=ACCESS_TOKEN&userid=USERID String params = "access_token=" + getToken() + "&userid=" + userId; //发送请求 String sr = HttpUtils.sendGet(getUserInfoUri, params); //解析相应内容(转换成json对象) JSONObject json = JSONObject.parseObject(sr); String errcode = json.get("errcode").toString(); if(!"0".equals(errcode)){ throw new RuntimeException("getUserInfo error"); } CorpWechatUserInfoVO userInfoVO = JSONObject.parseObject(sr, CorpWechatUserInfoVO.class); return userInfoVO; } @Override public void getUserInfo(String userId, String corpId) { } }
下一篇: 企业微信的活码
推荐阅读
-
企业微信的活码
-
Vue 企业微信扫码登录
-
企业微信接入系列-扫码绑定/登录
-
翩翩仿微信扫码(扫码、图像翻译)
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
微信扫一扫的扫码功能是本地实现的还是网络化的?
-
用最简单的 js 调用 VUE 中的微信扫一扫功能
-
微信开放平台 PC 端扫码登录 [简单易懂]
-
3.ABP .NETCore 添加企业微信第三方登录
-
如何轻松通过微信扫码快速登录:一步步指南及获取授权二维码详解