npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

trusona-trucode

v1.1.0

Published

Library for rendering TruCodes used for identifying Trusona enabled devices

Downloads

211

Readme

Web SDK - TruCode

A JavaScript library for rendering TruCodes used for identifying Trusona enabled devices.

Requirements

The Trusona Web SDK is supported by the following browsers:

  • Internet Explorer 10 or higher
  • Microsoft Edge (latest version)
  • Google Chrome (latest version)
  • Firefox (latest version)
  • Safari (latest version)

Installation

From the Trusona CDN

Include the trucode.js script tag before the </body> of your document

  <!-- existing content -->
  <script type="text/javascript"src="https://static.trusona.net/web-sdk/js/trucode-1.1.0.js"></script>
  </body>
</html>

As an NPM package

npm install --save trusona-trucode

Import it with:

const Trusona = require('trusona-trucode')

Usage

Given this HTML:

  <div id="tru-code">
  </div>

And this Javascript on the same page:

  var handlePaired = function(truCodeId) {
    // The truCodeId that was scanned by a Trusona enabled device. Send this to your backend so they can figure out the deviceIdentifier.
  };

  var handleError = function() {
    // If an error occurred fetching the TruCode and/or it could not be rendered.
  };

  Trusona.renderTruCode({
    truCodeConfig: {
      truCodeUrl: 'https://api.trusona.net',
      relyingPartyId: '<YOUR_RELYING_PARTY_ID>',
      qr: {}
    },
    truCodeElement: document.getElementById('tru-code'),
    onPaired: handlePaired,
    onError: handleError
  });

Then an SVG representation of a QR Code will be drawn using default colors and animated using the default animation parameters.

Options

| Name | Required | Default | Description | | :-------------------- | :------: | :----------: | :-------------------------------------------------------------------------------------------------------------------------------------------- | | truCodeConfig | Y | null | The configuration for the fetching and rendering of TruCodes. Is provided by the Server SDK. | | truCodeUrl | Y | null | The Trusona API URL where to fetch TruCodes from. | | relyingPartyId | Y | null | The Trusona issued relying party ID that has been assigned to your company. | | qr | N | see below | The configuration for rendering TruCodes (colors, width, animations, etc). | | truCodeElement | Y | null | The DOM element to contain the rendered TruCodes. | | onPaired | Y | null | The callback function to call when a TruCode has been scanned. It will be passed a string parameter containing the TruCodeId that was paired. | | onError | Y | false | The callback function to call if an error occurred fetching or rendering TruCodes. |

QR Options

An optional parameter allows for customization of the SVG drawing.

  • Shape Colors
  • Dot Color
  • Container Width
  • Animation Configuration

Shape Colors

An array of HEX color codes can be used to specify the colors to be used when drawing the SVG.

Default:

  ["#000"]

Custom:

  var qrConfig = {shapeColors: ["#0f0", "#f00", "#00f"]};

  Trusona.renderTruCode({
    truCodeConfig: {
      truCodeUrl: 'https://api.trusona.net',
      relyingPartyId: '<YOUR_RELYING_PARTY_ID>',
      qr: qrConfig
    },
    truCodeElement: document.getElementById('tru-code'),
    onPaired: handlePaired,
    onError: handleError
  });

Dot Color

A single HEX color code can be used to specify the color of any individual dots drawn in the SVG.

Default:

"#000"

Custom:

  var qrConfig = {dotColor: "#0f0"};

  Trusona.renderTruCode({
    truCodeConfig: {
      truCodeUrl: 'https://api.trusona.net',
      relyingPartyId: '<YOUR_RELYING_PARTY_ID>',
      qr: qrConfig
    },
    truCodeElement: document.getElementById('tru-code'),
    onPaired: handlePaired,
    onError: handleError
  });

Rendering Arbitrary Payloads

You can use this SDK to also render QR codes with your own provided payloads instead of the TruCode payload that is automatically fetched. For example, if you use our guide for Passwordless Authentication without an app.

Given the same HTML from above:

  <div id="tru-code">
  </div>

And this JavaScript on the page

Trusona.drawTruCode(document.getElementById('tru-code'), 'your-own-payload')

Then an SVG of a QR code with 'your-own-payload' as the content will be drawn using default colors and animated using the default animation parameters. You can also provide the QR options detailed above to customize the look of the drawn QR.

  var qrConfig = {shapeColors: ["#0f0", "#f00", "#00f"]};

  Trusona.drawTruCode(document.getElementById('tru-code'), 'your-own-payload', qrConfig);