企业微信扫码登录遇到的bug及解决办法

最新推荐文章于 2024-05-31 14:53:05 发布

Cc.＇沐艿伊℡

最新推荐文章于 2024-05-31 14:53:05 发布

阅读量954

点赞数 21

文章标签： vue.js 前端 javascript 企业微信

本文链接：https://blog.csdn.net/qq_44899153/article/details/137874751

版权

企业微信自建应用扫码登录
1.基本配置
1.登录企业微信管理系统，新建一个自建应用
在这里插入图片描述
2.点击你新建的应用，拿到AgentId
3.在我的企业页面拿到appid

4.配置可信域名

5.配置授权回调域

写到这，基本配置已完成，可以开始写前端代码
2.企业微信登录二维码
企业微信web登录官方文档
我用的是API接口方式拿的二维码
官方文档
https://developer.work.weixin.qq.com/document/path/98268
1.下载包，并引入

npm install @wecom/jssdk
import * as ww from '@wecom/jssdk'

2.初始化二维码
拿到基础配置的appid、agentid，再按照官方文档配置redirect_url,复制下方代码，二维码就出来了，扫描二维码即可拿到code
放二维码的容器，需配置ID"wx_qrcode",此id为二维码初始化中的el

<div  id="wx_qrcode" style="height: 480px; width: 416px;"></div>

初始化

      const wwLogin = ww.createWWLoginPanel({
        el: '#wx_qrcode',
        params: {
          login_type: 'CorpApp',
          appid: corpId,
          agentid:agentId,
          redirect_uri: redirect_url,
          state: 'loginState',
          redirect_type: 'callback',
        },
        onCheckWeComLogin({ isWeComLogin }) {
        },
        onLoginSuccess({ code }) {
          console.log(code)
        },
        onLoginFail(err) {
        },
        onOpenInWecom(err) {
        },
      })

我遇到的报错信息
1.参数错误
明明所有的信息都填的是对的，但是还是报参数错误，这时候我苦恼了，网上搜了很多资料，都没有解决办法，头很大
在这里插入图片描述
突然想到我搜到的一篇文章说，redirect_type为callback时，在本地是不生效的(localhost)，然后我就把redirect_type改成了top，还是报参数错误，给我气死

此时我的代码redirect_type还是top，还是参数错误，然后我就开始搜怎么把本地项目地址改成线上的样式，
然后我就开始按照流程操作
1.找一个不存在的域名，test.myproject.com，填到授权回调域里
在这里插入图片描述
2.修改host域名
widow地址：C:\Windows\System32\drivers\etc。
a.host文件是什么？
首先要了解下，host文件是干什么的。
host文件：作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。
工作原理：浏览器访问网站，要首先通过DNS服务器把要访问的网站域名解析成其指定的IP地址，之后，浏览器才能对此网站进行定位并且访问其数据。操作系统规定，在进行DNS请求以前，先检查系自己的Hosts文件中是否有这个域名和IP的映射关系。如果有，则直接访问这个IP地址指定的网络位置，如果没有，再向已知的DNS服务器提出域名解析请求。也就是说Hosts的IP解析优先级比DNS要高。
b.修改
host文件只允许管理员身份打开，否则不能修改。可以把权限先设为管理员，或者把host文件复制出来，修改后，把内容再覆盖到原来的文件。
W+R ，再复制C:\Windows\System32\drivers\etc，回车即可打开hosts文件夹
在这里插入图片描述
3.配置主机
在cofig.js文件里配置主机，让项目跑在test.myproject.com下

因为回调url配置的地址是：test.myproject.com/#/，本地项目运行地址是：test.myproject.com/#/:4555 看着少了端口号，
那就再回调域和redirect_uri 里都加上端口号
此时刷新页面你会发现报参数错误，因为微信授权 redirect_uri 参数是不带端口号的
所以端口也得改成80，为什么改成80呢？
在这里插入图片描述
4.配置redirect_url=‘test.myproject.com’
5.此时一切准备就绪，刷新页面，你会发现，80端口被占用了，什么鬼，那就去百度一下80端口被占用的解决办法吧
我使用的是最简单粗暴的方法

1.使用管理员身份运行 cmd
2.net stop http //停止系统http服务
3.sc config http start= disabled //禁用服务的自动启动，此处注意等号后面的空格不可少

在这里插入图片描述
解决完之后，重新启动项目，刷新页面，就可以看到二维码，并且扫码成功，拿到code的啦

希望你不再遇到bug,因为后面我还遇到了别的bug，code给后端后报60020的错误，那就去百度一下吧
百度说，你需要配置企业可信IP，自己去看一下怎么配吧，配完之后几乎是没得bug了的
在这里插入图片描述