Express Viewer License Still Shows Watermarks

[steve.haney]

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7.4

Detailed description of issue
I upgraded our version of Express Viewer to 8.7.4 and although I have a license key for the domain trailblazertech.com it is still showing the watermarks on the website path https://acme.uat.app.trailblazertech.com which should match the license domain.

Screenshot of viewer with watermarks

Console logging info…

Expected behaviour
I would not expect to see the watermarks.

Does your issue happen with every document, or just one?
Yes all documents

Link to document
N/A

Code snippet

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnInit,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import WebViewer from '@pdftron/pdfjs-express-viewer';
import { environment } from 'src/environments/environment';


@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class PdfViewerComponent implements OnInit, AfterViewInit {
  @Input() documentUrl = '';
  @Input() fileName = '';
  @ViewChild('viewer', { static: false }) viewer: ElementRef | undefined;

  wvInstance: any;

  ngOnInit() {
    this.wvDocumentLoadedHandler = this.wvDocumentLoadedHandler.bind(this);
  }

  wvDocumentLoadedHandler(): void {
    // you can access docViewer object for low-level APIs
    this.wvInstance.setFitMode(this.wvInstance.FitMode.Zoom);
    this.wvInstance.setZoomLevel(2);
  }

  ngAfterViewInit(): void {
    if (this.viewer) {
      console.log('license', environment.pdfjsExpressKey);
      WebViewer({
        path: '../../../wv-resources/lib',
        licenseKey: environment.pdfjsExpressKey,
        disabledElements: ['toggleNotesButton', 'menuButton', 'viewControlsButton'],
      }, this.viewer.nativeElement).then((instance: any) => {
        console.log('window.location.origin', window.location.origin);
        console.log('window.location.host', window.location.host);
        instance.UI.loadDocument(this.documentUrl, { filename: this.fileName });
        this.wvInstance = instance;
        // now you can access APIs through the WebViewer instance
        const { Core } = instance;
        instance.UI.disableElements(['ribbons']);
        instance.UI.setToolbarGroup('toolbarGroup-View');

        // adding an event listener for when a document is loaded
        Core.documentViewer.addEventListener('documentLoaded', () => {
          console.log('document loaded');
          this.wvDocumentLoadedHandler();
        });

      });
    } else {
      throw Error('no viewer available');
    }
  }
}

[kkim]

Hi there,

Thank you for reaching out to pdf.js express forums,

Is your domain registered exactly as " trailblazertech.com"?
If so, is the network request connecting to the pdf.js express server? Is your licenseKey correctly being set (i.e. is the environment variable set correctly)?
Here is a forum post for reference:

License key is not recognized in production

Hey there! I checked out and tested your license key and did not find any issues. Can you confirm that process.env.REACT_APP_PDFTRON_EXPRESS_KEY is being set correctly? You should see a request to auth.pdfjs.express in the network tab - can you send me a screenshot of that via DM? [image] Thanks, Logan

Best regards,
Kevin Kim

[steve.haney]

Hi @kkim,

Yes, the domain is registered exactly as trailblazertech.com.

I checked the network call to https://auth.pdfjs.express/?key=xxxxx and the key value matches the key I see in my PDF Js Express admin listed for this domain.

The network auth call returns a 200 response. The response looks to be some binary value so I can’t tell exactly what its content is.

I registered this domain a while back on an older version. Is it possible I need to delete the key and create a new one? I’m at a loss for what could be missing here.

Thanks,
Steve

[kkim]

Hi there,

Could you please try re-registering the key and see if that works for you?

Best regards,
Kevin Kim

[steve.haney]

Hi @kkim,

I registered a new key for trailblazertech.com and I’m still am seeing the pdfjs express watermarks

Network tab for auth.pdfjs with new key. Based on the referer URL can you tell why this is proving so difficult?

Thanks,
Steve

[steve.haney]

What I don’t understand is that in past product versions (8.4.1 for example) if I used a license key that didn’t match the domain I would get a response in the console like this…

PDFJS.express: A valid license key is required to use the view only build of PDF.js Express. Get your free license key at PDF.js Express

However I’m not getting that message just the overlay graphic with pdfjs express in corners and middle.

Can you tell me what causes that watermark to show up and maybe I can check those items off to see where the disconnect is?

Thanks.

[kkim]

Hi there,

It looks like the request to the authentication server is being made correctly using the key. However the subdomain might not be registering correctly.
Please see this forum post for more details:

Local domain + port; licenseKey not recognised

Our development site runs off a domain, rather than localhost: however the licenseKey I have set up for the local domain isn’t being recognised as valid. Eg: the development domain is of the format http://sub.domain.local:4001 - I tried setting the domain as both domain.local and including the port number with domain.local:4001 in the license-key settings … but neither worked. I still got the “a valid license key is required…” error in the web-app (waited the 10 minutes suggested by the Profile…

Best regards,
Kevin Kim

[steve.haney]

Hi,

Thanks for that link. Here are the following items I’ve tried to confirm.

1. I downloaded a fresh zip of the Webviewer Express View Only just to start clean. I took the contents of the lib folder from that zip and put it in a folder within my Angular application. I included that path in my assets angular.json file. I also included the webviewer.min.js in the scripts property my my angular.json file.

2. Related to the reference link you mentioned last… I am locally using a root URL for my website of https://acme.app.local. I have added both app.local and acme.app.local to my /etc/hosts files on my Mac.

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
# Added by Docker Desktop
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section
127.0.0.1 app.local
127.0.0.1 acme.app.local

3. I created a new license key just to be safe for app.local.
   

   

4. My source code is pretty simple. I’m loading a document from an S3 presigned URL.

5. My console log in the browser shows the following. The license key matches what I would expect to work for the domain app.local.
   

   

6. My network tab shows the auth call with a 200 OK response.
   

7. There’s some additional event that looks to be posting to pdfjs after the console error and interestingly there’s no license key. However the response is a 200 OK. I don’t know if this is pertinent information or not.
   

Can you loop in Logan Bittner who in the other thread said he got a local dev custom URL to work? Or is there a test I can run locally to mimic how the local site domain is being evaluated? At this point based on that other thread it seems that a local dev domain other than localhost should work (at least according to Logan).

[kkim]

Hi there,

It looks like from the backend, you still have an old 2022 key registered with the same domain:

Please try using your old API key or change the key from April 22, 2022 key to be a different domain.
Please try also removing the -new from the new domain.

Best regards,
Kevin Kim