feat(microsoft-teams): add microsoft teams integration

packages/backend/src/apps/microsoft-teams/assets/favicon.svg

@@ -0,0 +1,57 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="1024"  height="1024" >
+      <defs>
+        <linearGradient id="plate-fill" x1="-.2" y1="-.2" x2=".8" y2=".8">
+          <stop offset="0" stop-color="#5a62c4"></stop>
+          <stop offset="1" stop-color="#3940ab"></stop>
+        </linearGradient>
+        <style>
+          .cls-1{fill:#5059c9}.cls-2{fill:#7b83eb}
+        </style>
+        <filter id="person-shadow" x="-50%" y="-50%" width="300%" height="300%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="25"></feGaussianBlur>
+          <feOffset dy="25"></feOffset>
+          <feComponentTransfer>
+            <feFuncA type="linear" slope=".25"></feFuncA>
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+        <filter id="back-plate-shadow" x="-50%" y="-50%" width="300%" height="300%">
+	<feGaussianBlur in="SourceAlpha" stdDeviation="24"></feGaussianBlur>
+	  <feOffset dx="2" dy="24"></feOffset>
+          <feComponentTransfer>
+          <feFuncA type="linear" slope=".6"></feFuncA>
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+        <filter id="tee-shadow" x="-50%" y="-50%" width="250%" height="250%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
+          <feOffset dx="10" dy="20"></feOffset>
+          <feComponentTransfer>
+            <feFuncA type="linear" slope=".2"></feFuncA>
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+        <clipPath id="back-plate-clip">
+          <path d="M684 432H512v-49.143A112 112 0 1 0 416 272a111.556 111.556 0 0 0 10.785 48H160a32.094 32.094 0 0 0-32 32v320a32.094 32.094 0 0 0 32 32h178.67c15.236 90.8 94.2 160 189.33 160 106.039 0 192-85.961 192-192V468a36 36 0 0 0-36-36z" fill="#fff"></path>
+        </clipPath>
+      </defs>
+      <g id="small_person" filter="url(#person-shadow)">
+        <path id="Body" class="cls-1" d="M692 432h168a36 36 0 0 1 36 36v164a120 120 0 0 1-120 120 120 120 0 0 1-120-120V468a36 36 0 0 1 36-36z"></path>
+        <circle id="Head" class="cls-1" cx="776" cy="304" r="80"></circle>
+      </g>
+      <g id="Large_Person" filter="url(#person-shadow)">
+        <path id="Body-2" data-name="Body" class="cls-2" d="M372 432h312a36 36 0 0 1 36 36v204a192 192 0 0 1-192 192 192 192 0 0 1-192-192V468a36 36 0 0 1 36-36z"></path>
+        <circle id="Head-2" data-name="Head" class="cls-2" cx="528" cy="272" r="112"></circle>
+      </g>
+      <rect id="Back_Plate" x="128" y="320" width="384" height="384" rx="32" ry="32" filter="url(#back-plate-shadow)" clip-path="url(#back-plate-clip)" fill="url(#plate-fill)"></rect>
+      <path id="Letter_T" d="M399.365 445.855h-60.293v164.2h-38.418v-164.2h-60.02V414h158.73z" filter="url(#tee-shadow)" fill="#fff"></path>
+    </svg>

packages/backend/src/apps/microsoft-teams/auth/generate-auth-url.ts

@@ -0,0 +1,23 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import authScope from '../common/auth-scope';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    response_type: 'code',
+    redirect_uri: redirectUri,
+    response_mode: 'query',
+    scope: authScope.join(' '),
+  });
+
+  const url = `https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+  });
+}

packages/backend/src/apps/microsoft-teams/auth/index.ts

@@ -0,0 +1,48 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import refreshToken from './refresh-token';
+import isStillVerified from './is-still-verified';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/microsoft-teams/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Microsoft identity platform, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'Client ID',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client Secret',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+  refreshToken,
+};

packages/backend/src/apps/microsoft-teams/auth/is-still-verified.ts

@@ -0,0 +1,9 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const isStillVerified = async ($: IGlobalVariable) => {
+  const currentUser = await getCurrentUser($);
+  return !!currentUser.displayName;
+};
+
+export default isStillVerified;

packages/backend/src/apps/microsoft-teams/auth/refresh-token.ts

@@ -0,0 +1,27 @@
+import { URLSearchParams } from 'node:url';
+import { IGlobalVariable } from '@automatisch/types';
+import authScope from '../common/auth-scope';
+
+const refreshToken = async ($: IGlobalVariable) => {
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    grant_type: 'refresh_token',
+    refresh_token: $.auth.data.refreshToken as string,
+  });
+
+  const { data } = await $.http.post(
+    'https://login.microsoftonline.com/organizations/oauth2/v2.0/token',
+    params.toString()
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    expiresIn: data.expires_in,
+    scope: authScope.join(' '),
+    tokenType: data.token_type,
+    refreshToken: data.refresh_token,
+  });
+};
+
+export default refreshToken;

packages/backend/src/apps/microsoft-teams/auth/verify-credentials.ts

@@ -0,0 +1,53 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+import authScope from '../common/auth-scope';
+import { URLSearchParams } from 'node:url';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    scope: authScope.join(' '),
+    code: $.auth.data.code as string,
+    redirect_uri: redirectUri,
+    grant_type: 'authorization_code',
+    client_secret: $.auth.data.clientSecret as string,
+  });
+
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  };
+
+  const { data } = await $.http.post(
+    `https://login.microsoftonline.com/organizations/oauth2/v2.0/token`,
+    params.toString(),
+    { headers }
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    tokenType: data.token_type,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  const screenName = [currentUser.displayName, $.auth.data.mail]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    scope: data.scope,
+    expiresIn: data.expires_in,
+    extExpiresIn: data.ext_expires_in,
+    refreshToken: data.refresh_token,
+    screenName,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/microsoft-teams/common/add-auth-header.ts

