创建企业微信登录面板 最后更新：2024/04/12 目录 - [ww.createWWLoginPanel(options)](https://developer.work.weixin.qq.com/document/path/98268/#wwcreatewwloginpaneloptions) - [功能描述](https://developer.work.weixin.qq.com/document/path/98268/#%E5%8A%9F%E8%83%BD%E6%8F%8F%E8%BF%B0) - [参数说明](https://developer.work.weixin.qq.com/document/path/98268/#%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E) - [options: Object](https://developer.work.weixin.qq.com/document/path/98268/#options-object) - [返回说明](https://developer.work.weixin.qq.com/document/path/98268/#%E8%BF%94%E5%9B%9E%E8%AF%B4%E6%98%8E) - [使用场景](https://developer.work.weixin.qq.com/document/path/98268/#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF) - [特别说明](https://developer.work.weixin.qq.com/document/path/98268/#%E7%89%B9%E5%88%AB%E8%AF%B4%E6%98%8E) ## ww.createWWLoginPanel(options) ### 功能描述 初始化企业微信Web登录组件，创建登录面板。 ```ts // 初始化登录组件 const wwLogin = ww.createWWLoginPanel({ el: '#ww_login', params: { login_type: 'CorpApp', appid: 'wwbbb6a7b539f2xxxxx', agentid: '10000xx', redirect_uri: 'https://work.weixin.qq.com', state: 'loginState', redirect_type: 'callback', }, onCheckWeComLogin({ isWeComLogin }) { console.log(isWeComLogin) }, onLoginSuccess({ code }) { console.log({ code }) }, onLoginFail(err) { console.log(err) }, }) ``` ### 参数说明 #### options: Object | | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |-----|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | | el | string / Element | | 否 | 登录组件挂载元素 可以指定 `DOM` 元素或 `CSS` 选择器 | | | | params | Object | | 是 | 登录参数 | | | | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | 属性 类型 默认值 必填 说明 最低版本 login_type string 否 登录类型 合法值 说明 ServiceApp 第三方应用登录 CorpApp 企业自建应用登录、服务商代开发应用登录 appid string 是 AppID 登录类型为企业自建应用/服务商代开发应用时填企业 `CorpID`，第三方登录时填登录授权 `SuiteID` agentid string 否 企业自建应用/服务商代开发应用 `AgentID` redirect_uri string 是 登录成功重定向 `url` 无需进行 `URLEncode` state string 否 登录 `state` 用于保持请求和回调的状态，授权请求后原样带回给企业。该参数可用于防止 `CSRF` 攻击（跨站请求伪造攻击），
建议带上该参数，可设置为简单的随机数加 `session` 进行校验 redirect_type string 否 登录成功跳转类型 合法值 说明 top 默认 `top window` 顶层页面跳转 callback 通过 `onLoginSuccess` 回调用户授权 `code`，开发者自行处理跳转 self 登录组件跳转 panel_size string 否 登录面板大小 合法值 说明 middle 默认: 480x416px small 小尺寸: 320x380px lang string 否 语言类型 合法值 说明 zh 中文 en 英文 | | | onCheckWeComLogin | Function | | 否 | 获取企业微信桌面端登录状态回调 | | | | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | **参数** **event: Object** 属性 类型 默认值 必填 说明 最低版本 isWeComLogin boolean 是 企业微信桌面端是否已登录 | | | onLoginSuccess | Function | | 否 | 企业微信登录成功回调 需配置 `redirect_type=callback` | | | | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 code string 是 `Auth Code` | | | onLoginFail | Function | | 否 | 企业微信登录错误回调 登录相关错误码 | | | | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | **参数** **res: Object** 属性 类型 默认值 必填 说明 最低版本 errCode number 否 错误码 errMsg string 否 错误信息 | | | onOpenInWecom | Function | | 否 | 打开企业微信客户端成功回调 | | ### 返回说明 **Object** | | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |-----|---------|-------------------|-----|-----|----------------|------| | | el | HTMLIFrameElement | | 是 | 登录面板 `iframe` 元素 | | | | unmount | Function | | 是 | 卸载登录面板 | | ## [](https://developer.work.weixin.qq.com/document/path/98268/#%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF)使用场景 - [第三方应用登录](https://developer.work.weixin.qq.com/document/path/98268/#45846) - [企业自建应用登录](https://developer.work.weixin.qq.com/document/path/98151) - [服务商代开发应用登录](https://developer.work.weixin.qq.com/document/path/98173) ## [](https://developer.work.weixin.qq.com/document/path/98268/#%E7%89%B9%E5%88%AB%E8%AF%B4%E6%98%8E)特别说明 `ww.createWWLoginPanel` 使用场景：在桌面端系统浏览器中直接初始化Web登录组件，无需调用 [`ww.register`](https://developer.work.weixin.qq.com/document/path/98560#js-%E6%8E%A5%E5%8F%A3%E9%89%B4%E6%9D%83)、[`ww.checkJsApi`](https://developer.work.weixin.qq.com/document/path/98268/#45693)等接口。