Embed and share console pages

Step 1: Add a parameter to the link

Add the supportRefreshToken=true parameter to the generated link to allow the access time to be extended.

https://sls.console.aliyun.com/lognext/project/<Project name>/dashboard/<Dashboard ID>?sls_ticket=eyJ***************.eyJ******************.KUT****************&supportRefreshToken=true&isShare=true&hideTopbar=true&hideSidebar=true&ignoreTabLocalStorage=true

Step 2: Add a listener event on the client

The client listens for the message event and passes the latest accessToken to the iframe.

window.addEventListener('message', async (e) => {
  if (e?.data?.type === 'refreshToken') {
    const accessToken = await callApi()
    document.querySelector('#myIframe').contentWindow.postMessage(
      {
        // Fixed value: applyAccessToken
        type: 'applyAccessToken',
        // The accessToken returned by calling callApi()
        accessToken,
        // The ticket returned by the CreateTicket operation
        ticket: e.data.ticket,
      },
      '*'
    )
  }
})

In the client, callApi() is a custom method used to call the server-side API. The server-side API calls the RefreshToken operation to obtain an accesstoken. The following code provides an example:

# -*- coding: utf-8 -*-
# This file is auto-generated, don't edit it. Thanks.
import os
import sys

from typing import List

from alibabacloud_sls20201230.client import Client as Sls20201230Client
from alibabacloud_tea_openapi import models as open_api_models
from alibabacloud_sls20201230 import models as sls_20201230_models
from alibabacloud_tea_util import models as util_models
from alibabacloud_tea_util.client import Client as UtilClient


class Sample:
    def __init__(self):
        pass

    @staticmethod
    def create_client() -> Sls20201230Client:
        """
        Use an AccessKey pair to initialize the client.
        @return: Client
        @throws Exception
        """
        # Leaking project code may compromise the security of all resources in your account by exposing the AccessKey pair. The following sample code is for reference only.
        # We recommend that you use the more secure STS method.
        config = open_api_models.Config(
            # Required. Make sure that the ALIBABA_CLOUD_ACCESS_KEY_ID environment variable is configured in your runtime environment.
            access_key_id=os.environ['ALIBABA_CLOUD_ACCESS_KEY_ID'],
            # Required. Make sure that the ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variable is configured in your runtime environment.
            access_key_secret=os.environ['ALIBABA_CLOUD_ACCESS_KEY_SECRET']
        )
        # For more information about endpoints, see https://api.aliyun.com/product/Sls. The endpoint must be in China (Shanghai) or Singapore.
        config.endpoint = 'cn-shanghai.log.aliyuncs.com'
        return Sls20201230Client(config)

    @staticmethod
    def main(
        args: List[str],
    ) -> None:
        client = Sample.create_client()
        refresh_token_request = sls_20201230_models.RefreshTokenRequest(
            ticket='eyJ***************.eyJ******************.KUT****************',
            access_token_expiration_time=60
        )
        runtime = util_models.RuntimeOptions()
        headers = {}
        try:
            # If you copy this code to run, print the API return value yourself.
            client.refresh_token_with_options(refresh_token_request, headers, runtime)
        except Exception as error:
            # This is for printing and demonstration purposes only. Handle exceptions with caution. Do not ignore exceptions in your project.
            # Error message
            print(error.message)
            # Troubleshooting URL
            print(error.data.get("Recommend"))
            UtilClient.assert_as_string(error.message)

    @staticmethod
    async def main_async(
        args: List[str],
    ) -> None:
        client = Sample.create_client()
        refresh_token_request = sls_20201230_models.RefreshTokenRequest(
            ticket='eyJ***************.eyJ******************.KUT****************',
            access_token_expiration_time=60
        )
        runtime = util_models.RuntimeOptions()
        headers = {}
        try:
            # If you copy this code to run, print the API return value yourself.
            await client.refresh_token_with_options_async(refresh_token_request, headers, runtime)
        except Exception as error:
            # This is for printing and demonstration purposes only. Handle exceptions with caution. Do not ignore exceptions in your project.
            # Error message
            print(error.message)
            # Troubleshooting URL
            print(error.data.get("Recommend"))
            UtilClient.assert_as_string(error.message)


if __name__ == '__main__':
    Sample.main(sys.argv[1:])

Procedure

1. Create a RAM user named sls-user as the sharer. Create a RAM user.