@@ -0,0 +1,13 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  requestConfig.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+
+  if ($.auth.data?.accessToken) {
+    requestConfig.headers.Authorization = `${$.auth.data.tokenType} ${$.auth.data.accessToken}`;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/microsoft-teams/common/auth-scope.ts

@@ -0,0 +1,9 @@
+const authScope: string[] = [
+  'offline_access',
+  'email',
+  'User.Read',
+  'openid',
+  'profile',
+];
+
+export default authScope;

packages/backend/src/apps/microsoft-teams/common/get-current-user.ts

@@ -0,0 +1,8 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable): Promise<IJSONObject> => {
+  const response = await $.http.get('/v1.0/me');
+  return response.data;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/microsoft-teams/index.ts

@@ -0,0 +1,16 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import auth from './auth';
+
+export default defineApp({
+  name: 'Microsoft Teams',
+  key: 'microsoft-teams',
+  baseUrl: 'https://teams.live.com',
+  apiBaseUrl: 'https://graph.microsoft.com',
+  iconUrl: '{BASE_URL}/apps/microsoft-teams/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/microsoft-teams/connection',
+  primaryColor: '464EB8',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+});

packages/docs/pages/.vitepress/config.js

@@ -188,6 +188,14 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/mattermost/connection' },
           ],
         },
+        {
+          text: 'Microsoft Teams',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Connection', link: '/apps/microsoft-teams/connection' },
+          ],
+        },
         {
           text: 'Miro',
           collapsible: true,

packages/docs/pages/apps/microsoft-teams/connection.md

@@ -0,0 +1,28 @@
+# Microsoft Teams
+
+:::info
+This page explains the steps you need to follow to set up the Microsoft Teams
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com).
+2. Click **Identity** from the menu on the left.
+3. Expand the **Applications** and click **App Registrations**.
+4. In this page, click on **New registrations**.
+5. Fill in the **Name** field.
+6. Select the **Accounts in any organizational directory** option.
+7. In Redirect URI, select **Web** as platform.
+8. Copy **OAuth Redirect URL** from Automatisch to the **Redirect URI** field.
+9. Click on the **Register** button at the end of the form.
+10. Go to the **Authentication** tab and select **Access tokens (used for implicit flows)** in the **Implicit grant and hybrid flows** section.
+11. Click on the **Save** button.
+12. Go to the **Overview** tab.
+13. Copy the **Application (client) ID** value to the `Client ID` field on Automatisch.
+14. In the same page, click on the **Add a certificate or secret** link.
+15. Click on the **New client secret** button.
+16. Fill in the **Description**, **Expires**, **Start**, and **End** fields.
+17. It is important to note that you need to reconnect your connection manually once the client secret expires.
+18. and click on the **Add** button.
+19. Copy the **Client Secret** value to the `Client Secret` field on Automatisch.
+20. Click **Submit** button on Automatisch.
+21. Congrats! Start using your new Microsoft Teams connection within the flows.

