Send activity feed notification

The Microsoft Teams activity feed notification helps users to assess items that require attention by notifying the changes. To extend the activity feed notification functionality to your app use the activity feed notification APIs in Microsoft Graph.

Key features of the activity feed broadcast are:

• Provides enhanced experience.
• Keeps users up to date.
• Broadcasts message for all the members.
• Displays activity feed notification.
• Broadcasts details available for members.

This step-by-step guide helps you to broadcast messages and notify all the members of an organization using activity feed notification. You can see the following output:

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

Ensure you install the following tools and set up your development environment:

	Install	For using...
	Visual Studio 2022	You can install the enterprise version in Visual Studio 2022 and install the ASP.NET and web development workloads. Use the latest version.
	.NET Core SDK version 3.1	Customized bindings for local debugging and Azure Functions app deployments. Use the latest version or install the portable version.
	Dev tunnel	Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. Or You can also use ngrok as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm devDependencies).

Note

After downloading ngrok, sign up and install authtoken.

Ensure you've the following accounts and set up your development environment:

• Microsoft account.
• The Teams app must be installed for the recipient, either personally, or in a team or chat.
• The Tenant ID for sending and receiving notifications must match.

Set up your Teams development tenant

A tenant is like a space or a container where you chat, share files, and run meetings for your organization in Teams. You can also upload and test the custom app.

Check for custom app upload option

After creating the app, you must load your app in Teams without distributing it. The function is known as custom app upload. Sign in to your Microsoft 365 account to view this option.

Note

Custom app upload is necessary for previewing and testing apps in Teams local environment. Enable custom app upload to preview and test your app in Teams locally.

Do you already have a tenant, and do you have the admin access? Let's check if you really do!

To verify custom upload apps in Teams:

1. In the Teams client, select the Apps icon.

2. Select Manage your apps.

3. Select Upload an app.

4. Look for the option to Upload a custom app.

   

   Note

   Contact Teams administrator, if you can't upload a custom app.

Create a free Teams developer tenant (optional)

If you don't have a Teams developer account, you can get it free. Join the Microsoft 365 developer program!

1. Go to the Microsoft 365 developer program.

2. Select Join Now and follow the onscreen instructions.

3. Select Set-up E5 subscription from the welcome screen.

4. Set up an administrator account. After you finish, the following screen displays.

   

5. Sign in to Teams using the new administrator account. Now you can select Upload a custom app.

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

1. Open Microsoft-Teams-Samples.

2. Select Code.

3. From the dropdown menu, select Open with GitHub Desktop.

   

4. Select Clone.

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

The following steps help you to create and register Teams authentication SSO in Azure portal:

• Create and register a new application under App registrations.
• Use ngrok to create a tunnel to your web server's endpoints.

Add App registration

1. Go to Azure portal.

2. Select App registrations.

   

3. Select + New registration.

   

4. Enter the name of your app.

5. Select Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant).

6. Select Register.

   

   Your app is registered in Microsoft Entra ID. The app overview page appears.

   

   Note

   Save the app ID from Application (client) ID and Directory (tenant) ID for further use.

Create a tunnel

dev tunnel

1. Open Visual Studio.

2. Select Create a new project.

   

3. In the search box, enter ASP.NET. From the search results, select ASP.NET Core Web App.

4. Select Next.

   

5. Enter Project name and select Next.

   

6. Select Create.

   

   An overview window appears.

   

7. In the debug dropdown list, select Dev Tunnels (no active tunnel) > Create a Tunnel....

   

   A pop-up window appears.

8. Update the following details in the pop-up window:

   1. Account: Enter a Microsoft or GitHub account.
   2. Name: Enter a name for your tunnel.
   3. Tunnel Type: From the dropdown list, select Temporary.
   4. Access: From the dropdown list, select Public.

9. Select OK.

   

   A pop-up window appears showing that dev tunnel is successfully created.

10. Select OK.

    

    You can find the tunnel you've created in the debug dropdown list as follows:

    

11. Select F5 to run the application in the debug mode.

12. If a Security Warning dialog appears, select Yes.

    

    A pop-up window appears.

13. Select Continue.

    

    The dev tunnel home page opens in a new browser window and the dev tunnel is now active.

    

14. Go to Visual Studio, select View > Output.

15. From the Output console dropdown menu, select Dev Tunnels.

    The Output console shows the dev tunnel URL.

    

ngrok

Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:

ngrok http --host-header=localhost 3978

Tip

If you encounter ERR_NGROK_4018, follow the steps provided in the Command Prompt to sign up and authenticate ngrok. Then run the ngrok http --host-header=localhost 3978 command.

The window shows the HTTPS URL.

Add Application ID URI

1. In the left pane, under Manage, select Expose an API.

2. Next to Application ID URI, select Add.

   

3. Update the Application ID URI in the api://your-devtunnel-domain/botid-{AppID} or api://your-ngrok-domain/botid-{AppID} format and select Save.

   

   The following image shows the domain name:

   

Note

If you're using a tunneling service such as ngrok, ensure you update the value whenever your ngrok subdomain updates. For example, api://f631****.ngrok.io/c4e88a5d-e3d4-47f4-accb-0ef9de3bce8a, where f631****.ngrok.io is the new ngrok subdomain name.

Add a scope

1. In the left pane, under Manage, select Expose an API.

2. Select + Add a scope.

   

