AEM-API's op basis van OpenAPI aanroepen met OAuth-app met één pagina

########################################################################
# Adobe IMS, Adobe Developer Console (ADC), and AEM as a Cloud Service Information
########################################################################
# Adobe IMS OAuth endpoints
REACT_APP_ADOBE_IMS_AUTHORIZATION_ENDPOINT=https://ims-na1.adobelogin.com/ims/authorize/v2
REACT_APP_ADOBE_IMS_TOKEN_ENDPOINT=https://ims-na1.adobelogin.com/ims/token/v3

# Adobe Developer Console (ADC) Project's OAuth Single-Page App credential
REACT_APP_ADC_CLIENT_ID=<ADC Project OAuth Single-Page App credential ClientID>
REACT_APP_ADC_SCOPES=<ADC Project OAuth Single-Page App credential Scopes>

# AEM Assets Information
REACT_APP_AEM_ASSET_HOSTNAME=<AEMCS Hostname, e.g., https://author-p63947-e1502138.adobeaemcloud.com/>

################################################
# Single Page Application Information
################################################

# Enable HTTPS for local development
HTTPS=true
PORT=3001

# SSL Certificate and Key for local development
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

# The URL to which the user will be redirected after the OAuth flow is complete
REACT_APP_REDIRECT_URI=https://localhost:3000/callback

...
const login = async () => {
    try {
        const codeVerifier = generateCodeVerifier();
        const codeChallenge = generateCodeChallenge(codeVerifier);

        localStorage.setItem(STORAGE_KEYS.CODE_VERIFIER, codeVerifier);

        const params = new URLSearchParams(
            getAuthParams(AUTH_METHODS.S256, codeChallenge, codeVerifier)
        );

        window.location.href = `${
            APP_CONFIG.adobe.ims.authorizationEndpoint //https://ims-na1.adobelogin.com/ims/authorize/v2
        }?${params.toString()}`;
    } catch (error) {
        console.error("Login initialization failed:", error);
        throw error;
    }
};
...

// Generate a random code verifier
export function generateCodeVerifier() {
    const array = new Uint8Array(32);
    window.crypto.getRandomValues(array);
    const wordArray = CryptoJS.lib.WordArray.create(array);
    return base64URLEncode(wordArray);
}

// Generate code challenge using SHA-256
export function generateCodeChallenge(codeVerifier) {
    const hash = CryptoJS.SHA256(codeVerifier);
    return base64URLEncode(hash);
}

// Get authorization URL parameters
const getAuthParams = useCallback((method, codeChallenge, codeVerifier) => {
    const baseParams = {
        client_id: APP_CONFIG.adobe.adc.clientId, // ADC Project OAuth Single-Page App credential ClientID
        scope: APP_CONFIG.adobe.adc.scopes, // ADC Project OAuth Single-Page App credential Scopes
        response_type: "code",
        redirect_uri: APP_CONFIG.adobe.spa.redirectUri, // SPA redirect URI https://localhost:3000/callback
        code_challenge_method: method, // S256 or plain
    };

    return {
        ...baseParams,
        code_challenge:
            method === AUTH_METHODS.S256 ? codeChallenge : codeVerifier,
        };
}, []);
...

...
// Handle the callback from the Adobe IMS authorization endpoint
const handleCallback = async (code) => {
    if (authState.isProcessingCallback) return;

    try {
        updateAuthState({ isProcessingCallback: true });

        const data = await exchangeCodeForToken(code);

        if (data.access_token) {
            handleStorageToken(data.access_token);
            localStorage.removeItem(STORAGE_KEYS.CODE_VERIFIER);
        }
    } catch (error) {
        console.error("Error exchanging code for token:", error);
        throw error;
    } finally {
        updateAuthState({ isProcessingCallback: false });
    }
};

...
// Exchange the authorization code for an access token
const exchangeCodeForToken = useCallback(async (code) => {
    const codeVerifier = localStorage.getItem(STORAGE_KEYS.CODE_VERIFIER);

    if (!codeVerifier) {
        throw new Error("No code verifier found");
    }

    //https://ims-na1.adobelogin.com/ims/token/v3
    const response = await fetch(APP_CONFIG.adobe.ims.tokenEndpoint, {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({
            grant_type: "authorization_code",
            client_id: APP_CONFIG.adobe.adc.clientId, // ADC Project OAuth Single-Page App credential ClientID
            code_verifier: codeVerifier, // Code verifier generated during login
            code, // Authorization code received from the IMS
            redirect_uri: `${window.location.origin}/callback`,
        }),
    });

    if (!response.ok) {
        throw new Error("Token request failed");
    }

    return response.json();
}, []);

const handleStorageToken = useCallback(
    (token) => {
        if (token) {
            localStorage.setItem(STORAGE_KEYS.ACCESS_TOKEN, token);
            updateAuthState({ isLoggedIn: true, accessToken: token });
        }
    },
    [updateAuthState]
);
...

{
    "alloworigin":[
      ""
    ],
    "alloworiginregexp":[
      "https://localhost:.*",
      "http://localhost:.*"
    ],
    "allowedpaths": [
      "/adobe/sites/.*",
      "/graphql/execute.json.*",
      "/content/_cq_graphql/wknd-shared/endpoint.json",
      "/content/experience-fragments/.*"
    ],
    "supportedheaders": [
      "Origin",
      "Accept",
      "X-Requested-With",
      "Content-Type",
      "Access-Control-Request-Method",
      "Access-Control-Request-Headers",
      "Authorization"
    ],
    "supportedmethods":[
      "GET",
      "HEAD",
      "POST"
    ],
    "maxage:Integer": 1800,
    "supportscredentials": true,
    "exposedheaders":[ "" ]
}

########################################################################
# Adobe IMS, Adobe Developer Console (ADC), and AEM as a Cloud Service Information
########################################################################
# Adobe IMS OAuth endpoints
REACT_APP_ADOBE_IMS_AUTHORIZATION_ENDPOINT=https://ims-na1.adobelogin.com/ims/authorize/v2
REACT_APP_ADOBE_IMS_TOKEN_ENDPOINT=https://ims-na1.adobelogin.com/ims/token/v3
REACT_APP_ADOBE_IMS_USERINFO_ENDPOINT=https://ims-na1.adobelogin.com/ims/userinfo/v2

# Adobe Developer Console (ADC) Project's OAuth Single-Page App credential
REACT_APP_ADC_CLIENT_ID=ddsfs455a4a440c48c7474687c96945d
REACT_APP_ADC_SCOPES=AdobeID,openid,aem.folders,aem.assets.author,aem.fragments.management

# AEM Assets Information
REACT_APP_AEM_ASSET_HOSTNAME=https://author-p69647-e1453424.adobeaemcloud.com/

################################################
# Single Page Application Information
################################################

# Enable HTTPS for local development
HTTPS=true
PORT=3001

# SSL Certificate and Key for local development
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

# The URL to which the user will be redirected after the OAuth flow is complete
REACT_APP_REDIRECT_URI=https://localhost:3000/callback

$ npm install
$ npm start