How eViewer is Integrated with SharePoint Online

Integrating eViewer with SharePoint Online enables users to view a broad range of document types directly within SharePoint, improving accessibility and enhancing the overall document viewing experience. The integration process is straightforward and can be completed by following these steps:

Steps to Integrate eViewer7 with SharePoint Online

Step 1: Access the Admin Center:

• Log in to the SharePoint admin center.
  
• Navigate to More Features > Apps.
  

Step 2: Upload the eViewer extension:

• In the Manage Apps section, click Upload.
  
• Select the eViewer package file.

Step 3: Enable the eViewer App:

• Once uploaded, select Add to All Sites to deploy eViewer across all SharePoint sites automatically.

Step 4: Open and Edit Documents:

• Navigate to a document library in your SharePoint site.
• Select a document to render and click the Open with eViewer button added to the ribbon.
  
  • Open with eViewer: Render the file in a new tab. Use the eViewer interface to view, annotate, edit, and save changes. Saved changes are uploaded as a new version in SharePoint automatically.
  • Version History: View the document’s version history, including annotation revisions.
    

Step 5: Support for Media Files:

• Open media files directly in eViewer from the Media List.
• Edit, review, and save changes seamlessly back to SharePoint.

Architecture Overview: Deployment over Azure

eViewer for SharePoint Online consists of multiple app services that can be deployed over the Azure infrastructure.

To begin, navigate to Microsoft Azure and select App Services. Below, we will outline the various services that eViewer offers, detailing the step-by-step deployment process for each service to ensure access to eViewer.

eviewer 7

• Purpose: The primary frontend service required for advanced document viewing, editing, and collaboration features. It allows users to view, edit, fill out PDF form fields, add watermarks, annotations, save documents, and more.
• Deployment: Runs in a Linux-based Docker container.
• Docker Image: For instance, the Docker image can be referenced as index.docker.io/mstechinc/eviewer7:<version_tag>

Steps:

Step 1: Deploy the eviewer7 service on Linux via a Docker container.

Step 2: Once deployed, verify the URL in the Default domain field.

Step 3: Open the URL to ensure the viewer is rendered correctly.

eViewer Server

• Purpose: The viewer’s backend service requires the eViewer server to support advanced functionalities such as redaction, document comparison, digital signature, crop page, and office document rendering.
• Deployment: This service is optional and will be deployed using a Linux-based Docker container.
• Docker Image: For instance, the Docker image can be referenced as index.docker.io/mstechinc/eviewer-server:<version_tag>

Steps:

Step 1: Deploy the eViewer Server service on Linux.

Step 2: Once the deployment is complete, navigate to Settings > Environment variables and add the necessary environment variables.

Step 3: Click Add.

Step 4: Add the Name and Value of the variable.

Step 5: Click Apply to add the variable.

Step 6: Similarly, add the next variable, here the Value will be the License key (provided by MSTech).

Step 7: Click Apply.

Step 8: Once the variables are added, navigate to the Overview section.

Step 9: Click Stop, and then click Start to restart the service to activate environment variables.

Step 10: Once environment variables are activated, verify the Default domain URL.

Step 11: Open the URL in the browser with /api/v1/getCurrentTimeStamp. This will display the current date and time of the server.

Setting Up Attribute Set:

User access permissions are managed and stored in Azure within the tenant. To set up the attribute set, please follow the steps below:

Step 1: Go to the Azure homepage.

Step 2: Open either the Microsoft Entra ID or Azure AD B2C service, depending on your needs.

Step 3: Navigate to Manage > Custom security attributes.

Step 4: Click on Add attribute set to create a new attribute set.

Step 5: Enter the Attribute set name: eViewer7Attribs.

Step 6: Write the Description for the attribute.

Step 7: Set the Maximum number of attributes to 1.

Step 8: Add the attribute.

After creating the security attribute set, access permissions can be assigned to any user through the evnamedusersrvc. When access is granted, a new attribute named ev7Access will be automatically added to that user’s attribute set. The assigned value will be true when access is granted and can be set to false if access is denied.

evnamedusersrvc

• Purpose: This service manages user access to eViewer. It is specifically designed for administrators. For example, if all users belong to a tenant, such as MedVisionRX, but only a few hold a license for eViewer access. The access permissions for users are managed by the evnamedusersrvc service once it is deployed.
• Deployment: The application will be deployed in a Linux-based Docker container.
• Docker Image: The Docker image to use is index.docker.io/mstechinc/evnamedusersrvc:latest[tag]

Once the deployment is completed, the Default domain URL is generated.

App Registrations

Step 1: Go to the New registration page.

Step 2: Enter the name for the new app registration, such as evnamedusersrvc.

Step 3: Depending on the configuration, set up the access for this application concerning SharePoint:

• The application can access only those users who are within the same organization. (Single tenant)
• This allows the application to access users from another organization’s directory as well. (Multitenant)
• The application can access users from the organization and those who have personal Microsoft accounts.
• The application can access only personal Microsoft accounts.

By default, the application is single-tenant.

Step 4: Click Register, and the evnamedusersrvc application will be registered.

Step 5: Navigate to App registrations > evnamedusersrvc > Manage > Authentication and enter the Redirect URI (the default domain URL of the deployed evnamedusersrvc service, followed by /signin-oidc).

Step 6: Select the Access Tokens option.

API Permissions

Once the evnamedusersrvc application is registered, navigate to the API permissions to add permissions for a Microsoft Graph service. Follow these steps:

Step 1: Click on Add a Permission to incorporate the necessary permissions.

Step 2: Select the appropriate options, then click Add Permission to add the permissions.

Step 3: Click on the permission you just selected and then click Grant Admin Consent.

