# Fliplist

The place where Sellers come to learn and use No Code tools for Ecommerce stores like Amazon.

## Automate Amazon with No Code

#### For sellers, agencies and developers that rely on No Code tools like Bubble.


# No Code Development

## Built on Bubble

Bubble was released in 2012. It provided me with the first real solution beyond a spreadsheet for automating my Amazon Business. It's come a long way since 2017 when I began using the platform. There are countless courses, integrations and agencies to get up and running with bubble. Bubble is essentially a complex programming solution without code. You use a visual editor and connect to other apps and tools via bubble's API connector or plugins, such as the [AWS4 plugin](/free/aws4) provided for free by Fliplist.

***

## Adding Plugins in the Bubble editor

![](https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MZNp6l4nvpPrYDfPn9Y%2F-M_Lku04sd4jsMhA1wNn%2F-M_LuAJOjp2CXYLkjC4X%2FAdd%20Plugin%20\(1\).png?alt=media\&token=838d3802-500f-4402-8fa6-a4acde91dbd7)


# AWS4 Plugin

## Amazon Web Services

> "When you send API requests to AWS, you sign the requests so that AWS can identify who sent them. You sign requests with your AWS access key, which consists of an access key ID and secret access key. Some requests don’t need to be signed, including anonymous requests to Amazon Simple Storage Service (Amazon S3) and some API operations in AWS Security Token Service (AWS STS) such as [`AssumeRoleWithWebIdentity`](https://docs.aws.amazon.com/STS/latest/APIReference/API_AssumeRoleWithWebIdentity.html)."<br>
>
> <https://docs.aws.amazon.com/general/latest/gr/signing_aws_api_requests.html>

## Some requests require AWS Version 4 Signing

Bubble.io does not have a current solution, so Fliplist built a plugin based on the blog post & code created by the Wimpy Programmer.&#x20;

We went with the server side Crypto-JS solution at the bottom of the page.

<https://runkit.com/wimpyprogrammer/aws-v4-signature-with-cryptojs> (code link)

{% embed url="<https://www.wimpyprogrammer.com/calculate-aws-v4-signature-client-side-javascript>" %}
BLOG POST HERE ( thank Drew)
{% endembed %}


# bubble.io plugin link

This link will take you to bubble.io plugin page for AWS4 signing plugin

{% embed url="<https://bubble.io/plugin/aws-signature-4-1620768657602x748076685273333800>" %}


# API setup not included

There are far too many use cases to document API calls to AWS please review the following link or search for your specific use cases' requirements in the detailed documentation provided by AWS

{% embed url="<https://docs.aws.amazon.com/AmazonS3/latest/API/sig-v4-header-based-auth.html>" %}

{% embed url="<https://docs.aws.amazon.com/general/latest/gr/signature-version-4.html>" %}

Did we miss something ?

Send a message to <fliplist01@gmail.com>


# Open Source Plugin

## Leave a thank you to Drew the Wimpy Programmer at the end of the blog post here for making his code open to the Public

{% embed url="<https://www.wimpyprogrammer.com/calculate-aws-v4-signature-client-side-javascript>" %}


# AWS Bedrock Example

## #1 : Setup your backend workflow

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FsQ73BXdKsMxFXOOHsGWn%2Fimage.png?alt=media&amp;token=46acec13-1453-4bf5-b319-e34a13777330" alt=""><figcaption></figcaption></figure>

## # 2 : Setup your actions

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2Fjxx3gcgtnl5pXwaXGAzT%2Fimage.png?alt=media&amp;token=f5f78f66-d800-44e1-a808-0930b887f086" alt=""><figcaption></figcaption></figure>

## #3 : Search for SHA256, AWS signature plugins (ADD THEM)

{% content-ref url="/pages/-M\_LZES6FJVCxflK6j9l" %}
[No Code Development](/no-code)
{% endcontent-ref %}

## #4 : This is going to be a POST call so...

## A. YOU WILL NEED TO CAPTURE and HASH (sha256) an input on the client side (bubble page)

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FcqO4WlIEpfgnMSsW90B7%2Ftextfrontend.png?alt=media&amp;token=58d65988-f1c9-41de-9823-bf8838c6ca87" alt="" width="375"><figcaption></figcaption></figure>

## B. Make it fit a JSON template dynamically by creating a workflow -> This will make up your JSON BODY in the API connector later -> add other JSON values as needed for your prompts; may require further formatting, ex: \n

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2Fiy1VTwVA1QdnoQEtLXM8%2Fdynamic%20promot.png?alt=media&amp;token=d3284f36-4487-4d1d-b353-0870af6503c9" alt=""><figcaption></figcaption></figure>

## #5 : In the backend: Fill in SHA256 fields for Cannonical

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FaKD9rFmYJXUIwDN7UPmF%2Fsha256.png?alt=media&amp;token=07328cca-c20e-49e1-a52c-3e74a3ab03b7" alt=""><figcaption></figcaption></figure>

The payload (Yellow) is a dynamic value that you pass from your PROMPT : "(how big are dogs?) in the front end or bubble page value. --> bottom payload left as text to demonstrate Hashing.

NOTE : There are two newlines (enter) after "x-date" -> one small error will ruin your day as the signatures will not match!

## #6 : Fill in the AWS signature plugin

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FVuzg3IlojxEyoLK9ipin%2Faws4.png?alt=media&amp;token=31b1f516-0096-430a-b27a-80362e95102a" alt=""><figcaption><p>One newline(press enter) after each entry , NONE for the last entry</p></figcaption></figure>

## #7 : Save result on current user until API is initialized

Note : You have limited time to pass this data to the API connector manually for initialization ...

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FmBSQZnNcpJ2LlynGNQgo%2FScreenshot%202023-10-03%203.34.12%20PM.png?alt=media&amp;token=df397538-5919-4b3c-89f3-70431e9fb770" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use the user field you defined, "string to sign" in this case (result of step 2) as part of the signature in the API connector under AUTHORIZATION (header)
{% endhint %}

## #8 : Bubble API Connector Setup

<figure><img src="https://3627461995-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MZNp6l4nvpPrYDfPn9Y%2Fuploads%2FFiJYa28DFVkOCkZCM70b%2Fconnect.png?alt=media&amp;token=2a989d21-a49c-4040-9cbb-3185d4d096d3" alt=""><figcaption></figcaption></figure>

### Full URI

```
 https://bedrock-runtime.us-east-1.amazonaws.com/model/ai21.j2-mid-v1/invoke
```

### Authorization Header Details \*\*\*with exact spacing

```
AWS4-HMAC-SHA256 Credential=AKSSJSMEXAMPLE/20231003/us-east-1/bedrock/aws4_request, SignedHeaders=content-type;host;x-amz-content-sha256;x-amz-date, Signature=939c89dda1eb55b8e4e9aca6c607d2c51c850b2ddc06b661cb8e358f80ffa45
```

{% hint style="info" %}
Copy and paste the authorization header (exact spacing) and replace with your own credentials.
{% endhint %}

***

Breakdown of Authorization Header

```
1. AWS4-HMAC-SHA256
2. Credential=AKSSJSMEXAMPLE/20231003/us-east-1/bedrock/aws4_request,
3. SignedHeaders=content-type;host;x-amz-content-sha256;x-amz-date,
4. Signature=cef4094a781626a728a46c708235396bae9b4beb6654927132884baac02fd7
```

## # 9 : Initialize the bubble API connector

## # 10 : Pass data/values through the backend workflow to the API connector directly AFTER initialization.