DocumentatieAEMTutorials voor AEMTutorials voor AEM as a Cloud Service

AEM API's op basis van OpenAPI aanroepen met OAuth Web App-verificatie

Laatst bijgewerkt: 5 mei 2025
  • Van toepassing op:
  • Experience Manager as a Cloud Service
  • Onderwerpen:
  • Ontwikkelen

Gemaakt voor:

  • tussenpersoon
  • Ontwikkelaar
  • Leider

Leer hoe u op OpenAPI gebaseerde AEM API's op AEM as a Cloud Service oproept met gebruikersgebaseerde verificatie van een aangepaste webapp die gebruikmaakt van OAuth Web App.

De authentificatie van de Toepassing van het Web OAuth is ideaal voor Webtoepassingen met vooruitstrevende en achterste componenten die toegang moeten hebben tot AEM APIs namens een gebruiker. Het gebruikt OAuth 2.0 authentication_code verlenen type om een toegangstoken namens de gebruiker te verkrijgen om tot AEM APIs toegang te hebben. Voor meer informatie, zie Verschil tussen Server-aan-Server van OAuth vs Web App geloofsbrieven van de Enige Pagina App.

Wat u leert

In deze zelfstudie leert u hoe u:

  • Vorm een project van Adobe Developer Console (ADC) om tot de Auteur API van Assets toegang te hebben gebruikend authentificatie van de App van het Web 0} OAuth.

  • Implementeer de OAuth Web App-verificatiestroom in een aangepaste web-app.

    • IMS-gebruikersverificatie en -toepassingsautorisatie.
    • Ophalen van gebruikerspecifieke toegangstoken.
    • Toegang krijgen tot AEM API's die zijn gebaseerd op OpenAPI's met behulp van het gebruikerspecifieke toegangstoken.

Controleer voordat u begint het volgende:

  • Toegang hebbend tot Adobe APIs en verwante conceptensectie.
  • 🔗 artikel van opstellingsOpenAPI-Gebaseerde AEM APIs.

Voorbeeld van een web-app: WKND-PIM-overzicht en functionele flow

Laten we de voorbeeldwebtoepassing, het WKND-productinformatiebeheer (PIM) en de functionele stroom ervan begrijpen.

De WKND PIM-app is een voorbeeldwebtoepassing die is ontworpen voor het beheer van productkenmerken en de metagegevens van bedrijfsmiddelen die in AEM as a Cloud Service zijn opgeslagen. In dit voorbeeld wordt getoond hoe webtoepassingen naadloos kunnen integreren met Adobe API's om efficiënte, gebruikersgerichte workflows te leveren.

Het Adobe Developer Console-project (ADC) is geconfigureerd voor toegang tot de Assets Author API met behulp van de OAuth Web App-verificatie. Het verstrekt noodzakelijke client_id en client_geheime aan het Web WKND-PIM app om de authentication_code subsidiestroom in werking te stellen.

video poster

https://video.tv.adobe.com/v/3442763?quality=12&learn=on&captions=dut

Het volgende diagram illustreert de functionele stroom van WKND-PIM Web app die gebruikerspecifieke toegangstokens krijgt om met de Auteur API van Assets in wisselwerking te staan.

WKND-PIM Web App Flow

  1. De webtoepassing start het proces door de gebruiker om te leiden naar het Adobe Identity Management System (IMS) voor verificatie.
  2. Samen met redirect, gaat Web app vereiste client_id en redirect_uri tot IMS over.
  3. IMS verklaart de gebruiker voor authentiek en verzendt hen terug naar gespecificeerde redirect_uri met een authentication_code.
  4. Het Web app ruilt authentication_code met IMS voor een gebruiker-specifiek toegangstoken, gebruikend zijn client_id en client_geheime.
  5. Op succesvolle bevestiging, geeft IMS het user-specific toegangstoken uit.
  6. Webapp gebruikt veilig het toegangstoken om met de Auteur API van Assets in wisselwerking te staan, toelatend de gebruiker om de meta-gegevens van de productactiva terug te winnen of bij te werken.

WKND-PIM Web app wordt ontwikkeld gebruikend Node.jsen Uitdrukkelijke. Express handelt als de server die veilig persoonlijke geheimen en gebruikerspecifieke toegangstokens beheert.

