Embedding the Halo Self-Service Portal in Teams

Embedding the Halo Self-Service Portal in Teams

Prerequisites
• You must have the Azure AD Integration configured and allow all your customers to sign in using Azure AD
• You MUST have a customised HaloPSA Portal domain. This should be authorised in Microsoft 365.

Microsoft Entra

Firstly, we need to amend your existing Halo Azure Active Directory Application to enable embedding the self service portal.

Head to https://entra.microsoft.com and select 'Applications' and 'App Registrations'

Find your Halo Azure Active Directory App Registration.

On the overview page, note down the Application (Client) ID. We'll need this later.

Select 'Expose an API'.

There are three parts we need to configure here:

image.png

1. Application ID URI

Click Add. You will need to edit the Application ID URI to be like the following:
api://YourhaloportalURL/AzureAppID
For example:
api://portal.renada.co.uk/56bfaa6c-123123-123123-123123123
The application ID should be prefilled for you, simply add your halo URL between api:// and the application ID.

make a note this application URI, we'll need it later.

2. API Scopes

In order to allow teams to send access tokens to your application, we need to configure an API scope. For SSO, we need to use the scope 'Access_as_user'.

Configure your scope as below:

image.png

3. Authorized Client Application

Finally, we need to allow the teams desktop/mobile application, and the web application as authorized to use this App Registration.
Add the following Client ID's:

1fec8e78-bce4-4aaf-ab1b-5451cc387264 Teams mobile or desktop application
5e3ce6c0-2b1f-4285-8d4b-75ee78787346 Teams web application

Ensure you authorize the scope we just made.

image.png

Updating the Manifest

Next, select 'Manifest' from the 'Manage' menu.

For the application be used with multiple tenants (customers), we need to update the 'AccessTokenAcceptedVersion' from "null" to "2".

image.png

Microsoft Teams Developer Portal

Next, we can create our Application in the teams developer portal. This is the user-facing application.

Head to https://dev.teams.microsoft.com/

Click 'Apps', then ' + New App'

Under Basic Information, you'll configure the user-facing app information, like the name, and a description.

You must set the Application (client) ID to the application we were just editing, your Halo Azure AD Application. This can be retrieved from the 'Overview' page for the app.

image.png

Under 'Branding', configure your organisations branding.

image.png

Under App Features, select 'Personal App'

image.png

Click 'Create your first personal app tab', and enter the details of your self-service portal.

image.png

Optional: You can add additional 'tabs' to this app to point to other websites, like the 'contact us' page of your website!

Click Save.

Under Single Sign On, enter the Application ID URI we created earlier and click 'save'.

Testing

Next, you're ready to export the application and test it within Teams. You can do this inside your own tenant by clicking 'Preview in Teams'.

Adding the App to customer tenants

Once you're happy the application is working as expected, you can export the App Package as a zip file and import this into your customer tenants.

Optional: Using an App Setup Policy, you can pin the app to the left-hand rail of Teams.

Troubleshooting

If you are unable to add your app to teams (no "add" button appears), it's most likely that the developer portal has deleted the 'personal app tab' you created earlier. To check this, go back in to https://dev.teams.microsoft.com and check under 'App Features'. You may need to create a new version (you must set a new version number under Basic Information), export the app again and reupload it to Teams.

Revision #9
Created 13 September 2023 15:18:23 by Robbie Emerson
Updated 3 June 2024 10:48:44 by Connor