Installing the verification widget

Installing the verification widget is a simple process that quickly enables secure peer-to-peer transactions among your users. Follow the next steps to install it:

1. Include Traity API's JavaScript file

Usually at the top or at the bottom of your HTML file, along with other JavaScript files such as analytics, add a link to Traity API:

<script src='//api.traity.com/1.0/api.js'></script>

2. Include widget's code

First of all, your application needs to include a signature on the widget.

The signature is generated server-side using your application secret. Therefore, your application is the only one able to sign it (as long as you keep the application secret secret, as it should be).

This is the code to generate the signature:

require 'jwt'
def widget_signature(key, secret, current_user_id, options = {})
  payload = {
    time: Time.now.to_i,
    current_user_id: current_user_id,
  }.merge(options)

  signature = {key: key, payload: JWT.encode(payload, secret, 'HS256')}

  JWT.encode(signature, nil, false)
end
use \Firebase\JWT\JWT;
function widget_signature($app_key, $app_secret, $current_user_id,
                          $options = array()) {
  $payload = array_merge(array(
    'time' => time(),
    'current_user_id' => $current_user_id), $options);

  $signature = array(
    'key' => $app_key,
    'payload' => JWT::encode($payload, $app_secret));

  return JWT::encode($signature, '');
}
import time
import jwt
def widget_signature(key, secret, current_user_id, options={}):
  payload   = {
    'time': int(time.time()),
    'current_user_id': current_user_id
  }.copy()
  payload.update(options)

  signature = {
    'key': key,
    'payload': jwt.encode(payload, secret, algorithm='HS256')
  }

  return jwt.encode(signature, '')
public static string WidgetSignature(string key, string secret,
        string currentUserId) {
    int time = (int)(DateTime.UtcNow - new DateTime(1970, 1, 1)).
        TotalSeconds;
    string payload = currentUserId + "-" + time + "-" + secret;
    string signature = currentUserId + "-" + time + "-" + key + "-" + 
        GetSHA256Hash(payload);
    return signature;
}
public static string GetSHA256Hash(string input) {
    SHA256Managed crypt = new SHA256Managed();
    string hash = String.Empty;
    byte[] crypto = crypt.ComputeHash(Encoding.UTF8.GetBytes(input), 0,
        Encoding.UTF8.GetByteCount(input));
    foreach (byte bit in crypto) {
        hash += bit.ToString("x2");
    }
    return hash;
}

To use this signature function, pass your application's key, your application's secret, and the current user id, i.e. the logged-in user's id (as used internally by your app).

The signature is generated in the JWT standard format. Please, refer to http://jwt.io/ to download the library for your programming language of choice.

In case the user has already verified certain services inside your platform and don't want to make her verify them again inside the widget, you can just pass the list inside the options parameter:

signature = widget_signature(APP_KEY, APP_SECRET, CURRENT_USER_ID,
                             verified: [:phone, :email])
$options   = array('verified' => array('phone', 'email'));
$signature = widget_signature($APP_KEY, $APP_SECRET, $CURRENT_USER_ID,
                            $options);
options   = { 'verified': ['phone', 'email'] }
signature = widget_signature(key, secret, current_user_id, options))
//This option is not currently available for C#

Important The available preverified services are 'email', 'phone' and 'passport'.

3. Insert the widget in your website

Select the widget you would like to embed in your website:

<div data-traity-widget='reputation'
     data-traity-widget-version='3'
     data-traity-app-user-id='USER_ID'
     data-traity-current-user-name='CURRENT_USER_NAME'
     data-traity-current-user-email='CURRENT_USER_EMAIL'
     data-traity-signature='<%= widget_signature(APP_KEY, APP_SECRET, CURRENT_USER_ID) %>'>
</div>
<div data-traity-widget='reputation'
     data-traity-widget-version='3'
     data-traity-app-user-id='USER_ID'
     data-traity-current-user-name='CURRENT_USER_NAME'
     data-traity-current-user-email='CURRENT_USER_EMAIL'
     data-traity-signature=
'<?php echo widget_signature(APP_KEY, APP_SECRET, CURRENT_USER_ID); ?>'>
</div>
<!-- django template:
     ws = widget_signature(APP_KEY, APP_SECRET, CURRENT_USER_ID)
     context = {'user_id': USER_ID, 'widget_signature': ws,
 'current_user_name': CURRENT_USER_NAME,
 'current_user_email': CURRENT_USER_EMAIL} -->
<div data-traity-widget='reputation'
     data-traity-widget-version='3'
     data-traity-app-user-id='{{user_id}}'
     data-traity-current-user-name='{{current_user_name}}'
     data-traity-current-user-email='{{current_user_email}}'
     data-traity-signature='{{widget_signature}}'>
</div>
<div data-traity-widget='reputation'
     data-traity-widget-version='3'
     data-traity-app-user-id='USER_ID'
     data-traity-current-user-name='CURRENT_USER_NAME'
     data-traity-current-user-email='CURRENT_USER_EMAIL'
     data-traity-signature='<% =WidgetSignature(APP_KEY, APP_SECRET,
        CURRENT_USER_ID) %>'>
</div>

Where every field is from your app:

  • USER_ID: the visited user's id (required)
  • CURRENT_USER_NAME: the visitor user's name (only needed if the user is seeing its own profile)
  • CURRENT_USER_EMAIL: the visitor user's email (only needed if the user is seeing its own profile)
  • CURRENT_USER_ID: the visitor user's id (required but can be null or empty when an user it's anonymous)

The verification widget should now be embedded into your users' profiles.