Building integrations to Typeforms OAuth APIs and Endpoints

Pathfix makes it extremely easy to connect and consume oauth based APIs and Endpoints, allowing you to offer your endusers quick integrations.

In this tutorial, we show you how you can connect to Typeform's endpoints and APIs with Pathfix in under 4 minutes. Pathfix is an OAuth tool that gets you connected to any provider with just a few lines of code. It handles the entire framework, token management system and servers, without needing SDKs, all ready to go.

Prerequisites

You will need the following to follow the tutorial:

  • Developer account with Typeform. You can access your here
  • Access/create your Pathfix account here
  • Access to your code base to implement

Add your App on Typeform

  • Access the Applications section in Typeform
  • Click on Developer Apps from the left nav bar
  • Click Register a new app and enter your app name, your app website
  • Add the following Pathfix generated Redirect URL: https://labs.pathfix.com/integrate/command

Add your application in Pathfix

Login to your Pathfix account here

  • Add your application by clicking “Add Application” and entering the name of your application (this is for your internal purpose and you can add as many applications as you want)
  • In the Integrations page, find the provider Typeform
  • You will need to enter the clientid and clientsecret provided by Typeform here. To get this, you will need to go into Typeform
  • Click on Save

Scopes

You can add or remove the scopes you would like to access from the edit screen. Here is the list of all the scopes that is supported by Typeform:

https://developer.typeform.com/get-started/scopes/

Testing the connection

Once saved, you can test the connection directly within Pathfix. To do this, you will need to click on Instructions -> Test connection

Click on the button “Integrate with Typeform” to authorize your connection and process with the authorization.

You can change the endpoint URLs and connect to different APIs offered by Typeform. Make sure you change the scopes to remove or add different access levels.

Implementing the integration

There are 2 simple, minimal code, steps to implementing the integration on your platform. As Pathfix is an open framework platform, this means you can offer any UI you choose, while Pathfix will handle the authorization and the API communication between the applications.

Step 1

  • This steps renders the button that will allow your users to click-to-authenticate
  • You can customize the button behavior by clicking on Configure
  • Copy the <head> code and paste it on the <head> of the page

Sample <head> code:

<script src="https://labs.pathfix.com/helper.js" data-user-id="Lanternly_end_user_id" id="pinc.helper" modules="popups,modals,oauth" data-public-key="1A78A4E2-86CC-4660-BF84-3E4B50B34808" ></script>
  • Copy the <body> code and paste it on the <body> section of your page where you want the button to render

Sample <body> code:

<div data-oauth-ui="list" ></div>

Step 2

  • This steps enables the communication/payload between applications
  • You can write either client-side or server-side code to send messages to your end user’s application. Copy the code and paste it to your desired code base.
  • You can choose between HTTP, JavaScript (JQUERY), Python, Nodejs, C# or PHP

Sample code (HTTP)

POST /oauth/method/typeform/call? user_id=Lanternly_end_user_id &public_key=1A78A4E2-86CC-4660-BF84-3E4B50B34808 &private_key=88BAA3A4-C021-429B-9469-ECE9206EF6DE HTTP/1.1 Host: labs.pathfix.com Content-Type: application/json { "url": "url_to_typeform_API", "method": "method_to_use_with_this_call", "payload": { payload_as_requested_by_typeform }, "headers": { header_if_requested_by_typeform } }

Need more documentation? Find it here: https://docs.pathfix.com

Conclusion

This tutorial enabled the authentication and enabled enduser integration to Typeform and allowed you to consume all the endpoints offered by Typeform.

Ready to Start Connecting?

thin