2. Grant permissions to the RAM user sls-user.

   1. Create a permission policy named Allow-AccessLogstore to access specific resources (project, Logstore). Create a custom policy.

      Note

      Replace <Your Project Name>, <Your Logstore Name A>, and <Your Logstore Name B> with your actual project and Logstore names.

      {
        "Version": "1",
        "Statement": [
          {
            "Action": [
              "log:ListProject"
            ],
            "Resource": "acs:log:*:*:project/*",
            "Effect": "Allow"
          },
          {
            "Action": [
              "log:List*"
            ],
            "Resource": "acs:log:*:*:project/<Your Project Name>/logstore/*",
            "Effect": "Allow"
          },
          {
            "Action": [
              "log:Get*",
              "log:List*"
            ],
            "Resource": [
              "acs:log:*:*:project/<Your Project Name>/logstore/<Your Logstore Name A>",
              "acs:log:*:*:project/<Your Project Name>/logstore/<Your Logstore Name B>"
            ],
            "Effect": "Allow"
          },
          {
            "Action": [
              "log:Get*",
              "log:List*"
            ],
            "Resource": [
              "acs:log:*:*:project/<Your Project Name>/dashboard",
              "acs:log:*:*:project/<Your Project Name>/dashboard/*"
            ],
            "Effect": "Allow"
          },
          {
            "Action": [
              "log:Get*",
              "log:List*"
            ],
            "Resource": [
              "acs:log:*:*:project/<Your Project Name>/savedsearch",
              "acs:log:*:*:project/<Your Project Name>/savedsearch/*"
            ],
            "Effect": "Allow"
          }
        ]
      }

   2. Grant the Allow-AccessLogstore permission to the RAM user sls-user. Users accessing the embedded page inherit this permission. Examples of custom policies.

   3. Create a permission policy named Allow-CreateTicket to call the CreateTicket operation. Create a custom policy.

      {
          "Version": "1",
          "Statement": [
              {
                  "Effect": "Allow",
                  "Action": "log:CreateTicket",
                  "Resource": "acs:log:*:*:ticket/*"
              }
          ]
      }

   4. Grant the Allow-CreateTicket permission to the RAM user. Grant permissions to a RAM user.

3. You can create a Logstore selection box or tab in your own frontend page to switch between Logstores.

4. When a user enters the embedded page, use the RAM user sls-user-a to call the CreateTicket operation to obtain a ticket. The following example uses the Java SDK.

   Note

   You can debug the operation on the CreateTicket page to obtain a ticket. Append the obtained ticket to the query page URL to access it.

   1. Add Maven dependencies.

      In the root directory of your Java project, open the pom.xml file and add the following code:

      <dependency>
        <groupId>com.aliyun</groupId>
        <artifactId>sls20201230</artifactId>
        <version>5.5.0</version>
      </dependency>

   2. You can download the latest sample project from the CreateTicket page. This example creates the code to generate a ticket, as shown below.

      package com.aliyun.sample;
      
      import com.aliyun.tea.*;
      
      public class Sample {
          public static com.aliyun.sls20201230.Client createClient() throws Exception {
              com.aliyun.teaopenapi.models.Config config = new com.aliyun.teaopenapi.models.Config()
                      // Required. Make sure that the ALIBABA_CLOUD_ACCESS_KEY_ID environment variable is configured in your runtime environment.
                      .setAccessKeyId(System.getenv("ALIBABA_CLOUD_ACCESS_KEY_ID"))
                      // Required. Make sure that the ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variable is configured in your runtime environment.
                      .setAccessKeySecret(System.getenv("ALIBABA_CLOUD_ACCESS_KEY_SECRET"));
              // For more information about endpoints, see https://api.aliyun.com/product/Sls.
              config.endpoint = "cn-shanghai.log.aliyuncs.com";
              return new com.aliyun.sls20201230.Client(config);
          }
      
          public static void main(String[] args_) throws Exception {
              java.util.List<String> args = java.util.Arrays.asList(args_);
              com.aliyun.sls20201230.Client client = Sample.createClient();
              com.aliyun.sls20201230.models.CreateTicketRequest createTicketRequest = new com.aliyun.sls20201230.models.CreateTicketRequest();
              com.aliyun.teautil.models.RuntimeOptions runtime = new com.aliyun.teautil.models.RuntimeOptions();
              java.util.Map<String, String> headers = new java.util.HashMap<>();
              try {
                  // If you copy this code to run, print the API return value yourself.
                  com.aliyun.sls20201230.models.CreateTicketResponse createTicketResponse = client.createTicketWithOptions(createTicketRequest, headers, runtime);
                  
      System.out.println(createTicketResponse.getBody().getTicket());
              } catch (TeaException error) {
                  // This is for printing and demonstration purposes only. Handle exceptions with caution. Do not ignore exceptions in your project.
                  // Error message
                  System.out.println(error.getMessage());
                  // Troubleshooting URL
                  System.out.println(error.getData().get("Recommend"));
                  com.aliyun.teautil.Common.assertAsString(error.message);
              } catch (Exception _error) {
                  TeaException error = new TeaException(_error.getMessage(), _error);
                  // This is for printing and demonstration purposes only. Handle exceptions with caution. Do not ignore exceptions in your project.
                  // Error message
                  System.out.println(error.getMessage());
                  // Troubleshooting URL
                  System.out.println(error.getData().get("Recommend"));
                  com.aliyun.teautil.Common.assertAsString(error.message);
              }        
          }
      }
      

