{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/web-uis/redirect-overview/","matchPath":"","result":{"data":{"markdownRemark":{"html":"<h1 style=\"position:relative;\"><a href=\"#redirect-integration-legacy\" aria-label=\"redirect integration legacy permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"redirect-integration-legacy\"></div>Redirect Integration (Legacy)</h1>\n<p>This style of integration involves sending the user to the Tilia flow via a full page navigation from your domain to Tilia’s. </p>\n<p>The diagram below illustrates the flow of information within a redirect integration. </p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 790px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 82.89473684210526%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAAA7DAAAOwwHHb6hkAAABhUlEQVQ4y53T224CMQwE0P3/L0QCgehyWy7lvsACbQ9xSRGifagfwpB4xmMnWywWi8//RjGdTv2cz+ePe1wulwDX69UaR3AQgEgAisFgsN/vt9ttWZbw4XBYr9dvKQDZo9Go2+1mg8fjUWa/33daLJfLqqrG47Ek/+mdTqf3FHVdy95sNtwpEGRlV6vVbDZTpqBUp6ACE+ICs2mayH70nJ3r5dazOrElG6YCBL9KMRwOwzOVXDykf8hAruAMZqzVarXb7Wj+L3IQshBjujBCs6DyaPsFOTpvUhgSjsEsUjyRX/Q8n8/dgXUymRivto2QCrJN2dcUzMdonntWkyUZzna7HSYJq5m5WNc5TNHpdGz+2vMjFix4J4ROKYBv24pACgIxJ9iTcEn8AzECQIIRyqGFfyP7Hy/ZLlpuIYRiPGHEgy3v8dyzkWZyth2lYlq6dQVW44zMIozFc2dVqlF5uoYMeGeRzWcYJGTTqcwCx33Gl0SYCk54i5FS7PV6CPmr8nLiq/oC3iDVQ0tg+UcAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"General Redirect Flow\"\n        title=\"General Redirect Flow\"\n        src=\"/docs/static/eeb3aea0f27290b4d41760550e8942cd/2e237/redirect-flow.png\"\n        srcset=\"/docs/static/eeb3aea0f27290b4d41760550e8942cd/d4770/redirect-flow.png 228w,\n/docs/static/eeb3aea0f27290b4d41760550e8942cd/379c3/redirect-flow.png 455w,\n/docs/static/eeb3aea0f27290b4d41760550e8942cd/2e237/redirect-flow.png 790w\"\n        sizes=\"(max-width: 790px) 100vw, 790px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2 style=\"position:relative;\"><a href=\"#to-integrate-using-the-redirect-method\" aria-label=\"to integrate using the redirect method permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"to-integrate-using-the-redirect-method\"></div>To integrate using the redirect method</h2>\n<p>Redirect integration involves the following steps:</p>\n<p><a href=\"#step-1-user-authorization\">Step 1: User authorization</a></p>\n<p><a href=\"#step-2-create-the-flow-link\">Step 2: Create the flow link</a></p>\n<p><a href=\"#step-3-handle-the-flow-result\">Step 3: Handle the flow result</a></p>\n<p>The rest of this document walks you through the basics of integrating a flow using the redirect method. </p>\n<h3 style=\"position:relative;\"><a href=\"#step-1-user-authorization\" aria-label=\"step 1 user authorization permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"step-1-user-authorization\"></div>Step 1: User authorization</h3>\n<p>All flows start with an OAuth2 authorization of the end-user, passing an <code class=\"language-text\">account_id</code>. The response will include a payload that contains a redirect URL with a generated nonce that allows the user to interact with the Tilia UIs. </p>\n<p>Creating the nonce requires an Access Token with the scope <code class=\"language-text\">write_user_tokens</code>. </p>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"92730239207280840000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`curl --location --request POST https://auth.tilia-inc.com/authorize/user \\\\\n--header 'Authorization: Bearer <Access_Token>' \\\\\n--header 'Content-Type: application/json' \\\\`, `92730239207280840000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-92730239207280840000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">curl --location --request POST https://auth.tilia-inc.com/authorize/user \\\n--header 'Authorization: Bearer &lt;Access_Token>' \\\n--header 'Content-Type: application/json' \\</code></pre></div>\n      </div>\n<h4 style=\"position:relative;\"><a href=\"#request-body\" aria-label=\"request body permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"request-body\"></div>Request body</h4>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"65652112555992950000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`{\n\t&quot;account_id&quot;: &quot;<tilia_account_id>&quot;\n}`, `65652112555992950000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-65652112555992950000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n\t<span class=\"token property\">\"account_id\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"&lt;tilia_account_id>\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n      </div>\n<h4 style=\"position:relative;\"><a href=\"#sample-response\" aria-label=\"sample response permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"sample-response\"></div>Sample response</h4>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"36077297905609806000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`{\n    &quot;status&quot;: &quot;Success&quot;,\n    &quot;message&quot;: [],\n    &quot;codes&quot;: [],\n    &quot;payload&quot;: {\n        &quot;redirect&quot;: &quot;https://web.tilia-inc.com/ui/appauth/ed8ff1e9-9256-4205-918a-b9ca23ec00ec&quot;\n    }\n}`, `36077297905609806000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-36077297905609806000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"json\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">\"status\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"Success\"</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"message\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"codes\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token property\">\"payload\"</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">\"redirect\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"https://web.tilia-inc.com/ui/appauth/ed8ff1e9-9256-4205-918a-b9ca23ec00ec\"</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n      </div>\n<p>The response includes a redirect URL which is used in the next step. </p>\n<div class=\"attention\">The nonce is valid for 24 hours. We recommend generating a nonce immediately before sending the user to a Tilia UI.</div>\n<h3 style=\"position:relative;\"><a href=\"#step-2-create-the-flow-link\" aria-label=\"step 2 create the flow link permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"step-2-create-the-flow-link\"></div>Step 2: Create the flow link</h3>\n<p>Next, you will create a link for the user to access the flow. </p>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"82964183397650240000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`<a href=”<redirect.url>?flow=<flow.name>&returnurl=<your.return.url?your.parameters>”>Click here to start the flow</a>&quot;`, `82964183397650240000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-82964183397650240000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span>”&lt;redirect.url</span><span class=\"token punctuation\">></span></span>?flow=<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>flow.name</span><span class=\"token punctuation\">></span></span>&amp;returnurl=<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>your.return.url?your.parameters</span><span class=\"token punctuation\">></span></span>”>Click here to start the flow<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span>\"</code></pre></div>\n      </div>\n<p>Where: </p>\n<ul>\n<li>\n<code class=\"language-text\">&lt;redirect.url></code>\n is the URL returned in step 1. \n</li>\n<li>\n<code class=\"language-text\">&lt;flow.name></code>\n is the Tilia flow name. Must be one of the following \n<code class=\"language-text\">tos</code>\n, \n<code class=\"language-text\">kyc</code>\n, \n<code class=\"language-text\">purchase</code>\n, \n<code class=\"language-text\">payout</code>\n.\n</li>\n<li>\n<code class=\"language-text\">&lt;your.return.url></code>\n is the URL you wish the user to be directed to after completing the flow. Must be a fully qualified URL. You can optionally include any of your own query string parameters. \n</li>\n</ul>\n<h3 style=\"position:relative;\"><a href=\"#step-3-handle-the-flow-result\" aria-label=\"step 3 handle the flow result permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><div class=\"hidden-anchor\" id=\"step-3-handle-the-flow-result\"></div>Step 3: Handle the flow result</h3>\n<p>Upon completing the flow, the user is redirected to <code class=\"language-text\">&lt;your.return.url></code>, with flow-specific parameters appended.</p>\n<div class=\"code-wrapper\">\n        <div class=\"gatsby-code-button-container\"\n             data-toaster-id=\"47858869411808570000\"\n             data-toaster-duration=\"1500\"\n             onClick=\"copyCodeToClipboard(`<your.return.url?your.parameters>&<tilia.flow.parameters>`, `47858869411808570000`)\"\n        >\n          <div class=\"gatsby-code-button\" title=\"Copy the code snippet\">Copy</div>\n          <div class=\"done-indicator done-indicator-47858869411808570000\">Copied</div>\n        </div>\n        <div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>your.return.url?your.parameters</span><span class=\"token punctuation\">></span></span>&amp;<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>tilia.flow.parameters</span><span class=\"token punctuation\">></span></span></code></pre></div>\n      </div>\n<p>Refer to the flow-specific documentation for details on the parameters returned.</p>","headings":[{"value":"Redirect Integration (Legacy)","depth":1},{"value":"To integrate using the redirect method","depth":2},{"value":"Step 1: User authorization","depth":3},{"value":"Request body","depth":4},{"value":"Sample response","depth":4},{"value":"Step 2: Create the flow link","depth":3},{"value":"Step 3: Handle the flow result","depth":3}]},"contentItem":{"data":{"lastModified":"2023-06-27T21:19:02.000Z","enableToc":false,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":true,"disableLastModified":false,"tocMaxDepth":2}},"pageContext":{"matchPath":"","id":"4503977e-0acf-5a7f-a713-379fce3a5016__redocly content/web-uis/redirect-overview/","seo":{"title":"Redirect Integration (Legacy)","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null,"siteUrl":null},"pageId":"web-uis/redirect-overview.md","pageBaseUrl":"/web-uis/redirect-overview","type":"markdown","toc":{"enable":false,"maxDepth":2,"headings":[{"depth":1,"value":"Redirect Integration (Legacy)","id":"redirect-integration-legacy"},{"depth":2,"value":"To integrate using the redirect method","id":"to-integrate-using-the-redirect-method"},{"depth":3,"value":"Step 1: User authorization","id":"step-1-user-authorization"},{"depth":4,"value":"Request body","id":"request-body"},{"depth":4,"value":"Sample response","id":"sample-response"},{"depth":3,"value":"Step 2: Create the flow link","id":"step-2-create-the-flow-link"},{"depth":3,"value":"Step 3: Handle the flow result","id":"step-3-handle-the-flow-result"}]},"data":{"title":"","enableToc":false},"catalogInfo":null,"link":"/web-uis/redirect-overview/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3240152602","3743992808","561138138"]}