Andere webstapels (Java, Python, .NET-gebaseerd, enz.) kunnen worden gebruikt om webtoepassingen te maken die integreren met de Adobe API's met behulp van de benaderingen die in deze zelfstudie worden geïllustreerd.

Deze zelfstudie gebruiken

U kunt of het Web van het Overzicht app zeer belangrijke codefragmentensectie {om de de authentificatiestroom van de App van het Web te begrijpen OAuth en API codefragmenten roepen die in WKND-PIM Web worden gebruikt app. Of ga direct aan de Opstelling te werk en Web appsectie in werking te stellen aan opstelling en WKND-PIM Web app op uw lokale machine in werking te stellen om de OAuth de authentificatiestroom van de App en API vraag te begrijpen.

Codefragmenten voor webapps bekijken

Laten we de belangrijkste codefragmenten bekijken die worden gebruikt in de WKND-PIM-webapp om inzicht te krijgen in de OAuth Web App-verificatiestroom en API-aanroepen.

De WKND-PIM-webtoepassingscode downloaden

  1. Download het WKND-PIM Web app.zip dossier en haal het uit.

  2. Navigeer naar de uitgepakte map en open het bestand .env.example in uw favoriete code-editor. Controleer de vereiste configuratieparameters.

    ########################################################################
    # Adobe IMS, Adobe Developer Console (ADC), and AEM Assets Information
    ########################################################################
    # Adobe IMS OAuth endpoints
    ADOBE_IMS_AUTHORIZATION_ENDPOINT=https://ims-na1.adobelogin.com/ims/authorize/v2
    ADOBE_IMS_TOKEN_ENDPOINT=https://ims-na1.adobelogin.com/ims/token/v3
    ADOBE_IMS_USERINFO_ENDPOINT=https://ims-na1.adobelogin.com/ims/userinfo/v2
    
    # Adobe Developer Console (ADC) Project's OAuth Web App credential
    ADC_CLIENT_ID=<ADC Project OAuth Web App credential ClientID>
    ADC_CLIENT_SECRET=<ADC Project OAuth Web App credential Client Secret>
    ADC_SCOPES=<ADC Project OAuth Web App credential credential Scopes>
    
    # AEM Assets Information
    AEM_ASSET_HOSTNAME=<AEM Assets Hostname, e.g., https://author-p63947-e1502138.adobeaemcloud.com/>
    AEM_ASSET_IDS=< AEM Asset IDs Comma Seperated, e.g., urn:aaid:aem:9f20a8ce-934a-4560-8720-250e529fbb17,urn:aaid:aem:6e0123cd-8a67-4d1f-b721-1b3da987d831>
    
    ################################################
    # Web App Information
    ################################################
    # The port number on which this server (web app) will run
    PORT = 3000
    
    # The URL to which the user will be redirected after the OAuth flow is complete
    REDIRECT_URI=https://localhost:3001/callback
    
    # The Express (express-session) uses this secret to encrypt and verify the authenticity of that cookie
    EXPRESS_SESSION_SECRET=<Express Session Secret>
    

    U moet de plaatsaanduidingen vervangen door de werkelijke waarden uit het Adobe Developer Console-project (ADC) en het AEM as a Cloud Service Assets-exemplaar.

IMS-gebruikersverificatie en -toepassingsautorisatie

Controleer de code waarmee de IMS-gebruikersverificatie en -toepassingsautorisatie worden gestart. Als u de metagegevens van de middelen wilt bekijken of bijwerken, moet de gebruiker zich verifiëren met de Adobe IMS en de WKND-PIM-webapp machtigen om namens hem toegang te krijgen tot de Assets Author API.

Bij de allereerste aanmeldingspoging moet de gebruiker toestemming geven om de WKND-PIM-webapp namens hem toegang te geven tot de Assets Author API.

Eerste Login en Toestemming

  1. Het routes/update-product-attributes.js dossier verifieert als de 1} Uitdrukkelijke zitting van de gebruiker 🔗 een toegangstoken heeft. Als dat niet het geval is, leidt het de gebruiker om naar de /auth route.

    ...
    // The update-product-attributes route, shows the product attributes form with tabs
    router.get("/update-product-attributes", async (req, res) => {
      // Check if the user is authenticated, if not redirect to the auth route
      if (!req.session.accessToken) {
          return res.redirect("/auth");
      }
      ...
    });
    
  2. In routes/adobe-ims-auth.js -bestand start de /auth -route de gebruikersverificatie en de autorisatiestroom van de IMS-toepassing. Noteer client_id, redirect_uri, en response_type parameters die tot het de vergunningseindpunt van Adobe IMS worden overgegaan.

    ...
    // Route to initiate Adobe IMS user authentication
    router.get("/auth", (req, res) => {
      // Redirect user to Adobe IMS authorization endpoint
      try {
          // Constructing the authorization URL
          const params = new URLSearchParams({
          client_id: adobeADCConfig.clientId,
          redirect_uri: redirectUri,
          response_type: "code",
          });
    
          // Append scopes if defined in configuration
          if (adobeADCConfig?.scopes) params.append("scope", adobeADCConfig.scopes);
    
          // Redirect user to Adobe IMS authorization URL
          const imsAuthorizationUrl = `${
          adobeIMSConfig.authorizationEndpoint
          }?${params.toString()}`;
    
          res.redirect(imsAuthorizationUrl);
      } catch (error) {
          console.error("Error initiating Adobe IMS authentication:", error);
          res.status(500).send("Unable to initiate authentication");
      }
    });
    ...
    