5. Append the obtained ticket to the query page URL. You can also hide the sidebar and top bar, and disable tab history (hideTopbar=true&hideSidebar=true&ignoreTabLocalStorage=true). Configure parameters for embedding console pages.

   https://sls.console.aliyun.com/lognext/project/<Project name>/logsearch/<Logstore name>?slsRegion=<Project region>&hideTopbar=true&hideSidebar=true&ignoreTabLocalStorage=true&sls_ticket=eyJ***************.eyJ******************.KUT****************

6. To switch Logstores, you can reuse the generated ticket in the same browser by appending it to the URL.

   Note

   You do not need to call the operation again in the same browser. Different users (in different browsers) still need to call CreateTicket again. A ticket can be accessed only by one browser or host.

Procedure

1. Create a RAM user named sls-user as the sharer. Create a RAM user.

2. Grant the AliyunSTSAssumeRoleAccess permission to the RAM user sls-user to call the STS AssumeRole operation. Grant permissions to a RAM user.

3. Create a RAM role named sls-role. Create a RAM role for a trusted Alibaba Cloud account.

4. Grant the RAM role sls-role permissions on specific resources (projects) and permission to call the CreateTicket operation.

   1. Create a permission policy named Allow-AccessProject to access specific resources (projects). The permission is the union of all user permissions (Create a custom policy). In this case, read-only access to Project-A and Project-B is required. The following code shows the policy:

      Note

      Replace <Your Project Name A> and <Your Project Name B> with your actual project names.

      {
         "Version": "1",
         "Statement": [
           {
             "Action": [
               "log:Get*",
               "log:List*"
             ],
             "Resource": [
               "acs:log:*:*:project/<Your Project Name A>/*",
               "acs:log:*:*:project/<Your Project Name A>",
               "acs:log:*:*:project/<Your Project Name B>/*",
               "acs:log:*:*:project/<Your Project Name B>"
             ],
             "Effect": "Allow"
           }
         ]
      }

   2. Grant the Allow-AccessProject permission to the RAM role sls-role. Grant permissions to a RAM role.

   3. Create a permission policy named Allow-CreateTicket to call the CreateTicket operation. Create a custom policy.

      {
          "Version": "1",
          "Statement": [
              {
                  "Effect": "Allow",
                  "Action": "log:CreateTicket",
                  "Resource": "acs:log:*:*:ticket/*"
              }
          ]
      }

   4. Grant the Allow-CreateTicket permission to the RAM role sls-role. Grant permissions to a RAM role.

5. Set the maximum session duration for the RAM role. The default is 1 hour. The validity period of the embedded page will be less than this time.

   

