can-pass-js

It is a sdk for can-pass which facilitates 3rd party 's developers experience when they are working with can-pass api.

Loading the SDK

Using script below to load the SDK.

<script src="../lib/can-pass-api.js"></script>

After the SDK has loaded, it will call the init function, so you should define that function to init the SDK.

(function () {
  const canPass = window.CanPass && window.CanPass.getInstance();

  if (canPass) {
    canPass.init({
      clientId: "leonardo",

      version: "1.0",
    });

    canPass.loginButton();
  }
})();

Replace {client-id} with your client ID and {api-version} with the API version to use. The latest version is 'v1.0'

Remember, you have to init the SDK before using any CanPass SDK methods.

The full script for embedding to your HTML

<script src="../lib/can-pass-api.js"></script>

<script>
  (function () {
    const canPass = window.CanPass && window.CanPass.getInstance();

    if (canPass) {
      canPass.init({
        clientId: "{client-id}",

        version: "{api-version}",
      });

      // Start to use CanPass SDK from here.
    }
  })();
</script>

Import via yarn or npm

Run yarn add can-pass-js from terminal.

import CanPass from "can-pass-js";

CanPass.init({
  clientId: "{client-id}",

  version: "{api-version}",
});

// Start to use CanPass SDK from here.

Login Button

Place this code wherever you want the plugin to appear login button on your page.

<button
  class="can-pass-login-button"
  data-redirect-uri="https://app.com/login-success"
  data-state="1a2b3c"
  data-domain="https://test.cryptobadge.app"
  data-text="Sign in with Cryptobadge"
></button>

Reference

Init SDK

CanPass.init(options);

Parameters

options is an object to configure the SDK.

| Field | Type | Description | | --------- | ----------------- | ---------------------------------------------------------------------------- | | clientId | string (required) | The clientId generated by CanPass Admin Console | | version | string | The version of API | | store | string | The store which will be used to save data. Supported: localStore, memory | | endPoint | string | The endpoint to request transaction information | | signTxURL | string | Sign transaction place |

Sign a transaction

CanPass.signTx(tx, callback)

After call that, it will open a new window to operate signing transaction. Input secret code to sign transaction (Browser required)

Parameters

| Name | Type | Description | | -------- | --------------------- | ------------------------------------------------------- | | tx | object | The body of transaction. For example: { actions: [] } | | callback | (error, tx) => void | The callback function when sign transaction. |

Set credential manually

CanPass.setCredentials(credentials)

The 3rd party can set credential manually if they use external login flow.

options is an object contains tokens.

| Field | Type | Description | | ----------- | ------ | --------------- | | accessToken | string | The accessToken |

Example

• Login with Cryptobadge button

Development

Environment Variables

| Variable | Description | | ----------------------------- | -------------------------------- | | CAN_PASS_SIGN_TRANSACTION_URL | The signing transaction URL | | CAN_KEYS_ENDPOINT | The graphQL endpoint of Can Keys | | LOGIN_BUTTON_CLASS_NAME | Name of login button class | | CB_WEB | Login with CryptoBadge URL |

• To build run yarn build

• To test run yarn test

• To dev run yarn watch