UPCP
Start typing to search…

Vue Sample

This simple app only creates an anonymous consent and prints the anonymous Id.

📘

Note on BearerToken

The SDK is a wrapper around the API. This means it requires the same oAuth2 bearerToken, just like the REST API.

oAuth2 is explained here.

📘

Required Knowledge

To run this example, you'll only need to have a basic knowledge of NodeJS. Don't worry if you don't know Vue because the sample is simple.

It only has one Vue page.

For this sample to work, all you need to know is that the files shown below must be in the src folder with the package.json and tsconfig.json in the root folder.

Cloning the code rather than copying the documentation will ensure everything is in its proper place.

📘

A Note on TypeScript

The SDK is written in TypeScript. TypeScript is just an extension of JavaScript that adds classes, constructors, etc. You do not need to know TypeScript, because JavaScript can use TypeScript objects. You only need to import the SDK, like this:

import { WireWheelSDK, CreateConsentPayloadBuilder, Subject } from '@wirewheelio/cmp-javascript-sdk'

Sample Code Files and Folders

The key files include:

  • package.son
  • tsconfig.json
  • src/main.ts
  • index.html
  • src/App.vue

Run the Sample

Clone the sample code from XXX. Then:

  1. Generate an oAuth2 bearer token as explained here. Then paste it into the file src/App.vue where it shows token below.

  2. Run the code using: npm run dev . That will start the code and open a browser. After you start it, when you change the code you do not need to rerun npm as the page will automatically reload.

package.json

The following is package.json.

📘

A Note on SDK Version

You will probably need to change the version number of @wirewheelio/cmp-javascript-sdk to match the latest one here on npm.

{
  "name": "wirewheel-sdk-vue-example",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --port 8008",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@wirewheelio/cmp-javascript-sdk": "^0.4.1",
    "vue": "^3.2.37",
    "vue-router": "^4.0.16"
  },
  "devDependencies": {
    "@types/node": "^16.11.41",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "typescript": "~4.7.4",
    "vite": "^2.9.12",
    "vue-tsc": "^0.38.9"
  }
}

tsconfig.json

The following are the TypeScript options.

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

src/main.ts

This instantiates the App.vue page. In most cases App.vue is the starting point for Vue applications.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')

Index.html

This page loads main.ts to load the Vue page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue sample App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

src/App.vue

This instantiates Wirewheel with the bearerToken generated by the Identity Provider.

CreateConsentPayloadBuilder.newFor() creates a new consent for this anonymous subject.

👍

Scopes

Scopes means API permissions. When you instantiate WireWheelSDK.createClient you request these permissions. If they have been assigned to your userId in Wirewheel you will be granted access to the related APIs.

export enum Scopes {
  ConsentWrite = 'consent-insert-api',
  ConsentRead = 'consent-get-api',
  SubjectProfileManage = 'subject-profile-manage',
}
<script lang="ts">
 
import {  defineComponent, onMounted, ref } from "vue";
import { WireWheelSDK,  Scopes } from '@wirewheelio/cmp-javascript-sdk'
 
const scopes = [Scopes.ConsentWrite, Scopes.ConsentRead, Scopes.SubjectProfileManage];

export default defineComponent({
    async setup() {
       var accessToken= ref([]);
       onMounted(async() => {
        const res = await WireWheelSDK.getToken(
        {
        issuer : "xxxx",
        clientId: "xxxxx",
        clientSecret: "xxxx"
      },
      scopes
      )
        accessToken = res;
      });
      
      return {
            accessToken
        };
    }
})

</script>


<template>
    <div>
      {{ accessToken }}
    </div>
</template>

The screen responds with the anonymousId.

Didn’t find what you were looking for?

Email our team: [email protected]?subject=UPCP

Updated 19 days ago