Merge pull request #212 from threefoldtech/main_signing-data

Main signing data

README.md

@@ -63,3 +63,12 @@ try {
     // something went wrong 
 }
 ```
+
+For deploying, please build the docker locally and push to dockerhub with the following command in the root folder:
+
+``` docker build -f example/Dockerfile .  -t threefoldjimber/login-example:latest ```
+
+After that, push the docker to the Hub and pull on the right server
+
+
+

example/src/router/index.ts

@@ -1,23 +1,30 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import {createRouter, createWebHistory, RouteRecordRaw} from 'vue-router';
 import Home from '../views/Home.vue';
 
 const routes: Array<RouteRecordRaw> = [
-    {
-        path: '/',
-        name: 'Home',
-        component: Home,
-    },
-    {
-        path: '/callback',
-        name: 'Callback',
-        component: () =>
-            import(/* webpackChunkName: "about" */ '../views/Callback.vue'),
-    },
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+  {
+    path: '/callback',
+    name: 'Callback',
+    component: () =>
+      import(/* webpackChunkName: "about" */ '../views/Callback.vue'),
+  },
+  {
+    path: '/callbackSign',
+    name: 'CallbackSign',
+    component: () =>
+      import(/* webpackChunkName: "about" */ '../views/CallbackSign.vue'),
+  },
+
 ];
 
 const router = createRouter({
-    history: createWebHistory(process.env.BASE_URL),
-    routes,
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
 });
 
 export default router;

example/src/views/Callback.vue

@@ -51,6 +51,7 @@ export default defineComponent({
       window.opener.postMessage({message: 'threefoldLoginRedirectSuccess', profileData: profileData});
       console.log(profileData)
     } catch (e) {
+      console.log('This is the error')
       console.error("Error", e)
     }
   }

example/src/views/CallbackSign.vue

@@ -0,0 +1,74 @@
+<template>
+
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {ThreefoldLogin} from "@threefoldjimber/threefold_login/dist";
+import {environment, ProductionConfig, StagingConfig} from "@/config/config";
+import {Configurations} from "@/enums";
+import router from "@/router";
+
+export default defineComponent({
+   async setup () {
+     console.log(router.currentRoute.value.query)
+
+     console.log(router.currentRoute.value.query['error'])
+     if (router.currentRoute.value.query['error']) {
+       window.opener.postMessage({message: 'threefoldSignCancel'});
+       return;
+     }
+
+     let login: ThreefoldLogin;
+
+     switch (environment.value) {
+       case Configurations.STAGING:
+         login = new ThreefoldLogin(StagingConfig.threefoldBackend,
+           StagingConfig.appId,
+           StagingConfig.seedPhrase,
+           '/callbackSign',
+           StagingConfig.kycBackend);
+
+         break;
+
+       case Configurations.PRODUCTION:
+         login = new ThreefoldLogin(ProductionConfig.threefoldBackend,
+           ProductionConfig.appId,
+           ProductionConfig.seedPhrase,
+           '/callbackSign',
+           ProductionConfig.kycBackend);
+
+         break;
+
+       default:
+         login = new ThreefoldLogin(ProductionConfig.threefoldBackend,
+           ProductionConfig.appId,
+           ProductionConfig.seedPhrase,
+           '/callbackSign',
+           ProductionConfig.kycBackend);
+     }
+
+     await login.init();
+
+     const state = window.localStorage.getItem("state") as string
+     const redirectUrl = new URL(window.location.href)
+
+     try {
+       console.log('Trying this')
+       const profileData = await login.parseAndValidateRedirectUrlForSigning(redirectUrl, state);
+       console.log('THIS IS THE PROFILE DATA');
+       console.log(profileData)
+       window.opener.postMessage({message: 'threefoldSignRedirectSuccess', profileData: profileData});
+
+     } catch (e) {
+       console.log('This is the error')
+       console.error("Error", e)
+     }
+   }
+
+})
+</script>
+
+<style scoped>
+
+</style>

example/src/views/Home.vue

@@ -12,7 +12,63 @@
     </div>
 
 
-    <h2>Threefold login example, please choose a type of login</h2>
+    <h2>THREEFOLD SIGN DATA</h2>
+    <br>
+    <br>
+
+    <div class="flex-container">
+      <div></div>
+      <div></div>
+      <div style="width: 30%; text-align: center"><span
+        style="font-size: 18px; font-weight: 600; width: 30%; text-align: center">Is JSON</span></div>
+    </div>
+
+    <div class="flex-container">
+      <div style="width: 30%; text-align: center">URL</div>
+      <input style="padding: 5px;  width: 30%; text-align: center" @keyup.enter="" v-model="signDataValue">
+      <div style="width: 30%; text-align: center"><input style="text-align: center" type="checkbox" v-model="isJsonUrl">
+      </div>
+    </div>
+    <br>
+    <div class="flex-container">
+      <div style="width: 30%; text-align: center">Friendly name</div>
+      <input style="padding: 5px;  width: 30%; text-align: center" @keyup.enter="" v-model="friendlyNameDataValue">
+      <div style="width: 30%; text-align: center"></div>
+    </div>
+    <br>
+    <br>
+    <h3>Data object</h3>
+    <span>{"dataUrl" : "{{ signDataValue }}", "isJson": "{{
+        isJsonUrl
+      }}", "friendlyName" : "{{ friendlyNameDataValue }}"}</span>
+    <br>
+    <br>
+    <input class="button" type="submit" @click="signDataFromUrl(signDataValue)" value="Send request">
+    <br>
+    <br>
+    <div>
+      <h3>SIGNED DATA</h3>
+      <pre>{{ signedData }}</pre>
+    </div>
+
+    <br>
+
+    <div>
+      <h4>Is valid hash</h4>
+      <div v-if="isValidHash === true">
+        <span style="color: green">Hash has been validated</span>
+      </div>
+      <div v-else-if="isValidHash === false">
+        <span style="color: red">Hash mismatch</span>
+      </div>
+      <div v-else>
+        Unknown
+      </div>
+    </div>
+    <hr>
+    <br>
+
+    <h2>THREEFOLD LOGIN</h2>
     <br>
 
     <div style="text-align: left; width: 50%; margin: auto">
@@ -42,8 +98,10 @@
       <div></div>
       <div></div>
     </div>
-
     <br>
+    <hr>
+    <br>
+
     <div>
       <h3>Scope object</h3>
       {{ dictScopes }}
@@ -98,6 +156,9 @@ import {environment, ProductionConfig, StagingConfig,} from '@/config/config';
 import type {Scope} from "@/types/home";
 import {Configurations} from "@/enums";
 import {defineComponent, ref, watch} from "vue";
+import {stringify} from "ts-jest/dist/utils/json";
+import {hashData} from "../../../src/utils/crypto";
+import axios from "axios";
 
 const profile = ref({});
 const signedEmailIdentifier = ref({});
@@ -107,11 +168,18 @@ const signedIdentityGenderIdentifier = ref({});
 const signedIdentityCountryIdentifier = ref({});
 const signedIdentityDocumentMetaIdentifier = ref({});
 const signedIdentityDOBIdentifier = ref({});
+const signedData = ref<any>({});
+const isJsonUrl = ref<boolean>(false)
 
 const dictScopes = ref<any>({})
 const scopeName = ref<string>('');
 const selectedAllValue = ref<boolean>(false);
 
+const signDataValue = ref<string>('');
+const friendlyNameDataValue = ref<string>('');
+
+const isValidHash = ref<boolean>();
+
 const items = ref([
   {
     "value": "doubleName",
@@ -205,6 +273,88 @@ const addToScope = () => {
   dictScopes.value[scopeName.value] = false
 }
 
+const signDataFromUrl = async (dataUrl: string) => {
+  let login: ThreefoldLogin;
+
+  switch (environment.value) {
+    case Configurations.STAGING:
+      login = new ThreefoldLogin(StagingConfig.threefoldBackend,
+        StagingConfig.appId,
+        StagingConfig.seedPhrase,
+        'callbackSign',
+        StagingConfig.kycBackend)
+
+      break;
+
+    case Configurations.PRODUCTION:
+      login = new ThreefoldLogin(ProductionConfig.threefoldBackend,
+        ProductionConfig.appId,
+        ProductionConfig.seedPhrase,
+        'callbackSign',
+        ProductionConfig.kycBackend)
+
+      break;
+
+    default:
+      login = new ThreefoldLogin(ProductionConfig.threefoldBackend,
+        ProductionConfig.appId,
+        ProductionConfig.seedPhrase,
+        'callbackSign',
+        ProductionConfig.kycBackend)
+
+      break;
+  }
+
+  const state = generateRandomString();
+  console.log('This is the state')
+  console.log(state)
+  window.localStorage.setItem("state", state)
+
+  const hashedUrl: string = hashData(signDataValue.value);
+
+  const urlContent: string = await getContentFromUrl(dataUrl);
+
+  if (!urlContent) {
+    console.error('Enter valid url')
+    return;
+  }
+
+  const hashedContent = hashData(urlContent.toString());
+  const signUrl = login.generateSignUrl(state, hashedContent, signDataValue.value, isJsonUrl.value, friendlyNameDataValue.value, login.redirectUrl)
+
+  const popup = popupCenter(signUrl, 'Threefold login', 800, 550);
+
+  window.onmessage = async (e: MessageEvent) => {
+    console.log(e.data.message)
+    if (e.data.message == 'threefoldSignRedirectSuccess') {
+      const signedDataMessage = e.data.profileData?.profile?.signedData
+      if (signedDataMessage) {
+        console.log("signedData. ", signedDataMessage)
+        signedData.value = e.data.profileData?.profile
+
+        isValidHash.value = !!(signedData.value['hashedData'] && signedData.value['hashedData'].toString() === hashedUrl);
+      }
+
+      popup?.close();
+    }
+
+    if (e.data.message == 'threefoldSignCancel') {
+      popup?.close();
+    }
+  };
+}
+
+
+const getContentFromUrl = async (url: string): Promise<any> => {
+  try {
+    const res = await axios.get(url)
+    return res.data
+  } catch (e) {
+    return null;
+  }
+}
+
+
 const loginWithCustomScope = async (scope: Record<string, boolean>) => {
   let login: ThreefoldLogin;
 
@@ -328,11 +478,17 @@ export default defineComponent({
       scopeName,
       selectedAllValue,
       environment,
+      signDataValue,
+      isJsonUrl,
+      signedData,
+      friendlyNameDataValue,
       Configurations,
+      isValidHash,
       addToScope,
       loginWithCustomScope,
       toggleScope,
       toggleMandatory,
+      signDataFromUrl,
 
     }
   }