> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ownid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adobe Commerce Cloud

> Integrate OwnID into Adobe Commerce in minutes

export const connector_name_0 = "Adobe Commerce Cloud"

By integrating OwnID with Adobe Commerce Cloud (Magento), you can simplify and streamline the login experience for your customers and deploy the full set of OwnID features throughout your users' journeys.

## How it Works

Integration with Adobe Commerce Cloud (ACC) starts with the OwnID ACC Connector and a new no-code OwnID App you create in the Console.

<img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi-tile-adob.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=67c036fbdf3572740e1880d067482005" width="200" alt="Adobe Connector tile" data-path="images/oi-tile-adob.png" />

## Install the Connector

The OwnID ACC Connector is available for free in the Adobe Commerce [marketplace](https://commercemarketplace.adobe.com/ownid-connector.html).

Add the connector to your cart and follow the instructions on the site.

## Create an OwnID App

An OwnID App is what connects the existing identity provider used by your website with the OwnID widget you insert on the front end.

<img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi-widg-s.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=bf7a9470aa987db7e13fa9eabb6343aa" width="200" alt="OwnID Widget" data-path="images/oi-widg-s.png" />

<sup> OwnID widget </sup>

Each of your OwnID Apps acts as the central point of configuration for each of your integrations. These no-code Apps are created, hosted, and maintained entirely within the OwnID Console environment.
When you create an App, it's assigned a unique `appId` automatically. Use that `appId` in OwnID SDK interaction from your website’s front end.

#### To Create an OwnID App

1. Login to the [OwnID Console](https://console.ownid.com) (or create your account).

2. Click **+Create Application** from the Apps screen.

3. Enter a name for your application in the *App name* field.

4. From the *Choose your integration* panel, select the *{connector_name_0}* tile. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi-integ-tiles.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=5bf0883b7b5a978e8d6cebd790538e47" width="400" alt="Profile editor" data-path="images/oi-integ-tiles.png" />

5. Click **Next**.

6. Enter the website URL to your *{connector_name_0}* application instance and click **Continue**.

7. Click **Explore my App** on the "Congratulations" popup. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi_app_ready.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=aeaaeef9f684aa99d048009c631e5e39" width="400" alt="Profile editor" data-path="images/oi_app_ready.png" />

8. From the *OwnID Settings* panel, copy the *App ID* and the *Shared Secret* for use in configuration on the *{connector_name_0}* side. <img src="https://mintcdn.com/ownid/FZ6hme-wnXgWbl15/images/oi_app_settings.png?fit=max&auto=format&n=FZ6hme-wnXgWbl15&q=85&s=57db84a4b0a11aab1b5c4fe17032df3f" width="400" alt="Profile editor" data-path="images/oi_app_settings.png" />

<Check>Your OwnID application and secret key are created and you're ready for next steps!</Check>

Copy and paste the **appID** and **shared secret** into the settings of the OwnID Adobe Commerce connector in your ACC instance.

<Info>
  **Securing User's Personal Data**

  OwnID does not store or process any user data. Users' public keys and device information are stored on your platform.

  Private keys are kept exclusively on the user's device and are never transmitted elsewhere.
</Info>

## How to Run it Locally

<img width="500" src="https://mintcdn.com/ownid/vB8sMNDo6U3bB1sG/images/tunnel_diagram.png?fit=max&auto=format&n=vB8sMNDo6U3bB1sG&q=85&s=8961925a28d6e8cd6278acba3f585c38" alt="Tunnel Diagram" data-path="images/tunnel_diagram.png" />

In the OwnID integration - the end-user accesses with their browser to both OwnID & your local development server.

In order to allow the communication we will need:

Whitelist the local origin domain, e.g. localhost

Allow the OwnID Server to reach your local development server.

To achieve this, we'll go to the OwnID Admin Console:

In the App's main page, add the local origin to the Allowed Domains

<img width="500" src="https://mintcdn.com/ownid/-VBqqlNX4RpmYITg/images/allowed_domain.png?fit=max&auto=format&n=-VBqqlNX4RpmYITg&q=85&s=7a6331485edb1750f71882b46c8466fe" alt="Allowed Domain" data-path="images/allowed_domain.png" />

In the App's Integration / backend, target the base URL to target a public tunnel that leads to the development server.

<img width="500" src="https://mintcdn.com/ownid/-VBqqlNX4RpmYITg/images/base_url.png?fit=max&auto=format&n=-VBqqlNX4RpmYITg&q=85&s=67dbb0a747eff2fa65598e655ed7578e" alt="Base Url" data-path="images/base_url.png" />

## Creating a Local Tunnel Using ngrok

1. Start your local server. It will run on port `3001`.

   ```bash theme={null}
   node server.js
   ```

2. Start ngrok, targeting your server's port.

   ```bash theme={null}
   ngrok http <your-server-port>
   ```

   Example:

   ```bash theme={null}
   ngrok http 3001
   ```

## Next Steps

### Ready to deploy?

<Card title="YES!" href="/building-blocks/pre-deployment-checklist" icon="rocket-launch">
  Take me to the Deployment Checklist
</Card>