Angular

O componente Angular possui as mesmas funções da API Javascript mas existem opções diferentes para integração em seu sistema.

npm i sdk-consent-ng-privacytools

Passo 1 - Importe a biblioteca 'sdk-consent-ng-privacytools' no seu package.json ou npm

"sdk-consent-ng-privacytools": "0.0.1^"

A biblioteca possui uma coletânea de componentes que podem ser utilizados de diferentes maneiras em sua página.

Componente	Finalidade
ApiRegisterConsent	API de simples utilização para registro de consentimentos
ApiRegisterMultipleConsent	API de simples utilização para registro de múltiplos consentimentos
ApiGetAllConsents	API de simples utilização para obter todos os consentimentos de um usuário
ApiGetSingleConsent	API de simples utilização para verificar um consentimento específico de um usuário
RegisterUserConsentWrapper	Wrapper para registro de consentimentos com retorno com fragment
GetUserConsentWrapper	Wrapper para obter todos ou apenas um consentimento do usuário com fragment
ConsentWrapper	Wrapper para obter em um fragment o JSON para você construir sua própria popup de consentimento
ConsentPopUp	Wrapper que executa em react uma popup pronta para coleta do consentimento

Passo 2 - Importe o componente desejado em sua página

import { NgSdkConsentService } from 'sdk-consent-ng-privacytools';

Registrando um consentimento

Para registrar um consentimento você precisa gerar um identificador único do seu usuário conforme orientação da variável hashUser. Envie também o parâmetro 'consent' (booleano) com o aceite (true) ou rejeição(false) do usuário.

Como o registro é assíncrono e entra em uma fila de consumidor/processador pode levar entre 30 segundos a 70 segundos para o consentimento poder ser consultado.

  registerConsent() {
    this.consentService
      .ApiRegisterConsent(
        this.base,
        this.hashUser,
        this.hashTemplate,
        this.publicKey,
        this.consent
      )
      .pipe(map((data) => data.toString()))
      .subscribe(
        (data) => {
          alert(JSON.stringify(data));
        },
        (error) => {
          alert(JSON.stringify(error));
        }
      );
  }

Exemplo completo

No exemplo abaixo você pode copiar e colar comandos de todos os serviços disponíveis. Conte com os anexos ainda.

import { Component } from '@angular/core';
import { NgSdkConsentService } from 'sdk-consent-ng-privacytools';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title: string;
  base: string;
  hashUser: string;
  hashTemplate: string;
  hashTemplate1: string;
  hashTemplate2: string;
  publicKey: string;
  consent: boolean;
  consent1: boolean;
  consent2: boolean;
  consentResonse: any;
  showPopup: boolean;
  showWrapper: boolean;
  wrapperContent: any;

  constructor(private consentService: NgSdkConsentService) {
    this.title = 'sdk-consent-ng-privacytools-example';
    this.base = 'https://$SEU HOST/public_api/consent';
    this.hashUser = '$userHash';
    this.hashTemplate =
      '$hashTemplate';
    this.hashTemplate1 =
      '$hashTemplate2';
    this.hashTemplate2 =
      '$hashTemplate3';
    this.publicKey =
      '$publicKey';
    this.consent = false;
    this.consent1 = false;
    this.consent2 = false;
    this.showWrapper = false;
  }

  registerConsent() {
    this.consentService
      .ApiRegisterConsent(
        this.base,
        this.hashUser,
        this.hashTemplate,
        this.publicKey,
        this.consent
      )
      .pipe(map((data) => data.toString()))
      .subscribe(
        (data) => {
          alert(JSON.stringify(data));
        },
        (error) => {
          alert(JSON.stringify(error));
        }
      );
  }

  registerMultipleConsents() {
    this.consentService
      .ApiRegisterMultipleConsent(
        this.base,
        this.hashUser,
        [this.hashTemplate1, this.hashTemplate2],
        this.publicKey,
        [this.consent1, this.consent2]
      )
      //.pipe(map((data) => data))
      .subscribe(
        (data) => {
          alert(JSON.stringify(data));
        },
        (error) => {
          alert(JSON.stringify(error));
        }
      );
  }

  getAllConsents() {
    this.consentService
      .ApiGetAllConsents(this.base, this.hashUser, this.publicKey)
      //.pipe(map((data) => data))
      .subscribe(
        (data) => {
          alert(JSON.stringify(data));
        },
        (error) => {
          alert(JSON.stringify(error));
        }
      );
  }

  getSingleConsent() {
    this.consentService
      .ApiGetSingleConsent(
        this.base,
        this.hashUser,
        this.hashTemplate,
        this.publicKey
      )
      .subscribe(
        (data) => {
          alert(JSON.stringify(data));
        },
        (error) => {
          alert(JSON.stringify(error));
        }
      );
  }

  toggleWrapper() {
    this.showWrapper = !this.showWrapper;
    this.wrapperContent = JSON.stringify(
      {
        loading: true,
        error: null,
        data: null,
      },
      null,
      2
    );
    if (this.showWrapper) {
      this.consentService
        .loadPrivacyJson(`${this.base}/request/${this.hashTemplate}`)
        .subscribe(
          (data) => {
            this.wrapperContent = JSON.stringify(
              {
                loading: false,
                error: null,
                data: data,
              },
              null,
              2
            );
          },
          (error) => {
            this.wrapperContent = JSON.stringify(
              {
                loading: false,
                error: error,
                data: null,
              },
              null,
              2
            );
          }
        );
    }
  }

  togglePopup() {
    this.showPopup = !this.showPopup; 
  }
}

Para fazer o download de um projeto completo em Angular, baixe o arquivo abaixo.