6. When a user enters the embedded page, use the RAM user sls-user to assume the RAM role sls-role and call the AssumeRole operation. You must set the following four parameters.

   Field Name	Description
   RoleArn	The Alibaba Cloud Resource Name (ARN) of the RAM role to assume. Copy this from the RAM role.
   RoleSessionName	The name of the role session. This can be any string, such as a user ID or name, to distinguish different users for auditing.
   DurationSeconds	The validity period of the token. The minimum is 900 seconds, and the maximum is the maximum session duration of the RAM role. The default is 3,600 seconds.
   Policy	An additional permission policy for the STS token. If you specify this policy, the final permission policy of the STS token is the intersection of the RAM role's permission policy and this policy. If you do not specify this policy, the final permission policy of the STS token is the RAM role's permission policy.

   When calling, set a different policy for each user. This adds an additional permission policy for the STS token. The final permission policy of the STS token is the intersection of the RAM role's permission policy and this policy. For example, when User A enters the embedded page, set RoleSessionName to UserA and the policy to:

   {
      "Version": "1",
      "Statement": [
        {
          "Action": [
            "log:Get*",
            "log:List*"
          ],
          "Resource": [
            "acs:log:*:*:project/<Your Project Name A>/*",
            "acs:log:*:*:project/<Your Project Name A>"
          ],
          "Effect": "Allow"
        },
        {
           "Effect": "Allow",
           "Action": "log:CreateTicket",
           "Resource": "acs:log:*:*:ticket/*"
       }
      ]
   }

   When User B enters the embedded page, set RoleSessionName to UserB and the policy to:

   {
      "Version": "1",
      "Statement": [
        {
          "Action": [
            "log:Get*",
            "log:List*"
          ],
          "Resource": [
            "acs:log:*:*:project/<Your Project Name B>/*",
            "acs:log:*:*:project/<Your Project Name B>"
          ],
          "Effect": "Allow"
        },
        {
           "Effect": "Allow",
           "Action": "log:CreateTicket",
           "Resource": "acs:log:*:*:ticket/*"
       }
      ]
   }

   After obtaining the temporary STS credentials (SecurityToken, AccessKeySecret, and AccessKeyId), use this STS to call CreateTicket to obtain a ticket. The following example uses Java:

   package com.aliyun.sls20201230;
   
   import com.aliyun.sls20201230.models.CreateTicketRequest;
   import com.aliyun.sls20201230.models.CreateTicketResponse;
   import com.aliyun.sls20201230.models.CreateTicketResponseBody;
   import com.aliyun.sts20150401.models.AssumeRoleResponse;
   import com.aliyun.sts20150401.models.AssumeRoleResponseBody;
   import com.aliyun.tea.TeaException;
   import com.aliyun.teaopenapi.models.Config;
   
   import java.util.List;
   
   public class StsSample {
       public static void main(String[] args_) throws Exception {
           List<String> args = java.util.Arrays.asList(args_);
           String roleArn = "xxxx";
           String roleSession = "UserA";
           String policy = "{\n" +
                   "   \"Version\": \"1\",\n" +
                   "   \"Statement\": [\n" +
                   "     {\n" +
                   "       \"Action\": [\n" +
                   "         \"log:Get*\",\n" +
                   "         \"log:List*\"\n" +
                   "       ],\n" +
                   "       \"Resource\": [\n" +
                   "         \"acs:log:*:*:project/<Your Project Name A>/*\",\n" +
                   "         \"acs:log:*:*:project/<Your Project Name A>\"\n" +
                   "       ],\n" +
                   "       \"Effect\": \"Allow\"\n" +
                   "     },\n" +
                   "     {\n" +
                   "        \"Effect\": \"Allow\",\n" +
                   "        \"Action\": \"log:CreateTicket\",\n" +
                   "        \"Resource\": \"acs:log:*:*:ticket/*\"\n" +
                   "    }\n" +
                   "   ]\n" +
                   "}";
           Client client = StsSample.createClient(roleArn, roleSession, policy);
           try {
               CreateTicketRequest createTicketRequest = new CreateTicketRequest();
               CreateTicketResponse response = client.createTicket(createTicketRequest);
               CreateTicketResponseBody embedded = response.getBody();
               System.out.println(embedded.getTicket());
   
           } catch (TeaException e) {
               e.printStackTrace();
           }
       }
   
       public static Client createClient(String roleArn, String roleSession, String policy) throws Exception {
           com.aliyun.sts20150401.Client client = createStsClient();
           com.aliyun.sts20150401.models.AssumeRoleRequest assumeRoleRequest = new com.aliyun.sts20150401.models.AssumeRoleRequest();
           assumeRoleRequest.setRoleArn(roleArn);
           assumeRoleRequest.setRoleSessionName(roleSession);
           assumeRoleRequest.setDurationSeconds(3600L);
           assumeRoleRequest.setPolicy(policy);
           com.aliyun.teautil.models.RuntimeOptions runtime = new com.aliyun.teautil.models.RuntimeOptions();
           AssumeRoleResponse assumeRoleResponse = client.assumeRoleWithOptions(assumeRoleRequest, runtime);
           AssumeRoleResponseBody.AssumeRoleResponseBodyCredentials credentials = assumeRoleResponse.getBody().getCredentials();
   
           Config config = new Config()
                   .setAccessKeyId(credentials.getAccessKeyId())
                   .setAccessKeySecret(credentials.getAccessKeySecret())
                   .setSecurityToken(credentials.getSecurityToken())
                   // For more information about endpoints, see https://api.aliyun.com/product/Sls.
                   .setEndpoint("cn-shanghai.log.aliyuncs.com");
           return new Client(config);
       }
   
       public static com.aliyun.sts20150401.Client createStsClient() throws Exception {
           String accessKeyId = "xxx";
           String accessKeySecret = "xxx";
           com.aliyun.teaopenapi.models.Config config = new com.aliyun.teaopenapi.models.Config()
                   .setAccessKeyId(accessKeyId)
                   .setAccessKeySecret(accessKeySecret);
           // For more information about endpoints, see https://api.aliyun.com/product/Sts.
           config.endpoint = "sts.cn-shanghai.aliyuncs.com";
           return new com.aliyun.sts20150401.Client(config);
       }
   }
   

7. Append the obtained ticket to the query page URL. You can also hide the sidebar and top bar, and disable tab history (hideTopbar=true&hideSidebar=true&ignoreTabLocalStorage=true). Configure parameters for embedding console pages.

   https://sls.console.aliyun.com/lognext/project/<Project name>/logsearch/<Logstore name>?slsRegion=<Project region>&hideTopbar=true&hideSidebar=true&ignoreTabLocalStorage=true&sls_ticket=eyJ***************.eyJ******************.KUT****************