synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-25 14:05:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Modify frontend to be compatible with full-loop for bot-based integrations

Browse Source
This commit is contained in:
Tuan Dang
2022-12-10 15:43:22 -05:00
parent 436f408fa8
commit c2eaea21f0
13 changed files with 413 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
backend/src/controllers/integrationController.ts
View File

@ -1,11 +1,9 @@
import { Request, Response } from 'express';
import { readFileSync } from 'fs';
import * as Sentry from '@sentry/node';
import axios from 'axios';
import { Integration } from '../models';
import { decryptAsymmetric } from '../utils/crypto';
import { decryptSecrets } from '../helpers/secret';
import { PRIVATE_KEY } from '../config';
import { Integration, Bot, BotKey } from '../models';
import { EventService } from '../services';
import { eventPushSecrets } from '../events';
interface Key {
encryptedKey: string;
@ -55,26 +53,40 @@ export const getIntegrations = async (req: Request, res: Response) => {
* @param res
* @returns
*/
export const modifyIntegration = async (req: Request, res: Response) => {
export const updateIntegration = async (req: Request, res: Response) => {
let integration;
try {
const { update } = req.body;
const { app, environment, isActive } = req.body;
integration = await Integration.findOneAndUpdate(
{
_id: req.integration._id
},
update,
{
app,
environment,
isActive
},
{
new: true
}
);
if (integration) {
// trigger event - push secrets
EventService.handleEvent({
event: eventPushSecrets({
workspaceId: integration.workspace.toString()
})
});
}
} catch (err) {
Sentry.setUser({ email: req.user.email });
Sentry.captureException(err);
return res.status(400).send({
message: 'Failed to modify integration'
message: 'Failed to update integration'
});
}
@ -84,7 +96,8 @@ export const modifyIntegration = async (req: Request, res: Response) => {
};
/**
* Delete integration with id [integrationId]
* Delete integration with id [integrationId] and deactivate bot if there are
* no integrations left
* @param req
* @param res
* @returns
@ -97,6 +110,29 @@ export const deleteIntegration = async (req: Request, res: Response) => {
deletedIntegration = await Integration.findOneAndDelete({
_id: integrationId
});
if (!deletedIntegration) throw new Error('Failed to find integration');
const integrations = await Integration.find({
workspace: deletedIntegration.workspace
});
if (integrations.length === 0) {
// case: no integrations left, deactivate bot
const bot = await Bot.findOneAndUpdate({
workspace: deletedIntegration.workspace
}, {
isActive: false
}, {
new: true
});
if (bot) {
await BotKey.deleteOne({
bot: bot._id
});
}
}
} catch (err) {
Sentry.setUser({ email: req.user.email });
Sentry.captureException(err);

15
backend/src/controllers/secretController.ts
View File

@ -62,14 +62,6 @@ export const pushSecrets = async (req: Request, res: Response) => {
keys
});
// trigger event
EventService.handleEvent({
event: eventPushSecrets({
workspaceId,
environment,
secrets
})
});
if (postHogClient) {
postHogClient.capture({
@ -84,6 +76,13 @@ export const pushSecrets = async (req: Request, res: Response) => {
});
}
// trigger event - push secrets
EventService.handleEvent({
event: eventPushSecrets({
workspaceId
})
});
} catch (err) {
Sentry.setUser({ email: req.user.email });
Sentry.captureException(err);

9
backend/src/events/secret.ts
View File

@ -16,25 +16,18 @@ interface PushSecret {
* Return event for pushing secrets
* @param {Object} obj
* @param {String} obj.workspaceId - id of workspace to push secrets to
* @param {String} obj.environment - environment for secrets
* @param {PushSecret[]} obj.secrets - secrets to push
* @returns
*/
const eventPushSecrets = ({
workspaceId,
environment,
secrets
}: {
workspaceId: string;
environment: string;
secrets: PushSecret[];
}) => {
return ({
name: EVENT_PUSH_SECRETS,
workspaceId,
payload: {
environment,
secrets
}
});
}

24
backend/src/helpers/integration.ts
View File

@ -73,20 +73,18 @@ const handleOAuthExchangeHelper = async ({
accessExpiresAt: res.accessExpiresAt
});
// initializes an integration after exchange
await Integration.findOneAndUpdate(
{ workspace: workspaceId, integration },
{
workspace: workspaceId,
environment: ENV_DEV,
isActive: false,
app: null,
integration,
integrationAuth: integrationAuth._id
},
{ upsert: true, new: true }
);
// initialize new integration after exchange
await new Integration({
workspace: workspaceId,
environment: ENV_DEV,
isActive: false,
app: null,
integration,
integrationAuth: integrationAuth._id
}).save();
} catch (err) {
console.error('in', err);
Sentry.setUser(null);
Sentry.captureException(err);
throw new Error('Failed to handle OAuth2 code-token exchange')

3
backend/src/models/integration.ts
View File

@ -37,8 +37,7 @@ const integrationSchema = new Schema<IIntegration>(
app: {
// name of app in provider
type: String,
default: null,
required: true
default: null
},
integration: {
type: String,

10
backend/src/routes/integration.ts
View File

@ -18,10 +18,12 @@ router.patch(
acceptedRoles: [ADMIN, MEMBER],
acceptedStatuses: [GRANTED]
}),
param('integrationId'),
body('update'),
param('integrationId').exists().trim(),
body('app').exists().trim(),
body('environment').exists().trim(),
body('isActive').exists().isBoolean(),
validateRequest,
integrationController.modifyIntegration
integrationController.updateIntegration
);
router.delete(
@ -31,7 +33,7 @@ router.delete(
acceptedRoles: [ADMIN, MEMBER],
acceptedStatuses: [GRANTED]
}),
param('integrationId'),
param('integrationId').exists().trim(),
validateRequest,
integrationController.deleteIntegration
);

91
frontend/components/basic/dialog/ActivateBotDialog.js Normal file
View File

@ -0,0 +1,91 @@
import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";
import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
import {
decryptAssymmetric,
encryptAssymmetric
} from "../../utilities/cryptography/crypto";
import Button from "../buttons/Button";
const ActivateBotDialog = ({
isOpen,
closeModal,
selectedIntegrationOption,
handleBotActivate,
handleIntegrationOption
}) => {
const submit = async () => {
try {
// 1. activate bot
await handleBotActivate();
// 2. start integration
await handleIntegrationOption({
integrationOption: selectedIntegrationOption
});
} catch (err) {
console.log(err);
}
closeModal();
}
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400"
>
Grant Infisical access to your secrets
</Dialog.Title>
<div className="mt-2 mb-2">
<p className="text-sm text-gray-500">
Enabling platform integrations lets Infisical decrypt your secrets so they can be forwarded to the platforms.
</p>
</div>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text="Grant access"
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
}
export default ActivateBotDialog;

2
frontend/components/utilities/attemptLogin.js
View File

@ -74,7 +74,7 @@ const attemptLogin = async (
tag,
privateKey,
});
const userOrgs = await getOrganizations();
const userOrgsData = userOrgs.map((org) => org._id);

74
frontend/components/utilities/secrets/pushKeysIntegration.js Normal file
View File

@ -0,0 +1,74 @@
import publicKeyInfical from "~/pages/api/auth/publicKeyInfisical";
import changeHerokuConfigVars from "~/pages/api/integrations/ChangeHerokuConfigVars";
const crypto = require("crypto");
const {
encryptSymmetric,
encryptAssymmetric,
} = require("../cryptography/crypto");
const nacl = require("tweetnacl");
nacl.util = require("tweetnacl-util");
const pushKeysIntegration = async ({ obj, integrationId }) => {
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
let randomBytes = crypto.randomBytes(16).toString("hex");
const secrets = Object.keys(obj).map((key) => {
// encrypt key
const {
ciphertext: ciphertextKey,
iv: ivKey,
tag: tagKey,
} = encryptSymmetric({
plaintext: key,
key: randomBytes,
});
// encrypt value
const {
ciphertext: ciphertextValue,
iv: ivValue,
tag: tagValue,
} = encryptSymmetric({
plaintext: obj[key],
key: randomBytes,
});
const visibility = "shared";
return {
ciphertextKey,
ivKey,
tagKey,
hashKey: crypto.createHash("sha256").update(key).digest("hex"),
ciphertextValue,
ivValue,
tagValue,
hashValue: crypto.createHash("sha256").update(obj[key]).digest("hex"),
type: visibility,
};
});
// obtain public keys of all receivers (i.e. members in workspace)
let publicKeyInfisical = await publicKeyInfical();
publicKeyInfisical = (await publicKeyInfisical.json()).publicKey;
// assymmetrically encrypt key with each receiver public keys
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: randomBytes,
publicKey: publicKeyInfisical,
privateKey: PRIVATE_KEY,
});
const key = {
encryptedKey: ciphertext,
nonce,
};
changeHerokuConfigVars({ integrationId, key, secrets });
};
export default pushKeysIntegration;

