From ee902c639b3d3d968d32df181e697b38d858b890 Mon Sep 17 00:00:00 2001 From: AuroraHuang22 Date: Wed, 11 Sep 2024 13:13:00 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Retrieve=20JWT=20token=20during=20wall?= =?UTF-8?q?et=20connection?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AppHeader.vue | 30 ++++++++++++++++++--- layouts/wallet.vue | 57 +++++++++++++++++++++++++++++----------- pages/auth/redirect.vue | 19 ++++++++++++++ 3 files changed, 87 insertions(+), 19 deletions(-) diff --git a/components/AppHeader.vue b/components/AppHeader.vue index f3bb2d5c..ab89d082 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -157,6 +157,7 @@ import logTrackerEvent, { setLoggerUser } from '~/utils/logger' import { IS_TESTNET } from '~/constant' const walletModule = namespace('wallet') +const bookApiModule = namespace('book-api') @Component export default class AppHeader extends Vue { @@ -164,7 +165,13 @@ export default class AppHeader extends Vue { @walletModule.Action('disconnectWallet') disconnectWallet!: () => void @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string, fullPath?: string }) => Promise @walletModule.Action('initWallet') initWallet!: (params: { method: any, accounts: any, offlineSigner?: any }) => Promise + @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise @walletModule.Getter('getWalletAddress') currentAddress!: string + @walletModule.Getter('getSigner') signer!: any + @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise + @bookApiModule.Action('clearSession') clearSession!: () => void + + isLoading = false // eslint-disable-next-line class-methods-use-this get isTestnet() { @@ -184,11 +191,13 @@ export default class AppHeader extends Vue { } async handleConnectWalletButtonClick() { + this.isLoading = true const connection = await this.openConnectWalletModal({ language: this.$i18n.locale.split('-')[0], fullPath: this.$route.fullPath, }) - if (connection) { + try { + if (connection) { const { method, accounts } = connection logTrackerEvent( this, @@ -201,9 +210,24 @@ export default class AppHeader extends Vue { wallet: accounts[0].address, method, }) - return this.initWallet(connection) + await this.initWallet(connection) + if (!this.currentAddress || !this.signer) return + const signature = await this.signMessageMemo('authorize', [ + 'read:nftbook', + 'write:nftbook', + 'read:nftcollection', + 'write:nftcollection', + ]) + if (!signature) { return } + await this.authenticate({inputWallet:this.currentAddress, signature}) + } + } catch (error) { + this.disconnectWallet() + this.clearSession() + // eslint-disable-next-line no-console + console.error('handleConnectWalletButtonClick error', error) } - return false + this.isLoading = false } } diff --git a/layouts/wallet.vue b/layouts/wallet.vue index dffef6be..4cb42cf5 100644 --- a/layouts/wallet.vue +++ b/layouts/wallet.vue @@ -23,9 +23,14 @@ const bookApiModule = namespace('book-api') @Component export default class WalletLayout extends Vue { @walletModule.Getter('getWalletAddress') walletAddress!: string + @walletModule.Action('disconnectWallet') disconnectWallet!: () => void @walletModule.Action('openConnectWalletModal') openConnectWalletModal!: (params: { language: string, fullPath?: string }) => Promise @walletModule.Action('initWallet') initWallet!: (params: { method: any, accounts: any, offlineSigner?: any }) => Promise + @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise + @walletModule.Getter('getSigner') signer!: any @bookApiModule.Action('restoreSession') restoreSession!: () => void + @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise + @bookApiModule.Action('clearSession') clearSession!: () => void @walletModule.Action toggleAlert!: ( isShow: boolean, @@ -45,24 +50,44 @@ export default class WalletLayout extends Vue { fullPath: this.$route.fullPath, }) // Re-login - if (connection) { - const { method, accounts } = connection - logTrackerEvent( - this, - 'user', - `connected_wallet_${method}`, - 'connected_wallet', - 1, - ) - setLoggerUser(this, { - wallet: accounts[0].address, - method, - }) - return this.initWallet(connection) + try { + if (connection) { + const { method, accounts } = connection + logTrackerEvent( + this, + 'user', + `connected_wallet_${method}`, + 'connected_wallet', + 1, + ) + setLoggerUser(this, { + wallet: accounts[0].address, + method, + }) + await this.initWallet(connection) + if (!this.walletAddress || !this.signer) return + const signature = await this.signMessageMemo('authorize', [ + 'read:nftbook', + 'write:nftbook', + 'read:nftcollection', + 'write:nftcollection', + ]) + if (!signature) { + return + } + await this.authenticate({ + inputWallet: this.walletAddress, + signature, + }) + } + this.$router.go(-1) + } catch (error) { + this.disconnectWallet() + this.clearSession() + // eslint-disable-next-line no-console + console.error('handleConnectWalletButtonClick error', error) } - return this.$router.go(-1) } - return true } @Watch('walletAddress') diff --git a/pages/auth/redirect.vue b/pages/auth/redirect.vue index 81d32155..3092d7b1 100644 --- a/pages/auth/redirect.vue +++ b/pages/auth/redirect.vue @@ -13,11 +13,19 @@ import { namespace } from 'vuex-class' import logTrackerEvent, { setLoggerUser } from '~/utils/logger' const walletModule = namespace('wallet') +const bookApiModule = namespace('book-api') @Component export default class RedirectPage extends Vue { @walletModule.Action('initWallet') initWallet!: (params: { method: any; accounts: any; offlineSigner?: any }) => Promise + @walletModule.Action('disconnectWallet') disconnectWallet!: () => void @walletModule.Action('handleConnectorRedirect') handleConnectorRedirect!: (params: { method: string; params: any }) => Promise + @walletModule.Action('signMessageMemo') signMessageMemo!: (action: string, permissions?: string[]) => Promise + @walletModule.Getter('getSigner') signer!: any + @walletModule.Getter('getWalletAddress') currentAddress!: string + + @bookApiModule.Action('authenticate') authenticate!: ({inputWallet = '', signature = {}}: {inputWallet?: string, signature?: any}) => Promise + @bookApiModule.Action('clearSession') clearSession!: () => void async mounted() { const { error, method, code } = this.$route.query; @@ -41,6 +49,15 @@ export default class RedirectPage extends Vue { method: method as string, }) await this.initWallet(connection) + if (!this.currentAddress || !this.signer) return + const signature = await this.signMessageMemo('authorize', [ + 'read:nftbook', + 'write:nftbook', + 'read:nftcollection', + 'write:nftcollection', + ]) + if (!signature) { return } + await this.authenticate({inputWallet:this.currentAddress, signature}) } let postAuthRoute = '/'; if (window.sessionStorage) { @@ -58,6 +75,8 @@ export default class RedirectPage extends Vue { statusCode: 400, message: (err as Error).toString(), }); + this.disconnectWallet() + this.clearSession() } } else { if (window.sessionStorage) {