Etsy API Quick Start Instructions Needs an Update #1208

slider1234 · 2024-02-25T12:59:25Z

slider1234
Feb 25, 2024

I'm very new here. Maybe this has been talked about before.

The Quick Start guide at https://developers.etsy.com/documentation/tutorials/quickstart needs updated. It works fine and the process is interesting, but it's not written as well as it could be.

It could have been made to be much simpler by using a .env file in the main folder.
Here is the .env file contents

ETSY_API_KEY=your_api_key
ETSY_STATE=your_generated_state
ETSY_CODE_CHALLENGE=your_generated_code_challenge

Then here is the index.hbs file contents

<!DOCTYPE html>
<html>
<body>
<a href="https://www.etsy.com/oauth/connect?response_type=code&redirect_uri=http://localhost:3003/oauth/redirect&scope=email_r&client_id={{client_id}}&state={{state}}&code_challenge={{code_challenge}}&code_challenge_method=S256">Authenticate with Etsy</a>
</body>
</html>

and then finally the server.js file contents

require('dotenv').config();

const express = require('express');
const fetch = require("node-fetch");
const hbs = require("hbs");
const app = express();

app.set("view engine", "hbs");
app.set("views", `${process.cwd()}/views`);

// Send a JSON response to a default get request
app.get('/ping', async (req, res) => {
    const requestOptions = {
        'method': 'GET',
        'headers': {
            'x-api-key': process.env.ETSY_API_KEY,
        },
    };

    const response = await fetch('https://api.etsy.com/v3/application/openapi-ping', requestOptions);

    if (response.ok) {
        const data = await response.json();
        res.send(data);
    } else {
        res.send("oops 1");
    }
});

// This renders our `index.hbs` file.
app.get('/', (req, res) => {
    res.render("index", { 
        client_id: process.env.ETSY_API_KEY,
        state: process.env.ETSY_STATE,
        code_challenge: process.env.ETSY_CODE_CHALLENGE
    });
});


const clientID = process.env.ETSY_API_KEY;
const clientVerifier = process.env.CLIENT_VERIFIER;
const redirectUri = 'http://localhost:3003/oauth/redirect';

app.get("/oauth/redirect", async (req, res) => {
    const authCode = req.query.code;
    const tokenUrl = 'https://api.etsy.com/v3/public/oauth/token';
    const requestOptions = {
        method: 'POST',
        body: JSON.stringify({
            grant_type: 'authorization_code',
            client_id: clientID,
            redirect_uri: redirectUri,
            code: authCode,
            code_verifier: clientVerifier,
        }),
        headers: {
            'Content-Type': 'application/json'
        }
    };

    const response = await fetch(tokenUrl, requestOptions);


    if (response.ok) {
        const tokenData = await response.json();
        res.redirect(`/welcome?access_token=${tokenData.access_token}`);
    } else {
        res.send("oops");
    }


}); 

// Correctly moved inside the global scope, not nested inside "/oauth/redirect"
app.get("/welcome", async (req, res) => {
    const { access_token } = req.query;
    const user_id = access_token.split('.')[0];

    const requestOptions = {
        headers: {
            'x-api-key': process.env.ETSY_API_KEY,
            Authorization: `Bearer ${access_token}`,
        }
    };

    const response = await fetch(`https://api.etsy.com/v3/application/users/${user_id}`, requestOptions);

    

    if (response.ok) {
        const userData = await response.json();
        // Load the template with the first name as a template variable.
        res.render("welcome", {
            first_name: userData.first_name
        });
    } else {
        res.send("oops 3");
    }


});

