How to embed YIDA pages in three-party applications
Currently, the YIDA page is mainly located inDingTalk end(Windows, Mac, Android, iOS, etc.) andBrowserUsed in, yesWeb version, there are alsoMobile version. However, businesses often want to embed YIDA pages into their applications, and thenAccess in WeChat, access in DingTalk third-party microapplications, and access in some self-built applicationsWait.
Let's explain how to set up and access the YIDA page based on these situations.
1. Embed in WeChat
The login account system used on the YIDA page is DingTalk. IfIf the page is directly embedded in WeChat or accessed in WeChat, it will automatically jump to the DingTalk login interface.. CauseDingTalk accounts and WeChat accounts do not communicate,So currently in WeChat, we can only embed YIDA pagesNon-boarding address.
Currently, YIDA of the page types support login-free access:Common formAndFlow chart.
QITADE page types such:Report page, large screen page, custom page, and data management pageNo logon access is supported..
The login-free address contains/o/in the url path. Note that/s/is non-login.
1.1 set YIDA free logon address
Create form> form design> add required components> Save
Access form page publishing> Public publishing> select the public access switch and accept relevant user agreements> fill in the access address> Save
1.1 Access in WeChat Mini Program(Currently not supported)
The WeChat mini program embeds YIDA free pages, which are usually used.web-view component. The following steps are required:
Step 1: Add the tenant's custom domain namexxx.aliwork.comAdd to the WeChat service domain name whitelist, where xxx is the second-level domain name customized by the tenant.
For examplehttps://xmtrf1.aliwork.com, you need to set the corresponding custom domain namexmtrf1.aliwork.comAdd to the business domain name whitelist.
We do not recommend that you directlyaliwork.comAdd the first-level domain name to the business domain name and use it as needed. Add the second-level domain name as needed.
Step 2: Download and deploy the verification file.
Deploy files to YIDA domain namesxxx.aliwork.comUnder the root directory. After deployment, if you pass the path:https://xxx.aliwork.com/hqeqOHYqVx.txtYou can access it, indicating that the deployment verification is successful.(Custom deployment is not currently supported on the YIDA side).
Step 3: Use the web-view component to embed the login-free address of YIDA.
<view class="page-index">
<web-view enhanced="true" id="web-view-solution" src="https://www.aliwork.com/o/customer_cases" onMessage="yida"></web-view>
</view>
Bug & Tip
- tip:The domain name of the iframe in The webpage also needs to be configured to the domain name whitelist.
- tip: on the developer tool, you can web-view Right-click-debug on the component to open web-view Debugging of components.
- tip: each page can have only one web-view,web-view The entire page is automatically covered and other components are overwritten.
- tip:web-view Communication between web pages and applets is not supported except for the interfaces provided by JSSDK.
- tip: in iOS, if there is no response to the JSSDK interface call, you canweb-viewAdd a# wechat_redirectResolve.
- tip: Avoid having Chinese characters in the link. If you open a white screen in iOS, we recommend that you addencodeURIComponent
WeChat web-view reference documents:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
1.2 access on WeChat public account or WeChat chat box
Embed or access YIDA in WeChatNon-boarding addressOK, you can also log on to the DingTalk page from the YIDA th end.Share with WeChat and friendsIn. For example:
YIDA customer cases:https://www.aliwork.com/o/customer_cases
YIDA solution Valley View information-Document management:https://www.aliwork.com/o/solution_detail? formInstId=FINST-5X8663C1E0JOBHAE5F0DP56I9KJA3T4UQNEMKZ1
Programmer equipment:https://www.aliwork.com/o/cxy
The WeChat access effect is as follows:
2. Embed in DingTalk three-party applications
YIDA uses a login account of DingTalk, soAs long as the YIDA page is accessed in the DingTalk client, even if it is embedded in a three-party mini program or micro-application, it can implement login-free access, not just the login-free page.The following describes the implementation method:
2.1 avoid logon access in DingTalk mini programs
In principle, YIDA pages are embedded in WeChat mini programs, but the difference is that non-login DingTalk pages can be embedded in YIDA mini programs to achieve login-free access.
Step 1: Add xxx.aliwork.com to the security domain name whitelist.
Step 2: provide an lwp interface to obtain ticket-free access.
// 定义获取免登 ticket 的 lwp 接口
export const getTicket = lwpFactory('getTicket');
// 通过接口获取免登 ticket 同时赋值给 yiDaAuthCode 变量
let yiDaAuthCode = '';
getTicket([
corpId
]).then((res) => {
const code = res.body;
yiDaAuthCode = code;
}).catch(() => {
yiDaAuthCode = '';
});
// 将 YiDaAuthCode 参数拼接到需要免登访问页面的后面
const url = `https://demo.aliwork.com/APP_BYHTBO8ZBWZHT7OF8SBZ/workbench?YiDaAuthCode=${yiDaAuthCode}`;
Step 3: use web-view to embed page address access
<view class="page-index">
<web-view enhanced="true" id="web-view-solution" src="{{url}}" onMessage="yida"></web-view>
</view>
2.2 no logon access in DingTalk microapplications
To access the YIDA page in a microapplication, if you need to implement no logon, you need to modify the address of the YIDA page and add it to&corpid=dingXXXXXX&ddtab=trueParameter, whereThe corpid parameter is the id of the organization to which the access user has access., pleasePay attention to replace, and corpid is allLowercase letters.
Sample page:
https://demo.aliwork.com/APP_BYHTBO8ZBWZHT7OF8SBZ/workbench? corpid=dingXXXXXX&ddtab=true
3. Embed in self-built applications
3.1 iframe embedding
Embed YIDA pages in a self-built application.iframe embedded page, ifIf you embed a non-free logon page, you will jump to the DingTalk logon page..
<iframe src="https://www.aliwork.com/o/customer_cases" title="宜搭客户案例" width="100vw" height="100vh">
<p>Your browser does not support iframes.</p>
</iframe>
Page effect (example: embed www.aliwork.com pages in yida.alibaba-inc.com websites):
iframe documentation:Click here to view
3.2 Use Open API
IfIf you embed the non-free logon page, you will jump to login., which affects the experience.If you need to call YIDA data, or synchronize YIDA data to a self-built system, and merge the data with the pages of the self-built system, we strongly recommend that you use the DingTalk of the Open API Open platform to connect.
Open API address:YIDA Open API Open interface
DingTalk Open platform YIDA Open API:Click here to view
4. Take a chestnut🌰
4.1 embed WeChat mini programs into YIDA pages
Background:Based on the Shanghai anti-epidemic special program, you need to make an entrance in the emergency special needs of the Eleme group mini program, call on users to take charge of the last 100 meters of their own community, and then use YIDA form statistics, requirements, to do centralized point-to-point assistance. The page is mainly shared and collected on WeChat and needs to be embedded in WeChat applets.
Mini Program:Eleme group mini program
YIDA page:https://yida.alibaba-inc.com/o/alscfangyi
4.2 WeChat public account embedded in YIDA page
Public number:DingTalk YIDA
YIDA page:https://www.aliwork.com/o/customer_cases