25
frontend/pages/api/integrations/ChangeHerokuConfigVars.js Normal file
View File

@ -0,0 +1,25 @@
import SecurityClient from "~/utilities/SecurityClient";
const changeHerokuConfigVars = ({ integrationId, key, secrets }) => {
return SecurityClient.fetchCall(
"/api/v1/integration/" + integrationId + "/sync",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
key,
secrets,
}),
}
).then(async (res) => {
if (res.status == 200) {
return res;
} else {
console.log("Failed to sync secrets to Heroku");
}
});
};
export default changeHerokuConfigVars;

33
frontend/pages/api/integrations/StartIntegration.js
View File

@ -1,33 +0,0 @@
import SecurityClient from "~/utilities/SecurityClient";
/**
* This route starts the integration after teh default one if gonna set up.
* @param {*} integrationId
* @returns
*/
const startIntegration = ({ integrationId, appName, environment }) => {
return SecurityClient.fetchCall(
"/api/v1/integration/" + integrationId,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
update: {
app: appName,
environment,
isActive: true,
},
}),
}
).then(async (res) => {
if (res.status == 200) {
return res;
} else {
console.log("Failed to start an integration");
}
});
};
export default startIntegration;

42
frontend/pages/api/integrations/updateIntegration.js Normal file
View File

