Hive Authentication Client (HAC)

in HiveDevs5 months ago

hive_auth_client_hac.jpg

As I got some free time lately I decided to use it for the HIVE community either in publishing open source tools for application developers on HIVE or for personal & professional projects on HIVE.

After the HIVE Nodes Checker it's time to introduce the Hive Authentication Client (HAC)

Hive Authentication Client (HAC)

Hive Authentication Client (HAC) is a password-less users authentication, sign and broadcast transactions for the HIVE Blockchain through the Hive Authentication Services (HAS) or the Hive Keychain Browser Extension (KBE).

Authentications and transactions are performed by the wallet supporting the HAS protocol or the Hive Keychain Browser Extension without communicating the private key, which thus remains secure. The results of each operation are sent by subscription (RxJS).

Hive Authentication Client (HAC) manages previous connections as well through encrypted data in the localStorage.

In order to save time on the learning curve of the HIVE blockchain, some operations exist in short versions too (e.g. hacFollowing, hacTransfer, hacDelegation...).

Big thank to @arcange who is the originator of the Hive Authentication Services (HAS) and to @stoodkev for his work to make the HIVE Keychain wallet compatible with the HAS protocol 👍

Hive Authentication Services (HAS)

Manage the WebSocket connection to the HAS and all communication with it. Support reconnection to another HAS WebSocket server in case of failure.

HAS documentation: https://docs.hiveauth.com/

Hive Keychain Browser Extension (KBE)

Manage the communication with the Hive Keychain Browser Extension if present

KBE documentation: https://github.com/stoodkev/hive-keychain

Github & NPM

Like the Hive Authentication Services (HAS) this package remains in BETA!

screenshot_2022_01_20_031705.jpg

Use case example (extremely basic)

I propose to show you how the Hive Authentication Client (HAC) works through a short Angular app example, which will be more meaningful.

Our application will allow us to connect to the HIVE blockchain via HAS or KBE and to proceed to some transactions like Upvote for witness and Follow/Unfollow.

For a more complete example, you can go there :
https://github.com/Mintrawa/hac-tutorial

Angular example

Initialize

create a new angular project

$  ng new hac-tutorial

choose yes for routing option and, CSS or SCSS.

Install the dependencies we will need for this tutorial

~/hac-tutorial$  npm i --save ng-qrcode @mintrawa/hive-auth-client

Edit

open the project directory with your favorite editor

angular.json

Due to the usage of CommonJS dependencies, we need to add a section allowedCommonJsDependencies in our angular.json file after "scripts": [],.

"allowedCommonJsDependencies": [
   "@mintrawa/hive-auth-client",
   "qrcode"
]

app.module.ts

For the tutorial, we will need to show a QRcode, to do this we will use the ng-qrcode package

Open the app.module.ts and add the import line import { QrCodeModule } from 'ng-qrcode'; and in the import array add QrCodeModule,

app.component.ts

In this example, we will do everything from the app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';

/** Hive Authentication Client (HAC) */
import {
  HiveAuthClient,
  hacMsg,
  hacUserAuth,
  hacFollowing,
  hacWitnessVote,
} from '@mintrawa/hive-auth-client';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  loader = false;
  voteWitnessLoader = false;
  voteWitnessButton = false;
  followLoader = false;
  followButton = false;
  qrHAS: string | undefined;
  username?: string;
  connected?: string;
  pwd = '520c5c9b-bd58-4253-850a-1fa591a2dabd';

  connect(username: string): void {
    this.loader = true;
    this.username = username;
    hacUserAuth(username, { name: 'HACtutorial' }, this.pwd, {
      key_type: 'active',
      value: 'MyCha11en6e',
    });
  }

  voteWitness(witness: string, approve: boolean): void {
    this.voteWitnessLoader = true;
    this.followButton = true;
    hacWitnessVote(witness, approve);
  }

  follow(account: string, follow: boolean): void {
    this.followLoader = true;
    this.voteWitnessButton = true;
    hacFollowing(account, follow);
  }

  ngOnInit(): void {
    /** Initialize the HIVE auth client */
    HiveAuthClient();

    hacMsg.subscribe((m) => {
      console.log(m);

      /** Received auth_wait => generate the qrCode */
      if (m.type === 'qr_code') {
        /** QRcode data */
        this.qrHAS = (m as any).msg;
      }

      /** Received authentication msg */
      if (m.type === 'authentication') {
        if (!m.error) {
          this.connected = m.msg?.data?.chalenge.slice(0, 12) + '...';
        } else {
          this.loader = false;
          this.qrHAS = null;
          window.alert(`${m.error.msg}`);
        }
      }

      /** Received sign_result */
      if (m.type === 'tx_result') {
        this.voteWitnessLoader
          ? (this.voteWitnessLoader = false)
          : (this.followLoader = false);
        this.voteWitnessButton
          ? (this.voteWitnessButton = false)
          : (this.followButton = false);
        window.alert(`${m.msg?.status} | ${m.msg?.uuid ? m.msg?.uuid : ''}`);
      }
    });
  }

  ngOnDestroy(): void {
    hacMsg.unsubscribe();
  }
}

app.component.scss

a little touch of style

.flex-container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: stretch;
  align-items: center;
  height: 100vh;
}

.encart {
  border: 2px solid red;
  padding: 20px;
  border-radius: 25px;
}

