跳到主要内容

前端页面内嵌

一、概述​

本文档旨在帮助开发者快速掌握ngraphx前端页面内嵌到第三方系统的整合步骤。通过以下步骤，您可以将ngraphx的前端界面无缝集成到您的系统中，实现资源共享与权限认证。

二、整合步骤​

第一步：开启权限认证​

  1. 打开ngraphx项目的配置文件config.json。
  2. 找到并修改以下配置项：
"auth": false

将其改为：

"auth": true

第二步：配置Token在localStorage中存储的Key名​

  1. 打开ngraphx前端静态资源的index.html文件。
  2. 在<head>标签内添加以下代码：
<script>
  window.ngxTokenLocalStorageKeyName = "your-local-storage-token-key-name";
</script>
注意

your-local-storage-token-key-name需要替换为您在本地存储中使用的token Key名称。添加此代码后，ngraphx前端页面将自动从localStorage中获取token，并在每个请求中携带。

第三步：实现权限认证​

  1. 进入ngraphx项目的plugins目录。
  2. 打开auth.py文件，找到CustomJwtAuth类。
  3. 在do_jwt方法中实现将token传递给宿主系统进行权限认证的逻辑。 示例代码如下：
class CustomJwtAuth(IJwtAuth):
    def do_jwt(self, token: str) -> Response:
        if not token:
            return Response(content="Unauthorized", status_code=401)
        res = post_with_jwt(auth_url, token)
        # status code 200 or 201 is OK.
        return Response(status_code=res.status_code, content=res.reason)

第四步：开启跨域资源共享（CORS）​

  1. 在config.json文件中找到cors配置项。
  2. 将enable设置为true以开启CORS。
"cors": {
  "enable": true,
  "origins": [
    "http://example.com",
    "https://subdomain.example.com"
  ]
}

在origins数组中，移除星号*，并添加允许跨域访问的IP地址或域名白名单。请确保替换为您的实际域名或IP地址。

注意

ngraphx的静态资源必须与您的静态资源放置在一起，且置于ngx/static/目录下，因为ngraphx的访问根目录为ngx/static/。