awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2334 from Infisical/daniel/azure-devops-docs

Browse Source 
Docs: Azure DevOps Integration
This commit is contained in:
Daniel Hougaard
2024-08-26 23:49:23 +04:00
committed by GitHub
parent b528eec4bb cb350788c0
commit d1816c3051
9 changed files with 145 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/images/integrations/azure-devops/create-new-token.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
docs/images/integrations/azure-devops/new-infiscial-integration-step-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 197 KiB

BIN
docs/images/integrations/azure-devops/new-infiscial-integration-step-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 192 KiB

BIN
docs/images/integrations/azure-devops/new-token-created.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
docs/images/integrations/azure-devops/overview-page.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 93 KiB

55
docs/integrations/cloud/azure-devops.mdx Normal file
View File

@@ -0,0 +1,55 @@
---
title: "Azure DevOps"
description: "How to sync secrets from Infisical to Azure DevOps"
---
### Usage
Prerequisites:
- Set up and add envars to [Infisical Cloud](https://app.infisical.com).
- Create a new [Azure DevOps](https://dev.azure.com) project if you don't have one already.
#### Create a new Azure DevOps personal access token (PAT)
You'll need to create a new personal access token (PAT) in order to authenticate Infisical with Azure DevOps.
<Steps>
<Step title="Navigate to Azure DevOps">
![integrations](../../images/integrations/azure-devops/overview-page.png)
</Step>
<Step title="Create a new token">
Make sure the newly created token has Read/Write access to the Release scope.
![integrations](../../images/integrations/azure-devops/create-new-token.png)
<Note>
Please make sure that the token has access to the following scopes: Variable Groups _(read/write)_, Release _(read/write)_, Project and Team _(read)_, Service Connections _(read & query)_
</Note>
</Step>
<Step title="Copy the new access token">
Copy the newly created token as this will be used to authenticate Infisical with Azure DevOps.
![integrations](../../images/integrations/azure-devops/new-token-created.png)
</Step>
</Steps>
#### Setup the Infisical Azure DevOps integration
Navigate to your project's integrations tab and select the 'Azure DevOps' integration.
![integrations](../../images/integrations.png)
<Steps>
<Step title="Authorize Infisical for Azure DevOps">
Enter your credentials that you obtained from the previous step.
1. Azure DevOps API token is the personal access token (PAT) you created in the previous step.
2. Azure DevOps organization name is the name of your Azure DevOps organization.
![integrations](../../images/integrations/azure-devops/new-infiscial-integration-step-1.png)
</Step>
<Step title="Configure the integration">
Select Infisical project and secret path you want to sync into Azure DevOps.
Finally, press create integration to start syncing secrets to Azure DevOps.
![integrations](../../images/integrations/azure-devops/new-infiscial-integration-step-2.png)
</Step>
</Steps>
Now you have successfully integrated Infisical with Azure DevOps. Your existing and future secret changes will automatically sync to Azure DevOps.
You can view your secrets by navigating to your Azure DevOps project and selecting the 'Library' tab under 'Pipelines' in the 'Library' section.

1
docs/mint.json
View File

@@ -324,6 +324,7 @@
},
"integrations/cloud/vercel",
"integrations/cloud/azure-key-vault",
"integrations/cloud/azure-devops",
"integrations/cloud/gcp-secret-manager",
{
"group": "Cloudflare",

52
frontend/src/pages/integrations/azure-devops/authorize.tsx
View File

@@ -1,5 +1,10 @@
import { useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useSaveIntegrationAccessToken } from "@app/hooks/api";
@@ -42,16 +47,49 @@ export default function AzureDevopsCreateIntegrationPage() {
return (
<div className="flex h-full w-full items-center justify-center">
<Card className="max-w-md rounded-md p-8">
<CardTitle className="text-center">AzureDevops Integration</CardTitle>
<Head>
<title>Authorize Azure DevOps Integration</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<Card className="max-w-lg rounded-md border border-mineshaft-600">
<CardTitle
className="px-6 text-left text-xl"
subTitle="After adding the details below, you will be prompted to set up an integration for a particular Infisical project and environment."
>
<div className="flex flex-row items-center">
<div className="inline flex items-center">
<Image
src="/images/integrations/Amazon Web Services.png"
height={35}
width={35}
alt="Azure DevOps logo"
/>
</div>
<span className="ml-1.5">Azure DevOps Integration </span>
<Link href="https://infisical.com/docs/integrations/cloud/azure-devops" passHref>
<a target="_blank" rel="noopener noreferrer">
<div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
Docs
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="ml-1.5 mb-[0.07rem] text-xxs"
/>
</div>
</a>
</Link>
</div>
</CardTitle>{" "}
<FormControl
label="AzureDevops API Token"
className="px-6"
label="Azure DevOps API Token"
errorText={apiKeyErrorText}
isError={apiKeyErrorText !== "" ?? false}
>
<Input placeholder="" value={apiKey} onChange={(e) => setApiKey(e.target.value)} />
</FormControl>
<FormControl
className="px-6"
label="Azure DevOps Organization Name"
tooltipText="This is the slug of the organization. An example would be 'my-acme-org'"
errorText={apiKeyErrorText}
@@ -63,14 +101,14 @@ export default function AzureDevopsCreateIntegrationPage() {
onChange={(e) => setDevopsOrgName(e.target.value)}
/>
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
className="mt-4"
colorSchema="primary"
variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min"
isLoading={isLoading}
>
Connect to AzureDevOps
Connect to Azure DevOps
</Button>
</Card>
</div>

52
frontend/src/pages/integrations/azure-devops/create.tsx
View File

@@ -1,5 +1,10 @@
import { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import queryString from "query-string";
import { useCreateIntegration } from "@app/hooks/api";
@@ -83,9 +88,40 @@ export default function AzureDevopsCreateIntegrationPage() {
integrationAuthApps &&
targetApp ? (
<div className="flex h-full w-full items-center justify-center">
<Card className="max-w-md rounded-md p-8">
<CardTitle className="text-center">AzureDevops Integration</CardTitle>
<FormControl label="Project Environment" className="mt-4">
<Head>
<title>Set Up Azure DevOps Integration</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<Card className="max-w-lg rounded-md border border-mineshaft-600">
<CardTitle
className="px-6 text-left text-xl"
subTitle="Choose which environment in Infisical you want to sync to secrets in Azure DevOps."
>
<div className="flex flex-row items-center">
<div className="inline flex items-center">
<Image
src="/images/integrations/Amazon Web Services.png"
height={35}
width={35}
alt="Azure DevOps logo"
/>
</div>
<span className="ml-1.5">Azure DevOps Integration </span>
<Link href="https://infisical.com/docs/integrations/cloud/azure-devops" passHref>
<a target="_blank" rel="noopener noreferrer">
<div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
Docs
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="ml-1.5 mb-[0.07rem] text-xxs"
/>
</div>
</a>
</Link>
</div>
</CardTitle>
<FormControl label="Project Environment" className="mt-4 px-6">
<Select
value={selectedSourceEnvironment}
onValueChange={(val) => setSelectedSourceEnvironment(val)}
@@ -101,14 +137,14 @@ export default function AzureDevopsCreateIntegrationPage() {
))}
</Select>
</FormControl>
<FormControl label="Secrets Path">
<FormControl className="px-6" label="Secrets Path">
<Input
value={secretPath}
onChange={(evt) => setSecretPath(evt.target.value)}
placeholder="Provide a path, default is /"
/>
</FormControl>
<FormControl label="AzureDevops Project" className="mt-4">
<FormControl label="Azure DevOps Project" className="px-6">
<Select
value={targetApp}
onValueChange={(val) => setTargetApp(val)}
@@ -133,10 +169,10 @@ export default function AzureDevopsCreateIntegrationPage() {
</FormControl>
<Button
onClick={handleButtonClick}
color="mineshaft"
className="mt-4"
colorSchema="primary"
variant="outline_bg"
className="mb-6 mt-2 ml-auto mr-6 w-min"
isLoading={isLoading}
isDisabled={integrationAuthApps.length === 0}
>
Create Integration
</Button>