.loader {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid red;
  width: 16px;
  height: 16px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.operations {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: stretch;
  align-items: flex-start;
  height: 100vh;
  padding: 12px;
}
.item {
  width: 250px;
  height: 80px;
}

app.component.html

Time to do our HTML.

<div class="flex-container">
  (html comment removed:  Login )
  <div class="encart" *ngIf="!connected && !qrHAS">
    <div>HIVE Username</div>
    <div style="height:6px;"></div>
    <input #username type="text" />
    <div style="height:6px;"></div>
    <button (click)="connect(username.value)" *ngIf="!loader">
      HAS Connect
    </button>
  </div>
  (html comment removed:  QRcode )
  <div class="encart" *ngIf="!connected && qrHAS">
    <div>{{ username }}</div>
    <qr-code
      [value]="'has://auth_req/' + qrHAS"
      [size]="192"
      [errorCorrectionLevel]="'M'"
    ></qr-code>
    <div *ngIf="loader" class="loader"></div>
  </div>
  (html comment removed:  Connected => OPERATIONS )
  <div *ngIf="connected" class="operations">
    (html comment removed:  VOTE WITNESS )
    <div class="encart item">
      <div>VOTE WITNESS</div>
      <div style="height:6px;"></div>
      <div>
        <div>witness: <input #witness type="text" value="mintrawa" /></div>
        <div style="height: 6px;"></div>
        <div *ngIf="!voteWitnessLoader">
          <button
            [disabled]="voteWitnessButton"
            (click)="voteWitness(witness.value, true)"
          >
            APPROVE</button
          >&nbsp;
          <button
            [disabled]="voteWitnessButton"
            (click)="voteWitness(witness.value, false)"
          >
            DISAPPROVE
          </button>
        </div>
        <div class="loader" *ngIf="voteWitnessLoader"></div>
      </div>
    </div>
    <div style="height:12px;"></div>
    (html comment removed:  FOLLOWING )
    <div class="encart item">
      <div>FOLLOWING</div>
      <div style="height:6px;"></div>
      <div>
        <div><input #following type="text" value="mintrawa" /></div>
        <div style="height: 6px;"></div>
        <div *ngIf="!followLoader">
          <button
            [disabled]="followButton"
            (click)="follow(following.value, true)"
          >
            FOLLOW</button
          >&nbsp;
          <button
            [disabled]="followButton"
            (click)="follow(following.value, false)"
          >
            UNFOLLOW
          </button>
        </div>
        <div class="loader" *ngIf="followLoader"></div>
      </div>
    </div>
  </div>
</div>

This short example is also available on Stackblitz
https://stackblitz.com/edit/angular-ivy-ew73hs

hac-tutorial

A more complete example is available on Github here:
https://github.com/Mintrawa/hac-tutorial

  • Mode debug
  • Fallback on the first HAS server
  • Management previous connections
  • Choice between HAS or Keychain
  • 1 page for the sign in and 1 for the operations
  • 8 operations in easy mode
    • follow/unfollow
    • vote/downvote
    • approve/disapprove Witness
    • transfer
    • transferToVesting
    • withdrawVesting
    • delegation
    • convert (HBD=>HIVE / HIVE=>HBD)
  • 1 manual operation (claim discount account)

Original photo by olieman.eth on Unsplash


My HIVE witness servers

PRINCIPAL
BACKUP/SEED
CPU:Intel Xeon E3-1270v6CPU: Intel Xeon E3-1230v6
4 Cores/8 Threads 3.5 GHz/3.9 GHz4 Cores/8 Threads 3.8 GHz/4.2 GHz
RAM: 32GB DDR4 ECC 2133MHzRAM: 32GB DDR4 ECC 2133MHz
HDD: 1 To SSD NVMeHDD: 1 To SSD NVMe


Vote for my HIVE witness: click here (via HiveSigner)

Sort:  

@cryptocharmers in case you need it for an upcoming project

Congratulations @mintrawa! Your post has been a top performer on the Hive blockchain and you have been rewarded with the following badge:

Post with the highest payout of the week.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Hive Power Up Month - Feedback from day 22

Excellent and a nice walk through the code too and shout outs to stoodkev and arcange 👍

Thanks a lot for your comment

Congratulations @mintrawa! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You distributed more than 15000 upvotes.
Your next target is to reach 16000 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Check out the last post from @hivebuzz:

Hive Power Up Month - Feedback from day 18


The rewards earned on this comment will go directly to the person sharing the post on Twitter as long as they are registered with @poshtoken. Sign up at https://hiveposh.com.

Keep it up bro :)

HAC-K Nice!

Hahaha thanks 👍

Thanks for the information.

You're welcome

Way above my brain's natural position but, surely, it does give an angle to think about or have fueled light in some of the boxes in my brain.

Thanks for your comment 👍

lookin good...

Thank you

@mintrawa I think the HAC was created to simply so many process requirements when interacting with the HIVE community.. but considering the fact that it's passwordless, what are the level of security check out in place to avoid scammer bridging.?
Considering the fact I have not experiment the usability. Hoping to learn more about how it works in your next post..

The advantage of passwordless is that the validation is done directly from the wallet supporting the HAS protocol. Thus, the keys are never communicated, preventing the application used to retrieve them ant to being leaked after that.

Moreover, the initialization is done by scanning a QRcode from the wallet (or in the case of an application on a smartphone a direct communication with the wallet) allowing to create the future encrypted exchange between application and wallet. The system thus prevents any man-in-the-middle attack since only the application and the wallet can encode and decode the messages they send each other.

Amazing very secure I see.... Still research on a personal note

What is the difference between HAC and Hive signer?

In HiveSigner, you have to give your private keys, which means that your private keys are stored in a database on the HiveSigner server (which makes them vulnerable to being hacked or leaked). With the HAS protocol or Keychain browser extension, it's your device that performs the transaction with the HIVE blockchain, which means that your private keys never leave your device and will never be shared with an application.

Next time post in English for the rest of us, please.

Please I request for a contribution to help me get started on my webdev journey.
Thanks for your time❤

Outstanding, and a great walkthrough too.

Thank you for this information wish you all the best

Thank you for your support