// Start the server on port 3003
const port = 3003;
app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`);
});

The user would be told to use this on a command line to install dotenv to make the .env file work

npm install dotenv

there is more to it than this and i wouldn't mind writing it all out if there is interest in it.

EnsarBatuhanAyd · 2024-03-19T04:43:16Z

EnsarBatuhanAyd
Mar 19, 2024

We are trying to auth flow process and getting some error "An error occurred
The requested redirect URL is not permitted." we are checking our callback and redirect uri also we redesigned our code with yours but we didnt able to be succesful on it can you give to more in it details maybe we are missing something ?

2 replies

bearsworth Mar 19, 2024

For anyone in the future -> the reason is because you likely need to add it as a callback uri.

All redirect_uri parameter values must match a precise callback URL string registered with Etsy. These values can be provided by editing your application at etsy.com/developers/your-apps.

Authorization code or token requests with unregistered or non-matching redirect_uri values send an error to the user and Etsy.com does not redirect the user back to your app.

URL matching is case-sensitive and is specifically the URL established when you registered. For example, if your registered redirect URL is https://www.example.com/some/location, the following strings fail to match:

http://www.example.com/some/location (http, not https)
https://www.example.com/some/location/ (additional trailing slash)
https://www.example.com/some/location? (additional trailing question mark)
Https://www.example.com/some/location (uppercase H in https)
https://example.com/some/location (no www subdomain)

EnsarBatuhanAyd Mar 21, 2024

Yes its Works For me now Thank you soo much
For the be more clear;
İf you are work on localhost currently you need to change manage your apps-> your main website url: http://localhost:3003
Then Edit your Callback Urls add 'http://localhost:3003/oauth/redirect' and it should to see your welcome page as a tutorial with your name

DevTKSS · 2024-05-13T17:49:32Z

DevTKSS
May 13, 2024

Hey, @slider1234
I am one of the ones who are struggeling with the etsy tutorial, so I am really happy about finding your discussion here!
I would really appreciate if you would continue your work: Definitely big Interest from my side!

Important informations, you could maybe also add:
-npm install git-scm (Windows) to make sure secret data will not be served to the client

creating new files via vscode terminal from a windows machine:
- @echo $null >>yourFilename.js

Points I didnt find on their side and here:

Where to store userdata?
My Ideas to that:

second/more .env files? looking for where to place clientverifyer and tokendata that i need for refresh calls
some kind of SQL/NoSQL Database?
for me there is missing security for the data in .env so maybe it would be better to use dotenv-vault?

0 replies

slider1234 · 2024-05-13T21:02:50Z

slider1234
May 13, 2024
Author

I made another version that is now automated. I loved your feedback. Check out my other one, because it addresses some of the things you talked about. It's at this link #1236

…

On Mon, May 13, 2024 at 1:49 PM DevTKSS ***@***.***> wrote: Hey, @slider1234 <https://github.com/slider1234> I am one of the ones who are struggeling with the etsy tutorial, so I am really happy about finding your discussion here! I would really appreciate if you would continue your work: Definitely big Interest from my side! Important informations, you could maybe also add: -npm install git-scm (Windows) to make sure secret data will not be served to the client - creating new files via vscode terminal from a windows machine: - - @echo <https://github.com/echo> $null >>yourFilename.js Points I didnt find on their side and here: Where to store userdata? My Ideas to that: - second/more .env files? looking for where to place clientverifyer and tokendata that i need for refresh calls - some kind of SQL/NoSQL Database? - for me there is missing security for the data in .env so maybe it would be better to use dotenv-vault? — Reply to this email directly, view it on GitHub <#1208 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BGN66K4DFFFLWJMLYID2RWTZCD4MHAVCNFSM6AAAAABDY3H3Z2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TIMRUGQ2TO> . You are receiving this because you were mentioned.Message ID: ***@***.***>

0 replies

Wilderbill · 2024-11-22T01:27:11Z

Wilderbill
Nov 22, 2024

The slider1234 Python script was a life saver.
But I then struggled for days with the inability to authorize certain scope combinations.
The cause of that problem was multiple overlapping instances as revealed by "Apps You Use".
( See the website: https://www.etsy.com/your/apps?ref=si_apps )
I had a half dozen active instances of my app as a result of my flailing attempts to get it working.
Apparently, there can be multiple instances of your app with overlapping, conflicting scopes.
The solution was to delete all of my instances and start again.
Set the scopes you want and run: https://github.com/slider1234/ETSY-API-Auto-Authenticator again.
( This does not require a repeat of the 3-week application process. )
Bill

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Etsy API Quick Start Instructions Needs an Update #1208

{{title}}

Replies: 4 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Etsy API Quick Start Instructions Needs an Update #1208

slider1234 Feb 25, 2024

Replies: 4 comments · 2 replies

EnsarBatuhanAyd Mar 19, 2024

bearsworth Mar 19, 2024

EnsarBatuhanAyd Mar 21, 2024

DevTKSS May 13, 2024

slider1234 May 13, 2024 Author

Wilderbill Nov 22, 2024

slider1234
Feb 25, 2024

Replies: 4 comments 2 replies

EnsarBatuhanAyd
Mar 19, 2024

DevTKSS
May 13, 2024

slider1234
May 13, 2024
Author

Wilderbill
Nov 22, 2024