Skip to content

Commit

Permalink
Remove unnecessary repetition (#1274)
Browse files Browse the repository at this point in the history
  • Loading branch information
fschmtt authored Jan 29, 2024
1 parent 77549ff commit fc1d76f
Showing 1 changed file with 15 additions and 13 deletions.
28 changes: 15 additions & 13 deletions guides/plugins/apps/clientside-to-app-backend.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
nav:
title: Client-side communication to the app backend
position: 30

---

# Client-App backend communication

Direct communication from the browser to the app backend involves generating a JWT token. This token contains session-specific information, as [claims](#the-jwt-token), and is securely signed by the shop. This mechanism ensures a secure exchange of data between the client and the app backend.
Direct communication from the browser to the app backend involves generating a JSON Web Token (JWT).
This token contains session-specific information, as [claims](#the-json-web-token), and is securely signed by the shop.
This mechanism ensures a secure exchange of data between the client and the app backend.

::: warning
The JWT key can be only generated when in the browser the user is logged-in.
The JWT can be only generated when in the browser the user is logged-in.
:::

## The Flow
Expand All @@ -21,13 +22,13 @@ sequenceDiagram
participant Shopware Backend
participant App Server
Client->>Shopware Backend: POST /store-api/app-system/MyApp/generate-token
Shopware Backend->>Client: Responds with Signed JWT Token
Shopware Backend->>Client: Responds with signed JWT
Client->>App Server: Post /product-review/submit containing JWT in header
```

## The JWT token
## The JSON Web Token

The JWT token contains the following claims:
The JWT contains the following claims:

- `languageId` - the language ID of the current session
- `currencyId` - the currency ID of the current session
Expand All @@ -37,17 +38,17 @@ The JWT token contains the following claims:

The claims are only set when the app has permission to that specific entity like `sales_channel:read` for `salesChannelId` claim.

The JWT token is signed with `SHA256-HMAC` and the secret is the `appSecret` from the app registration and the `issued by` is the shopId also from the registration.
The JWT is signed with `SHA256-HMAC` and the secret is the `appSecret` from the app registration and the `issued by` is the shopId also from the registration.

## Generate JWT key
## Generate JSON Web Token

The JWT key is generated with a POST request against `/store-api/app-system/{name}/generate-token` or `/app-system/{name}/generate-token`.
The JWT is generated with a POST request against `/store-api/app-system/{name}/generate-token` or `/app-system/{name}/generate-token`.

<Tabs>

<Tab title="Storefront">

For the Storefront usage, there is an HTTP client helper, which handles the token generation and lets you directly call your app backend.
For the Storefront usage, there is a HTTP client helper, which handles the token generation and lets you directly call your app backend.

```javascript
import AppClient from 'src/service/app-client.service.ts';
Expand All @@ -68,7 +69,7 @@ client.delete('https://my-app-backend.com/foo')

<Tab title="Custom">

If you want to generate the JWT token yourself, you can use the following code snippet:
If you want to generate the JWT yourself, you can use the following code snippet:

```javascript
const response = await fetch('/store-api/app-system/{name}/generate-token', {
Expand All @@ -91,7 +92,7 @@ Requesting from the browser to the app backend is only possible when your app ba
- Access-Control-Allow-Headers: shopware-app-shop-id, shopware-app-token
:::

## Validate the JWT token
## Validate the JSON Web Token

<Tabs>

Expand Down Expand Up @@ -135,7 +136,8 @@ class StorefrontController {

<Tab title="Custom">

Fetch the shop by the `shopware-app-shop-id` header and create a JWT verifier with the app secret as `HMAC-SHA256` secret. Verify the JWT token (shopware-app-token) with the verifier.
Fetch the shop by the `shopware-app-shop-id` header and create a JWT verifier with the app secret as `HMAC-SHA256` secret.
Verify the JWT (shopware-app-token) with the verifier.

</Tab>

Expand Down

0 comments on commit fc1d76f

Please sign in to comment.