Expanding Your Reach: How to Add Your Next.js App to Microsoft AppSource as a Transactional SaaS Offer

Nblocks
March 27, 2024

Users, Subscriptions and Feature control
- All in one place

Try Nblocks for free

In today's digital marketplace, reaching the right audience is key to the success of any application. For developers building on a project, one of the most effective ways to tap into a large, enterprise-level customer base is through Microsoft AppSource. This platform not only broadens your app's exposure but also aligns it with the needs of businesses looking for innovative solutions. In this article, we'll explore how to successfully list your application on Microsoft AppSource as a transactional offer and why it's a strategic move for expanding your app's reach.

With this article I want to give you an insight into this world of Microsoft AppSource. We read all the pages in the documentation so you don’t have to and prepared a working example with Next.js.  Because we believe lowering the barriers and enabling developers to get instant feedback while exploring around is the best recipe for adoption.

Let’s get started!

Understanding Microsoft AppSource

Navigating the World of Microsoft AppSource

Microsoft AppSource is a premier marketplace for business applications from Microsoft and its partners. It's designed specifically for enterprise customers seeking cloud-based solutions that work seamlessly with Microsoft products like Office 365, Dynamics 365, and Azure. But what makes AppSource distinct is its focus on business-oriented applications, catering to a wide array of industry needs and functions.

What is Microsoft AppSource and Why It Matters for Your App

AppSource plays an important role for businesses by providing a curated list of applications tailored for various business processes and industries. For developers, it represents an opportunity to get their applications in front of a focused, professional audience. Listing your application on AppSource is akin to opening a direct channel to this enterprise market.

The Benefits of Listing on AppSource

Why List Your Next.js App on Microsoft AppSource?

The benefits of listing your Next.js app on AppSource are multifold. Firstly, it provides your app with immediate visibility among a significant number of potential enterprise customers. These are businesses already invested in the Microsoft ecosystem, looking for solutions that can seamlessly integrate with their existing tools.

Reaching a Wider Enterprise Audience

AppSource is more than just a marketplace; it's a platform for connection and discovery. By listing here, your app gains credibility and trustworthiness in the eyes of enterprise customers. This audience values reliability, security, and integrability – qualities that Microsoft ensures are hallmarks of all apps on AppSource. Moreover, being on AppSource means your app is searchable and discoverable by a vast network of Microsoft's existing customers, providing an unrivaled channel to scale your user base in the business domain.

Getting Your App Ready for Microsoft AppSource

Compliance and Requirements

Listing your app as a transactional offer on Microsoft AppSource involves meeting specific requirements and following Microsoft's guidelines for commercial marketplace offers.

Enrolling into their program

Microsoft Partner Network (MPN) ID: You need to have a Microsoft Partner Network (MPN) ID. This involves registering your organization with the Microsoft Partner Network. More information can be found here: https://partner.microsoft.com/en-US

Enroll in the Commercial Marketplace Program: You must enroll in the commercial marketplace program through the Partner Center. This step is crucial for publishing your offer on Microsoft AppSource. More information can be found here: https://learn.microsoft.com/en-us/partner-center/create-account

Technical requirements

Streamlined purchase and authentication flow: Your application should implement SSO with Microsoft Entra so that customers purchasing through AppSource can login seamlessly into your app to start the onboarding experience.

Use two Microsoft Entra apps to improve security in production: It is recommended to create and use one multi-tenant Microsoft Entra app for user authentication and a separate single-tenant Microsoft Entra app for subscription management APIs. This enhances security and follows the separation of concerns principle. We’ll cover setting up the single-tenant Entra app for subscription management during the integration part of this article.

Integrating Your Next.js App with Microsoft AppSource

Create a Microsoft Entra app and generate secrets

Before we dig into the code we need to set up a Microsoft Entra app registration first. This will be our way to authenticate with Microsoft's APIs on behalf of our app when querying subscription data.

Microsoft does a pretty good job describing this process here: https://learn.microsoft.com/en-us/entra/identity-platform/howto-create-service-principal-portal

At its essence you’ll create a single tenant app. Navigate to the Authentication section of the documentation to understand how to generate the client secrets. Keep these secrets close by since we’ll need them for the integration later.

Step-by-Step Implementation

Structure overview