packages/docs/pages/public/favicons/microsoft-teams.svg

@@ -0,0 +1,64 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" width="1024"  height="1024" >
+      <defs>
+        <linearGradient id="plate-fill" x1="-.2" y1="-.2" x2=".8" y2=".8">
+          <stop offset="0" stop-color="#5a62c4"></stop>
+          <stop offset="1" stop-color="#3940ab"></stop>
+        </linearGradient>
+        <style>
+          .cls-1{fill:#5059c9}.cls-2{fill:#7b83eb}
+        </style>
+        <filter id="person-shadow" x="-50%" y="-50%" width="300%" height="300%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="25"></feGaussianBlur>
+          <feOffset dy="25"></feOffset>
+          <feComponentTransfer>
+            <feFuncA type="linear" slope=".25"></feFuncA>
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+
+
+        <filter id="back-plate-shadow" x="-50%" y="-50%" width="300%" height="300%">
+          
+	<feGaussianBlur in="SourceAlpha" stdDeviation="24"></feGaussianBlur>
+	  <feOffset dx="2" dy="24"></feOffset>
+          <feComponentTransfer>
+          <feFuncA type="linear" slope=".6"></feFuncA>
+
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+        <filter id="tee-shadow" x="-50%" y="-50%" width="250%" height="250%">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="12"></feGaussianBlur>
+          <feOffset dx="10" dy="20"></feOffset>
+          <feComponentTransfer>
+            <feFuncA type="linear" slope=".2"></feFuncA>
+          </feComponentTransfer>
+          <feMerge>
+            <feMergeNode></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+
+       
+
+        <clipPath id="back-plate-clip">
+          <path d="M684 432H512v-49.143A112 112 0 1 0 416 272a111.556 111.556 0 0 0 10.785 48H160a32.094 32.094 0 0 0-32 32v320a32.094 32.094 0 0 0 32 32h178.67c15.236 90.8 94.2 160 189.33 160 106.039 0 192-85.961 192-192V468a36 36 0 0 0-36-36z" fill="#fff"></path>
+        </clipPath>
+      </defs>
+      <g id="small_person" filter="url(#person-shadow)">
+        <path id="Body" class="cls-1" d="M692 432h168a36 36 0 0 1 36 36v164a120 120 0 0 1-120 120 120 120 0 0 1-120-120V468a36 36 0 0 1 36-36z"></path>
+        <circle id="Head" class="cls-1" cx="776" cy="304" r="80"></circle>
+      </g>
+      <g id="Large_Person" filter="url(#person-shadow)">
+        <path id="Body-2" data-name="Body" class="cls-2" d="M372 432h312a36 36 0 0 1 36 36v204a192 192 0 0 1-192 192 192 192 0 0 1-192-192V468a36 36 0 0 1 36-36z"></path>
+        <circle id="Head-2" data-name="Head" class="cls-2" cx="528" cy="272" r="112"></circle>
+      </g>
+      <rect id="Back_Plate" x="128" y="320" width="384" height="384" rx="32" ry="32" filter="url(#back-plate-shadow)" clip-path="url(#back-plate-clip)" fill="url(#plate-fill)"></rect>
+      <path id="Letter_T" d="M399.365 445.855h-60.293v164.2h-38.418v-164.2h-60.02V414h158.73z" filter="url(#tee-shadow)" fill="#fff"></path>
+    </svg>