Get started with portal extension page demo

Jason He Updated by Jason He

In this article, I will demonstrate how to setup sample extension page. By going through this process, you should have more detailed view on how access_token works and how it can help identify given user's identity.

1. Allow demo site's host

To allow cross origin query, we should add extension site's host to DeskDirector. Navigate Advanced > Developer Corner in the admin console.

Let's add demo page's host at bottom of Developer Corner page.

https://deskdirectorfiles.blob.core.windows.net
2. Create Menu Item

Create menu item for extension demo page. Head to admin console and navigate to Menu Items under Portal. (see: Creating Menu Items)

3. Setup New Menu Item
  • Type: Extension Menu
  • Extension Site's URL: https://deskdirectorfiles.blob.core.windows.net/media-public/demo/access_token_demo/access_token.html
  • Enable Sandbox (Also enable following items)
    • Allow Same Origin
    • Allow Scripts
  • Query Parameters (Enable following parameters)
    • Access Token

Once setup your new menu item, click save to create.

4. Create New Menu Group

Navigate to Portal > Menu Group then click New Menu button (see: Menus). Add new the Extension Demo Page into new menu group by clicking on the "Add Menu Item" button.

Click Save once done.

5. Allow test contact to use newly created menu group

Navigate to Contacts under Portal. Then find a test contact.

Click and navigate into test contact and open Menu tab. Then change default menu group to the new menu group by clicking on "Change Menu Group" button, then save.

Now, you can impersonate this contact under profile tab. The extension page should be there.

6. View Demo Page

On page, it should display as following. The page knows the user that's curerntly logged in as xxx@xxxx.com email.

Code and Explanation of extension page

Extension demo page's source can be found here. At moment, Allow Same Origin for iFrame's SandBox is still required. In the future, we want to make this extension page work even without Allow Same Origin permission.

To display personalized content, One of difficulty is identifying the user or to achieve single sign on. That means, if user is logged inside the portal, menu extension page should allow automatically login to other external site.

To identify the user, DeskDirector introduced access_token. This means that menu items that are set as extension page and has access_token enabled, will have access_token passed in as query parameter. Which from the source code, we have code to extract it.

Access Token is secure and only available for one hour. The page you have constructed can also pass access token to your backend, then your backend can use access token to verify user and hand out cookie for your extension site.

How did we do?

Chat Session Payload

Dynamic content based on logged in user

Contact