企业微信——第三方登录（vue）

最新推荐文章于 2023-05-03 16:02:27 发布

野闪

最新推荐文章于 2023-05-03 16:02:27 发布

阅读量1.7k

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/fss15038707127/article/details/103920175

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先要配置好：域名、企业微信的appid
在入口文件（index.html）引入

<script src="http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript" charset="utf-8"></script>

然后登录入口

<a class="weixin-link" href="https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?appid=wwed8bd97ffcef64c5&redirect_uri=http%3a%2f%2fe.egu360.com%2f%23%2fwework%2fauthcode&state=EGU@gyoss9&usertype=member">
  <img
    src="//rescdn.qqmail.com/node/wwopen/wwopenmng/style/images/independent/brand/300x40_white$5ecdf536.png"
    srcset="//rescdn.qqmail.com/node/wwopen/wwopenmng/style/images/independent/brand/300x40_white_2x$ce44f9f2.png 2x"
    alt="企业微信登录"
  >
</a>

A标签里
appid：之前配置好的
redirect_uri：域名拼接
http%3a%2f%2fe.egu360.com%2f%23%2fwework%2fauthcode&state=EGU
这个#代表是hash模式（哈希）。history模式可不带#。
前端路由的两种模式： hash 模式和 history 模式
在这里插入图片描述

找个转码工具 UTF-8 转换工具 - 站长工具

3. state：可以自己设置

IMG标签里
img标签里的内容是企业微信登录入口按钮推荐的一种样式

在这里插入图片描述

接下来的每一步都要上线部署测试
第一步是二维码获取
第二步扫码登录（随便画了个图帮助理解）
在这里插入图片描述
来源：https://zhuanlan.zhihu.com/p/101678205

1月10补充：
根据我们的测试小伙伴感觉没理顺这个逻辑，我跟她讲了这个图，遇到一个问题需要补充一下。
登录到手机号验证页面有什么用：
1、用户只有通过主动获取试用、或者我们进行后台添加。系统内会存有用户手机号等信息。
2、在手机号验证页面进行比对，比对成功即登录成功。
3、用户只要是第一次登录都要进行比对，之后就直接扫码登录成功了。