npm:@advanced-rest-client/authorization-panel

README

<authorization-panel>

Accessible forms to provide authorization data for various authorization methods.

The forms used in the panel are coming from auth-methods element.

Version compatibility

This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.

Usage

Installation

npm install --save @advanced-rest-client/authorization-panel

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/authorization-panel/authorization-panel.js';
    </script>
  </head>
  <body>
    <authorization-panel></authorization-panel>
    <script>
    {
      document.querySelector('authorization-panel').addEventListener('authorization-settings-changed', (e) => {
        console.log('current settings', e.detail);
      });
    }
    </script>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/authorization-panel/authorization-panel.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <authorization-panel
      @authorization-settings-changed="${this._handleModel}"
      @request-header-deleted="${this._headerDeleted}"
      @request-header-changed="${this._headerChanged}"></authorization-panel>
    `;
  }

  _handleModel(e) {
    this.authData = e.detail.value;
  }

  _headerDeleted(e) {
    const { name } = e.detail;
    this.httpHeaders = ``;
  }

  _headerChanged(e) {
    const { name, value } = e.detail;
    this.httpHeaders = `${name}: ${value}`;
  }
}
customElements.define('sample-element', SampleElement);

AMF model

The element works with AMF model which describes both RAML and OAS API specs into a common data model.

First step is to set amf property on the element which is the AMF model for the API. Second step is to lookup security scheme definition for an operation (HTTP method). It has to be an array of all security schemes defined for the endpoint / method. Pass it to securedBy property of the element. The element automatically updates the UI to only render methods supported by the endpoint or method. Authorization panels updates their state when selected and use pre-defined data to fill up the forms.

const amfModel = await generateApiModel();
const method = computeMethodModel(amfModel, 'some id of selected method');
const securityArray = getSecurityList(method);
panel.amf = amfModel;
panel.securedBy = securityArray;

Breaking Changes in v3

Use the scripts below to include dependencies into the web page.

OAuth 1

<script src="node_modules/cryptojslib/components/core.js"></script>
<script src="node_modules/cryptojslib/rollups/sha1.js"></script>
<script src="node_modules/cryptojslib/components/enc-base64-min.js"></script>
<script src="node_modules/cryptojslib/rollups/md5.js"></script>
<script src="node_modules/cryptojslib/rollups/hmac-sha1.js"></script>
<script src="node_modules/jsrsasign/lib/jsrsasign-rsa-min.js"></script>

Digest

<script src="node_modules/cryptojslib/rollups/md5.js"></script>

The required modules are installed with this element. You can skip it if you won't use OAuth1 or Digest methods.

Development

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

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem

@advanced-rest-client/authorization-paneldeprecated

Usage no npm install needed!