# 成员名片组件 [飞书成员名片页](https://www.feishu.cn/hc/zh-CN/articles/360049067669) 功能可以帮助团队成员之间更好地认识对方，了解基本信息，降低沟通成本。调用成员名片组件，你就可以在你的网页中展示飞书成员名片，并支持通过名片上的按钮发起飞书聊天、查看 OKR 等。该组件支持多语言适配（中文、英文、日文等），同时支持配置浅色模式或深色模式。 ![Group 13.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/546350d30c8136509e6a54168f21c399_BBET32N2wL.png?height=947&lazyload=true&maxWidth=540&width=1640) ## 案例展示下图是某企业内的项目管理系统（浏览器网页）： - 当用户想了解负责人，点击负责人，即可打开该负责人的 **“成员名片页”** ，查看负责人的基本信息。 - 当用户对项目有疑问，则可以直接从 **“成员名片页”** 中点击 **“消息”** 按钮，快速打开与负责人的飞书聊天会话，大幅提升项目协同效率。 ![中文.gif](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5f8ce9f36a50fb4541a656f59f16210c_sokoUMijkM.gif?height=1288&lazyload=true&maxWidth=600&width=1631) ## 适用范围 - 网页组件只适用于企业自建应用，暂不支持商店应用。 - 网页组件适用于普通web网页，不建议在小程序webview中调用此组件。如果需要在小程序中使用webview组件，可参考[enterProfile](https://open.feishu.cn/document/uYjL24iN/ucDM04yNwQjL3ADN) ## 接入流程 **第一步：** 创建一个飞书应用，开启“获取成员名片信息”权限 **第二步：** 在你的网页中调用成员名片组件详细的接入方法参见下文。 ## 第一步：创建应用并申请权限 1. 在[开发者后台](https://open.feishu.cn/app/) 点击**创建企业自建应用**，创建成功之后，点击应用名称打开应用，点击**凭证与基础信息**切换页面，拿到 App ID。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/8e1af4302c862a1ee8875d4d2424fc41_2GGZ2xoeiB.png?height=366&lazyload=true&maxWidth=600&width=2610) 2. 点击 **开通权限**，在右侧弹出的界面内选择 **用户身份权限 user_access_token**，并开通 **获取成员名片信息（component:user_profile）** 权限。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/01bcbbe9eeb006c0eab15b9a75d5dcaa_fngKaa7r8s.png?height=1518&lazyload=true&maxWidth=600&width=2882) 3. （可选）发布应用。如果以上申请的权限在当前租户管理员设置的权限等级是免审权限，则可以申请后直接生效。如果以上申请的权限为需要审核权限，则必须发布应用使配置生效。 1. 在应用详情页左侧进入 **应用发布 > 版本管理与发布** 功能页。 2. 点击 **创建版本**。 ![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/262335c6bf6833243c30d83c9d8a470d_Jeb9sNPu00.png?height=842&lazyload=true&maxWidth=600&width=2882) 3. 在 **版本详情** 页面，配置应用的版本号、能力、更新说明、可用范围等信息，并在页面底部点击 **保存**。 4. 在弹窗内点击 **确认发布**。提交后需要等待企业管理员审核，审核通过后应用将发布成功，申请的 API 权限才会正式生效。 ## 第二步：调用组件 ### 1、引入组件库在网页 html 中引入飞书网页组件 SDK： ```html ... ``` 若要使用成员名片组件，SDK 需要在``加载后引入。 ### 2、配置鉴权信息详细鉴权流程请参见 [组件SDK鉴权流程](https://open.feishu.cn/document/uYjL24iN/uUDO3YjL1gzN24SN4cjN)。仅支持用户身份鉴权。调用如下方法完成组件鉴权：warning **注意**： - 当前登录用户的 open id，要确保与生成 signature 使用的 user_access_token 相对应。 - 使用成员名片组件时，jsApiList 取值为 ['user_profile']。 ```js window.webComponent.config({ openId, // 当前登录用户的open id，要确保与生成signature使用的user_access_token相对应 signature, // 签名 appId, // 应用 appId，在Step1中获得的应用appId timestamp, // 时间戳（毫秒） nonceStr, // 随机字符串 url, // app URL jsApiList, // 使用成员名片组件时取值为 ['user_profile'] locale, // 指定组件的国际化语言：en-US 英文、zh-CN 中文、ja-JP 日文 }).then(res=>{ // 可以在这里进行组件动态渲染 }) ``` ### 3、渲染组件在完全鉴权后，通过 render 方法渲染组件： ```js window.addProfileDynamical = function () { // 动态渲染，返回组件实例。 myComponent = window.webComponent.render( 'UserProfile', { openId: 'ou-xxxxx', // 要展示哪个用户的成员名片 }, document.querySelector('#your-mount-point'), // 将组件挂在到哪个元素上 ) } window.removeProfileDynamical = function () { // 销毁组件 myComponent.unmount() } ``` ### 4、异常捕获 > 业务方需要保证鉴权有效性，当出现鉴权失败等问题时，需要进行**重新鉴权**。 ```js // 捕获组件内部错误 window.webComponent.onError(function (error: Error) { console.error('custom error:', error) }) // 捕获 sdk 鉴权错误 window.webComponent.onAuthError(function (error: Error) { console.error('auth error callback', error) }) interface Error { code: string; msg: string; } ``` ### 5、多语言适配默认使用 `en`。示例代码： ```js // 初始化时传入 window.webComponent.config({ ... locale: 'zh-CN' }) // 更新 window.webComponent.update({ ... locale: 'ja-JP' }) ``` 可支持的语言列表如下： | 语言 | locale 名 | 支持情况 | | ---- | -------- | ---- | | 中文简体 | zh-CN | ✓ | | 日语 | ja-JP | ✓ | | 英语 | en-US | ✓ | ### 6、浅色/深色模式主题色可通过 theme 值配置，可选值： - `light`：浅色模式 - `dark`：深色模式默认使用` light`浅色模式。示例代码： ```js // 初始化时传入 window.webComponent.config({ ... theme: 'dark', }) // 更新 window.webComponent.update({ ... theme: 'light' }) ```