OAuth 単一ページアプリを使用した OpenAPI ベースの AEM API の呼び出し

...
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]
);
...