react 接入企业微信登录组件

需求简述

把某web登录页替换成使用企业微信的扫码登录。

具体实现

  1. 自建应用:登录企微后台/应用管理,滑到最底部,创建应用并填写应用相关信息:

在这里插入图片描述
2. 创建成功之后,进入应用详情,配置可信域名以及授权登录:
在这里插入图片描述

  1. 配置可信域名:
    在这里插入图片描述
    注意:回调域名的配置规则必须要与企业主体关联的域名且不能包含协议头,不支持ip地址及短链域名
    域名验证:将校验文件下载下来,上传至配置的可信域名的服务器,通过nginx配置,浏览器能直接访问到该文件,则验证成功。
  2. 企业微信授权登录/web网页,设置授权回调域
    在这里插入图片描述
  3. 搭建本地联调环境
    由于调用企业微信的sdk,必须与自建应用配置的可信域名一致,否则调不通,处理如下:
    修改本地host文件,将127.0.0.1映射到可信域名下(18x.xxx.cn)
    在这里插入图片描述
    代理到https:mkcert ---- 用go写的零配置专门用来本地环境 https 证书生成的工具
    使用如下:
安装:   
brew install mkcert   /  npm install -g mkcert
为本地安装CA:   
 mkcert  -install     
 mkcert 18x.xxx.cn

成功安装CA会生成cert以及key两个文件
在这里插入图片描述
在webpack中配置https:

 devServer: {
    allowedHosts: 'all',
    https: {
      key: fs.readFileSync(
        'cn-key.pem文件的绝对路径'
      ),
      cert: fs.readFileSync(
        'cn.pem文件的绝对路径'
      )
    }
  },

登录面板参数配置:

ww.createWWLoginPanel({
      // 登录组件挂载元素
      el: "#ww_login",
      params: {
        login_type: "CorpApp",
        // 企业 CorpID
        appid: APP_ID,
        // 应用 AgentID
        agentid: AGENT_ID,
        // 登录成功后的跳转地址,注意:CUSTOM_CN 必须跟应用配置的授权登录回调域一致(域名+端口)
        redirect_uri: `${CUSTOM_CN}/api/sso/login`,
        // 该参数可用于防止 CSRF 攻击(跨站请求伪造攻击),可设置为简单随机数
        state: "WWLogin",
        // 登录成功跳转类型
        redirect_type: "callback",
        // 登录面板大小
        panel_size: "small",
        lang: "zh",
      },
      onLoginSuccess({ code }) {
        console.log(code, "9090");
        // redirect_type=callback 时,扫码成功后触发
        window.location.href = `${CUSTOM_CN}/api/sso/login?code=${code}`;
      },
      onLoginFail({ errCode, errMsg }) {
        console.log("error", errCode, errMsg);
        // 提示错误信息
        // 错误码参考:https://developer.work.weixin.qq.com/document/path/98152#%E9%99%84%E5%BD%95
      },
    });

执行命令yarn start,运行项目,将原本的127.0.0.1替换为可信域名https://18x.xxx.cn即可!
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
安信单用户微信商城管理系统适合于一般企业、公司快速搭建微信商城网上销售平台。 本系统采用ASP语言+ACCESS数据库(可升迁至SQLSERVER数据库)架构。 本系统采用TPL模版引擎加载技术开发,实现了MVC开发模式,使业务逻辑与界面很好的分离。更具特色的是可以在TPL模版文件中使用SQL语句串,可以自由在模版文件里自由加载数据库查询。可以在不修改任何语言内核文件的情况下,实现前台布局的修改和数据库的灵活调用。 安信单用户微信商城管理系统v2.0.0版本功能与特色: 会员系统 1.会员注册与会员管理系统; 2.会员资料管理; 3.会员修改登录密码; 4.会员订单管理; 5.商品收藏管理; 7.在线充值; 9.充值记录; 购物系统与支付 1.完善的购物车系统; 2.集成了安全便利的在线第三方接口支付系统:微信支付; 3.会员在线订单管理系统与订单流程跟踪系统; 产品展示 1.页面商品推荐; 2.产品大全按分类浏览商品; 3.特惠产品推荐专栏; 4.模糊搜索商品; 5.关键字推荐; 资讯频道 1.商城公告展示; 2.自定义新闻列表展示; 会员帮助系统 1.购物指南: (1)交易条款说明 (2)购物流程说明 (3)订单状态说明 2.关于我们 (1)关于我们 (2)诚聘英才 (3)服务条款 (4)隐私声明 (5)联系我们 3.配送方式 (1)配送费用 (2)上门自提 (3)货到付款 4.售后服务 (1)售后须知 (2)退换货政策 (3)厂家服务条款 5.支付方式 (1)微信扫码支付 6.自主服务 (1)常见问题 (2)订单查询 (3)会员制度 (4)商城FAQ 后台管理 1.会员管理 (1)查看会员资料; (2)设定会员级别:普通顾客、商城会员、VIP会员; (3)管理员为会员手工充值; (4)顾客订单详情查看; (5)订单流程跟踪管理; (6)无效订单删除; 2.商品管理 (1)添加商品 (2)管理商品 (3)商品无限级分类设置: 商品分类采取无限级分类模式,一般商城可以设置使用三级分类即可。 3.资金管理 (1)手动充值操作 (2)会员充值记录 4.新闻资讯管理 (1)添加新闻资讯 (2)管理新闻资讯 (3)资讯分类管理:采用无限级新闻分类模式。 5.批量生成静态页面 批量生成静态页面功能:用于前台修改布局、模版文件等,重新更新静态页面。 (1)生成商品静态页; (2)生成新闻资讯页; (3)生成帮助中心说明页; 6.新闻资讯管理 (1)系统参数配置:配置网站名称、浏览量统计代码、联系方式等信息。 (2)管理员设置 (3)数据库管理 (4)区域管理 (5)网站日志管理 7.新闻资讯管理 (1)广告位管理: 采用广告组管理模式,可以在前台页面的任何位置自定义任何尺寸的大小的图片广告。 (2)友情链接管理 (3)单面帮助文档管理 (4)焦点图广告管理 (5)在线支付方式 系统测试 前台用户测试帐号:user001 密码:123456 超级管理员测试帐号:admin 密码:admin888 测试地址:http://域名/s_admin/login.asp

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值