@ -0,0 +1,42 @@
import SecurityClient from "~/utilities/SecurityClient";
/**
* This route starts the integration after teh default one if gonna set up.
* Update integration with id [integrationId] to sync envars from the project's
* [environment] to the integration [app] with active state [isActive]
* @param {Object} obj
* @param {String} obj.integrationId - id of integration
* @param {String} obj.app - name of app
* @param {String} obj.environment - project environment to push secrets from
* @param {Boolean} obj.isActive - active state
* @returns
*/
const updateIntegration = ({
integrationId,
app,
environment,
isActive
}) => {
return SecurityClient.fetchCall(
"/api/v1/integration/" + integrationId,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
app,
environment,
isActive
}),
}
).then(async (res) => {
if (res.status == 200) {
return res;
} else {
console.log("Failed to start an integration");
}
});
};
export default updateIntegration;

187
frontend/pages/integrations/[id].js
View File

@ -27,16 +27,16 @@ import getIntegrationApps from "../api/integrations/GetIntegrationApps";
import getIntegrations from "../api/integrations/GetIntegrations";
import getWorkspaceAuthorizations from "../api/integrations/getWorkspaceAuthorizations";
import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
import startIntegration from "../api/integrations/StartIntegration";
import updateIntegration from "../api/integrations/updateIntegration";
import getBot from "../api/bot/getBot";
import setBotActiveStatus from "../api/bot/setBotActiveStatus";
import getLatestFileKey from "../api/workspace/getLatestFileKey";
import ActivateBotDialog from "~/components/basic/dialog/ActivateBotDialog";
const {
decryptAssymmetric,
encryptAssymmetric
} = require('../../components/utilities/cryptography/crypto');
const crypto = require("crypto");
const Integration = ({ projectIntegration }) => {
@ -120,10 +120,11 @@ const Integration = ({ projectIntegration }) => {
<Button
text="Start Integration"
onButtonPressed={async () => {
const result = await startIntegration({
const result = await updateIntegration({
integrationId: projectIntegration._id,
environment: envMapping[integrationEnvironment],
appName: integrationApp,
app: integrationApp,
isActive: true
});
router.reload();
}}
@ -151,39 +152,43 @@ const Integration = ({ projectIntegration }) => {
};
export default function Integrations() {
const [integrations, setIntegrations] = useState();
const [projectIntegrations, setProjectIntegrations] = useState();
const [integrations, setIntegrations] = useState({});
const [projectIntegrations, setProjectIntegrations] = useState([]);
const [authorizations, setAuthorizations] = useState();
const router = useRouter();
const [csrfToken, setCsrfToken] = useState("");
const [bot, setBot] = useState(null);
const [isActivateBotOpen, setIsActivateBotOpen] = useState(false);
const [selectedIntegrationOption, setSelectedIntegrationOption] = useState(null);
useEffect(async () => {
const tempCSRFToken = crypto.randomBytes(16).toString("hex");
setCsrfToken(tempCSRFToken);
localStorage.setItem("latestCSRFToken", tempCSRFToken);
let projectAuthorizations = await getWorkspaceAuthorizations({
workspaceId: router.query.id,
});
setAuthorizations(projectAuthorizations);
const projectIntegrations = await getWorkspaceIntegrations({
workspaceId: router.query.id,
});
setProjectIntegrations(projectIntegrations);
const bot = await getBot({
workspaceId: router.query.id
});
setBot(bot.bot);
try {
// generate CSRF token for OAuth2 code-token exchange integrations
const tempCSRFToken = crypto.randomBytes(16).toString("hex");
setCsrfToken(tempCSRFToken);
localStorage.setItem("latestCSRFToken", tempCSRFToken);
let projectAuthorizations = await getWorkspaceAuthorizations({
workspaceId: router.query.id,
});
setAuthorizations(projectAuthorizations);
const projectIntegrations = await getWorkspaceIntegrations({
workspaceId: router.query.id,
});
setProjectIntegrations(projectIntegrations);
const bot = await getBot({
workspaceId: router.query.id
});
setBot(bot.bot);
const integrationsData = await getIntegrations();
setIntegrations(integrationsData);
} catch (error) {
console.log("Error", error);
} catch (err) {
console.log(err);
}
}, []);
@ -191,7 +196,7 @@ export default function Integrations() {
* Toggle activate/deactivate bot
*/
const handleBotActivate = async () => {
const k = await getLatestFileKey({ workspaceId: router.query.id });
const key = await getLatestFileKey({ workspaceId: router.query.id });
try {
if (bot) {
let botKey;
@ -200,9 +205,9 @@ export default function Integrations() {
const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
const WORKSPACE_KEY = decryptAssymmetric({
ciphertext: k.latestKey.encryptedKey,
nonce: k.latestKey.nonce,
publicKey: k.latestKey.sender.publicKey,
ciphertext: key.latestKey.encryptedKey,
nonce: key.latestKey.nonce,
publicKey: key.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY
});
@ -230,7 +235,45 @@ export default function Integrations() {
console.error(err);
}
}
/**
* Start integration for a given integration option [integrationOption]
* @param {Object} obj
* @param {Object} obj.integrationOption - an integration option
* @returns
*/
const handleIntegrationOption = async ({ integrationOption }) => {
// TODO: modularize
switch (integrationOption.name) {
case 'Heroku':
window.location = `https://id.heroku.com/oauth/authorize?client_id=7b1311a1-1cb2-4938-8adf-f37a399ec41b&response_type=code&scope=write-protected&state=${csrfToken}`;
return;
}
}
/**
* Call [handleIntegrationOption] if bot is active, else open dialog for user to grant
* permission to share secretes with Infisical prior to starting any integration
* @param {Object} obj
* @param {String} obj.integrationOption - an integration option
* @returns
*/
const integrationOptionPress = ({ integrationOption }) => {
try {
if (bot.isActive) {
// case: bot is active -> proceed with integration
handleIntegrationOption({ integrationOption });
return;
}
// case: bot is not active -> open modal to activate bot
setIsActivateBotOpen(true);
} catch (err) {
console.error(err);
}
}
return integrations ? (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
@ -246,39 +289,32 @@ export default function Integrations() {
<div className="flex flex-row">
<div className="w-full max-h-96 pb-2 h-screen max-h-[calc(100vh-10px)] overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
<NavHeader pageName="Project Integrations" isProjectRelated={true} />
<div className="flex flex-col justify-between items-start mx-4 mt-6 mb-4 text-xl max-w-5xl px-2">
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4">Current Project Integrations</p>
</div>
<button onClick={() => handleBotActivate()}>
{(bot && bot?.isActive) ? 'Deactivate bot' : 'Activate bot'}
</button>
<p className="mr-4 text-base text-gray-400">
Manage your integrations of Infisical with third-party services.
</p>
</div>
{projectIntegrations.length > 0 ? (
projectIntegrations.map((projectIntegration) => (
<Integration
key={guidGenerator()}
projectIntegration={projectIntegration}
/>
))
) : (
<div className="flex flex-col max-w-5xl justify-center bg-white/5 p-6 rounded-md mx-6 mt-8">
<div className="relative px-4 flex flex-col text-gray-400 items-center justify-center">
<div className="mb-1">
You {"don't"} have any integrations set up yet. When you do,
they will appear here.
</div>
<div className="">
To start, click on any of the options below. It takes 5 clicks
to set up.
<ActivateBotDialog
isOpen={isActivateBotOpen}
closeModal={() => setIsActivateBotOpen(false)}
selectedIntegrationOption={selectedIntegrationOption}
handleBotActivate={handleBotActivate}
handleIntegrationOption={handleIntegrationOption}
/>
{projectIntegrations.length > 0 && (
<>
<div className="flex flex-col justify-between items-start mx-4 mb-4 mt-6 text-xl max-w-5xl px-2">
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4">Current Project Integrations</p>
</div>
<p className="text-base text-gray-400">
Manage your integrations of Infisical with third-party services.
</p>
</div>
</div>
{projectIntegrations.map((projectIntegration) => (
<Integration
key={guidGenerator()}
projectIntegration={projectIntegration}
/>
))}
</>
)}
<div className="flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2">
<div className={`flex flex-col justify-between items-start mx-4 ${projectIntegrations.length > 0 ? 'mt-12' : 'mt-6'} mb-4 text-xl max-w-5xl px-2`}>
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4">Platform & Cloud Integrations</p>
</div>
@ -302,30 +338,24 @@ export default function Integrations() {
<div
className={`relative ${
["Heroku"].includes(integrations[integration].name)
? ""
? "hover:bg-white/10 duration-200 cursor-pointer"
: "opacity-50"
}`}
} flex flex-row bg-white/5 h-32 rounded-md p-4 items-center`}
onClick={() => {
if (!["Heroku"].includes(integrations[integration].name)) return;
setSelectedIntegrationOption(integrations[integration]);
integrationOptionPress({
integrationOption: integrations[integration]
});
}}
key={integrations[integration].name}
>
<a
href={`${
["Heroku"].includes(integrations[integration].name)
? `https://id.heroku.com/oauth/authorize?client_id=7b1311a1-1cb2-4938-8adf-f37a399ec41b&response_type=code&scope=write-protected&state=${csrfToken}`
: "#"
}`}
rel="noopener"
className={`relative flex flex-row bg-white/5 h-32 rounded-md p-4 items-center ${
["Heroku"].includes(integrations[integration].name)
? "hover:bg-white/10 duration-200 cursor-pointer"
: "cursor-default grayscale"
}`}
>
<Image
src={`/images/integrations/${integrations[integration].name}.png`}
height={70}
width={70}
alt="integration logo"
></Image>
/>
{integrations[integration].name.split(" ").length > 2 ? (
<div className="font-semibold text-gray-300 group-hover:text-gray-200 duration-200 text-3xl ml-4 max-w-xs">
<div>{integrations[integration].name.split(" ")[0]}</div>
@ -339,7 +369,6 @@ export default function Integrations() {
{integrations[integration].name}
</div>
)}
</a>
{["Heroku"].includes(integrations[integration].name) &&
authorizations
.map((authorization) => authorization.integration)