被否决

这一构成部分已贬值。 代码基础已移动到 api 请求 模块.

AMF 授权应用程序中创建和管理授权状态的自定义元素 .

在应用AMF模式和操作安全计划后,要素决定 何方法渲染, 列出可能的方法, 管理状态 当用户 更改任何值,并为UI提供验证方法.

如果授权方法运行在信头或查询参数上,则此组件 发送相应的更改事件,以便其他组件可以更新 sate.

OAuth 1或OAuth 2等更复杂的授权计划首先需要获得 访问标志。 一旦获得令牌,验证状态将更新并相应 使用交付方法(标题或查询参数).

这一要素支持RAML和美洲组织的安全说明.

• 任务 2
• 带有注释的 OAuth 2 (参见 RAML 的文件(中文(简体) )
• 授权 1
• RAML 自定义方案
• 通过
• Api 密钥( 美洲组织)
• 比尔(美洲组织)

注:文摘授权方法当时不支持. 如果你对这种方法感兴趣 请告诉我们 这一构成部分充分支持美洲组织的所有安全计划.

使用量

该部分延伸 @advanced-rest-client/authorization 软件包以添加 API 模型支持。 基本组成部分是基本授权方法. 该元素需要将 AML 的 JSON+LD 模型应用到 amf 财产和计划定义 security 属性.

安装

npm install --save @api-components/api-authorization

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@api-components/api-authorization/api-authorization.js';
    </script>
  </head>
  <body>
    <api-authorization-method redirectUri="..."></api-authorization-method>
    <script>
    (async () => {
      const model = await getAmfModel();
      const security = getSecurity(model, '/endpoint', 'get');
      const element = document.querySelector('api-authorization');
      element.amf = model;
      element.security = security;
      element.onchange = (e) => {
        if (e.target.validate()) {
          const authList = e.target.serialize();
          console.log(authList);
        }
      };
    })();
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@api-components/api-authorization/api-authorization.js';

class SampleElement extends LitElement {
  static get properties() {
    return {
      amfModel: { type: Array },
      endpoint: { type: String },
      method: { type: String },
    };
  }

  get security() {
    const { amfModel, endpoint, method } = this;
    return this.readSecurityFor(amfModel, endpoint, method);
  }

  readSecurityFor(amf, endpoint, method) {
    // implement me
  }

  _authChanged(e) {
    if (e.target.validate()) {
      const authList = e.target.serialize();
      console.log(authList);
    }
  }

  render() {
    const { amfModel, security } = this;
    return html`
    <api-authorization
      .amf="${amfModel}"
      .security="${security}"
      @change={this._authChanged}
    ></api-authorization-method>`;
  }
}
customElements.define('sample-element', SampleElement);

应用AMF模型

第一步是将生成的AMF模型传递给 amf 属性。 需要妥善解决内部模型的依赖性,并在 JSON+LD 紧凑模型。 。 。 .

第二步是对一项行动提取正确的安全定义. 添加到一个 http://a.ml/vocabularies/apiContract#supportedOperation 对象。 它应当是由操作方法所支持的一连串.

应用这些值的示例脚本可以看起来像以下的.

<api-authorization-method type="OAuth 2" id="auth"></api-authorization-method>
<script>
(async () => {
  const model = await getAmfModelSomehow();
  const security = readSecurityFor(model, '/endpoint', 'GET');
  const method = document.getElementById('auth');
  method.amf = model;
  method.security = security;
})();
</script>

这个 getAmfModelSomehow() 函数可以直接从RAML或OAS规格下载预生成的模型或运行AMF parser. 接下来 readSecurityFor() 函数在 /endpoint 结束点, 内 GET 方法. 准备好后,这些值将应用于元素.

设置顺序 amf 财务报告和审定财务报表 security 参数并不重要,因为数据处理会同步启动.

关于清除的说明 settings 属性。 当 undefined 或任何不兼容值设置为 settings 属性, 组件不创建和设置 aria-hidden 属性.

授权设置

API可以定义一种以上适用于请求的授权方法. 这在美洲国家组织定义的API中是可能的,RAML没有这样的概念. 因为.. settings 获取器(或 serialize() 函数)返回一系列应用的授权设置.

每个对象都有 type 财务报告和审定财务报表 valid 属性。 这个 type 由 @api-components/api-authorization-method 数值 type 属性。 这个 valid 属性是验证为授权方法提供UI的元素的结果. 此外,每个对象包含 settings 从 API 读取包含用户输入值和配置的属性。 此对象的属性取决于所选的授权方法, 它是调用的结果 serialize() 函数 api-authorization-method。 。 。 .

应用授权设置

组件不向信头或查询参数传播更改. 应在执行请求之前这样做。 为了那个电话 createAuthParams() 生成适用于请求对象的参数列表的方法.

sendRequest() {
  const authCmp = this.shadowRoot.querySelector('api-authorization');
  const auth = authCmp.createAuthParams();
  const request = {
    method: 'GET',
    url: 'https://api.domain.com/path?',
    headers: '',
  };
  Object.keys(auth.headers).forEach((header) => request.headers += `${header}: ${auth.headers[header]}\n`);
  Object.keys(auth.params).forEach((param) => request.url += `${param}=${auth.params[param]}&`);
}

其他步骤

文摘,NTLM

文摘和NTLM授权方法与请求相互作用,使得在初始化连接之前无法对请求应用设置. 它需要在同一连接上管理的一系列请求和答复。 由于这两种方法,组件只产生授权设置。 主机应用程序必须始终检查当前授权设置,如果使用了这两种方法,则在连接时执行授权.

授权 1

OAuth 1的授权基于签署请求数据:HTTP方法和URL. 在授权成立后,这种情况可能会改变. 因此,作为该元素主机的应用程序必须在请求上加注如下: 此文档启用 settings 获取当前设置 .

这个 @advanced-rest-client/authorization 组件有: signRequest(request, auth) 用于签名 OAuth 1 协议请求的方法.

示例

const settings = node.serialize();
const oauth1 = settings.find((item) => item.type === 'oauth 1');
if (oauth1 && oauth1.valid) {
  const oauth1auth = document.querySelector('oauth1-authorization');
  oauth1auth.signRequest(request, oauth1.settings);
}

发展

git clone https://github.com/advanced-rest-client/api-authorization
cd api-authorization
npm install

本地运行演示

npm start

运行测试

npm test