登录方式

企业微信支持开发者使用以下方式来进行Web登录

系统浏览器（桌面端）
- 使用 @wecom/jssdk 初始化企业微信登录组件
- 构造登录链接
企业微信内置 Webview（桌面端&移动端）
- OAuth授权登录

系统浏览器（桌面端）- 使用

0.jfif

`@wecom/jssdk`方式

npm 下载

npm install @wecom/jssdk

项目中引入使用 SDK：

import * as ww from '@wecom/jssdk'

初始化@wecom/jssdk登录组件，代码示例：

// 初始化
const wwLogin = ww.createWWLoginPanel({
  el: '#ww_login', // 登录组件挂载元素；可以指定 `DOM` 元素或 `CSS` 选择器
  params: {  // 登录参数
  // 登录类型；ServiceApp-第三方应用登录；CorpApp-企业自建应用登录服务、商代开发应用登录
    login_type: 'CorpApp', 
  // AppID登录类型为企业自建应用/服务商代开发应用时填企业 CorpID，第三方登录时填登录授权 SuiteID
    appid: 'wwbbb6a7b539f2xxxxx', 
    agentid: '10000xx', // 企业自建应用/服务商代开发应用 AgentID
    redirect_uri: 'https://work.weixin.qq.com', // 登录成功重定向 url
    state: 'loginState',  // 登录 state 用于保持请求和回调的状态，授权请求后原样带回给企业。
    // 登录成功跳转类型;
    // top-默认 - top window顶层页面跳转;
    // callback - 通过 onLoginSuccess 回调用户授权 code，开发者自行处理跳转 
    // self - 登录组件跳转
    redirect_type: 'callback', 
  },
  // 获取企业微信桌面端登录状态回调
  onCheckWeComLogin({ isWeComLogin }) {
    console.log(isWeComLogin)
  },
  // 企业微信登录成功回调,需配置 redirect_type=callback
  onLoginSuccess({ code }) {
    console.log({ code })
    // 登录后的业务逻辑...
  },
  // 企业微信登录错误回调
  onLoginFail(err) {
    console.log(err)
  },
})

// 卸载登录面板
wwLogin.unmount()

注意事项:

当 redirect_type=callback，通过onLoginSuccess获取code时,localhost方式本地调试是不支持的，必须要在可信域名下调用

构造企业微信登录链接

链接格式

我们需要构造如下的链接来获取 code 参数 https://login.work.weixin.qq.com/wwlogin/sso/loginappid=APPID&redirect_uri=REDIRECT_URI&state=STATE

参数说明

参数名	类型	必填	说明
login_type	string	是	登录类型。 `ServiceApp`：服务商登录；`CorpApp`：企业自建/代开发应用登录。
appid	string	是	登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 SuiteID
agentid	string	否	企业自建应用/服务商代开发应用 `AgentID`，当`login_type=CorpApp`时填写
redirect_uri	string	是	登录成功重定向 `url` 需进行 `URLEncode`
state	string	否	登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止`CSRF` 攻击（跨站请求伪造攻击），建议带上该参数，可设置为简单的随机数加 `session` 进行校验需进行 `URLEncode`
lang	string	否	语言类型。`zh`：中文；`en`：英文。

返回说明
用户允许授权后，将会重定向到 redirect_uri 的网址上，并且带上 code 和 state 参数

redirect_uri?code=CODE&state=STATE

示例：自建/代开发应用

企业CorpID：WWCorpId
开启授权登录的应用ID：1000000
登录跳转链接：http://work.weixin.qq.com
state设置为：WWLogin
需要配置应用授权回调域为：work.weixin.qq.com

根据URL规范，将上述参数分别进行UrlEncode，得到拼接的登录链接为：
// https://login.work.weixin.qq.com/wwlogin/sso/login?login_type=CorpApp&appid=WWCorpId&agentid=1000000&redirect_uri=https://Fwork.weixin.qq.com&state=WWLogin

返回后的网址格式：
// https://Fwork.weixin.qq.com?code=xxx&state=WWLogin

// 获取重定向回来的参数
let url = new URL(location.href);
let params = new URLSearchParams(url.search);
// 获取 code 值
let code = params.get("code");
// 获取 state 值
let state = params.get("state");

vue项目集成企业微信Web登录功能