diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index c1e395e5c..2532a6efd 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -97,6 +97,7 @@ jobs: ALGOLIA_WRITE_API_KEY: ${{ secrets.AIO_ALGOLIA_WRITE_API_KEY }} GATSBY_ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME || github.event.repository.name }} GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }} + GATSBY_TEMPLATE_ID: replace-me GATSBY_SITE_DOMAIN_URL: https://developer.adobe.com - name: Deploy uses: AdobeDocs/static-website-deploy@master diff --git a/.github/workflows/stage.yml b/.github/workflows/stage.yml index 2e0b0d296..be7cf7e7f 100644 --- a/.github/workflows/stage.yml +++ b/.github/workflows/stage.yml @@ -109,6 +109,7 @@ GATSBY_ALGOLIA_SEARCH_API_KEY: ${{ secrets.AIO_ALGOLIA_SEARCH_API_KEY }} ALGOLIA_INDEXATION_MODE: skip GATSBY_ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME || github.event.repository.name }} + GATSBY_TEMPLATE_ID: replace-me GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }} GATSBY_SITE_DOMAIN_URL: https://developer-stage.adobe.com diff --git a/gatsby-config.js b/gatsby-config.js index 3060c0d64..4df6a35be 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -18,6 +18,7 @@ module.exports = { "title": "Commerce", "path": "/commerce/docs" }, + template_id: process.env.GATSBY_TEMPLATE_ID, pages: pages, subPages: subPages, }, diff --git a/gatsby-node.js b/gatsby-node.js new file mode 100644 index 000000000..3aead7245 --- /dev/null +++ b/gatsby-node.js @@ -0,0 +1,8 @@ +exports.createSchemaCustomization = ({ actions }) => { + const { createTypes } = actions + createTypes(` + type SiteSiteMetadata { + template_id: String + } + `) + } \ No newline at end of file diff --git a/src/pages/credential/GetCredentialOauthS2s.js b/src/pages/credential/GetCredentialOauthS2s.js new file mode 100644 index 000000000..eda4f08dc --- /dev/null +++ b/src/pages/credential/GetCredentialOauthS2s.js @@ -0,0 +1,208 @@ +import React from 'react' +import { GetCredential } from '@adobe/gatsby-theme-aio/src/components/GetCredential'; +import { graphql, useStaticQuery } from 'gatsby'; +import commerce from "./images/commerce.svg"; + +const GetCredentialOAuthS2s = () => { + + const data = useStaticQuery( + graphql` + query { + site { + siteMetadata{ + template_id + } + } + } + ` + ) + + // This line uses JavaScript object destructuring to extract the 'template_id' property from the 'siteMetadata' object, + // which is nested inside the 'site' object of the 'data' object returned by the GraphQL query. + // If any of these objects ('data', 'site', or 'siteMetadata') are undefined or null, it defaults to an empty object, + // so 'template_id' will be undefined instead of causing a runtime error. Only needed temporarily so builds don't fail. + const { template_id } = data?.site?.siteMetadata || {}; + + return ( + + + + + + + + + + + + + + + + +
+
+

+ OAuth server-to-server credential +

+

+ This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type. +

+
+ +
+ + + + + + + + + +
+
+

+ OAuth server-to-server credential +

+

+ This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type. +

+
+ +
+ + + + + + + + + + + + + Access token

After copying the access token, you must prepend the token with Bearer to use it with API calls.)} /> + + + Credential details

You can use the following credential details to try out the Adobe Commerce as a Cloud Service REST API below.
  • Client ID: Your public identifier for accessing the API. This acts as an API key when used with the Commerce APIs, and corresponds with the x-api-key header.
  • Organization ID: The ID of the organization you're using with the Commerce APIs. This corresponds with the x-gw-ims-org-id header.
)} orderBy="ClientId,ImsOrgID"> + + + + + + + + + + + +
+

Welcome back

+

You can either re-use an existing credential or create a new credential.

+
+ + + + + Credential details

You can use the following credential details to try out the Adobe Commerce as a Cloud Service REST API below.
  • Client ID: Your public identifier for accessing the API. This acts as an API key when used with the Platform APIs, and corresponds with the x-api-key header.
  • Organization ID: The ID of the organization you're using with the Commerce APIs. This corresponds with the x-gw-ims-org-id header.
)} orderBy="ClientId,ImsOrgID"> + + + + + + + + + + Access token

After copying the access token, you must prepend the token with Bearer to use it with API calls.)} /> + + + + + + + + + + + + + + + + + + + + + + +
+
+

