https://embedded-workflow-builder.netlify.app/assets/js/beaa4a23.b622b567.js

1"use strict";(self.webpackChunkembedded_workflow_builder_docs=self.webpackChunkembedded_workflow_builder_docs||[]).push([["8475"],{53559(e,t,n){n.r(t),n.d(t,{metadata:()=>o,default:()=>u,frontMatter:()=>r,contentTitle:()=>s,toc:()=>l,assets:()=>c});var o=JSON.parse('{"id":"oauth2","title":"OAuth 2.0 Connections","description":"Connect to an app that uses OAuth 2.0","source":"@site/docs/oauth2.md","sourceDirName":".","slug":"/oauth2","permalink":"/oauth2","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"OAuth 2.0 Connections","description":"Connect to an app that uses OAuth 2.0"},"sidebar":"docs","previous":{"title":"Enabling Workflows","permalink":"/enabling"},"next":{"title":"Error Handling","permalink":"/error-handling"}}'),i=n(74848),a=n(28453);let r={title:"OAuth 2.0 Connections",description:"Connect to an app that uses OAuth 2.0"},s,c={},l=[{value:"What is OAuth 2.0?",id:"what-is-oauth-20",level:2},{value:"OAuth 2.0 grant types",id:"oauth-20-grant-types",level:2},{value:"OAuth 2.0 authorization code",id:"oauth-20-authorization-code",level:3},{value:"Configuring your own OAuth 2.0 app",id:"configuring-your-own-oauth-20-app",level:4},{value:"OAuth 2.0 client credentials",id:"oauth-20-client-credentials",level:3}];function h(e){let t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",ol:"ol",p:"p",strong:"strong",...(0,a.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h2,{id:"what-is-oauth-20",children:"What is OAuth 2.0?"}),"\n",(0,i.jsxs)(t.p,{children:[(0,i.jsx)(t.a,{href:"https://oauth.net/2/",children:"OAuth 2.0"})," is a special type of connection that allows you to grant Acme Inc access to your data in third-party applications.\nRather than giving Acme Inc your username and password for a third-party application, you can use OAuth 2.0 to authorize Acme Inc to access your data in that application.\nThis is useful for connecting to applications like ",(0,i.jsx)(t.a,{href:"/connectors/salesforce",children:"Salesforce"}),", ",(0,i.jsx)(t.a,{href:"/connectors/hubspot",children:"Hubspot"}),", ",(0,i.jsx)(t.a,{href:"/connectors/slack",children:"Slack"}),", and many others that support OAuth 2.0."]}),"\n",(0,i.jsx)(t.p,{children:'You\'ve probably come across OAuth 2.0 at some point - any time you click "Log in with my Google Account" or "Connect my Dropbox" on a website, that website leverages OAuth 2.0 to fetch information (your email address, files, etc.) on your behalf.\nYou don\'t enter your Google or Dropbox credentials into the website.\nInstead, you enter your credentials on a Google, Dropbox, etc. page and the OAuth provider generates a unique code that grants the website a set of your permissions.'}),"\n",(0,i.jsx)(t.h2,{id:"oauth-20-grant-types",children:"OAuth 2.0 grant types"}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.a,{href:"https://oauth.net/2/",children:"OAuth 2.0 framework"})," supports several ",(0,i.jsx)(t.strong,{children:"grant types"}),", two of which are common in Workflows:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsxs)(t.li,{children:["Most common is the ",(0,i.jsx)(t.a,{href:"#oauth-20-authorization-code",children:"Authorization Code grant type"}),'.\nWhen you configure a connector, you click a "Connect to (App Name)" button.\nAfter logging in to the external application and consenting to give Acme Inc permissions to your account, you\'ll return here with an ',(0,i.jsx)(t.strong,{children:"auth code"})," which we'll use to access your data."]}),"\n",(0,i.jsxs)(t.li,{children:["The ",(0,i.jsx)(t.a,{href:"#oauth-20-client-credentials",children:"Client Credentials grant type"})," is also common in Workflows.\nSometimes called the ",(0,i.jsx)(t.strong,{children:"machine to machine"})," (M2M) grant type, this process is a little more involved.\nTypically, you log in to your third-party application, generate a ",(0,i.jsx)(t.strong,{children:"Client ID"})," / ",(0,i.jsx)(t.strong,{children:"Client Secret"})," key pair, and enter your key into your Workflow.\nWe exchange that key pair for an access token for the third-party application."]}),"\n"]}),"\n",(0,i.jsx)(t.h3,{id:"oauth-20-authorization-code",children:"OAuth 2.0 authorization code"}),"\n",(0,i.jsx)(t.p,{children:"At a high level, the OAuth 2.0 Authorization Code flow works like this:"}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:'You will click a "Connect to (App Name)" button in your Workflow.\nWe send you to the third-party application\'s "consent screen" with our client ID and a list of permissions we want to access. The client ID is a unique identifier for Acme Inc in the third-party application\u2014it\'s how the third-party application knows to say "do you want to give Acme Inc access to your data?".'}),"\n",(0,i.jsx)(t.li,{children:"You log in to the third-party application and consent to give us access to your data."}),"\n",(0,i.jsxs)(t.li,{children:["The third-party application redirects you back to Acme Inc with an ",(0,i.jsx)(t.strong,{children:"authorization code"}),"."]}

1),"\n",(0,i.jsxs)(t.li,{children:["We exchange the authorization code for an ",(0,i.jsx)(t.strong,{children:"access token"})," and a ",(0,i.jsx)(t.strong,{children:"refresh token"})," and use the access token to access your data in the third-party application."]}),"\n"]}),"\n",(0,i.jsx)(t.h4,{id:"configuring-your-own-oauth-20-app",children:"Configuring your own OAuth 2.0 app"}),"\n",(0,i.jsx)(t.p,{children:"We provide client ID and client secret values for many common OAuth 2.0 connectors.\nHowever, if you are prompted to enter a client ID and client secret, you can usually find these values in the third-party application's developer console or API settings."}),"\n",(0,i.jsxs)(t.p,{children:["When configuring your own OAuth 2.0 app, you will need to set the ",(0,i.jsx)(t.strong,{children:"redirect URI"})," (sometimes called a callback URL) to our OAuth 2.0 callback URL: ",(0,i.jsx)(t.code,{children:"https://oauth2.integrations.acme.com/callback"}),"."]}),"\n",(0,i.jsx)(t.h3,{id:"oauth-20-client-credentials",children:"OAuth 2.0 client credentials"}),"\n",(0,i.jsxs)(t.p,{children:["The OAuth 2.0 ",(0,i.jsx)(t.strong,{children:"Client Credentials"})," grant type is sometimes called the Machine-to-Machine (M2M) grant type, and allows your application to communicate with a third party directly."]}),"\n",(0,i.jsxs)(t.p,{children:["The ",(0,i.jsx)(t.strong,{children:"Client Credentials"})," flow is different from the ",(0,i.jsx)(t.a,{href:"#oauth-20-authorization-code",children:"Authorization Code"})," flow in a couple of key ways:"]}),"\n",(0,i.jsxs)(t.ol,{children:["\n",(0,i.jsx)(t.li,{children:"You will not walk through a consent screen in the third-party application.\nRather, you will log in to the third-party application and generate your own client ID / secret key pair, and explicitly grant permissions."}),"\n",(0,i.jsx)(t.li,{children:"Key pairs are generally not associated with a specific user.\nInstead, the key pairs have permissions to access certain resources in your account."}),"\n"]}),"\n",(0,i.jsxs)(t.p,{children:["To configure a client credentials connection, generate a ",(0,i.jsx)(t.strong,{children:"Client ID"})," and ",(0,i.jsx)(t.strong,{children:"Client Secret"})," in the third-party application's developer console or API settings, and enter those values into your Workflow."]})]})}function u(e={}){let{wrapper:t}={...(0,a.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},28453(e,t,n){n.d(t,{R:()=>r,x:()=>s});var o=n(96540);let i={},a=o.createContext(i);function r(e){let t=o.useContext(a);return o.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),o.createElement(a.Provider,{value:t},e.children)}}}]);