Embed API Domain not Authorized

New Here ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

Hi,
I'm currently developing a React Typescript website for reviewing and sorting PDFs. To display the PDFs I use the embed api.

Unfortunately I always get a message that my domain is not authorized. But this is not true. I have registered the domain that leads to the UI. The PDFs are provided via API but given via a FilePromise of the Adobe API to display. What could be the reason for this? After several times recreate the client security code times it works for a few minutes / hours and then again not at all.

Are there any official Typescript-React examples? But since it works every now and then, the logic should be correct?

Thanks for your help

Translated with www.DeepL.com/Translator (free version)

 

Best Regards

 

SDK implementation:

/*
Copyright 2020 Adobe
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file in
accordance with the terms of the Adobe license agreement accompanying
it. If you have received this file from a source other than Adobe,
then your use, modification, or distribution of it requires the prior
written permission of Adobe.
*/

export class ViewSDKClient {
    
    constructor() {
        this.readyPromise = new Promise((resolve) => {
            if (window.AdobeDC) {
                resolve();
            } else {
                /* Wait for Adobe Document Services PDF Embed API to be ready */
                document.addEventListener("adobe_dc_view_sdk.ready", () => {
                    resolve();
                });
            }
        });
        this.adobeDCView = undefined;
    }

    ready() {
        return this.readyPromise;
    }

    previewFile(divId, viewerConfig, url, filename, id) {
        const config = {
            /* Pass your registered client id */
            clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
        };
        if (divId) { /* Optional only for Light Box embed mode */
            /* Pass the div id in which PDF should be rendered */
            config.divId = divId;
        }
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View(config);

        /* Invoke the file preview API on Adobe DC View object */
        const previewFilePromise = this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* Location of file where it is hosted */
                location: {
                    url: url,
                    /*
                    If the file URL requires some additional headers, then it can be passed as follows:-*/
                    headers: [
                        {
                            key: "Authorization",
                            value: `Bearer xxx`,
                        }
                    ]
                    
                },
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: filename,
            }
        }, viewerConfig);

        return previewFilePromise;
    }

    previewFileUsingFilePromise(divId, filePromise, fileName) {
        /* Initialize the AdobeDC View object */
        this.adobeDCView = new window.AdobeDC.View({
            /* Pass your registered client id */
            clientId: `${process.env.REACT_APP_ADOBE_CLIENT_ID}`,
            /* Pass the div id in which PDF should be rendered */
            divId,
        });

        /* Invoke the file preview API on Adobe DC View object */
        this.adobeDCView.previewFile({
            /* Pass information on how to access the file */
            content: {
                /* pass file promise which resolve to arrayBuffer */
                promise: filePromise,
            },
            /* Pass meta data of file */
            metaData: {
                /* file name */
                fileName: fileName
            }
        }, {});
    }

    registerSaveApiHandler(profile,callback) {
        /* Define Save API Handler */
        const saveApiHandler = (metaData, content, options) => {
            console.log(metaData, content, options);
            console.log("Save btn pressed");
            callback(content);
            return new Promise(resolve => {
                /* Dummy implementation of Save API, replace with your business logic */
                setTimeout(() => {
                    const response = {
                        code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                        data: {
                            metaData: Object.assign(metaData, {updatedAt: new Date().getTime()})
                        },
                    };
                    resolve(response);
                }, 2000);
            });
        };
        this.adobeDCView.registerCallback(
            window.AdobeDC.View.Enum.CallbackType.GET_USER_PROFILE_API,
            function() {
               return new Promise((resolve, reject) => {
                  resolve({
                     code: window.AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
                     data: profile
                  });
               });
            },
         {});
        this.adobeDCView.registerCallback(
            window.AdobeDC.View.Enum.CallbackType.SAVE_API,
            saveApiHandler,
            {}
        );
    }

    registerEventsHandler() {
        /* Register the callback to receive the events */
        this.adobeDCView.registerCallback(
            /* Type of call back */
            window.AdobeDC.View.Enum.CallbackType.EVENT_LISTENER,
            /* call back function */
            event => {
                console.log(event);
            },
            /* options to control the callback execution */
            {
                /* Enable PDF analytics events on user interaction. */
                enablePDFAnalytics: true,
            }
        );
    }
}

export default ViewSDKClient;

 

Function Component to View:

export const PDFView: React.FunctionComponent<PDFViewProps> = (props) =>{
    console.debug('Rendering PDFView', props);
    const { accounts } = useMsal();
    const profile = {
        userProfile: {
            name: accounts[0].name,
            email: accounts[0].username
        }
      };
    const dispatch = useDispatch();
        const viewSDKClient = new ViewSDKClient();
        viewSDKClient.ready().then(() => {

            fetch(getDownloadDocumentUrl(props.invoice.id),{

                method: 'GET',
                //Force to receive data in a Blob Format
                headers: {
                    'Access-Control-Allow-Origin' : '*',
                    'Authorization': `Bearer xxxxx`,
            }
            }).then(res => {

                
                viewSDKClient.previewFileUsingFilePromise("pdf-div", Promise.resolve(res.arrayBuffer()), props.invoice.name);
                viewSDKClient.registerSaveApiHandler(profile,function(data : any){
                    if(props.invoice.id !== undefined)
                    dispatch(updateInvoiceContent(props.invoice.id, data));
                });
            }).catch(error => {
                console.log(error);
            });
        });
    return (<>
    <div id="pdf-div" className="w-100"/>
    </>);
}

 

Views

56

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 24, 2022 Jan 24, 2022

Copy link to clipboard

Copied

LATEST

The license endpoint from adobe also does not give any errors in the developer console....

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

Make content for your business needs with Adobe Express.

Get started easily with free templates: