Contents x
    Implementing App Flow Authorization
    • 2 Minutes to read
    • Dark
      Light
    Contents

    Implementing App Flow Authorization

    • 2 Minutes to read
    • Dark
      Light
    Article summary

    The implementation of the Dataddo App Flow involves two main components: the backend and the frontend. The backend is responsible for handling the authorization of API calls and obtaining the Redirect URI via a call to the Dataddo API. This involves securely managing API access tokens and making HTTP requests to Dataddo's endpoints to retrieve necessary URLs for OAuth authentication. Once the backend successfully obtains the Redirect URI, this information is then passed to the frontend. The frontend component is responsible for the actual redirection of the user. When the user accesses the relevant page, a JavaScript function automatically redirects them to the OAuth authorization URL provided by the backend, enabling seamless integration with Dataddo's services.

    Back-end Components

    Authorizing to Dataddo API

    First step is to obtain access token for API calls authorization. Navigate to Authorization to see the complete tutorial how to obtain access_token for authorization of your API calls to Dataddo API. The access_token needs to be placed to HTTP Authorization header as in the example below.

    GET /sources
Authorization: Bearer ACCESS_TOKEN

    import requests

# Define the API endpoint and the access token
api_endpoint = "https://headless.dataddo.com/customer-api/v1/sources"
access_token = "YOUR_ACCESS_TOKEN"

# Set up the headers with the authorization token
headers = {
    "Authorization": f"Bearer {access_token}"
}

# Make the GET request to the API
response = requests.get(api_endpoint, headers=headers)

    Obtaining URI to redirect the user

    The next step is to obtain the Redirect URI to which the user will be routed to perform the OAuth 2.0 process. This involves making an HTTP POST request to the Dataddo API to get the authorization URL for the specified service. In the example below, we are using an authorizer for Google Analytics 4.

    POST /services/google_analytics4/oauth-request-url

Content-Type:application/json
Authorization: Bearer ACCESS_TOKEN

{
    "redirectUri":"https://my.app.com/ga4Callback"
}

    import requests
import json

# Define the API endpoint and the access token
api_endpoint = "https://headless.dataddo.com/customer-api/v1/services/google_analytics4/oauth-request-url"
access_token = "YOUR_ACCESS_TOKEN"

# Set up the headers with the authorization token and content type
headers = {
    "Authorization": f"Bearer {access_token}",
    "Content-Type": "application/json"
}

# Supply the URI of your front-end app, where you want to redirect the user
payload = {
    "redirectUri": "https://my.app.com/ga4Callback"
}

# Make the POST request to the API
response = requests.post(api_endpoint, headers=headers, data=json.dumps(payload))

# Check if the request was successful
if response.status_code == 200:
    # Parse the JSON response
    result = response.json()
    # Print the result
    print("Redirect URI:", result.get('url'))
else:
    # Print the error if the request was not successful
    print(f"Error: {response.status_code}, Message: {response.text}")

    Front-End Components

    Redirect user

    The frontend component is responsible for redirecting the user to the Redirect URI obtained by the backend component to finalize the OAuth 2.0 process. Once the backend securely generates the Redirect URI, this URL is passed to the frontend. The frontend then uses a simple JavaScript function to redirect the user to the specified URL. This redirection triggers the OAuth 2.0 flow, where the user can authorize access to their data. Upon completion, user is redirected to the URI that you provided in the Obtaining URI to redirect the user step.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redirect to Dataddo OAuth</title>
    <script>
        // Function to redirect the user
        function redirectToOAuth(redirectUrl) {
            window.location.href = redirectUrl;
        }

        // Example redirect URL obtained from the backend
        const redirectUrl = "https://accounts.google.com/o/oauth2/auth";

        // Call the function to redirect the user
        window.onload = function() {
            redirectToOAuth(redirectUrl);
        };
    </script>
</head>
<body>
    <h1>Redirecting to OAuth...</h1>
</body>
</html>
    Was this article helpful?