The integration code only consists of three files.

  1. Landing Page (app/landing/page.tsx): This file serves as the entry point for new customers coming from Microsoft AppSource. Upon clicking the purchase option in AppSource, users are redirected to this landing page within your application, carrying a unique marketplace token in the URL. This token is used to activate the new subscription.
  2. Webhook (pages/api/webhook.ts): Microsoft sends notifications to this endpoint regarding subscription lifecycle changes. These notifications might include updates made by the customer through Microsoft's web portals. Responding to these events correctly is necessary for keeping the subscription status updated.
  3. Utility File (app/utils.ts): Contains functions for interacting with the SaaS Fulfillment APIs for managing subscriptions. This file simplifies the API interaction process. This is where you’ll add your client secrets.

The Purchase flow

Microsoft marketplace appsource purchase flow with landing page diagram
  1. A user finds your app on Microsoft AppSource and
  2. Purchases a license.
  3. Redirect to Landing Page: Then user then clicks "Configure" after the payment and they are redirected to the application's landing page with a marketplace token variable included in the URL. 
  4. Token Validation The landing page extracts the marketplace token from the URL. This token is then used to call back to the SaaS Fulfillment APIs to validate the token.
  5. Subscription Activation: After the token has proven to be valid and we have the subscription information we should activate the subscription. 
  6. Start provisioning access to your application: The SaaS fulfillment API confirms the user's purchase and we can now render the landing page and establish the subscription status in the application's database. Now we can let the user login with Microsoft Entra leveraging the user's existing Microsoft credentials and initiate your app onboarding.

The code

Code Highlights and Explanation

Add your Microsoft Entra application secrets to the code

On top of utils.ts you can add your own secrets for the Microsoft Entra app you created for subscription management. This is the only change to the code that you need to do in order for it to work for this demo.

Adding your own code to start provisioning your service.

With provisioning we mean creating the necessary data in your database so that the new customer can login, onboard and set up their account and start using your service. This is outside the world of the Microsoft AppSource integration. I’ve added a comment in the handleLandingPage() method suggesting what you could add yourself.

Gracefully handle non important redirect to the landing page

As you can see in the code, only when a subscription has the status PendingFulfillmentStart we go ahead and activate it. This is because that’s the subscription state just after purchasing. Future redirects might happen from appSource and we’ve even seen requests to the landing page without a proper token.

Knowing what to do for the different webhooks

In the utils.ts file you can see a switch statement, in the handleWebhookEvent() method, for every action that can be triggered by Microsoft webhooks. Here’s an explanation of each, how they affect your app and what code you could add for each case.

  1. ChangePlan: This event occurs when a user decides to switch from their current subscription plan to another. Developers should update the user's subscription details in their database to reflect the new plan and adjust the application's features and access levels accordingly.
  2. Renew: This event signifies that a subscription has been renewed. It's critical to ensure that the subscription status is updated to active if not already set, and extend the subscription end date based on the renewal period. This maintains the user's access without interruption.
  3. Suspend: A suspension event is triggered when a subscription is temporarily put on hold, often due to payment issues. Developers should restrict the user's access to the application during the suspension period and monitor for a reinstatement event to restore access.
  4. Unsubscribe: This event indicates that the user has chosen to end their subscription. Upon receiving this notification, developers should update the subscription status to inactive, revoke the user's access to the application, and consider sending a follow-up to understand their reasons for leaving and if possible, retain them.
  5. Reinstate: When a subscription is reinstated after being suspended, this event is sent. Developers should restore the user's access to the application by updating the subscription status back to active and ensure all user data and settings are intact.
  6. ChangeQuantity: This event occurs when the number of licenses or units in a subscription changes. It's important to adjust the user's account to reflect the new quantity, which might involve enabling or disabling user accounts or features based on the updated count.

Create a new marketplace offer in Microsoft partner center and test the purchasing flow

With the code and the Microsoft Entra app secrets in place and running we can go ahead and create a simple Marketplace offer in Microsoft AppSource. Since creating an offer and listing it can be overwhelming work with pricing alternatives, descriptions, marketing material and more  we’ll cover the absolute basics of getting an offer out in developer preview so we can test performing a purchase and see the flow in action.

  1. Go to Microsoft partner center and login.
  2. Click "Marketplace offers".
  3. Click "New offer", select "Software as a Service" and name your offer.
  4. In your new offer, click "Technical configuration" and add the following information:some text
    1. In "Landing page URL", add the url to the landing page url from the running integration code. If you run this on StackBlitz you can obtain a shared url that looks like this “https://xxxx.local-credentialless.webcontainer.io/landing
    2. In "Connection webhook" add your webhook url from the running integration code. Use the same approach as above if running via StackBlitz.
    3. In "Microsoft Entra tenant ID" add your integration app tenant id.
    4. In "Microsoft Entra Identity application ID" add your integration app client id.