+ OAuth server-to-server credential +

+

+ This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type. +

+
+ +
+ + + + + ) +} + +export default GetCredentialOAuthS2s; \ No newline at end of file diff --git a/src/pages/credential/README.md b/src/pages/credential/README.md new file mode 100644 index 000000000..75d412148 --- /dev/null +++ b/src/pages/credential/README.md @@ -0,0 +1,112 @@ +# Credential template ID implementation + +The `GetCredentialOAuthS2s` component requires a `template_id` to function properly with Adobe Developer Console. This document outlines the implementation approaches and recommended path forward. + +## Original implementation + +The component originally used a [hardcoded](https://github.com/AdobeDocs/adobe-dev-console/pull/140/files#diff-38dc7fe67ef001ab68b7a9aabf74b5b6b7113b0e8f7ead09a6413447f5539cf8R9) `template_id` value directly in the code: + +```javascript + +``` + +**Pros:** + +- Simple and straightforward +- No environment configuration needed +- Works immediately for testing + +**Cons:** + +- Not environment-aware (same ID for staging/production) +- Requires code changes to switch environments, which matters because we need to validate on staging first as part of the test plan + +## Preferred approach + +Similar to the [AEM team's implementation](https://github.com/AdobeDocs/experience-platform-apis/tree/main/src/pages/credentials), use environment variables to manage different template IDs per environment: + +```javascript +// In gatsby-config.js +module.exports = { + siteMetadata: { + template_id: process.env.GATSBY_TEMPLATE_ID, + // ... other metadata + } +} + +// In the component +const { template_id } = data?.site?.siteMetadata || {}; +``` + +**Environment variables:** + +- `GATSBY_TEMPLATE_ID_STAGING` - Template ID for staging environment +- `GATSBY_TEMPLATE_ID_PRODUCTION` - Template ID for production environment + +**Pros:** + +- Environment-specific template IDs +- No code changes needed to switch environments + +**Cons:** + +- Requires environment configuration +- More complex initial setup +- Unclear how local dev builds should work; maybe use staging ID + +## Short-term compromise + +To enable immediate testing while planning the full environment variable implementation: + +### Option 1: Hardcoded with fallback + +```javascript +const { template_id } = data?.site?.siteMetadata || {}; +const fallbackTemplateId = "your_staging_template_id_here"; // Replace with actual ID +const finalTemplateId = template_id || fallbackTemplateId; +``` + +### Option 2: Environment variable with hardcoded fallback + +```javascript +// In gatsby-config.js +module.exports = { + siteMetadata: { + template_id: process.env.GATSBY_TEMPLATE_ID || "fallback_template_id_here", + // ... other metadata + } +} +``` + +## Implementation plan + +### Phase 1: Immediate testing + +- Use the short-term compromise approach +- Test component functionality with hardcoded template ID +- Validate the component works as expected + +### Phase 2: Environment variable implementation + +- Set up environment-specific template IDs +- Update CI/CD pipelines to inject correct environment variables +- Remove hardcoded fallbacks +- Test in staging and production environments + +### Phase 3: Documentation and rollout + +- Document the environment variable approach +- Train team on the new implementation +- Monitor for any issues in production + +## Required actions + +1. **Immediate:** Replace the current undefined `template_id` with a hardcoded staging template ID for testing +2. **Short-term:** Coordinate with DevOps to set up environment variables in CI/CD (GitHub secrets vs hardcoded in workflow files) +3. **Long-term:** Implement full environment variable approach across all environments + +## Template ID sources + +- **Staging:** Adobe Developer Console staging project template ID +- **Production:** Adobe Developer Console production project template ID +- **Local Development:** Use staging template ID for local testing diff --git a/src/pages/credential/images/commerce.svg b/src/pages/credential/images/commerce.svg new file mode 100644 index 000000000..4b22c80c7 --- /dev/null +++ b/src/pages/credential/images/commerce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/reference/rest/saas.md b/src/pages/reference/rest/saas.md index 7447694da..10b44a43e 100644 --- a/src/pages/reference/rest/saas.md +++ b/src/pages/reference/rest/saas.md @@ -4,7 +4,11 @@ description: Review comprehensive reference documentation for the Adobe Commerce keywords: - REST edition: saas -frameSrc: https://adobe-commerce-saas.redoc.ly +# frameSrc: https://adobe-commerce-saas.redoc.ly --- -# REST endpoints for Adobe Commerce as a Cloud Service +import GetCredentialOAuthS2s from '../../credential/GetCredentialOAuthS2s.js' + + + +