Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnecessary repetition #1274

Merged
merged 1 commit into from
Jan 29, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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 @@
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 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.

Check warning on line 51 in guides/plugins/apps/clientside-to-app-backend.md

View workflow job for this annotation

GitHub Actions / LanguageTool

[LanguageTool] guides/plugins/apps/clientside-to-app-backend.md#L51

Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’. (EN_A_VS_AN) Suggestions: `an` URL: https://languagetool.org/insights/post/indefinite-articles/ Rule: https://community.languagetool.org/rule/show/EN_A_VS_AN?lang=en-US Category: MISC
Raw output
guides/plugins/apps/clientside-to-app-backend.md:51:35: Use “an” instead of ‘a’ if the following word starts with a vowel sound, e.g. ‘an article’, ‘an hour’. (EN_A_VS_AN)
 Suggestions: `an`
 URL: https://languagetool.org/insights/post/indefinite-articles/ 
 Rule: https://community.languagetool.org/rule/show/EN_A_VS_AN?lang=en-US
 Category: MISC

```javascript
import AppClient from 'src/service/app-client.service.ts';
Expand All @@ -68,7 +69,7 @@

<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 @@
- 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 @@

<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
Loading