Microsoft 365 Community Microsoft Teams App Camp, 2 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Teams App Camp - How to monetize your apps - Lab

Description

This module introduces you to how to monetize your apps.

📖 Lab instructions can be found here https://microsoft.github.io/app-camp/aad/Monetization/
👩🏾‍💻 Full source code for this lab can be found here https://github.com/microsoft/app-camp/tree/main/src/extend-with-capabilities/Monetization

This video is part of a series in a playlist about Building apps for Microsoft Teams: https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU

⬅️ Previous video on this series - https://www.youtube.com/watch?v=tqNO5qaYmL0&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU&index=13

#Microsoft365 #MicrosoftTeams #saas

In this lab, you'll

• Allow users to purchase subscriptions for your Northwind Orders application as a transactable offer in a mock AppSource marketplace.
• Integrate the Northwind Orders application with a simple licensing service that allows you to purchase licenses for your SaaS application.

✨ Demo Presenter
• Bob German (Microsoft) | @Bob1German

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/watch?v=hFwLfG95rVU&list=PLR9nK3mnD-OW5yCjKO0K8b-Xi4Ci1iBlU
• Overview on Microsoft Teams extensibility - https://learn.microsoft.com/en-us/microsoftteams/platform/overview
• Design guidance for Microsoft Teams apps - https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/design-teams-app-overview
• Sample Microsoft Teams apps with code - https://adoption.microsoft.com/en-us/sample-solution-gallery/?product=Teams&sortby=creationDateTime-true&page=1

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - https://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

Hi I'm Bob German welcome to Microsoft teams, app Camp, an on-demand Workshop, where you'll learn how to Port a simple web application to be a full-featured Microsoft teams application and how to sell it in the Microsoft teams. App Store, this lab Builds on the core teams application so we'll assume that you've completed lab a-03 and possibly some of the other extended Labs. Before beginning this lab.

A

First, a little bit of background monetize teams apps can actually be purchased in the teams. App Store via the team's admin Center or in Microsoft appsource. So there's multiple opportunities to sell your application.

A

A monetized application is actually a combination of a teams application with a manifest in everything. You've learned so far in these labs and something called a transactable SAS offer so a SAS offer software is a service. Offer is one of the ways that our partners can sell. Software via Microsoft's, commercial, Marketplace and I want to recommend another video by David Starr called anatomy of a SAS offer.

A

If you watch that video you'll see that, towards the end, David brings up this diagram and explains the components of a complete solution, including a Microsoft teams, application which is shown on the far right of the chart and the other components needed from a commercial Marketplace perspective.

A

There's appsource and the team's app store, which are hosted Services by Microsoft. You don't have to write them, but you do have to configure them through the partner Center and in the case of the team's app store. Some of the information comes from your team's app manifest and that allows those services to run when somebody makes a purchase. They get redirected to your landing page. The labs are based on some sample code for a landing page web hook and Licensing Service.

A

So we'll point you to the code, but we've already hosted it for you, so the lab instructions involve you connecting the Northwind orders, application to the licensing service and going through an app Source simulator to make a purchase and see the application in force licensing.

A

So let me demonstrate that for you now so after making some coding changes and an Azure ID change, you'll you'll actually have this result, which is, if you try to run the application and you haven't, purchased it you're going to get this this error message and then you can go in in the lab instructions. I'll walk you into this um you'll go to the app Source simulator, which is hosted for you in this case, or there's instructions.

A

If you want to to host it yourself and and I'm going to purchase the app- and in this case we've made the app Source simulator Green in the background, because we just want it to be clear what you're seeing so this is the App Store simulator I'm, going to purchase this application, I'll purchase five seats and we'll choose the seat based plan for that and make the purchase, and that will send us to the applications landing page and to make that visible. The background has been changed to Blue for the landing page.

A

This is your chance to configure the app whatever that means- and in this case it's super simple. We're just going to ask what country- and we just have a few country choices here and provision you know is where you would actually provision some kind of service and then there's some license Management in here and so I'm going to go into license. Settings and I could either add a user license here, and this uses the graph API to do it or easier I could just turn on this.

A

First come first served and what that means is the first five users in this case who come and use the app are automatically going to be assigned a license and then allow over assignment would basically say, look I'll true it up later I'll follow up with the customer, but I'm going to let them use more licenses that they've purchased. This is all up to you.

A

You can decide how this works so now that I've done that I can go back to the application and refresh it and it will come up and work and if I go back to that license management screen there. We go I'm going to see that I have actually been assigned that license.

A

So the sample application itself is here in this repository and actually there's a bunch of different samples for all different kinds of Microsoft 365 applications and there's a couple of teams ones in here, but in the lab you'll be using the Northwind orders, application just to kind of build on the labs that are already there and then you'll be using the app Source mock-up, which is here and then also SAS sample web API and SAS sample web app.

A

This is what you would write as an isv to handle the landing page, the web Hooks and also handle the actual license management, and we started off an earlier version of this lab. We actually had people deploy these services, but we decided that it would just be a lot easier, especially if people don't necessarily have an Azure subscription.

