Add UI logic to support OAuth authentication flow

Add support in credentialsList to kickoff an OAuth2 authorization
flow. This enables users to authenticate and allow n8n to store
the resulting keys in the backend.
This commit is contained in:
Ram Yalamanchili
2020-01-01 22:49:18 -08:00
parent d2ea3ce877
commit cb73853680
4 changed files with 41 additions and 2 deletions

View File

@@ -25,10 +25,12 @@
<el-table-column property="updatedAt" label="Updated" class-name="clickable" sortable></el-table-column>
<el-table-column
label="Operations"
width="120">
width="180">
<template slot-scope="scope">
<el-button title="Edit Credentials" @click.stop="editCredential(scope.row)" icon="el-icon-edit" circle></el-button>
<el-button title="Delete Credentials" @click.stop="deleteCredential(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
<!-- Would be nice to have this button switch from connect to disconnect based on the credential status -->
<el-button title="Connect OAuth Credentials" @click.stop="OAuth2CredentialAuthorize(scope.row)" icon="el-icon-caret-right" v-if="scope.row.type == 'OAuth2Api'" circle></el-button>
</template>
</el-table-column>
</el-table>
@@ -91,6 +93,20 @@ export default mixins(
this.editCredentials = null;
this.credentialEditDialogVisible = true;
},
async OAuth2CredentialAuthorize (credential: ICredentialsResponse) {
let url;
try {
url = await this.restApi().OAuth2CredentialAuthorize(credential) as string;
} catch (error) {
this.$showError(error, 'OAuth Authorization Error', 'Error generating authorization URL:');
return;
}
const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`;
const oauthPopup = window.open(url, 'OAuth2 Authorization', params);
console.log(oauthPopup);
},
editCredential (credential: ICredentialsResponse) {
const editCredentials = {
id: credential.id,
@@ -124,7 +140,7 @@ export default mixins(
try {
this.credentials = JSON.parse(JSON.stringify(this.$store.getters.allCredentials));
} catch (error) {
this.$showError(error, 'Proble loading credentials', 'There was a problem loading the credentials:');
this.$showError(error, 'Problem loading credentials', 'There was a problem loading the credentials:');
this.isDataLoading = false;
return;
}