Step 4: Confirm by clicking Yes to grant the permission.

Step 5: Next, navigate to the Overview section to view all the details related to the permissions you’ve set up.

Once its all done, open the Default domain URL in a browser to verify and access the user management page.

This page will display a list of users currently using SharePoint. The administrator can then decide which users should be granted access. By selecting a user and applying the appropriate settings, the administrator can enable or revoke access as needed.

eViewer7AddInWeb

• Purpose: This is the required service, and it is a SharePoint provider-hosted web app designed for managing document fetching, rendering, and saving.
• Deployment: The application will be deployed in a Windows-based Docker container.
• Docker Image: The Docker image to use is index.docker.io/mstechinc/eviewer7AddInWeb:<version_tag>

Deploy the eViewer7AddInWeb service. Once the deployment is completed, proceed to

Permission Setup:

To establish a connection between the eViewer7AddInWeb and SharePoint, you need to grant appropriate permissions. Follow these steps:

Step 1: In Azure, navigate to Microsoft Entra ID, and open your tenant configuration page.

Step 2: Go to App Registrations. You will need to register the eViewer7AddInWeb application.

Steps to Add an Application:

Step 1: Access the New registration page.

Step 2: Enter the name of the new app registration, for example, eViewer7AddInWeb.

Step 3: Based on your configuration, set up the access permissions for this application to SharePoint:

• The application can access only users within the organization. (Single tenant)
• This setting allows our application to access users from other organizational directories. (Multitenant)
• The application can access both users within the organization and users with personal Microsoft accounts.
• The application can also be configured to access only personal Microsoft accounts.

By default, the application is registered as a single tenant.

Step 4: Click Register, and the eViewer7AddInWeb application will be registered.

Step 5: Once the application is registered, go to App registrations > eviewer7AddInWeb > Manage > Authentication and enter the Redirect URI (the default domain URL of the deployed eviewer7AddInWeb service, followed by eViewer7).

Step 6: Ensure that both Access Tokens (App-based tokens) and ID Tokens (User-based tokens) are allowed.

Step 7: Proceed to Certificates & Secrets.

Step 8: Create a new client secret by entering the description eViewer7SPAddInWeb and setting the expiration time.

Step 9: After clicking Add, a secret ID and value will be generated. Make sure to safely store this secret ID and value.

Step 10: Generate Certificate: The certificate file is provided by MSTech and can be uploaded using the Upload button.

Step 11: Access the Token Configuration to add two claims to specify the information needed when generating a token, specifically the user’s email ID and username.

Step 12: To do this, click Add Optional Claim.

Step 13: Select the token type as Access and choose the email and given_name.

Then, add these claims. (This step can only be performed when the token type is set to App-based token.)

Step 14: Navigate to the API permissions.

Step 15: Click on “Add a permission” to add permissions for Microsoft Graph (like email, Files.ReadWrite, Files.ReadWrite.All, etc.) and SharePoint (such as AllSites.FullControl, AllSites.Manage, AllSites.Read, etc.). Select the appropriate options and then click “Add permission.”

Step 16: Click on the permissions you just selected, and then click Grant admin consent.

After adding the permissions, go to the Overview section to view all the details based on the information provided.

Add Environment Variables:

Step 1: Go to Settings > Environment variables to add various environment variables.

Step 2: Click on the Add option and include the following:

• Add CertFilePath application setting: The certificate file embedded in the Docker container. Set the Name to CertFilePath, and set the Value to the path of the CertSPUser.pfx file, then click Apply.
  
• Add CertPassword application setting: Set the Name for the certificate password key to: CertPassword. The Value will be the password provided by MST, then click Apply.
  
• Add eV7_ClientId application setting: Set the Name to: eV7_ClientId, which is for the unique client ID for the eViewer7AddInWeb. Set the Value to be the Client ID through which this app is registered in SharePoint. Click Apply.
  
  For example, the Client ID for the eViewer7AddInWeb service can be found in the Overview section.
  
• Add eV7_ClientSecret application setting: Set Name for the client secret ID to: eV7_ClientSecret; set Value will be the client secret ID found in the Certificates and Secrets (under “App registrations”) section. Click Apply.
  
• Add ev7_TenantId application setting: Set Name for the Tenant ID to: ev7_TenantId, which is the directory ID. Set the Value, then click Apply.
  
  For example, the tenant ID for the eViewer7AddInWeb service can be found in the Overview section.
  
• Add ev7LicenseKey application setting: The viewer’s license key, set the Name to: ev7LicenseKey; and the Value will be provided by MST, then click Apply.
  
• Add ev7SiteUrl application setting: Set the Name to: ev7SiteUrl; and the Value will be the site URL obtained from the eViewer7 service after deployment, then click Apply.
  
• Add eViewerServerUrl application setting: Set the Name to: eViewerServerUrl; and set the Value to the server component’s URL if it has been deployed. Include the URL followed by /api/v1, then click Apply.
  
• Add evNamedUsrSrvcUrl application setting: Set the Name to evNamedUsrSrvcUrl; and the Value will be set to the URL obtained from the evnamedusersrvc service after it was deployed, then click Apply.
  
• Add redirectUri application setting: Set the Name to: redirectUri; and set the Value to the URL of the eViewer7AddInWeb service, followed by /eviewer7, then click Apply.
  
• Add TOKEN_TYPE application setting: Set the Name to: TOKEN_TYPE; and set the Value to: delegated, and click Apply.
  

Step 3: After adding these variables, go back to the Overview section, click Stop, and then click Start to activate the new environment variables.

By completing these steps, you can successfully integrate eViewer into your SharePoint environment, unlocking powerful document viewing and editing capabilities.