Als de gebruiker niet op basis van de Adobe IMS is geverifieerd, wordt de Adobe ID-aanmeldingspagina weergegeven met het verzoek om verificatie.

Als reeds voor authentiek verklaard, wordt de gebruiker opnieuw gericht terug naar gespecificeerde redirect_uri van het Web WKND-PIM met een authentication_code.

Ophalen van toegangstoken

Het Web-app WKND-PIM ruilt veilig authentication_code met Adobe IMS voor een user-specific toegangstoken gebruikend client_id en client_geheime van de referentie van de App van het Web van het Project ADC.

In het routes/adobe-ims-auth.js dossier, ruilt de /callback route authentication_code met Adobe IMS voor een gebruiker-specifiek toegangstoken.

...
// Callback route to exchange authorization code for access token
router.get("/callback", async (req, res) => {
  // Extracting authorization code from the query parameters
  const authorizationCode = req.query.code;

  if (!authorizationCode) {
    return res.status(400).send("Missing authorization code");
  }

  // Exchange authorization code for access token
  try {
    // Fetch access token from Adobe IMS token endpoint
    const response = await fetch(adobeIMSConfig.tokenEndpoint, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Basic ${Buffer.from(
          `${adobeADCConfig.clientId}:${adobeADCConfig.clientSecret}`
        ).toString("base64")}`,
      },
      body: new URLSearchParams({
        code: authorizationCode,
        grant_type: "authorization_code",
      }),
    });

    if (!response.ok) {
      console.error("Failed to fetch access token:", response.statusText);
      return res.status(500).send("Failed to fetch access token");
    }

    const data = await response.json();

    if (!data.access_token) {
      console.error("Access token missing in the response:", data);
      return res.status(500).send("Invalid response from token endpoint");
    }

    // For debugging purposes
    console.log("Access token:", data.access_token);

    // Store the access token in the session
    req.session.accessToken = data.access_token;

    // Redirect user to update product attributes
    res.redirect("/update-product-attributes");
  } catch (error) {
    console.error("Error exchanging authorization code:", error);
    res.status(500).send("Error during token exchange");
  }
});

Het toegangstoken wordt opgeslagen in de Uitdrukkelijke zittingvoor verdere verzoeken aan de Auteur API van Assets.

Toegang krijgen tot AEM API's die zijn gebaseerd op OpenAPI met behulp van het toegangstoken

De WKND-PIM-webtoepassing gebruikt veilig het gebruikerspecifieke toegangstoken om te communiceren met de Assets Author API, waardoor de gebruiker metagegevens van productelementen kan ophalen of bijwerken.

In het routes/invoke-aem-apis.js -bestand roepen de /api/getAEMAssetMetadata - en /api/updateAEMAssetMetadata -routes de Assets-auteur-API's aan met behulp van het toegangstoken.

...
// API Route: Get AEM Asset Metadata
router.get("/api/getAEMAssetMetadata", async (req, res) => {
  const assetId = req.query.assetId;
  const bucketName = getBucketName(aemAssetsConfig.hostname);

  if (!assetId || !bucketName) {
    return res.status(400).json({ error: "Missing AEM Information" });
  }

  // Get the access token from the session
  const accessToken = req.session.accessToken;

  if (!accessToken) {
    return res.status(401).json({ error: "Not Authenticated with Adobe IMS" });
  }

  try {
    const assetMetadata = await invokeGetAssetMetadataAPI(
      bucketName,
      assetId,
      accessToken
    );

    const filteredMetadata = getFilteredMetadata(JSON.parse(assetMetadata));
    res.status(200).json(filteredMetadata);
  } catch (error) {
    console.error("Error getting asset metadata:", error.message);
    res.status(500).json({ error: `Internal Server Error: ${error.message}` });
  }
});

// Helper function to invoke the AEM API to get asset metadata
async function invokeGetAssetMetadataAPI(bucketName, assetId, accessToken) {
  const apiUrl = `https://${bucketName}.adobeaemcloud.com/adobe/assets/${assetId}/metadata`;


  // For debugging purposes
  console.log("API URL:", apiUrl);
  console.log("Access Token:", accessToken);
  console.log("API Key:", adobeADCConfig.clientId);

  try {
    const response = await fetch(apiUrl, {
      method: "GET",
      headers: {
        "If-None-Match": "string",
        "X-Adobe-Accept-Experimental": "1",
        Authorization: `Bearer ${accessToken}`,
        "X-Api-Key": adobeADCConfig.clientId,
      },
    });

    console.log("Response Status:", response.status);

    if (!response.ok) {
      throw new Error(`AEM API Error: ${response.statusText}`);
    }

    return await response.text();
  } catch (error) {
    throw new Error(`Failed to fetch asset metadata: ${error.message}`);
  }
}

// Helper function to filter the metadata properties like pim: and dc:
function getFilteredMetadata(data) {
  if (!data || !data.assetMetadata) {
    throw new Error("Invalid metadata structure received from API");
  }

  const properties = data.assetMetadata;
  return Object.keys(properties).reduce((filtered, key) => {
    if (
      key.startsWith("pim:") ||
      key === "dc:title" ||
      key === "dc:description"
    ) {
      filtered[key] = properties[key];
    }
    return filtered;
  }, {});
}

// API Route: Update AEM Asset Metadata
router.post("/api/updateAEMAssetMetadata", async (req, res) => {
  const { assetId, metadata } = req.body;

  if (!assetId || !metadata || typeof metadata !== "object") {
    return res.status(400).json({ error: "Invalid or Missing Metadata" });
  }

  const bucketName = getBucketName(aemAssetsConfig.hostname);
  if (!bucketName) {
    return res.status(400).json({ error: "Missing AEM Information" });
  }

  const accessToken = req.session.accessToken;
  if (!accessToken) {
    return res.status(401).json({ error: "Not Authenticated with Adobe IMS" });
  }

  try {
    const updatedMetadata = await invokePatchAssetMetadataAPI(
      bucketName,
      assetId,
      metadata,
      accessToken
    );
    res.status(200).json(updatedMetadata);
  } catch (error) {
    console.error("Error updating asset metadata:", error.message);
    res.status(500).json({ error: `Internal Server Error: ${error.message}` });
  }
});

// Helper function to invoke the AEM API to update asset metadata
async function invokePatchAssetMetadataAPI(
  bucketName,
  assetId,
  metadata,
  accessToken
) {
  const apiUrl = `https://${bucketName}.adobeaemcloud.com/adobe/assets/${assetId}/metadata`;
  const headers = {
    "Content-Type": "application/json-patch+json",
    "If-Match": "*",
    "X-Adobe-Accept-Experimental": "1",
    Authorization: `Bearer ${accessToken}`,
    "X-Api-Key": adobeADCConfig.clientId,
  };

  try {
    const response = await fetch(apiUrl, {
      method: "PATCH",
      headers,
      body: JSON.stringify(getTransformedMetadata(metadata)),
    });

    if (!response.ok) {
      throw new Error(`AEM API Error: ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    throw new Error(`Failed to update asset metadata: ${error.message}`);
  }
}

// Helper function to transform metadata into JSON Patch format, e.g. [{ op: "add", path: "dc:title", value: "New Title" }]
function getTransformedMetadata(metadata) {
  return Object.keys(metadata).map((key) => ({
    op: "add",
    path: `/${key}`,
    value: metadata[key],
  }));
}

De op OpenAPI gebaseerde AEM API-aanroepen worden gemaakt vanaf de server-kant (Express middleware) en niet rechtstreeks vanaf de client-kant (browser) om ervoor te zorgen dat het toegangstoken veilig wordt beheerd en niet aan de client-kant wordt weergegeven.

Het toegangstoken vernieuwen

Om het toegangstoken te verfrissen alvorens het verloopt, kunt u uitvoeren verfrist symbolische stroom. Om de zelfstudie echter eenvoudig te houden, implementeert de WKND-PIM-webapp de token-flow voor vernieuwen niet.

TIP
U kunt de volgende sectie volgen om WKND-PIM Web app op uw lokale machine uit te proberen en praktijkervaring met de OAuth Web App authentificatiestroom en API vraag te krijgen.

Webtoepassing instellen en uitvoeren

Configureer en voer de WKND-PIM-webapp op uw lokale computer uit om de OAuth Web App-verificatiestroom en API-aanroepen te begrijpen.

Vereisten

U hebt het volgende nodig om deze zelfstudie te voltooien:

  • Modernisering van de AEM as a Cloud Service-omgeving met het volgende:

    • AEM Release 2024.10.18459.20241031T210302Z of hoger.
    • Nieuwe stijlproductprofielen (als de omgeving vóór november 2024 is gemaakt)

    Zie opstelling op OpenAPI-Gebaseerde AEM APIsartikel voor meer details.

  • Het steekproef WKNDproject van Plaatsen moet op het worden opgesteld.

  • Toegang tot Adobe Developer Console.

  • Installeer Node.jsop uw lokale machine om de toepassing van steekproefNodeJS in werking te stellen.

  • Installeer a lokaal-ssl-volmachtop uw lokale machine om een lokale SSL HTTP- volmacht tot stand te brengen gebruikend een zelf-ondertekend certificaat.

Ontwikkelingsstappen

De ontwikkelingsstappen op hoog niveau zijn:

  1. ADC-project configureren

    1. De Assets-auteur-API toevoegen
    2. OAuth Web App-referentie configureren
  2. De AEM-instantie configureren om ADC-projectcommunicatie in te schakelen

  3. In AEM maakt en past u het schema voor metagegevens van elementen toe

  4. De WKND-PIM-webapp configureren en uitvoeren

  5. Verifieer de stroom van begin tot eind

ADC-project configureren

Vorm ADC de stap van het Project wordt herhaald van OpenAPI-Gebaseerde AEM APIs van de Opstelling. De methode wordt herhaald om de Assets-auteur-API toe te voegen en de verificatiemethode te configureren als OAuth Web App.

  1. Van Adobe Developer Console, open het gewenste project.

  2. Om AEM APIs toe te voegen, klik op voeg API knoop toe.

    voeg API toe

  3. In voeg API dialoog toe, filter door Experience Cloud en selecteer de Auteur API van AEM Assets kaart en klik daarna.

    voeg AEM API toe

  4. Daarna, in vorm API dialoog, selecteer de 3} authentificatieoptie van de Authentificatie van de Gebruiker {en klik daarna .

    vorm AEM API

  5. In volgende vorm API dialoog, selecteer de OAuth de authentificatieoptie van de Toepassing van het Web en klik daarna.

    vorm OAuth Web App

  6. In vorm OAuth Web App dialoog, ga de volgende details in en klik daarna.

    • Standaard omleidings-URI: https://localhost:3001/callback
    • URI-patroon omleiden: https://localhost:3001/callback

    vorm OAuth Web App

  7. Herzie het beschikbare werkingsgebied en klik sparen gevormde API.

    sparen gevormde API

  8. Controleer de AEM API- en verificatieconfiguratie.

    de configuratie van AEM API

    configuratie van de Authentificatie

AEM-instantie configureren om ADC-projectcommunicatie in te schakelen

Volg de instructies van het op OpenAPI-Gebaseerde artikel van AEM APIs van de Opstellingom de instantie van AEM te vormen om de mededeling van het Project van ADC toe te laten.

Metagegevensschema voor elementen maken en toepassen

Door gebrek, heeft het project van Plaatsen WKND niet het vereiste schema van activa meta-gegevens om de productattributen te tonen. Laten we het metagegevensschema voor elementen maken en toepassen op een elementenmap in de AEM-instantie.

  1. Meld u aan bij de AEM as a Cloud Service Asset-instantie. Gebruikend de mening van Activanavigeert aan de /content/dam/wknd-shared/en omslag.

    ga aan omslag

  2. Creeer a PIM en binnen het leiden tot de Camping omslag, dan uploadt steekproefbeeldenin de Camping omslag.

    Omslag PIM

Daarna, creeer de attributen PIM specifiek meta-gegevensschema en pas het op de PIM omslag toe.

  1. Navigeer aan de Montages > optie van Forms van Meta-gegevens van het linkerspoor en klik creeer knoop.

  2. In creeer de dialoog van de Vorm van Meta-gegevens, ga de volgende details in en klik creeer.

    • Naam: PIM
    • Bestaande formulierstructuur als sjabloon gebruiken: Check
    • Kiezen uit: default

    creeer de Vorm van Meta-gegevens

  3. Klik het + pictogram om een nieuw PIM lusje toe te voegen en Enige Tekst van de Lijn componenten aan het toe te voegen. De namen van de metagegevenseigenschappen moeten beginnen met het voorvoegsel pim: .

    voeg PIM Lusje toe

    Label
    Plaatsaanduiding
    Eigenschap Metadata
    SKU
    SKU-id invoeren
    pim:sku
    Producttype
    bijv. rugzak, tent, jasje
    pim:productType
    Productcategorie
    bijv. kamperen, wandelen, beklimmen
    pim:productCategory
    Fabrikant
    Naam fabrikant invoeren
    pim:manufacturer
    Model
    Naam model invoeren
    pim:model
    Merknaam
    Geef de merknaam op
    pim:brandName
  4. Klik sparen en dicht om de meta-gegevensvorm te bewaren.

  5. Tot slot pas het PIM meta-gegevensschema op de PIM omslag toe.

    pas het Schema van Meta-gegevens toe

Met de bovengenoemde stappen, zijn de activa van de PIM omslag klaar om de meta-gegevens van productattributen op te slaan.

De WKND-PIM-webapp configureren en uitvoeren

  1. Download het WKND-PIM Web app.zip dossier en haal het uit.

  2. Navigeer naar de uitgepakte map en kopieer het .env.example -bestand naar .env .

  3. Werk het .env -bestand bij met de vereiste configuratieparameters van het Adobe Developer Console-project (ADC) en de AEM as a Cloud Service Assets-instantie.

    ########################################################################
    # Adobe IMS, Adobe Developer Console (ADC), and AEM Assets Information
    ########################################################################
    # Adobe IMS OAuth endpoints
    ADOBE_IMS_AUTHORIZATION_ENDPOINT=https://ims-na1.adobelogin.com/ims/authorize/v2
    ADOBE_IMS_TOKEN_ENDPOINT=https://ims-na1.adobelogin.com/ims/token/v3
    ADOBE_IMS_USERINFO_ENDPOINT=https://ims-na1.adobelogin.com/ims/userinfo/v2
    
    # Adobe Developer Console (ADC) Project OAuth Web App credential
    ADC_CLIENT_ID=e1adsfsd59384320bbe4f9298f00b7ab
    ADC_CLIENT_SECRET=p8e-Mdfgfdsg43RHugVRTEOyWlmEU5m
    ADC_SCOPES=AdobeID,openid,aem.folders,aem.assets.author
    
    # AEM Assets Information
    AEM_ASSET_HOSTNAME=https://author-p3947-e1542138.adobeaemcloud.com/
    AEM_ASSET_IDS=urn:aaid:aem:aa689a9f-04da-4fbb-b460-74a5b6a69090,urn:aaid:aem:e4fdb6f6-1007-4e84-9726-a9522931786a
    
    ################################################
    # Web App Information
    ################################################
    # The port number on which this server (web app) will run
    PORT = 3000
    
    # The URL to which the user will be redirected after the OAuth flow is complete
    REDIRECT_URI=http://localhost:3000/auth/callback
    
    # The Express (express-session) uses this secret to encrypt and verify the authenticity of that cookie
    # For demonstration purposes, this is a simple secret. In production, you should use a strong secret
    EXPRESS_SESSION_SECRET=1234554321
    

    AEM_ASSET_IDS is de jcr:uuid bezitswaarde van de geüploade beelden in de 3} omslag van de Camping. Verwijs naar deze sectievoor meer details.

  4. Open een terminal en navigeer naar de uitgepakte map. Installeer de vereiste gebiedsdelen gebruikend het volgende bevel.

    $ npm install
    
  5. Start de WKND-PIM-webtoepassing met de volgende opdracht.

    $ npm start
    
  6. Voer de lokale SSL HTTP-proxy uit met de volgende opdracht.

    $ local-ssl-proxy --source 3001 --target 3000 --cert ./ssl/server.crt --key ./ssl/server.key
    

    De lokale SSL HTTP-proxy wordt gebruikt als IMS, waarbij de omleidings-URI HTTPS moet zijn.

Verifieer de stroom van begin tot eind

  1. Open een browser en navigeer naar https://localhost:3001 om toegang te krijgen tot de WKND-PIM-webapp. Accepteer de zelfondertekende certificaatwaarschuwing.

    WKND-PIM Web App

  2. Klik probeert nu om de meta-gegevens van productattributen te herzien en bij te werken. De IMS-gebruikersverificatie en de autorisatiestroom van toepassingen worden gestart.

  3. Meld u aan met uw Adobe ID-referenties en geef toestemming om de WKND-PIM-webapp namens u toegang te geven tot de Assets Author API.

  4. Van de https://localhost:3001/update-product-attributes route/pagina, klik de Attributen van het Activum van AEM tabel. Van identiteitskaart van Activa dropdown, selecteer een identiteitskaart van Activa om de activa meta-gegevens te bekijken.

    krijgt Metagegevens van Activa

  5. Werk de activameta-gegevens bij en klik de Attributen van het Activum van AEM bijwerken om de activa meta-gegevens bij te werken.

    Metagegevens van Activa van de Update

IMPORTANT
Als de geverifieerde gebruiker niet beschikt over de benodigde machtigingen om metagegevens van middelen te controleren of bij te werken, retourneren de op OpenAPI gebaseerde AEM API's een fout van 403 Verboden. Het zorgt ervoor dat, zelfs als de gebruiker voor authentiek wordt verklaard en een geldig toegangstoken IMS heeft, zij tot de middelen van AEM zonder de vereiste toestemmingen niet kunnen toegang hebben.

De toepassingscode controleren

Laten we de codestructuur op hoog niveau en de belangrijkste entry-punten van de WKND-PIM-webapp evalueren. De toepassing wordt ontwikkeld met Node.js + Express.

  1. app.js is het belangrijkste ingangspunt van de toepassing. Het initialiseert Uitdrukkelijke app, plaatst omhoog de zitting, en zet de routes op.

  2. De map public bevat de statische elementen zoals CSS, JavaScript en afbeeldingen. Het script.js -bestand bevat de JavaScript-code aan de clientzijde voor interactie met de Express /api/getAEMAssetMetadata - en /api/updateAEMAssetMetadata -routes.

  3. De map routes bevat de expresroutes:

    1. index.js: De hoofdroute die de startpagina rendert.
    2. update-product-attributes.js: De route die de productkenmerken van een formulier met tabs weergeeft, verifieert ook Express session voor toegangstoken.
    3. adobe-ims-auth.js: De route waarmee de gebruikersverificatie- en toepassingsautorisatiestroom van Adobe IMS wordt gestart.
    4. invoke-aem-apis.js: De route die de op OpenAPI gebaseerde AEM APIs gebruikend het user-specific toegangstoken aanhaalt.
  4. De map views bevat de EJS-sjablonen om de HTML-pagina's te renderen.

  5. De map utils bevat de hulpprogrammafuncties.

  6. De map ssl bevat de zelfondertekende certificaat- en sleutelbestanden voor het uitvoeren van de lokale SSL HTTP-proxy.

U kunt de bestaande web-app ontwikkelen of integreren met de Adobe API's met behulp van andere server-side technologieën zoals Java, Python of .NET.

Samenvatting

In deze zelfstudie hebt u geleerd hoe u op OpenAPI gebaseerde AEM API's op AEM as a Cloud Service kunt aanroepen vanuit een aangepaste webapp met OAuth Web App-verificatie. U hebt de belangrijkste codefragmenten bekeken die in WKND-PIM Web app worden gebruikt om de OAuth Web App authentificatiestroom te begrijpen.

U kunt de zelfstudie gebruiken als referentie om de op OpenAPI gebaseerde AEM API's te integreren met uw aangepaste webtoepassingen en zo efficiënte, gebruikersgerichte workflows te bieden.

Aanvullende bronnen

  • Gids van de Implementatie van de Authentificatie van de Gebruiker
  • machtigt Verzoek
  • het Ophalen tokens van de Toegang
  • het Verfrissen van de tokens van de Toegang
recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69