OAuth 1.0 API Connector Plugin

Introduction

This no-code plugin allows you to connect your app to APIs that utilize the rare OAuth 1.0 method.

Prerequisites

You must have a developer account on the service that offers OAuth 1.0. For example, Twitter.
Note: Read the documentation for used service!

How to setup

I. Getting the plugin keys (Twitter example)

For getting plugin keys, read the documentation on how to create an app on wished service with OAuth 1.0 authorization.
  1. Go to https://developer.twitter.com/en and sign in to Twitter. You will be redirected to Twitter.
  1. After signing in, go to https://developer.twitter.com/en and press Developer Portal.
Image without caption
  1. Pass the questionnaire to be admitted to the application creation. It is for the first entry only.
  1. Go to Projects & Apps → Overview and scroll down.
  1. Press Create App button.
  1. Set the name for the app and press Next.
Image without caption
  1. Copy and save API Key and API Key Secret in a safe place. Then press App settings.
Image without caption
  1. On the Settings page, press the Set up button for User authentification settings.
Image without caption
  1. Set up the following permissions.
Image without caption
Image without caption
  1. Complete all required inputs from App info and press Save button.
Image without caption
Image without caption

II. Setting up on the Bubble side with keys

  1. Paste copied keys on plugin settings. API Key = Consumer Key, API Key Secret = Consumer Secret.
Image without caption
  1. In your Bubble app, select the Data tab and find User type.
  1. Create the following new fields for this User type, oauth1 access, oauth1 expiry, oauth1 oauth, oauth1 secret, and oauth1 verifier. It will do the authorization process easier to manage.
⚠️
The fields are case-sensitive and need to be created exactly as shown below including the type of field.
Image without caption

User authentification

  1. Go to the Workflow tab of your Bubble app.
  1. For the authorization between your user and the service you connecting, create a workflow with the following actions…
Image without caption
The steps of the above flow are as follows,
Image without caption
Redirect URL - it is the URL present in the Callback URI / Redirect URL list from App Info from the developer account Token URL - it is a URL created by your service. Please read the service documentation to know how to set this URL.
Image without caption
Image without caption
Authorize URL - it is a URL created by your service. Please read the service documentation to know how to set this URL.
  1. Create a new workflow Do when condition is true.
Image without caption
  1. Set the following condition for created workflow
Image without caption
  1. Set up the following actions for created workflow
Image without caption
The steps of the above flow are as follows,
Image without caption
Image without caption
Access Token Server - This is the URL. It is created by your service. Please read the service documentation to know how to set this URL.
Image without caption
Image without caption
You will notice the oauth_token and oauth_verifier parameters will still be in the address bar, if you prefer you can use the Remove OAuth URL Parameters action to clear these.

Create a new API Call

Now you can set up your calls.
  1. Make sure your app is exposing a Backend Workflow.
  1. If your app exposes a Backend Workflow, create a new Frontend workflow with a New API Call action.
Image without caption
  1. For New API Calls, set up the options
Image without caption
Service Endpoint URL - it is a URL created by your service. Please read the service documentation to know how to set this URL. Bubble Endpoint URL - it is a URL created by yourself on the backend workflow. See the following steps… Method - it is a method for Service Endpoint URL. Please read the service documentation to know how to select the method.
💡
Your Bubble Endpoint URL should look similar to this pattern: https://yourapp.bubbleapps.io/version-test/api/1.1/wf/ + “YOUR_ENDPOINT_NAME” or when initializing: https://yourapp.bubbleapps.io/version-test/api/1.1/wf/ + “YOUR_ENDPOINT_NAME” + /initialize
  1. Go to Backend workflow
  • Select Current Page
Image without caption
  • From the opened pop-up, select Backend workflows
Image without caption
  1. Create new workflow
Image without caption
  1. Set up the following options for created workflow
Image without caption
⚠️
API workflow name should match with the name from Bubble Endpoint URL from step 3, https://zeroqode-demo-14.bubbleapps.io/version-test/api/1.1/wf/friends-count/initialize.
  1. Press Detect data button.
Image without caption
  1. Leave this window open and go to your Bubble app on Frontend.
Image without caption
  1. Go to your app preview and trigger created Frontend workflow with the New API Call action. It should initialize the endpoint for the first request.
Image without caption
  1. Go to the window that had left open and press Save. Endpoint received the template of requested data. Request data to the endpoint is the response from Twitter.
Image without caption
  1. Go to Frontend workflow
  1. Remove “/initialize” from created New API Call action. This is used just to initialize the endpoint.
Image without caption
  1. Go to Backend workflow.
  1. For created endpoint, add Return data from the API action.
  1. Check Return a plain text.
Image without caption
  1. Customize your response
Image without caption
  1. Now you can use the returned value(s) from your New API Call.
  1. If your Bubble endpoint returns just one value, it is recommended to select String Output.
