Authorize without auth screen for a backend

App Developers Developer APIs
1

Hi,

I am trying to create a server that simply reads a collection from my webflow blog site, and I am trying to get the auth_token without having to do so through the webpage. Is there a way for a backend server to get the auth_token? Or better yet is there a way for my backend to just read the collections that I have?

2

If you’re building for yourself (ie. a first party use case), you can mint a site-scoped token for direct use.

To create one, go to Site settings > Apps & integrations > API access > “Generate API Token”

3

@dmitrypimenov I’ve done this but how do I use it with directly including in a script for a given page and exposing API_TOKEN to the public?

For example:

<script type="text/javascript">
const axios = require('axios');
// Wait for the page to load first
window.onload = function() {

    const button = document.getElementById('get_item');

    button.addEventListener('click', function(event) {
        // Get the ID of the clicked element
        const clickedElementId = event.target.id;

        // Display the ID in a popup dialog
        //alert("Clicked element ID: " + clickedElementId);

        // Perform request to the webflow API
        // API Access Token
        const API_TOKEN = 'abc123...';
        const SITE_ID = 'XXXX';
        const COLLECTION_ID = 'YYYY';
        const ITEM_ID = 'ZZZZ';

        // Endpoint for fetching a specific item from a collection
        const endpoint = `https://api.webflow.com/v2/sites/${SITE_ID}/collections/${COLLECTION_ID}/items/${ITEM_ID}/live`;

        // Axios configuration for authorization
        const config = {
            headers: {
                Authorization: `Bearer ${API_TOKEN}`,
            },
        };

        // Make a GET request to fetch the collection item
        axios.get(endpoint, config)
            .then(response => {

                // Log the name and id in the console
                console.log("Name:", response.data.fieldData.name);
                alert("fieldData.name" + response.data.fieldData.name)

            })
            .catch(error => {
                console.error('Error retrieving collection item:', error);
            });
    });
}
</script>
1 Like
4

Hey @Zephyr - I wouldn’t recommended this because the API_TOKEN could be easily discovered. I would recommend setting up a simple server API endpoint that your front-end script here can call into. This API endpoint can then do the work of hosting the access token in an environment variable, database, etc. There’s some solutions out there that I think you can start deploying to for free to start out with like:

1 Like
5

Thanks, this actually helped me with problem.