Get credential phase 2

cypress.config.js

@@ -12,4 +12,5 @@ module.exports = defineConfig({
  baseUrl: 'http://localhost:9000',
  specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
  },
+ pageLoadTimeout: 300000,
 })

example/gatsby-config.js

@@ -10,6 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
 module.exports = {
  pathPrefix: process.env.PATH_PREFIX || '/example/',
  siteMetadata: {
@@ -35,6 +37,14 @@ module.exports = {
  title: 'Adobe Analytics',
  path: 'index.md'
  },
+ {
+ title: 'Get API Key credential',
+ path: "/getCredential"
+ },
+ {
+ title: 'Get OAuth S2S credential',
+ path: "/get-credential-oauth"
+ },
  {
  title: 'Docs',
  menu: [
@@ -249,9 +259,31 @@ module.exports = {
  }
  ]
  }
+
  ]
  },
  plugins: [
  `@adobe/gatsby-theme-aio`
  ],
+ developMiddleware: app => {
+ app.use(
+ "/console/api",
+ createProxyMiddleware({
+ target: "https://developer-stage.adobe.com/console/api",
+ secure: false,
+ changeOrigin: true,
+ })
+ );
+ app.use("/v1/templates", createProxyMiddleware({
+ target: "https://stage.adobeioruntime.net/api/v1/web/adp-template-registry-deepeshtest/template-registry-api/",
+ secure: false,
+ changeOrigin: true,
+ }));
+
+ app.use("/ims", createProxyMiddleware({
+ target: "https://ims-na1-stg1.adobelogin.com/ims",
+ secure: false,
+ changeOrigin: true,
+ }));
+ },
 };

example/package.json