Image without caption
  1. If your Bubble endpoint returns a list, it is recommended to select List Output.
Image without caption
To provide some insight into what we are doing imagine that when you make a call to your service for data using the 'New API Call' flow, the requested data is now going to be packaged up and sent to your Bubble endpoint. On your endpoint, you can customize what data should go to your page.

Plugin Actions List

  • (1) OAuth Token
  • (2) Authorize OAuth Client
  • (3) OAuth Access Token
  • Remove OAuth URL Parameters
  • New API Call

PLUGIN ACTIONS DETAILED

Actions

  1. (1) OAuth Token - This action should be used to get request tokens from the service. It is the first step for OAuth 1.0 authentification.
    1. Redirect URL: The value that will be used as the URL a user is redirected to should they approve your application’s access to their account.
      Token URL: This URL is created by your service. It is used to get request tokens.
      Fields:
      Title
      Description
      Type
      Info
      Important info for user
      Information
      Redirect URL
      Your Bubble app URL
      string
      Token URL
      Token request URL from your service
      string
      Returned Values:
      Title
      Description
      Type
      Access Token
      Access token gived from service after first step
      string
      OAuth URL
      URL gived from service after first step
      string
      Token Secret
      Secret token is given from the service after the first step
      string
      Token Expiry
      The expiry date of the token
      date
      Error
      ‘yes’ in case of error, ‘no’ in case of success
      yes/no
  1. (2) Authorize OAuth Client - This action should be used to get an authorization token for the user. It is the second step for OAuth 1.0 authentification.
    1. Returned Auth URL: This URL must be the same as the OAuth URL returned from (1) OAuth Token action.
      Authorize URL: This URL is created by your service. It is used to get an authorization token.
      Fields:
      Title
      Description
      Type
      Returned Auth URL
      OAuth URL from (1) OAuth Token
      string
      Authorize URL
      Authorize request URL from your service
      string
  1. (3) OAuth Access Token - This action should be used to convert the authorization token into a usable access token. It is the third step for OAuth 1.0 authentification.
    1. Access Token Server: This is the URL. It is created by your service. It is used to convert an authorization token into an access token.
      Fields:
      Title
      Description
      Type
      Access Token Server
      Access request URL from your service
      string
      Returned Values:
      Title
      Description
      Type
      Auth Token
      Access token gived from service after the third step
      string
  1. Remove OAuth URL Parameters - This action should be used to remove parameters from the URL. After getting access token service will redirect the user to your app. In URL will be present oauth_token and oauth_verifier parameters.
  1. New API Call - This action should be used to make a request to the service endpoint.
    1. Service Endpoint URL: This URL is created by your service. It is used to make requests.
      Bubble Endpoint URL: This URL is created by yourself in the backend workflow.
      Method: Method used for Service Endpoint request.
      JSON Body: Body which will be sent with the Service Endpoint request.
      Fields:
      Title
      Description
      Type
      Service Endpoint URL
      URL for request from your service
      string
      Bubble Endpoint URL
      Your Bubble endpoint URL
      string
      Method
      GET, POST, PUT, PATCH, DELETE
      Dropdown
      JSON Body
      Values that should be sent to Service Endpoint in JSON format
      string (optional)
      Returned Values:
      Title
      Description
      Type
      String Output
      This is used for return single value
      string
      List Output
      This is used for return listed values
      string

Workflow example

Get friends count

In this workflow, it is represented how to get a friend count from Twitter using New API Call action and String Output.
  1. Workflow is created like in the image below. When Get friends count button is clicked.
Image without caption
  1. For New API Call, set Service Endpoint, Bubble Endpoint, and Method.
Image without caption
  1. From the backend is returned friends count.
Image without caption
  1. Returned value is set on friend_count custom state.
Image without caption
  1. The following steps show or hide actions for some elements on the page.
Image without caption
Image without caption
Image without caption

How it looks on the page

  1. Elements before request call
Image without caption
  1. Elements after request call
Image without caption

Get friends

In this workflow, it is represented how to get a friends list from Twitter using New API Call action and List Output.
  1. Workflow is created like in the image below. When Get friends button is clicked.
Image without caption
  1. For New API Call, set Service Endpoint, Bubble Endpoint, and Method.
Image without caption
  1. From the backend is returned list of friends.
Image without caption
  1. Returned value is set on the friends custom state.
Image without caption
  1. The following steps are showing actions for some elements on the page.
Image without caption
Image without caption

How it looks on the page

  1. Elements before request call
Image without caption
  1. Elements after request call
Image without caption

Changelogs

  • Update 20.10.2022- Version: 1.5.0. Modified New API Call action
  • Update 7.12.2022 - Version: 1.6.0. Minor fixies

Demo to preview the settings


Powered by Notaku
Helpful?