Skip to content
This repository was archived by the owner on Apr 11, 2023. It is now read-only.

Commit 10f3d55

Browse files
rolsonquadrasrolsonquadras
committed
feat: GNAP integration
Signed-off-by: Anton Biriukov <anton.biriukov@avast.com> Signed-off-by: talwinder50 <talwinder.kaur@avast.com> Signed-off-by: Andrii Holovko <andriy.holovko@gmail.com> Signed-off-by: Filip Burlacu filip.burlacu@securekey.com Signed-off-by: Rolson Quadras <rolson.quadras@securekey.com>
1 parent 695c043 commit 10f3d55

File tree

23 files changed

+669
-818
lines changed

23 files changed

+669
-818
lines changed

‎cmd/wallet-web/src/App.vue

+9-25
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,26 @@
55
-->
66

77
<script setup>
8-
import { computed, onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
8+
import { onBeforeMount, onMounted, onUnmounted, ref } from 'vue';
99
import { useStore } from 'vuex';
1010
import getStartingLocale from '@/mixins/i18n/getStartingLocale.js';
1111
import { updateI18nLocale } from '@/plugins/i18n';
1212
import SpinnerIcon from '@/components/icons/SpinnerIcon.vue';
1313

14-
const store = useStore();
14+
// Local Variables
15+
const startingLocale = getStartingLocale(); // Get starting locale, set it in i18n and in the store
1516
const loaded = ref(false);
16-
const isAgentInitialized = computed(() => store.getters['agent/isInitialized']);
17-
const initAgent = () => store.dispatch('agent/init');
18-
const initOpts = () => store.dispatch('initOpts');
19-
const loadUser = () => store.dispatch('loadUser');
2017

21-
// Get starting locale, set it in i18n and in the store
22-
const startingLocale = getStartingLocale();
18+
// Hooks
19+
const store = useStore();
20+
2321
store.dispatch('setLocale', startingLocale);
2422

2523
onBeforeMount(async () => {
2624
await updateI18nLocale(startingLocale.id);
2725
});
2826

29-
onMounted(async () => {
30-
try {
31-
// load opts
32-
await initOpts();
33-
34-
// load user if already logged in
35-
loadUser();
36-
37-
// load agent if user already logged in and agent not initialized (scenario: page refresh)
38-
if (store.getters.getCurrentUser && !isAgentInitialized.value) {
39-
await initAgent();
40-
}
41-
} catch (e) {
42-
console.log('Could not initialize Vue App:', e);
43-
}
27+
onMounted(() => {
4428
loaded.value = true;
4529
});
4630

@@ -52,8 +36,8 @@ onUnmounted(() => {
5236
});
5337
</script>
5438
<template>
55-
<div class="w-screen h-screen font-sans bg-neutrals-mischka">
56-
<div v-if="!loaded" class="flex relative top-1/3 flex-col justify-start items-center">
39+
<div class="h-screen w-screen bg-neutrals-mischka font-sans">
40+
<div v-if="!loaded" class="relative top-1/3 flex flex-col items-center justify-start">
5741
<SpinnerIcon />
5842
<span class="mt-6">Loading Wallet . . .</span>
5943
</div>

‎cmd/wallet-web/src/components/Signout/SignoutComponent.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,9 @@ async function signout() {
3333
}
3434

3535
await Promise.all(actions);
36+
console.log('signed out. Redirecting to base url');
3637

37-
router.push({ name: 'signin' });
38+
router.push({ path: '/', query: { signedOut: true } });
3839
}
3940

4041
const chapi = ref(
@@ -44,11 +45,11 @@ const chapi = ref(
4445

4546
<template>
4647
<div
47-
class="flex flex-row justify-start items-center focus-within:bg-gradient-to-r hover:bg-gradient-to-r focus-within:from-neutrals-black hover:from-neutrals-black focus-within:shadow-inner-outline-blue opacity-60 focus-within:opacity-100 hover:opacity-100 bar"
48+
class="bar flex flex-row items-center justify-start opacity-60 focus-within:bg-gradient-to-r focus-within:from-neutrals-black focus-within:opacity-100 focus-within:shadow-inner-outline-blue hover:bg-gradient-to-r hover:from-neutrals-black hover:opacity-100"
4849
>
4950
<button
5051
id="signout-button"
51-
class="flex flex-row justify-start items-center px-10 w-full h-16 focus:outline-none"
52+
class="flex h-16 w-full flex-row items-center justify-start px-10 focus:outline-none"
5253
type="button"
5354
@click="signout()"
5455
@keyup.enter="signout()"

‎cmd/wallet-web/src/mixins/common/register.js

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export class RegisterWallet {
9999
async _createDefaultVault(profile) {
100100
let { user, token } = profile;
101101
let name = 'Default Vault';
102+
console.log('_createDefaultVault this.agent', this.agent);
102103
let collectionManager = new CollectionManager({ agent: this.agent, user });
103104
let vaultID = await collectionManager.create(token, { name });
104105
if (vaultID) {

‎cmd/wallet-web/src/mixins/gnap/gnap.js

+56
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ SPDX-License-Identifier: Apache-2.0
55
*/
66

77
import { GNAPClient } from '@trustbloc/wallet-sdk';
8+
import { getGnapKeyPair } from '@/mixins';
89

910
export async function gnapRequestAccess(
1011
signer,
@@ -45,3 +46,58 @@ export async function gnapContinue(signer, gnapAuthServerURL, interactRef, acces
4546
const resp = await gnapClient.continue(gnapContinueReq, accessToken);
4647
return resp;
4748
}
49+
50+
export async function initiateGnapAuth(store, router) {
51+
const gnapAccessTokens = await store.getters['getGnapAccessTokenConfig'];
52+
const gnapAuthServerURL = store.getters.hubAuthURL;
53+
const walletWebUrl = store.getters.walletWebUrl;
54+
const gnapKeyPair = await getGnapKeyPair();
55+
console.log('gnapKeyPair', gnapKeyPair);
56+
const signer = { SignatureVal: gnapKeyPair };
57+
console.log('signer', signer.SignatureVal);
58+
const clientNonceVal = (Math.random() + 1).toString(36).substring(7);
59+
60+
console.log(
61+
'requestAccess with:',
62+
JSON.stringify(
63+
{
64+
...signer,
65+
gnapAccessTokens,
66+
gnapAuthServerURL,
67+
walletWebUrl,
68+
clientNonceVal,
69+
},
70+
null,
71+
2
72+
)
73+
);
74+
75+
const resp = await gnapRequestAccess(
76+
signer,
77+
gnapAccessTokens,
78+
gnapAuthServerURL,
79+
walletWebUrl,
80+
clientNonceVal
81+
);
82+
console.log('resp', resp);
83+
// If user have already signed in then just redirect
84+
if (resp.data.access_token) {
85+
const accessToken = resp.data.access_token[0].value;
86+
const subjectId = resp.data.subject.sub_ids[0].id;
87+
console.log('111 new accessToken', accessToken);
88+
console.log('111 new subjectId', subjectId);
89+
store.dispatch('updateSessionToken', accessToken);
90+
store.dispatch('updateSubjectId', subjectId);
91+
router.push({ name: 'DashboardLayout' });
92+
return;
93+
}
94+
const respMetaData = {
95+
uri: resp.data.continue.uri,
96+
continue_access_token: resp.data.continue.access_token,
97+
finish: resp.data.interact.finish,
98+
clientNonceVal: clientNonceVal,
99+
};
100+
await store.dispatch('updateGnapReqAccessResp', respMetaData);
101+
console.log('redirect to:', resp.data.interact.redirect);
102+
return resp.data.interact.redirect;
103+
}

‎cmd/wallet-web/src/mixins/gnap/store.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const storekey = 'gnap';
1010

1111
export async function getGnapKeyPair() {
1212
const gnapKeyPair = await fetchStoredGnapKeyPair();
13+
console.log('fetched gnapKeyPair', gnapKeyPair);
1314
if (gnapKeyPair === undefined) {
1415
return createAndStoreGnapKeyPair();
1516
}

‎cmd/wallet-web/src/pages/VaultsPage.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ onMounted(async () => {
139139
<template>
140140
<div>
141141
<WelcomeBannerComponent
142-
v-if="!currentUser.preference.skipWelcomeMsg && !skippedLocally && !loading"
142+
v-if="!currentUser?.preference?.skipWelcomeMsg && !skippedLocally && !loading"
143143
id="welcome-banner-close-button"
144144
class="md:mb-10"
145145
@click="updateUserPreferences"

‎cmd/wallet-web/src/router/TheRoot.vue

+52
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,55 @@
1+
<!--
2+
* Copyright SecureKey Technologies Inc. All Rights Reserved.
3+
*
4+
* SPDX-License-Identifier: Apache-2.0
5+
-->
6+
7+
<script setup>
8+
import { computed, inject, onMounted, ref } from 'vue';
9+
import { useRoute } from 'vue-router';
10+
import { useStore } from 'vuex';
11+
import { CHAPIHandler } from '@/mixins';
12+
import useBreakpoints from '@/plugins/breakpoints.js';
13+
14+
// Local Variables
15+
const disableCHAPI = ref(false);
16+
const loaded = ref(false);
17+
18+
// Hooks
19+
const route = useRoute();
20+
const store = useStore();
21+
const breakpoints = useBreakpoints();
22+
const polyfill = inject('polyfill');
23+
const webCredentialHandler = inject('webCredentialHandler');
24+
25+
// Store Getters
26+
const currentUser = computed(() => store.getters['getCurrentUser']);
27+
const agentOpts = computed(() => store.getters['getAgentOpts']);
28+
29+
// Store Actions
30+
const activateCHAPI = () => store.dispatch('activateCHAPI');
31+
32+
onMounted(async () => {
33+
// if intended target doesn't require CHAPI.
34+
disableCHAPI.value = route.params.disableCHAPI || false;
35+
console.log('disableCHAPI', disableCHAPI.value);
36+
try {
37+
if (!breakpoints.xs && !breakpoints.sm && !disableCHAPI.value) {
38+
console.log('initializing CHAPI');
39+
const chapi = new CHAPIHandler(
40+
polyfill,
41+
webCredentialHandler,
42+
agentOpts.value.credentialMediatorURL
43+
);
44+
await chapi.install(currentUser.value.username);
45+
activateCHAPI();
46+
}
47+
} catch (e) {
48+
console.log('Could not initialize Vue App:', e);
49+
}
50+
loaded.value = true;
51+
});
52+
</script>
153
<template>
254
<router-view />
355
</template>

0 commit comments

Comments
 (0)