From 41e9f32e1ba03e58cdae04b2df0c1b46a762cd45 Mon Sep 17 00:00:00 2001 From: Zeynep Nur Temel Date: Sat, 18 Mar 2023 13:41:18 +0300 Subject: [PATCH 1/6] feat: implement Spotify connection --- .../src/apps/spotify/assets/favicon.svg | 6 +++ .../apps/spotify/auth/generate-auth-url.ts | 27 ++++++++++ .../backend/src/apps/spotify/auth/index.ts | 45 ++++++++++++++++ .../apps/spotify/auth/is-still-verified.ts | 9 ++++ .../apps/spotify/auth/verify-credentials.ts | 53 +++++++++++++++++++ .../apps/spotify/common/add-auth-header.ts | 12 +++++ .../apps/spotify/common/get-current-user.ts | 10 ++++ .../backend/src/apps/spotify/common/scopes.ts | 13 +++++ packages/backend/src/apps/spotify/index.ts | 16 ++++++ 9 files changed, 191 insertions(+) create mode 100644 packages/backend/src/apps/spotify/assets/favicon.svg create mode 100644 packages/backend/src/apps/spotify/auth/generate-auth-url.ts create mode 100644 packages/backend/src/apps/spotify/auth/index.ts create mode 100644 packages/backend/src/apps/spotify/auth/is-still-verified.ts create mode 100644 packages/backend/src/apps/spotify/auth/verify-credentials.ts create mode 100644 packages/backend/src/apps/spotify/common/add-auth-header.ts create mode 100644 packages/backend/src/apps/spotify/common/get-current-user.ts create mode 100644 packages/backend/src/apps/spotify/common/scopes.ts create mode 100644 packages/backend/src/apps/spotify/index.ts diff --git a/packages/backend/src/apps/spotify/assets/favicon.svg b/packages/backend/src/apps/spotify/assets/favicon.svg new file mode 100644 index 00000000..f84a03c6 --- /dev/null +++ b/packages/backend/src/apps/spotify/assets/favicon.svg @@ -0,0 +1,6 @@ + + Spotify + + + + \ No newline at end of file diff --git a/packages/backend/src/apps/spotify/auth/generate-auth-url.ts b/packages/backend/src/apps/spotify/auth/generate-auth-url.ts new file mode 100644 index 00000000..022e063e --- /dev/null +++ b/packages/backend/src/apps/spotify/auth/generate-auth-url.ts @@ -0,0 +1,27 @@ +import { IField, IGlobalVariable } from '@automatisch/types'; +import { URLSearchParams } from 'url'; +import scopes from '../common/scopes'; + +export default async function generateAuthUrl($: IGlobalVariable) { + const oauthRedirectUrlField = $.app.auth.fields.find( + (field: IField) => field.key == 'oAuthRedirectUrl' + ); + const redirectUri = oauthRedirectUrlField.value as string; + const state = Math.random().toString() as string; + + const searchParams = new URLSearchParams({ + client_id: $.auth.data.clientId as string, + client_secret: $.auth.data.clientSecret as string, + grant_type: 'client_credentials', + redirect_uri: redirectUri, + response_type: 'code', + scope: scopes.join(','), + state: state, + }); + + const url = `https://accounts.spotify.com/authorize?${searchParams}`; + + await $.auth.set({ + url, + }); +} diff --git a/packages/backend/src/apps/spotify/auth/index.ts b/packages/backend/src/apps/spotify/auth/index.ts new file mode 100644 index 00000000..e1a93927 --- /dev/null +++ b/packages/backend/src/apps/spotify/auth/index.ts @@ -0,0 +1,45 @@ +import generateAuthUrl from './generate-auth-url'; +import verifyCredentials from './verify-credentials'; +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/spotify/connections/add', + placeholder: null, + description: + 'When asked to input an OAuth callback or redirect URL in Spotify OAuth, 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, +}; diff --git a/packages/backend/src/apps/spotify/auth/is-still-verified.ts b/packages/backend/src/apps/spotify/auth/is-still-verified.ts new file mode 100644 index 00000000..befb7694 --- /dev/null +++ b/packages/backend/src/apps/spotify/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 user = await getCurrentUser($); + return !!user.id; +}; + +export default isStillVerified; diff --git a/packages/backend/src/apps/spotify/auth/verify-credentials.ts b/packages/backend/src/apps/spotify/auth/verify-credentials.ts new file mode 100644 index 00000000..079c472d --- /dev/null +++ b/packages/backend/src/apps/spotify/auth/verify-credentials.ts @@ -0,0 +1,53 @@ +import { IGlobalVariable } from '@automatisch/types'; +import getCurrentUser from '../common/get-current-user'; +import { URLSearchParams } from 'url'; + +const verifyCredentials = async ($: IGlobalVariable) => { + const oauthRedirectUrlField = $.app.auth.fields.find( + (field) => field.key == 'oAuthRedirectUrl' + ); + const redirectUri = oauthRedirectUrlField.value as string; + const params = new URLSearchParams({ + code: $.auth.data.code as string, + redirect_uri: redirectUri, + grant_type: 'authorization_code', + }); + + const headers = { + Authorization: `Basic ${Buffer.from( + $.auth.data.clientId + ':' + $.auth.data.clientSecret + ).toString('base64')}`, + 'Content-Type': 'application/x-www-form-urlencoded', + }; + + const response = await $.http.post( + 'https://accounts.spotify.com/api/token', + params.toString(), + { headers } + ); + + const { + access_token: accessToken, + refresh_token: refreshToken, + expires_in: expiresIn, + scope: scope, + token_type: tokenType, + } = response.data; + + await $.auth.set({ + accessToken, + refreshToken, + expiresIn, + scope, + tokenType, + }); + + const user = await getCurrentUser($); + + await $.auth.set({ + userId: user.id, + screenName: user.display_name, + }); +}; + +export default verifyCredentials; diff --git a/packages/backend/src/apps/spotify/common/add-auth-header.ts b/packages/backend/src/apps/spotify/common/add-auth-header.ts new file mode 100644 index 00000000..d650c915 --- /dev/null +++ b/packages/backend/src/apps/spotify/common/add-auth-header.ts @@ -0,0 +1,12 @@ +import { TBeforeRequest } from '@automatisch/types'; + +const addAuthHeader: TBeforeRequest = ($, requestConfig) => { + if ($.auth.data?.accessToken) { + const authorizationHeader = `Bearer ${$.auth.data.accessToken}`; + requestConfig.headers.Authorization = authorizationHeader; + } + + return requestConfig; +}; + +export default addAuthHeader; diff --git a/packages/backend/src/apps/spotify/common/get-current-user.ts b/packages/backend/src/apps/spotify/common/get-current-user.ts new file mode 100644 index 00000000..0ccdf282 --- /dev/null +++ b/packages/backend/src/apps/spotify/common/get-current-user.ts @@ -0,0 +1,10 @@ +import { IGlobalVariable, IJSONObject } from '@automatisch/types'; + +const getCurrentUser = async ($: IGlobalVariable): Promise => { + const response = await $.http.get('/v1/me'); + const currentUser = response.data; + + return currentUser; +}; + +export default getCurrentUser; diff --git a/packages/backend/src/apps/spotify/common/scopes.ts b/packages/backend/src/apps/spotify/common/scopes.ts new file mode 100644 index 00000000..66360c40 --- /dev/null +++ b/packages/backend/src/apps/spotify/common/scopes.ts @@ -0,0 +1,13 @@ +const scopes = [ + 'user-follow-read', + 'playlist-read-private', + 'playlist-read-collaborative', + 'user-library-read', + 'playlist-modify-public', + 'playlist-modify-private', + 'user-library-modify', + 'user-follow-modify', + 'user-follow-read', +]; + +export default scopes; diff --git a/packages/backend/src/apps/spotify/index.ts b/packages/backend/src/apps/spotify/index.ts new file mode 100644 index 00000000..c09a59e9 --- /dev/null +++ b/packages/backend/src/apps/spotify/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: 'Spotify', + key: 'spotify', + iconUrl: '{BASE_URL}/apps/spotify/assets/favicon.svg', + authDocUrl: 'https://automatisch.io/docs/apps/spotify/connection', + supportsConnections: true, + baseUrl: 'https://spotify.com', + apiBaseUrl: 'https://api.spotify.com', + primaryColor: '000000', + beforeRequest: [addAuthHeader], + auth, +}); From 56243aa07651b0fedc7692263bf8fc24f14abcff Mon Sep 17 00:00:00 2001 From: Zeynep Nur Temel Date: Sat, 18 Mar 2023 19:18:16 +0300 Subject: [PATCH 2/6] feat: implement create playlist action for spotify --- .../spotify/actions/create-playlist/index.ts | 57 +++++++++++++++++++ .../backend/src/apps/spotify/actions/index.ts | 3 + packages/backend/src/apps/spotify/index.d.ts | 0 packages/backend/src/apps/spotify/index.ts | 2 + 4 files changed, 62 insertions(+) create mode 100644 packages/backend/src/apps/spotify/actions/create-playlist/index.ts create mode 100644 packages/backend/src/apps/spotify/actions/index.ts create mode 100644 packages/backend/src/apps/spotify/index.d.ts diff --git a/packages/backend/src/apps/spotify/actions/create-playlist/index.ts b/packages/backend/src/apps/spotify/actions/create-playlist/index.ts new file mode 100644 index 00000000..220f0018 --- /dev/null +++ b/packages/backend/src/apps/spotify/actions/create-playlist/index.ts @@ -0,0 +1,57 @@ +import defineAction from '../../../../helpers/define-action'; + +export default defineAction({ + name: 'Create playlist', + key: 'cratePlaylist', + description: `Create playlist on user's account.`, + arguments: [ + { + label: 'Playlist name', + key: 'playlistName', + type: 'string' as const, + required: true, + description: 'Playlist name', + variables: true, + }, + { + label: 'Playlist visibility', + key: 'playlistVisibility', + type: 'dropdown' as const, + required: true, + description: 'Playlist visibility', + variables: true, + options: [ + { label: 'public', value: 'Public' }, + { label: 'private', value: 'Private' }, + ], + }, + { + label: 'Playlist description', + key: 'playlistDescription', + type: 'string' as const, + required: false, + description: 'Playlist description', + variables: true, + }, + ], + + async run($) { + const playlistName = $.step.parameters.playlistName as string; + const playlistDescription = $.step.parameters.playlistDescription as string; + const playlistVisibility = + $.step.parameters.playlistVisibility === 'public' + ? true + : (false as boolean); + + const response = await $.http.post( + `v1/users/${$.auth.data.userId}/playlists`, + { + name: playlistName, + public: playlistVisibility, + description: playlistDescription, + } + ); + + $.setActionItem({ raw: response.data }); + }, +}); diff --git a/packages/backend/src/apps/spotify/actions/index.ts b/packages/backend/src/apps/spotify/actions/index.ts new file mode 100644 index 00000000..b6f07255 --- /dev/null +++ b/packages/backend/src/apps/spotify/actions/index.ts @@ -0,0 +1,3 @@ +import cratePlaylist from './create-playlist'; + +export default [cratePlaylist]; diff --git a/packages/backend/src/apps/spotify/index.d.ts b/packages/backend/src/apps/spotify/index.d.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/backend/src/apps/spotify/index.ts b/packages/backend/src/apps/spotify/index.ts index c09a59e9..e4b335de 100644 --- a/packages/backend/src/apps/spotify/index.ts +++ b/packages/backend/src/apps/spotify/index.ts @@ -1,5 +1,6 @@ import defineApp from '../../helpers/define-app'; import addAuthHeader from './common/add-auth-header'; +import actions from './actions'; import auth from './auth'; export default defineApp({ @@ -13,4 +14,5 @@ export default defineApp({ primaryColor: '000000', beforeRequest: [addAuthHeader], auth, + actions, }); From ed87df212ff54e1cec75a3afe8b56c13e9d34775 Mon Sep 17 00:00:00 2001 From: Zeynep Nur Temel Date: Sun, 19 Mar 2023 23:04:55 +0300 Subject: [PATCH 3/6] feat: add refresh token for spotify --- .../backend/src/apps/spotify/auth/index.ts | 2 ++ .../src/apps/spotify/auth/refresh-token.ts | 30 +++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 packages/backend/src/apps/spotify/auth/refresh-token.ts diff --git a/packages/backend/src/apps/spotify/auth/index.ts b/packages/backend/src/apps/spotify/auth/index.ts index e1a93927..289e4a72 100644 --- a/packages/backend/src/apps/spotify/auth/index.ts +++ b/packages/backend/src/apps/spotify/auth/index.ts @@ -1,6 +1,7 @@ import generateAuthUrl from './generate-auth-url'; import verifyCredentials from './verify-credentials'; import isStillVerified from './is-still-verified'; +import refreshToken from './refresh-token'; export default { fields: [ @@ -39,6 +40,7 @@ export default { clickToCopy: false, }, ], + refreshToken, generateAuthUrl, verifyCredentials, isStillVerified, diff --git a/packages/backend/src/apps/spotify/auth/refresh-token.ts b/packages/backend/src/apps/spotify/auth/refresh-token.ts new file mode 100644 index 00000000..11824599 --- /dev/null +++ b/packages/backend/src/apps/spotify/auth/refresh-token.ts @@ -0,0 +1,30 @@ +import { IGlobalVariable } from '@automatisch/types'; +import qs from 'qs'; + +const refreshToken = async ($: IGlobalVariable) => { + const stringifiedBody = qs.stringify({ + refresh_token: $.auth.data.refreshToken as string, + grant_type: 'refresh_token', + }); + + const headers = { + Authorization: `Basic ${Buffer.from( + $.auth.data.clientId + ':' + $.auth.data.clientSecret + ).toString('base64')}`, + 'Content-Type': 'application/x-www-form-urlencoded', + }; + + const response = await $.http.post( + 'https://accounts.spotify.com/api/token', + stringifiedBody, + { headers } + ); + + await $.auth.set({ + accessToken: response.data.access_token, + expiresIn: response.data.expires_in, + tokenType: response.data.token_type, + }); +}; + +export default refreshToken; From 8acd7b03edc797c9bcf979dea1ac6e1960934ec2 Mon Sep 17 00:00:00 2001 From: Zeynep Nur Temel Date: Sun, 19 Mar 2023 23:48:45 +0300 Subject: [PATCH 4/6] docs: add spotify connection and actions --- packages/docs/pages/.vitepress/config.js | 9 +++++++++ packages/docs/pages/apps/spotify/actions.md | 12 +++++++++++ .../docs/pages/apps/spotify/connection.md | 20 +++++++++++++++++++ packages/docs/pages/guide/available-apps.md | 1 + .../docs/pages/public/favicons/spotify.svg | 6 ++++++ 5 files changed, 48 insertions(+) create mode 100644 packages/docs/pages/apps/spotify/actions.md create mode 100644 packages/docs/pages/apps/spotify/connection.md create mode 100644 packages/docs/pages/public/favicons/spotify.svg diff --git a/packages/docs/pages/.vitepress/config.js b/packages/docs/pages/.vitepress/config.js index 59f53567..e2eeef3e 100644 --- a/packages/docs/pages/.vitepress/config.js +++ b/packages/docs/pages/.vitepress/config.js @@ -161,6 +161,15 @@ export default defineConfig({ { text: 'Connection', link: '/apps/smtp/connection' }, ], }, + { + text: 'Spotify', + collapsible: true, + collapsed: true, + items: [ + { text: 'Actions', link: '/apps/spotify/actions' }, + { text: 'Connection', link: '/apps/spotify/connection' }, + ], + }, { text: 'Stripe', collapsible: true, diff --git a/packages/docs/pages/apps/spotify/actions.md b/packages/docs/pages/apps/spotify/actions.md new file mode 100644 index 00000000..7f1bd354 --- /dev/null +++ b/packages/docs/pages/apps/spotify/actions.md @@ -0,0 +1,12 @@ +--- +favicon: /favicons/spotify.svg +items: + - name: Create playlist + desc: Create a playlist on user's account +--- + + + + diff --git a/packages/docs/pages/apps/spotify/connection.md b/packages/docs/pages/apps/spotify/connection.md new file mode 100644 index 00000000..dad852f9 --- /dev/null +++ b/packages/docs/pages/apps/spotify/connection.md @@ -0,0 +1,20 @@ +# Spotify + +:::info +This page explains the steps you need to follow to set up the Spotify connection in Automatisch. If any of the steps are outdated, please let us know! +::: + +1. Go to the [link](https://developer.spotify.com/dashboard/applications) to **create an app** + on Spotify API. +1. Click login button if you're not logged in. +1. Click **Create an app** button. +1. Enter **App name** and **App description**. +1. Click on **Create App** button. +1. **Client ID** will be visible on the screen. +1. Click **Show Client Secret** button to see client secret. +1. Copy **Client ID** and **Client Secret** values and save them to use later. +1. Click **Edit settings** button. +1. Copy **OAuth Redirect URL** from Automatisch and add it in Redirect URLs. Don't forget to save it after adding it by clicking **Add** button! +1. Paste **Client ID** and **Client Secret** values you have saved earlier and paste them into Automatisch as **Client Id** and **Client Secret**, respectively. +1. Click **Submit** button on Automatisch. +1. Now, you can start using the Spotify connection with Automatisch. diff --git a/packages/docs/pages/guide/available-apps.md b/packages/docs/pages/guide/available-apps.md index 33b9bb2f..e6e9759d 100644 --- a/packages/docs/pages/guide/available-apps.md +++ b/packages/docs/pages/guide/available-apps.md @@ -20,6 +20,7 @@ Following integrations are currently supported by Automatisch. - [SignalWire](/apps/signalwire/triggers) - [Slack](/apps/slack/actions) - [SMTP](/apps/smtp/actions) +- [Spotify](/apps/spotify/actions) - [Stripe](/apps/stripe/triggers) - [Telegram](/apps/telegram-bot/actions) - [Todoist](/apps/todoist/triggers) diff --git a/packages/docs/pages/public/favicons/spotify.svg b/packages/docs/pages/public/favicons/spotify.svg new file mode 100644 index 00000000..f84a03c6 --- /dev/null +++ b/packages/docs/pages/public/favicons/spotify.svg @@ -0,0 +1,6 @@ + + Spotify + + + + \ No newline at end of file From 6d3bec8518e77a6989da329f1b796997c00b6e2a Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 22 Mar 2023 20:38:27 +0000 Subject: [PATCH 5/6] fix(spotify): do not override auth header on refresh token --- .../src/apps/spotify/auth/refresh-token.ts | 31 ++++++++++--------- .../apps/spotify/common/add-auth-header.ts | 2 ++ 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/backend/src/apps/spotify/auth/refresh-token.ts b/packages/backend/src/apps/spotify/auth/refresh-token.ts index 11824599..dc20820a 100644 --- a/packages/backend/src/apps/spotify/auth/refresh-token.ts +++ b/packages/backend/src/apps/spotify/auth/refresh-token.ts @@ -1,23 +1,24 @@ import { IGlobalVariable } from '@automatisch/types'; -import qs from 'qs'; const refreshToken = async ($: IGlobalVariable) => { - const stringifiedBody = qs.stringify({ - refresh_token: $.auth.data.refreshToken as string, - grant_type: 'refresh_token', - }); - - const headers = { - Authorization: `Basic ${Buffer.from( - $.auth.data.clientId + ':' + $.auth.data.clientSecret - ).toString('base64')}`, - 'Content-Type': 'application/x-www-form-urlencoded', - }; - const response = await $.http.post( 'https://accounts.spotify.com/api/token', - stringifiedBody, - { headers } + null, + { + headers: { + Authorization: `Basic ${Buffer.from( + $.auth.data.clientId + ':' + $.auth.data.clientSecret + ).toString('base64')}`, + 'Content-Type': 'application/x-www-form-urlencoded', + }, + params: { + refresh_token: $.auth.data.refreshToken as string, + grant_type: 'refresh_token', + }, + additionalProperties: { + skipAddingAuthHeader: true + } + } ); await $.auth.set({ diff --git a/packages/backend/src/apps/spotify/common/add-auth-header.ts b/packages/backend/src/apps/spotify/common/add-auth-header.ts index d650c915..d16f394f 100644 --- a/packages/backend/src/apps/spotify/common/add-auth-header.ts +++ b/packages/backend/src/apps/spotify/common/add-auth-header.ts @@ -1,6 +1,8 @@ import { TBeforeRequest } from '@automatisch/types'; const addAuthHeader: TBeforeRequest = ($, requestConfig) => { + if (requestConfig.additionalProperties?.skipAddingAuthHeader) return requestConfig; + if ($.auth.data?.accessToken) { const authorizationHeader = `Bearer ${$.auth.data.accessToken}`; requestConfig.headers.Authorization = authorizationHeader; From af58ef724402d98ed53fa37257da5c868007e05b Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Wed, 22 Mar 2023 20:39:26 +0000 Subject: [PATCH 6/6] fix(spotify): correct create playlist action key --- .../backend/src/apps/spotify/actions/create-playlist/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/backend/src/apps/spotify/actions/create-playlist/index.ts b/packages/backend/src/apps/spotify/actions/create-playlist/index.ts index 220f0018..51dbee13 100644 --- a/packages/backend/src/apps/spotify/actions/create-playlist/index.ts +++ b/packages/backend/src/apps/spotify/actions/create-playlist/index.ts @@ -2,7 +2,7 @@ import defineAction from '../../../../helpers/define-action'; export default defineAction({ name: 'Create playlist', - key: 'cratePlaylist', + key: 'createPlaylist', description: `Create playlist on user's account.`, arguments: [ {