3. Enter access_as_user as the Scope name.

4. Under Who can consent?, select Admins and users.

5. Update the values for the rest of the fields as follows:

   • Enter Teams can access the user’s profile as Admin consent display name.

   • Enter Allows Teams to call the app’s web APIs as the current user as Admin consent description.

   • Enter Teams can access the user profile and make requests on the user’s behalf as User consent display name.

   • Enter Enable Teams to call this app’s APIs with the same rights as the user as User consent description.

6. Ensure that State is set to Enabled.

7. Select Add scope.

   The following image shows the fields and the values:

   

   Note

   The Scope name must match with the Application ID URI with /access_as_user appended at the end.

   

Add client application

1. In the left pane, under Manage, select Expose an API.

   Under Authorized client applications, identify the applications that you want to authorize for your app’s web application.

2. Select + Add a client application.

   

3. Add Teams mobile or desktop and Teams web application.

   1. For Teams mobile or desktop: Enter the Client ID as 1fec8e78-bce4-4aaf-ab1b-5451cc387264.

      

   2. For Teams web: Enter the Client ID as 5e3ce6c0-2b1f-4285-8d4b-75ee78787346.

      

4. Select the Authorized scopes checkbox.

5. Select Add application.

   

   The following image displays the Client Id:

   

Add API Permission

1. In the left pane, under Manage, select API permissions.

2. Select + Add a permission.

   

3. Select Microsoft Graph.

4. Select Delegated permissions.

5. Select the following permissions:

   • Directory.Read.All

   • Directory.ReadWrite.All

   • TeamsActivity.Send

   • TeamsAppInstallation.ReadForUser

   • TeamsAppInstallation.ReadWriteForUser

   • User.Read

     Note

     User. Read is enabled by default.

6. Select Add permissions.

   

7. Select + Add a permission.

8. Select Microsoft Graph.

   

9. Select Application permissions.

   

10. Select the following permissions:
    

    • Directory.Read.All
    • TeamsActivity.Send
    • TeamsAppInstallation.ReadForUser.All

11. Select Add permissions.

    

12. Ensure to grant the admin consent for the required permissions.

    

13. Ensure to grant the admin consent for the required permissions.

    

    Note

    • If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
    • Users need to consent to the API permissions only if the Microsoft Entra app is registered in a different tenant.

Add a web authentication

1. In the left pane, under Manage, select Authentication.

2. Select Add a platform > Single-page application.

   

3. Enter the redirect URI for your app by appending auth-end to the fully qualified domain name. For example, https://your-devtunnel-domain/auth-end or https://your-ngrok-domain/auth-end.

4. Under Implicit grant and hybrid flows, select the Access tokens and ID tokens checkboxes.

5. Select Configure.

   

6. Under Web, select Add URI.

7. Enter https://token.botframework.com/.auth/web/redirect.

8. Select Save.

   

Create a client secret

1. In the left pane, under Manage, select Certificates & secrets.

2. Under Client secrets, select + New client secret.

   

   The Add a client secret window appears.

3. Enter Description.

4. Select Add.

   

5. Under Value, select Copy to clipboard to save the client secret value for further use.

   

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

1. Go to appsettings.json file in cloned repository.

   

2. Open the appsettings.json file in the latest version of Visual Studio and update the following information:

   • Set "MicrosoftAppId" to your bot's Microsoft App ID.

   • Set "TenantID" to Directory (tenant) ID.

   • Set "MicrosoftAppPassword" to your bot's client secret ID value.

   • Set "BaseUrl" to the [WebAppDomainName].

     

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

1. Go to the manifest.json file in cloned repository.

   

2. Open the manifest.json file in the latest version of Visual Studio and make the following changes:

   • Replace all occurrences of <<Microsoft-App-ID>> with your bot's Microsoft App ID.

   • Replace all occurrences of <<Base_URL>> with your fully qualified domain name.

   • Set validDomains to [WebAppDomainName].

     

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

1. Open Visual Studio.

2. Go to File > Open > Project/Solution....

   

3. Select the ActivityFeedBroadcast.sln file from csharp folder.

4. Select Open.

   

5. Press F5 to run the project.

6. Select Yes if the following dialog appears:

   

   A webpage opens with a message, Your bot is ready!

   

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

1. In your cloned repository, go to graph-activity-feed-broadcast > csharp > ActivityFeedBroadcast > AppManifest.

2. Create a .zip file with the following files that are present in the AppManifest folder:

   • manifest.json

   • outline.png

   • color.png

     

3. In the Teams client, select the Apps icon.

4. Select Manage your apps.

   

5. Select Submit an app to your org.

   

6. Select Open to upload the .zip file that you created in the AppManifest folder.

   

7. Select Add.

   

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

Let's interact with the app in Teams!

1. The BroadcastTab displays Message title and Message description.

2. Enter the message title and description**.

3. Select Send message.

   The Message broadcasted successfully appears.

   

4. Activity feed notification displays in the Activity tab of the recipient with the same Tenant ID.

   

5. The message details appear on selecting the message.

   

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

Did you come up with something like this?

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser

You've completed the tutorial to get started with the activity feed broadcast app!

Use your local computer

Stay on this site and follow instructions with your own machine.

Continue to first step

Use a virtual machine

Visit the Hands-on Lab site for integrated instruction.

Hands-on Lab

Try the code in your browser