企业微信如何登录管理后台

Posted 2023-03-31

在电脑浏览器打开官网，点击页面右上角企业登陆，可通过企业微信app的扫一扫或企业微信绑定的微信扫码登陆管理后台，目前仅超级管理员或分级管理员支持登陆管理后台。详询微信客服：95017。
应答时间：2020-12-01，最新业务变化请以平安银行官网公布为准。
[平安银行我知道]想要知道更多？快来看“平安银行我知道”吧~
https://b.pingan.com.cn/paim/iknow/index.html 参考技术A

1、首先在手机上打开“软件商店”，如下图所示。

2、然后在打开的软件页面中，搜索“企业微信”并点击“安装”。

3、安装完成后，点击手机上的企业微信图标，如下图所示。

4、然后在打开的页面中，点击“微信登录”按钮，如下图所示。

5、最后在打开的页面中，选择企业后点击“进入企业”按钮，如下图所示就完成了。

参考技术B 回答

手机上下载企业微信安装后，直接用微信登录或者微信关联的手机号登录。登录授权过程中可以选择去掉”获得你的好友关系”的对勾。

点击“进入企业”成功登录企业微信，选择下面菜单“工作台”就可以看到与OA关联的公告通知、工作流和流程中心了。

参考技术C

电脑端打开企业微信窗口，左下角最下面三个横线点开之后第三个就是登陆管理后台。


打开企业微信官网，右上角有个企业登录，点击之后用个人微信扫描二维码授权登录即可

（都必须要管理员才可以的哦）

vue实现企业微信扫码登录后台管理系统

大致流程

1. 在登录页面构建内嵌式登录二维码（这种方式好处：无需跳转到企业微信域下登录后再返回，提升企业微信登录的流畅性与成功率）
2. 扫二维码之后，微信那边会跳转到redirect_uri你重定向的地址，后面会拼接code参数，一般重定向地址都是本页面(这里指的是是登录页面)
3. 在本页面获取url后面拼接的code，用code去请求后台接口
4. 后台接口服务那边用access_token和code去获取用户的企业微信号
5. 通过企业微信号查找数据库中是否存在，存在返回用户的基本信息，否则不存在返回提示‘该用户非企业人员’

代码实现

public/index.html 引入js文件：

<script src="https://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>

需要显示登录二维码的页面(这里指登陆页面)构建二维码及相关代码的实现：

显示二维码的容器：

<div id="wx_qrcode" class="wxcodeSty" />

实例化构建相关代码：

// 监听路有变化获取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: "xxxxxxxxxxxxxx",
      // [agentid] 授权方的网页应用ID，在具体的网页应用中查看
      agentid: "xxxxxx",
      // [redirect_uri] 重定向地址，需要进行UrlEncode
      redirect_uri: encodeURIComponent("https://xxxx.com/#/login"),
      // [state] 用于保持请求和回调的状态，授权请求后原样带回给企业。
      // 该参数可用于防止csrf攻击（跨站请求伪造攻击），建议企业带上该参数，可设置为简单的随机数加session进行校验
      state: Date.now() + "xxxxxxxxxxxxxxxxx",	//这里可使用上面appid
      // [href] 自定义样式链接，企业可根据实际需求覆盖默认样式
      href: "https://xxxx.com/wxCode/wxQrcode.css",
    );
  ,
  
  // 企业微信扫码登录
  getStaffInfo() 
    this.$store
      .dispatch("wxLogin",  authCode: this.authCode )	//wxLogin 是store里写的请求后台接口的actions 实现名字
      .then(() => 
        this.$router.push( path: "/" );
      )
      .catch((err) => 
      	//这行代码一定要写，不然扫码登录失败后，刷新页面话会重复登录报提示错误
        this.$router.push( path: "/login" );	
        this.$message(
          showClose: true,
          message: err,
          type: "error",
        );
      );
  ,

store里扫码登录请求后台接口的实现：

// 引入登录请求接口
import  providerLogin  from '@/api/login/login'

actions: 
 	// 企业微信登录
	wxLogin( commit , authCode) 
	  return new Promise((resolve, reject) => 
	    providerLogin(authCode).then(res => 
	      if (res.data.code == 200) 
	      	// 下面几行代码是存储登录成功后的相关信息，与此次无关，相关代码就不展示了
	        commit('SET_TOKEN', res.data.data.token);
	        commit('SET_EXPIRESAT', res.data.data.expiresAt);
	        commit('SET_USERINFO', res.data.data.user);
	        setToken(res.data.data.token, new Date(res.data.data.expiresAt));
	        setExpires(res.data.data.expiresAt, new Date(res.data.data.expiresAt));
	        setUserInfo(res.data.data.user, new Date(res.data.data.expiresAt));
	        resolve();
	       else 
	        reject(res.data.msg);
	      
	    ).catch(error => 
	      reject(error);
	    )
	  )
	,

请求接口api封装：

// 企业微信登录
export function providerLogin(data) 
	return request(
		url: '/admin/base/providerLogin',
		method: 'post',
		data
	)

效果图 (图片打马赛克是为了防止csdn审核图片说违规而被删除)

注意：效果图也可以自定义，使用登录实例js代码里的href字段，里面写你自定义样式文件服务器的位置路径，为了防止项目打包导致样式文件位置无法获取，位置最好放在在项目中public文件夹下，如下图所：（只支持https协议的资源地址）

基本上就这些了，该说的也差不多了，还有疑问的小伙伴可以在评论区咨询我，看到留言会回复的~

具体企业微信内部登录相关文档请查看：企业微信扫码授权登录