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 extenion site's host to server. Navigate to admin console's Developer Corner under Advanced.

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.

Click on Create Item button.

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 Menus under Portal.

Create Menu Group by click Create Menu button.

Add new Extension Demo Page into new menu group. (Use Add Items button)

Click Save once done.

5. Allow test contact to use newly created menu group

Navigate to Contacts under Portal. Then find test contact.

Click and navigate into test contact and open Menu tab. Then change default menu group to new menu group and 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 Explaination 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?

Legacy URL Linking in DeskDirector

Dynamic content based on logged in user

Contact