Merge pull request #3772 from Budibase/feature/query-auth

REST Query Authentication
This commit is contained in:
Rory Powell 2021-12-14 12:24:06 +00:00 committed by GitHub
commit bc2c4a6ccd
17 changed files with 526 additions and 28 deletions

View File

@ -21,6 +21,7 @@
export let showSecondaryButton = false export let showSecondaryButton = false
export let secondaryButtonText = undefined export let secondaryButtonText = undefined
export let secondaryAction = undefined export let secondaryAction = undefined
export let secondaryButtonWarning = false
const { hide, cancel } = getContext(Context.Modal) const { hide, cancel } = getContext(Context.Modal)
let loading = false let loading = false
@ -88,8 +89,11 @@
{#if showSecondaryButton && secondaryButtonText && secondaryAction} {#if showSecondaryButton && secondaryButtonText && secondaryAction}
<div class="secondary-action"> <div class="secondary-action">
<Button group secondary on:click={secondary} <Button
>{secondaryButtonText}</Button group
secondary
warning={secondaryButtonWarning}
on:click={secondary}>{secondaryButtonText}</Button
> >
</div> </div>
{/if} {/if}

View File

@ -12,7 +12,7 @@
import { datasources, integrations, tables } from "stores/backend" import { datasources, integrations, tables } from "stores/backend"
import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte" import CreateEditRelationship from "components/backend/Datasources/CreateEditRelationship.svelte"
import CreateExternalTableModal from "./CreateExternalTableModal.svelte" import CreateExternalTableModal from "./CreateExternalTableModal.svelte"
import ArrayRenderer from "components/common/ArrayRenderer.svelte" import ArrayRenderer from "components/common/renderers/ArrayRenderer.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"

View File

@ -1,6 +1,7 @@
<script> <script>
import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui" import { Divider, Heading, ActionButton, Badge, Body } from "@budibase/bbui"
import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte" import KeyValueBuilder from "components/integration/KeyValueBuilder.svelte"
import RestAuthenticationBuilder from "./auth/RestAuthenticationBuilder.svelte"
export let datasource export let datasource
@ -8,7 +9,7 @@
</script> </script>
<Divider size="S" /> <Divider size="S" />
<div class="query-header"> <div class="section-header">
<div class="badge"> <div class="badge">
<Heading size="S">Headers</Heading> <Heading size="S">Headers</Heading>
<Badge quiet grey>Optional</Badge> <Badge quiet grey>Optional</Badge>
@ -30,8 +31,20 @@
</ActionButton> </ActionButton>
</div> </div>
<Divider size="S" />
<div class="section-header">
<div class="badge">
<Heading size="S">Authentication</Heading>
<Badge quiet grey>Optional</Badge>
</div>
</div>
<Body size="S">
Create an authentication config that can be shared with queries.
</Body>
<RestAuthenticationBuilder bind:configs={datasource.config.authConfigs} />
<style> <style>
.query-header { .section-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;

View File

@ -0,0 +1,13 @@
<script>
import { AUTH_TYPE_LABELS } from "./authTypes"
export let value
const renderAuthType = value => {
return AUTH_TYPE_LABELS.filter(type => type.value === value).map(
type => type.label
)
}
</script>
{renderAuthType(value)}

View File

@ -0,0 +1,65 @@
<script>
import { Table, Modal, Layout, ActionButton } from "@budibase/bbui"
import AuthTypeRenderer from "./AuthTypeRenderer.svelte"
import RestAuthenticationModal from "./RestAuthenticationModal.svelte"
import { uuid } from "builderStore/uuid"
export let configs = []
let currentConfig = null
let modal
const schema = {
name: "",
type: "",
}
const openConfigModal = config => {
currentConfig = config
modal.show()
}
const onConfirm = config => {
if (currentConfig) {
configs = configs.map(c => {
// replace the current config with the new one
if (c._id === currentConfig._id) {
return config
}
return c
})
} else {
config._id = uuid()
configs = [...configs, config]
}
}
const onRemove = () => {
configs = configs.filter(c => {
return c._id !== currentConfig._id
})
}
</script>
<Modal bind:this={modal}>
<RestAuthenticationModal {configs} {currentConfig} {onConfirm} {onRemove} />
</Modal>
<Layout gap="S" noPadding>
{#if configs && configs.length > 0}
<Table
on:click={({ detail }) => openConfigModal(detail)}
{schema}
data={configs}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={false}
customRenderers={[{ column: "type", component: AuthTypeRenderer }]}
/>
{/if}
<div>
<ActionButton on:click={() => openConfigModal()} con="Add"
>Add authentication</ActionButton
>
</div>
</Layout>

View File

@ -0,0 +1,218 @@
<script>
import { onMount } from "svelte"
import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui"
import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes"
export let configs
export let currentConfig
export let onConfirm
export let onRemove
let form = {
basic: {},
bearer: {},
}
let errors = {
basic: {},
bearer: {},
}
let blurred = {
basic: {},
bearer: {},
}
let hasErrors = false
let hasChanged = false
onMount(() => {
if (currentConfig) {
deconstructConfig()
}
})
/**
* map the current config's data into the form by type
*/
const deconstructConfig = () => {
form.name = currentConfig.name
form.type = currentConfig.type
if (currentConfig.type === AUTH_TYPES.BASIC) {
form.basic = {
...currentConfig.config,
}
} else if (currentConfig.type === AUTH_TYPES.BEARER) {
form.bearer = {
...currentConfig.config,
}
}
}
/**
* map the form into a new config to save by type
*/
const constructConfig = () => {
const newConfig = {
name: form.name,
type: form.type,
}
if (currentConfig) {
newConfig._id = currentConfig._id
}
if (form.type === AUTH_TYPES.BASIC) {
newConfig.config = {
...form.basic,
}
} else if (form.type === AUTH_TYPES.BEARER) {
newConfig.config = {
...form.bearer,
}
}
return newConfig
}
/**
* compare the existing config with the new config to see if there are any changes
*/
const checkChanged = () => {
if (currentConfig) {
hasChanged =
JSON.stringify(currentConfig) !== JSON.stringify(constructConfig())
} else {
hasChanged = true
}
}
const checkErrors = () => {
hasErrors = false
// NAME
const nameError = () => {
// Unique name
if (form.name) {
errors.name =
// check for duplicate excluding the current config
configs.find(
c => c.name === form.name && c.name !== currentConfig?.name
) !== undefined
? "Name must be unique"
: null
}
// Name required
else {
errors.name = "Name is required"
}
return !!errors.name
}
// TYPE
const typeError = () => {
errors.type = form.type ? null : "Type is required"
return !!errors.type
}
// BASIC AUTH
const basicAuthErrors = () => {
errors.basic.username = form.basic.username
? null
: "Username is required"
errors.basic.password = form.basic.password
? null
: "Password is required"
return !!(errors.basic.username || errors.basic.password || commonError)
}
// BEARER TOKEN
const bearerTokenErrors = () => {
errors.bearer.token = form.bearer.token ? null : "Token is required"
return !!(errors.bearer.token || commonError)
}
const commonError = nameError() || typeError()
if (form.type === AUTH_TYPES.BASIC) {
hasErrors = basicAuthErrors() || commonError
} else if (form.type === AUTH_TYPES.BEARER) {
hasErrors = bearerTokenErrors() || commonError
} else {
hasErrors = !!commonError
}
}
const onFieldChange = () => {
checkErrors()
checkChanged()
}
const onConfirmInternal = () => {
onConfirm(constructConfig())
}
</script>
<ModalContent
title={currentConfig ? "Update Authentication" : "Add Authentication"}
onConfirm={onConfirmInternal}
confirmText={currentConfig ? "Update" : "Add"}
disabled={hasErrors || !hasChanged}
cancelText={"Cancel"}
size="M"
showSecondaryButton={!!currentConfig}
secondaryButtonText={"Remove"}
secondaryAction={onRemove}
secondaryButtonWarning={true}
>
<Layout gap="S">
<Body size="S">
The authorization header will be automatically generated when you send the
request.
</Body>
<Input
label="Name"
bind:value={form.name}
on:change={onFieldChange}
on:blur={() => (blurred.name = true)}
error={blurred.name ? errors.name : null}
/>
<Select
label="Type"
bind:value={form.type}
on:change={onFieldChange}
options={AUTH_TYPE_LABELS}
on:blur={() => (blurred.type = true)}
error={blurred.type ? errors.type : null}
/>
{#if form.type === AUTH_TYPES.BASIC}
<Input
label="Username"
bind:value={form.basic.username}
on:change={onFieldChange}
on:blur={() => (blurred.basic.username = true)}
error={blurred.basic.username ? errors.basic.username : null}
/>
<Input
label="Password"
bind:value={form.basic.password}
on:change={onFieldChange}
on:blur={() => (blurred.basic.password = true)}
error={blurred.basic.password ? errors.basic.password : null}
/>
{/if}
{#if form.type === AUTH_TYPES.BEARER}
<Input
label="Token"
bind:value={form.bearer.token}
on:change={onFieldChange}
on:blur={() => (blurred.bearer.token = true)}
error={blurred.bearer.token ? errors.bearer.token : null}
/>
{/if}
</Layout>
</ModalContent>
<style>
</style>

View File

@ -0,0 +1,15 @@
export const AUTH_TYPES = {
BASIC: "basic",
BEARER: "bearer",
}
export const AUTH_TYPE_LABELS = [
{
label: "Basic Auth",
value: AUTH_TYPES.BASIC,
},
{
label: "Bearer Token",
value: AUTH_TYPES.BEARER,
},
]

View File

@ -12,33 +12,29 @@
} from "@budibase/bbui" } from "@budibase/bbui"
import { datasources, integrations, queries, tables } from "stores/backend" import { datasources, integrations, queries, tables } from "stores/backend"
import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte" import IntegrationConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte"
import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/RestExtraConfigForm.svelte" import RestExtraConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/rest/RestExtraConfigForm.svelte"
import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte" import PlusConfigForm from "components/backend/DatasourceNavigator/TableIntegrationMenu/PlusConfigForm.svelte"
import ICONS from "components/backend/DatasourceNavigator/icons" import ICONS from "components/backend/DatasourceNavigator/icons"
import VerbRenderer from "./_components/VerbRenderer.svelte" import CapitaliseRenderer from "components/common/renderers/CapitaliseRenderer.svelte"
import { IntegrationTypes } from "constants/backend" import { IntegrationTypes } from "constants/backend"
import { isEqual } from "lodash" import { isEqual } from "lodash"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte" import ImportRestQueriesModal from "components/backend/DatasourceNavigator/modals/ImportRestQueriesModal.svelte"
import { onMount } from "svelte"
let importQueriesModal let importQueriesModal
let baseDatasource, changed let changed
let datasource
const querySchema = { const querySchema = {
name: {}, name: {},
queryVerb: { displayName: "Method" }, queryVerb: { displayName: "Method" },
} }
$: datasource = $datasources.list.find(ds => ds._id === $datasources.selected) $: baseDatasource = $datasources.list.find(
ds => ds._id === $datasources.selected
)
$: integration = datasource && $integrations[datasource.source] $: integration = datasource && $integrations[datasource.source]
$: {
if (
datasource &&
(!baseDatasource || baseDatasource.source !== datasource.source)
) {
baseDatasource = cloneDeep(datasource)
}
}
$: queryList = $queries.list.filter( $: queryList = $queries.list.filter(
query => query.datasourceId === datasource?._id query => query.datasourceId === datasource?._id
) )
@ -69,6 +65,10 @@
queries.select(query) queries.select(query)
$goto(`./${query._id}`) $goto(`./${query._id}`)
} }
onMount(() => {
datasource = cloneDeep(baseDatasource)
})
</script> </script>
<Modal bind:this={importQueriesModal}> <Modal bind:this={importQueriesModal}>
@ -90,7 +90,7 @@
height="26" height="26"
width="26" width="26"
/> />
<Heading size="M">{baseDatasource.name}</Heading> <Heading size="M">{datasource.name}</Heading>
</header> </header>
<Body size="M">{integration.description}</Body> <Body size="M">{integration.description}</Body>
</Layout> </Layout>
@ -135,7 +135,9 @@
allowEditColumns={false} allowEditColumns={false}
allowEditRows={false} allowEditRows={false}
allowSelectRows={false} allowSelectRows={false}
customRenderers={[{ column: "queryVerb", component: VerbRenderer }]} customRenderers={[
{ column: "queryVerb", component: CapitaliseRenderer },
]}
/> />
</div> </div>
{/if} {/if}

View File

@ -51,6 +51,7 @@
let saveId let saveId
let response, schema, enabledHeaders let response, schema, enabledHeaders
let datasourceType, integrationInfo, queryConfig, responseSuccess let datasourceType, integrationInfo, queryConfig, responseSuccess
let authConfigId
$: datasourceType = datasource?.source $: datasourceType = datasource?.source
$: integrationInfo = $integrations[datasourceType] $: integrationInfo = $integrations[datasourceType]
@ -59,6 +60,7 @@
$: checkQueryName(url) $: checkQueryName(url)
$: responseSuccess = $: responseSuccess =
response?.info?.code >= 200 && response?.info?.code <= 206 response?.info?.code >= 200 && response?.info?.code <= 206
$: authConfigs = buildAuthConfigs(datasource)
function getSelectedQuery() { function getSelectedQuery() {
return cloneDeep( return cloneDeep(
@ -94,6 +96,16 @@
return qs.length > 0 ? `${newUrl}?${qs}` : newUrl return qs.length > 0 ? `${newUrl}?${qs}` : newUrl
} }
const buildAuthConfigs = datasource => {
if (datasource?.config?.authConfigs) {
return datasource.config.authConfigs.map(c => ({
label: c.name,
value: c._id,
}))
}
return []
}
function learnMoreBanner() { function learnMoreBanner() {
window.open("https://docs.budibase.com/building-apps/data/transformers") window.open("https://docs.budibase.com/building-apps/data/transformers")
} }
@ -103,6 +115,7 @@
const queryString = buildQueryString(breakQs) const queryString = buildQueryString(breakQs)
newQuery.fields.path = url.split("?")[0] newQuery.fields.path = url.split("?")[0]
newQuery.fields.queryString = queryString newQuery.fields.queryString = queryString
newQuery.fields.authConfigId = authConfigId
newQuery.fields.disabledHeaders = flipHeaderState(enabledHeaders) newQuery.fields.disabledHeaders = flipHeaderState(enabledHeaders)
newQuery.schema = fieldsToSchema(schema) newQuery.schema = fieldsToSchema(schema)
newQuery.parameters = keyValueToQueryParameters(bindings) newQuery.parameters = keyValueToQueryParameters(bindings)
@ -136,8 +149,26 @@
} }
} }
onMount(() => { const getAuthConfigId = () => {
let id = query.fields.authConfigId
if (id) {
// find the matching config on the datasource
const matchedConfig = datasource?.config?.authConfigs?.filter(
c => c._id === id
)[0]
// clear the id if the config is not found (deleted)
// i.e. just show 'None' in the dropdown
if (!matchedConfig) {
id = undefined
}
}
return id
}
onMount(async () => {
query = getSelectedQuery() query = getSelectedQuery()
// clear any unsaved changes to the datasource
await datasources.init()
datasource = $datasources.list.find(ds => ds._id === query?.datasourceId) datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
const datasourceUrl = datasource?.config.url const datasourceUrl = datasource?.config.url
const qs = query?.fields.queryString const qs = query?.fields.queryString
@ -149,6 +180,7 @@
url = buildUrl(query.fields.path, breakQs) url = buildUrl(query.fields.path, breakQs)
schema = schemaToFields(query.schema) schema = schemaToFields(query.schema)
bindings = queryParametersToKeyValue(query.parameters) bindings = queryParametersToKeyValue(query.parameters)
authConfigId = getAuthConfigId()
if (!query.fields.disabledHeaders) { if (!query.fields.disabledHeaders) {
query.fields.disabledHeaders = {} query.fields.disabledHeaders = {}
} }
@ -258,6 +290,19 @@
/> />
</Layout> </Layout>
</Tab> </Tab>
<div class="auth-container">
<div />
<!-- spacer -->
<div class="auth-select">
<Select
label="Auth"
labelPosition="left"
placeholder="None"
bind:value={authConfigId}
options={authConfigs}
/>
</div>
</div>
</Tabs> </Tabs>
</Layout> </Layout>
</div> </div>
@ -404,4 +449,12 @@
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
justify-content: center; justify-content: center;
} }
.auth-container {
width: 100%;
display: flex;
justify-content: space-between;
}
.auth-select {
width: 200px;
}
</style> </style>

View File

@ -3,7 +3,7 @@ import { queryValidation } from "../validation"
import { generateQueryID } from "../../../../db/utils" import { generateQueryID } from "../../../../db/utils"
import { ImportInfo, ImportSource } from "./sources/base" import { ImportInfo, ImportSource } from "./sources/base"
import { OpenAPI2 } from "./sources/openapi2" import { OpenAPI2 } from "./sources/openapi2"
import { Query } from './../../../../definitions/common'; import { Query } from "./../../../../definitions/common"
import { Curl } from "./sources/curl" import { Curl } from "./sources/curl"
interface ImportResult { interface ImportResult {
errorQueries: Query[] errorQueries: Query[]

View File

@ -196,6 +196,27 @@ export interface Datasource extends Base {
} }
} }
export enum AuthType {
BASIC = "basic",
BEARER = "bearer",
}
interface AuthConfig {
_id: string
name: string
type: AuthType
config: BasicAuthConfig | BearerAuthConfig
}
export interface BasicAuthConfig {
username: string
password: string
}
export interface BearerAuthConfig {
token: string
}
export interface QueryParameter { export interface QueryParameter {
name: string name: string
default: string default: string
@ -210,6 +231,7 @@ export interface RestQueryFields {
bodyType: string bodyType: string
json: object json: object
method: string method: string
authConfigId: string
} }
export interface RestConfig { export interface RestConfig {
@ -217,6 +239,7 @@ export interface RestConfig {
defaultHeaders: { defaultHeaders: {
[key: string]: any [key: string]: any
} }
authConfigs: AuthConfig[]
} }
export interface Query { export interface Query {

View File

@ -4,6 +4,9 @@ import {
QueryTypes, QueryTypes,
RestConfig, RestConfig,
RestQueryFields as RestQuery, RestQueryFields as RestQuery,
AuthType,
BasicAuthConfig,
BearerAuthConfig
} from "../definitions/datasource" } from "../definitions/datasource"
import { IntegrationBase } from "./base/IntegrationBase" import { IntegrationBase } from "./base/IntegrationBase"
@ -147,11 +150,43 @@ module RestModule {
return complete return complete
} }
getAuthHeaders(authConfigId: string): { [key: string]: any }{
let headers: any = {}
if (this.config.authConfigs && authConfigId) {
const authConfig = this.config.authConfigs.filter(
c => c._id === authConfigId
)[0]
// check the config still exists before proceeding
// if not - do nothing
if (authConfig) {
let config
switch (authConfig.type) {
case AuthType.BASIC:
config = authConfig.config as BasicAuthConfig
headers.Authorization = `Basic ${Buffer.from(
`${config.username}:${config.password}`
).toString("base64")}`
break
case AuthType.BEARER:
config = authConfig.config as BearerAuthConfig
headers.Authorization = `Bearer ${config.token}`
break
}
}
}
return headers
}
async _req(query: RestQuery) { async _req(query: RestQuery) {
const { path = "", queryString = "", headers = {}, method = "GET", disabledHeaders, bodyType, requestBody } = query const { path = "", queryString = "", headers = {}, method = "GET", disabledHeaders, bodyType, requestBody, authConfigId } = query
const authHeaders = this.getAuthHeaders(authConfigId)
this.headers = { this.headers = {
...this.config.defaultHeaders, ...this.config.defaultHeaders,
...headers, ...headers,
...authHeaders,
} }
if (disabledHeaders) { if (disabledHeaders) {
@ -177,7 +212,8 @@ module RestModule {
} }
this.startTimeMs = performance.now() this.startTimeMs = performance.now()
const response = await fetch(this.getUrl(path, queryString), input) const url = this.getUrl(path, queryString)
const response = await fetch(url, input)
return await this.parseResponse(response) return await this.parseResponse(response)
} }
@ -205,5 +241,6 @@ module RestModule {
module.exports = { module.exports = {
schema: SCHEMA, schema: SCHEMA,
integration: RestIntegration, integration: RestIntegration,
AuthType,
} }
} }

View File

@ -12,6 +12,7 @@ jest.mock("node-fetch", () =>
) )
const fetch = require("node-fetch") const fetch = require("node-fetch")
const RestIntegration = require("../rest") const RestIntegration = require("../rest")
const { AuthType } = require("../rest")
class TestConfiguration { class TestConfiguration {
constructor(config = {}) { constructor(config = {}) {
@ -112,4 +113,58 @@ describe("REST Integration", () => {
body: '{"name":"test"}', body: '{"name":"test"}',
}) })
}) })
describe("authentication", () => {
const basicAuth = {
_id: "c59c14bd1898a43baa08da68959b24686",
name: "basic-1",
type : AuthType.BASIC,
config : {
username: "user",
password: "password"
}
}
const bearerAuth = {
_id: "0d91d732f34e4befabeff50b392a8ff3",
name: "bearer-1",
type : AuthType.BEARER,
config : {
"token": "mytoken"
}
}
beforeEach(() => {
config = new TestConfiguration({
url: BASE_URL,
authConfigs : [basicAuth, bearerAuth]
})
})
it("adds basic auth", async () => {
const query = {
authConfigId: "c59c14bd1898a43baa08da68959b24686"
}
await config.integration.read(query)
expect(fetch).toHaveBeenCalledWith(`${BASE_URL}/?`, {
method: "GET",
headers: {
Authorization: "Basic dXNlcjpwYXNzd29yZA=="
},
})
})
it("adds bearer auth", async () => {
const query = {
authConfigId: "0d91d732f34e4befabeff50b392a8ff3"
}
await config.integration.read(query)
expect(fetch).toHaveBeenCalledWith(`${BASE_URL}/?`, {
method: "GET",
headers: {
Authorization: "Bearer mytoken"
},
})
})
})
}) })