A

If we just hosted a copy of these three projects for you, and so we did that so if you go into the actual instructions in the lab, you'll see that the first thing that you're going to do is update the environment file to a point at this hosted version of the app and- and this may change we're actually looking for a more permanent home for it.

A

So we might actually change these details, so you might, you know, might look a little different when you get to it and then there's some code that actually calls the licensing service and really this isn't that instructive in terms of of monetization, it's really more about how to call an API from another app, because all we're really doing here is calling um this licensing uh endpoint to see if we have a license and we're calling on behalf of the current user, so that the licensing service can actually figure out who the user is and whether or not they already have a license, in which case it will return.

A

You know okay or it if they can be assigned a license. Dynamically also returns. Okay or if there's no licenses for them, so that's basically what the coding changes are all about is just kind of connecting those things up and then the other thing we need to do is to allow your app to call this hosted sample app and that's what this grant consent is. What this is going to do is show you how you can call a service, that's in a different tenant, it's registered and hosted centrally from your tenant.

A

So let me just walk you through this process, because it is a little tricky and normally um something like the landing page would would handle this by generating this URL in code and directing the user to it. But here we're going to kind of do it manually because we're sort of working under the covers here, where your lab project is going to call my service right.

A

So I put this on the clipboard and now I'm just going to go into a different tenant, and let me go into Azure ad as well, and what I'm going to do is sort of build up this URL. So let me paste in the the URL and there's a spot here for tenant ID and it wants the tenant ID, where I'm going to be using this service from so let me just pop into there.

A

So here's my tenant ID that I'm now gonna I'm gonna put this into and I'll just put in.

A

Where it says tenant, ID and then the client ID is the client ID of my app that I have hosted for you, and so you have that in the instructions it's in your environment file by now.

A

Actually both of these values are in your environment file. If you're following the lab instructions and now I'll put that in.

A

Foreign and now I'm going to hit, enter and I'm going to get asked to log in and I'm going to get a consent dialog. So this is now ask inviting me to consent to allowing the licensing app the sample licensing app to act on behalf of users in my from my application.

A

So let me go ahead and accept that and at the end I get this ER, which says the site can't be reached in its Local Host and that's actually expected, because if I was fully building out the solution, I would redirect the user to this page, get the consent and then I would set the redirect URL to go back to my page.

A

But in this case I didn't do that so I'm just getting sent to localhost and it just doesn't really look like it worked, but it did because now I can actually go into my Enterprise, apps and I'm, going to see.

A

That this contoso monetization has been has been created, because this is really where this is really where that license resides.

A

So then, after that I'm going to go into my app registration and I can do that here as well.

A

And I can add permission to call the sample licensing application and I can go into my app permissions.

A

Add a permission, and instead of picking Microsoft graph I'm going to pick an app that my organization uses and then let me just put that same client ID in there there it is and now I can add it to the permission scope available to my application.

A

So if you go down the other path and you host the Northwind order service in your same tenant, then you don't need to do that first part, but you'll still need to give yourself permission to call that API now, in the last part of the lab, we'll walk you through some of the code. That would be code that you would have to write so I want you to understand it.

A

First, here's some code from the landing page when that landing page gets called it's going to be passed a token right on the URL I can show you actually, if I go back to the appsource simulator.

A

And I cancel my subscription and I'll purchase it again and you'll see that I'm going to get sent to the landing page and there's this big long token. Here on the end of the URL, it's going to pass that token to the appsource simulator, which is sort of playing the part of the marketplace API, and it's going to get back information about the subscription that had been encoded into that token.

A

The subscription ID the offer ID the plan ID. These are all things that you would have set up in partner Center the subscription name who purchased it. The ID, the tenant ID of the purchaser right. The purchaser ID is the user ID of the user right and all this information is is kind of right here. So that's just maybe to get you started um with how you would build such a service and then uh the second thing we'll take a look at.

A

Is the web hooks so there's these are hooks that are called if somebody goes back into appsource and maybe they change the plan or they decide to buy some more seats or they cancel like I just showed. Then these web hooks are going to get called and the reason that that all works in our sample is because they've provided these web Hooks and you can see how they work and then finally, there's the license check itself where which is the server side when we check the license in the Northwind orders app.

A

This is what it calls to actually come in and check the license now again: they're storing it in a SQL Azure database. You might do something completely different, totally. Okay. The point is that you're, somehow wiring your teams app to a service that will check the license so just to review what you saw was the appsource mock, run. I purchased some licenses.

A

It sent me to the landing page in your SAS web app, which is which was a sample that was hosted for you, that implemented a simple license management scheme, and then the Northwind orders app called that same underlying service. That would be the licensing part of your app in order to check the license.

A

Thanks for watching this, Microsoft teams, app Camp briefing, I, hope it's helpful to you and that you have fun and smooth sailing as you complete. The lab and I also hope to see your app in the Microsoft teams app store soon. Thanks for watching.