Embedding Third-party Applications

Background

Modern enterprises typically maintain their own internal systems. While using Fxiaoke CRM, they also want direct access to these internal systems, which creates the need for integrating third-party applications with Fxiaoke.

This article provides best practices for embedding third-party applications.

Sequence Diagram

Both parties must agree on encryption rules beforehand to prevent potential security issues.

Integration Requirements

Before development, verify that the third-party system meets the following conditions:

1. Uses HTTPS protocol
2. Sets x-frame-option header to either DENY or ALLOW-FROM https://www.fxiaoke.com/
3. Configures samesite in set-cookie as None

iframe Usage Issues provides further explanation.

Development Code

APL Function

Implementation omitted...

Assume the APL function's api_name is func_nK8fQ__c.

Template

<template>
    <div style="width: 100%;">
        <iframe name="google_ads_frame2" width="100%" height="100%" frameborder="0" :src="dUrl" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
    </div>
</template>

Script

Let's outline the approach:

1. Call APL to obtain the third-party system's SSO URL
2. Render the iframe

<script>
export default {
    data() {
        return {
            dUrl: ''
        }
    },
    created() {
        this.fetchUrl();
    },
    methods: {
        fetchUrl() {
            FxUI.userDefine.call_controller('func_nK8fQ__c').then((res) => {
                if(res.Value.success) {
                    this.dUrl = res.Value.functionResult.url;
                }
            })
        }
    }
}
</script>

Inline styles are used, so no separate style section is needed.

Final Code

<template>
    <div style="width: 100%;">
        <iframe name="google_ads_frame2" width="100%" height="100%" frameborder="0" :src="dUrl" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dUrl: ''
        }
    },
    created() {
        this.fetchUrl();
    },
    methods: {
        fetchUrl() {
            FxUI.userDefine.call_controller('func_nK8fQ__c').then((res) => {
                if(res.Value.success) {
                    this.dUrl = res.Value.functionResult.url;
                }
            })
        }
    }
}
</script>