@@ -4,7 +4,8 @@
  "version": "0.0.1",
  "dependencies": {
  "@adobe/gatsby-theme-aio": "*",
- "gatsby": "4.22.0"
+ "gatsby": "4.22.0",
+ "http-proxy-middleware": "^3.0.0"
  },
  "scripts": {
  "start": "gatsby build && gatsby serve",

example/src/pages/credential/GetCredentialApiKey.js

@@ -0,0 +1,132 @@
+import React from 'react'
+import { GetCredential } from '../../../../packages/gatsby-theme-aio/src/components/GetCredential';
+import creativeCloud from "../../pages/creative_cloud/images/cc-icon.png";
+
+const GetCredentialApiKey = () => {
+ return (
+ <GetCredential className="getCredentialContainer" templateId="664e39607dcc7c0e5a4a035b" >
+
+ <GetCredential.SignIn title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." buttonText="Sign in to create credentials" />
+
+ <GetCredential.Form title="Get credentials" paragraph="Create unique credentials that you will use to call multiple APIs from your application." className="formClass">
+
+ <GetCredential.Form.CredentialName label="Credential name" description="Credential name must be unique and between 3 and 45 characters long. A project will be automatically created with the same name in Adobe Developer Console." range="45" />
+
+ <GetCredential.Form.AllowedOrigins label="Allowed domains (up to 5)" contextHelp={true} contextHelpHeading="What are allowed domains" placeholder="Example: www.domain-1.com, www.domain-2.com, *.my-domain.com, localhost:5000" contextHelpText="To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of domains that you specifically authorize." contextHelpLink="https://www.adobe.com/" contextHelpLabelForLink="Learn more in our documentation" description="Use wildcards to enter multiple subdomains (*.my-domain.com) or commas to separate multiple domains (www.domain-1.com, www.domain-2.com). During local development, you can include ports greater than 1023 with localhost (e.g. localhost:3000). Standard ports (80, 443) will be used for non-localhost domains." />
+
+ <GetCredential.Form.Products label="Included products and services">
+ <GetCredential.Form.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
+ </GetCredential.Form.Products>
+
+ <GetCredential.Form.Downloads label="Download a personalized code sample" contextHelp={true} contextHelpHeading="Select Language">
+ <GetCredential.Form.Download title="JavaScript" href="https://acrobatservices.adobe.com/dc-integration-creation-app-cdn/8bab684/files/samples_q3_2023/PROD/dc-pdf-services-sdk-java-samples.zip" />
+ <GetCredential.Form.Download title=".Net" href="/Net.zip" />
+ <GetCredential.Form.Download title="Python" href="https://python.zip/" />
+ <GetCredential.Form.Download title="Ruby" href="https://www.ruby.zip/" />
+ </GetCredential.Form.Downloads>
+
+ <GetCredential.Form.AdobeDeveloperConsole label='By checking this box, you agree to' linkText="Adobe Developer Terms of Use" href="https://wwwimages2.adobe.com/content/dam/cc/en/legal/servicetou/Adobe-Developer-Additional-Terms_en-US_20230822.pdf" />
+
+ <GetCredential.Form.Side>
+ <div style="display : flex ; gap : 16px ; flex-direction : column;">
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
+ <p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
+ <a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
+ <a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
+ </div>
+ </GetCredential.Form.Side>
+
+ </GetCredential.Form>
+
+ <GetCredential.UnknownError helpLink="https://some_help_link" helpLinkText="Get Help" className="unKnownError" />
+
+ <GetCredential.Card title="Your credential is ready to use" paragraph="Check the downloads section of your browser for the ZIP file, or find it where you save downloads on your machine." nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer console" className="card_developer_console">
+
+ <GetCredential.Card.Side>
+ <div style="display : flex ; gap : 16px ; flex-direction : column;">
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
+ <p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
+ <a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
+ <a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
+ </div>
+ </GetCredential.Card.Side>
+
+ <GetCredential.Card.Products label="Included products and services">
+ <GetCredential.Card.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
+ </GetCredential.Card.Products>
+
+ <GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
+
+ <GetCredential.Card.CredentialDetails heading="Credential details">
+ <GetCredential.Card.CredentialDetails.APIKey heading="API Key" />
+ <GetCredential.Card.CredentialDetails.AllowedOrigins heading="Allowed domains" />
+ <GetCredential.Card.CredentialDetails.OrganizationName heading="Organization" />
+ </GetCredential.Card.CredentialDetails>
+
+ </GetCredential.Card>
+
+ <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Firefly - Firefly and Creative Cloud Automation." devConsoleDirection="project_overview|api_overview|credential_overview" nextStepsLabel="Next steps" nextStepsHref="/credentials/nextsteps" developerConsoleManage="Manage on Developer console" className="card_developer_console">
+
+ <GetCredential.Return.Side>
+ <GetCredential.Return.Side.Custom>
+ <div style={{ display: "flex", gap: "30px", flexDirection: "column", width: "100%" }}>
+ <h3 className='spectrum-Heading spectrum-Heading--sizeM'>Welcome back</h3>
+ <p className="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
+ </div>
+ </GetCredential.Return.Side.Custom>
+ <GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
+ </GetCredential.Return.Side>
+
+ <GetCredential.Return.CredentialDetails heading="Credential details">
+ <GetCredential.Return.CredentialDetails.APIKey heading="API Key" />
+ <GetCredential.Return.CredentialDetails.AllowedOrigins heading="Allowed domains" />
+ <GetCredential.Return.CredentialDetails.OrganizationName heading="Organization" />
+ </GetCredential.Return.CredentialDetails>
+
+ <GetCredential.Return.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
+
+ <GetCredential.Return.ManageDeveloperConsole label="Manage all your projects and credentials on Adobe Developer Console" direction='/console/projects' />
+
+ <GetCredential.Return.DevConsoleLink heading="Developer Console Project" />
+
+ <GetCredential.Return.Products label="Included products and services">
+ <GetCredential.Return.Product label="Adobe Express Embed SDK" icon={creativeCloud} />
+ </GetCredential.Return.Products>
+
+ </GetCredential.Return>
+
+ <GetCredential.RequestAccess
+ title="Get credentials"
+ paragraph="Create unique credentials that you will use to call multiple APIs from your application."
+ >
+ <GetCredential.RequestAccess.RestrictedAccess
+ title="Restricted Access"
+ buttonLabel="Request access"
+ >
+ <GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts label="Included products and services">
+ <GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts.RestrictedAccessProduct label="Adobe Express Embed SDK" icon={creativeCloud} />
+ </GetCredential.RequestAccess.RestrictedAccess.RestrictedAccessProducts>
+ </GetCredential.RequestAccess.RestrictedAccess>
+ <GetCredential.RequestAccess.RequestAccessSide>
+ <div style="display : flex ; gap : 16px ; flex-direction : column;">
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >API key credential</h3>
+ <p className="spectrum-Body spectrum-Body--sizeM">Submitting this form creates an API Key credential. The API key credential identifies your application to Adobe servers and can help accept or reject requests originating from certain domains.</p>
+ <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header" >Learn more</h3>
+ <a className="side-documentation" style={{ color: "#0265DC" }} href='https://some_help_link'>Authentication documentation</a>
+ <a className='side-documentation' style={{ color: "#0265DC" }} href='https://some_help_link'>Express Embed SDK documentation</a>
+ </div>
+ </GetCredential.RequestAccess.RequestAccessSide>
+ </GetCredential.RequestAccess>
+
+ <GetCredential.NoDeveloperAccessError title='Get Credentials' docsLinkText="How do I get developer permissions for the [Firefly - Firefly and Creative Cloud Automation API]?" docsLink="" />
+
+ <GetCredential.ErrorCode helpLink="Get help" title="Error code ###" description="Your personal account does not have Developer role permission to access the [Org Name, Inc.] organization in the Adobe Developer Console." buttonLabel="Contact Adobe" buttonLink="https://some_help_link" />
+
+ </GetCredential>
+
+ )
+}
+
+export default GetCredentialApiKey;