That was the only steps required to hook up the integration. Now we need to dress the offer listing a bit before we can put it to developer preview and test it.

The partner center will guide you what is required to create before you’re able to set the status to preview. Here’s a few tips.

Offer Listing Details:

  • Description: Write a brief description of your offer, highlighting its value proposition and key features.
  • Logo and Images: Upload a logo and additional images that represent your offer. These visuals are crucial for making your offer appealing in the marketplace.

Pricing and Plans:

  • Pricing Model: Select your pricing model (free, flat rate, per user, or custom). Even for preview, you need to define how the offer will be priced. Remember to create a free option, because we want to test the integration without paying real money for it 🙂
  • Trial Offer: Decide whether you will provide a trial version and specify the trial duration if applicable.

Legal Documentation:

  • Terms of Use: Upload your terms of use document.
  • Privacy Policy: Provide a link to your privacy policy.

Contact Information:

  • Publisher Profile: Complete your publisher profile with your organization's details.
  • Support Contact: Include contact information for customers who need support.

Remember to set the Preview audience. These are the users that will be able to preview it. For more information see this link: https://learn.microsoft.com/en-us/partner-center/marketplace/create-new-saas-offer-preview

When done you should click Preview and Publish. This will start an automated review process that will last for around 30 minutes. After that you’ll find a preview link.

Click the link and you should see your listing and be able to purchase it.

After adding your payment information and completing the purchase in Microsoft AppSource you are redirected to the landing page which will be taking care of the rest.

Best Practices and Tips

Maximizing Success on Microsoft AppSource

Successfully listing your Next.js app on Microsoft AppSource is just the beginning. To truly maximize its potential, it’s crucial to follow best practices that can elevate your app's presence and appeal to enterprise customers.

Best Practices and Optimization Tips

  1. Optimize Your Listing: Ensure your app’s listing is clear, compelling, and communicates the unique value proposition. Use high-quality images and detailed descriptions to highlight features and benefits.
  2. Regular Updates and Maintenance: Keep your app updated with the latest features and security patches. Regular updates signal to customers that you are committed to quality and improvement.
  3. Responsive Support System: Establish a robust customer support system. Quick and effective support responses can greatly enhance your app's reputation on AppSource.
  4. Gather and Implement Feedback: Actively seek out and listen to user feedback. Implementing user suggestions can improve your app's functionality and user experience, leading to better reviews and increased adoption.
  5. Marketing and Promotion: Leverage both AppSource’s marketing tools and your own channels to promote your app. Effective marketing can significantly increase visibility and user engagement.

Summarizing

Getting your Next.js app onto Microsoft AppSource is quite the adventure, opening doors to a wider, enterprise audience. But listing your app is just the beginning. The real task lies in constantly refining the offer, staying responsive to user needs, and ensuring it remains a valuable tool for your enterprise audience. Remember, success in AppSource isn't just about visibility; it’s about making your app indispensable.

With this article I hope we’ve shed some light on how the integration works with a practical example so you feel more comfortable taking the jump to a listing on AppSource yourself. Feel free to use the code examples in whatever way you want. Fork it, improve and adapt it to your needs.

May the code be with you!

Additional read-ups

https://learn.microsoft.com/en-us/partner-center/marketplace/plan-saas-offer

https://learn.microsoft.com/en-us/partner-center/marketplace/azure-ad-transactable-saas-landing-page

https://learn.microsoft.com/en-us/partner-center/marketplace/partner-center-portal/pc-saas-fulfillment-webhook

https://learn.microsoft.com/en-us/partner-center/marketplace/partner-center-portal/pc-saas-fulfillment-life-cycle

https://learn.microsoft.com/en-us/dotnet/architecture/modern-web-apps-azure/architectural-principles#separation-of-concerns

Share this post

Join the nblocks community

Unleash the power of nblocks powerful features today