Iframe embedding solution

Updated at:

This document describes the technical solution for embedding the Quanmiao Software as a Service (SaaS) product into third-party systems using an iframe.

Application scenario

You can use this method to embed the Quanmiao SaaS product into your internal systems, such as an Office Automation (OA) system, a Customer Relationship Management (CRM) system, or a portal platform. This method provides fast integration at a low development cost. It also lets you configure visual parameters to maintain a consistent look and feel across your enterprise.

Integration steps

1. Create a RAM user for your Alibaba Cloud account

Use your Alibaba Cloud account to create a Resource Access Management (RAM) user in the RAM User Management console. Obtain an AccessKey pair and record it. You only need one RAM user. Database permissions for different accounts are distinguished by the RoleSessionName parameter in the AssumeRole API call.

image.png
2. Grant permissions to the RAM user

Go to the user details page. On the Permission Management tab, grant the AliyunSTSAssumeRoleAccess and AliyunAiMiaoBiFullAccess permissions to the RAM user.

image.png
3. Create a RAM role for the Alibaba Cloud account

Use your Alibaba Cloud account to create a RAM role in the Role Management console. Grant the AliyunSTSAssumeRoleAccess and AliyunAiMiaoBiFullAccess permissions to the role. You only need to create one role.

4. Confirm the role in the Model Studio console

Log on to the Alibaba Cloud Model Studio (Model Studio) console with your Alibaba Cloud account. In the permission settings, click Add User. In the dialog box that appears, set Type to RAM Role. For RAM Role, select the role that you just created and click OK. Note: Grant permissions to the role, not to the user.

image.png
5. Generate a logon-free URL

You must provide a server-side transit URL, such as https://xx.com/aimiaobi. When a user accesses this URL, your server checks whether the user is logged on to your system. If the user is not logged on, redirect them to your system's logon page. If the user is logged on, your server calls an Alibaba Cloud API to generate a logon-free URL. Then, your server returns an HTTP 301 status code to the browser. The browser automatically redirects to the generated URL to complete the logon to Alibaba Cloud. For more information about logon-free URLs, see Logon-free access. The generation process is as follows:

  1. Call the AssumeRole - Obtain temporary identity credentials for a RAM role API to generate a temporary AccessKey ID, AccessKey secret, and security token. Use the RoleSessionName parameter in the API call to distinguish between different users for data isolation.

  2. Use the generated AccessKey ID, AccessKey secret, and security token to call the GetSigninToken API and generate a SigninToken. Important: In the GetSigninToken request, you must set the TicketType parameter to mini.

  3. Use the SigninToken to construct the logon-free URL and return it to the browser. The URL is in the following format: https://signin.aliyun.com/federation?Action=Login&LoginUrl=XXX&Destination=XXX&SigninToken=XXX. You can construct and test a sample URL here.

    1. The Destination parameter is the target URL in Quanmiao. You must change the host aimiaobi.console.aliyun.com in the Quanmiao URL to aimiaobi4service.console.aliyun.com. To customize the content, you can customize and generate the URL here.
    2. Set the LoginUrl parameter to your server-side transit URL, such as https://xx.com/aimiaobi. When a user's session expires, the user is automatically redirected to this URL to log on again.image.png
6. Embed the page

On your internal website, embed the Quanmiao page in an iframe. Set the iframe's source to the server-side transit URL, such as https://xx.com/aimiaobi.