Skip to content

Latest commit

 

History

History
243 lines (150 loc) · 13.4 KB

README.md

File metadata and controls

243 lines (150 loc) · 13.4 KB
Raw

Lab 1 - Creating a Landing Page

👈 Back to SaaS Offer labs

⚠️ Completion of this lab is required for the following labs in the series to work properly.

💀 The code in this lab is NOT meant to be used for production environments. It is a simple example with no error handling, no custom workflows, and is for learning purposes only.

Overview

In this lab, you will deploy a landing page and eventually integrate it with your Partner Center SaaS Offer.

Prerequisites

For this lab, you will need the following.

  1. An Azure account and access to the Azure portal
  2. Visual Studio 2022 (any version)
  3. Git (optional)

Note: It is possible to complete this using Visual Studio Code, but the instructions are tailored for Visual Studio 2022.

Exercise: Compile the Visual Studio Solution

There are three projects in the solution you'll be working with. You will deal with them one at a time over the course of the labs. In this lab, we will start with the landing page project.

  1. You will need to clone this repository to complete the hands-on-labs. To clone, click the Code button found at the top of this page or click Clone here to download a zip to your local machine

Button Clone 

  1. Using Visual Studio 2022, open the following solution file on your machine. Take care to choose the begin folder.

    **\\saas\\lab-code\begin\SaaSLabsBegin.sln

  2. Build the solution. You should get no build errors.

Exercise: Creating a Single-Tenant Application Registrations

In this exercise, you will create an app registration in the Azure portal. It will be single-tenant and used to connect to the SaaS API.

Create a single-tenant App Registration

  1. Log in to the Azure portal.
  2. In the top-of-center command window in the portal, type "app reg" and select the item "App registrations" that appears. You will see a list of current application registrations.
  3. At the top of the page, click the + New registration link. You are taken to the Register an application page.
  4. For the purposes of this lab, use saas-workshop-single-tenant as the name of this app registration.
  5. At the bottom of the page, click the Register button.

Add a secret

Now you will add a secret to the app registration. Make sure to copy and paste the secret value somewhere you can access it later.

  1. Click into the saas-workshop-single-tenant application registration.
  2. In the left-hand menu, find the Manage menu and click the Certificates and secrets link.
  3. Create a new client secret.
    1. Give it a description.
    2. Choose an expiration date. The 6-month default should be fine.
  4. Copy the Value of the secret and paste it somewhere you can easily access it later.

Exercise: Creating a multi-tenant App Registration

In this exercise, you will create a multi-tenant app registration in the Azure portal to authenticate users coming to your landing page.

  1. Create an app registration. For the purposes of this lab, use saas-workshop-multi-tenant as the name of this app registration.
  2. Under Supported account types, select the option: Accounts in any organizational directory (Any Azure AD directory - Multitenant).
  3. At the bottom of the page, click the Register button.

Add a platform to the multi-tenant app registration

  1. In the left-hand menu under the Overview menu item, click the Quickstart link.

  2. Find the Web application section and click the Start button.

  3. Click ASP.NET Core.

  4. On the resulting Quickstart page, click the Make this change for me button.

  5. Under the Configuring your application registration, click the Make updates button.

  6. In the left-hand menu under the Manage section, click the Authentication link.

    Here you can see that two URLS have been added to the Redirect URIs section for you. These allow running your code in debug mode using the default debugger ports. You will add your actual landing page URLs here later.

Create a client secret

  1. Create a client secret for this app registration.
  2. Copy the Value of the secret and paste it somewhere you can easily access it later.

Exercise: appsettings.json

The appsettings.json file in the LandingPage project must be filled out before publishing the application. That's what you'll do in this section.

Values from the saas-workshop-multi-tenant app registration

All changes in this section occur under the AzureAD section of the appsettings.json file.

  1. In the Landing Page project, open the appsettings.json file.
  2. In the Azure portal, click the Azure Active Directory button in the left-hand menu.
  3. On the overview page in the Basic information section, find the Primary domain and use it to replace DOMAIN_NAME in appsettings.json.
  4. In the left-hand menu under the Manage menu, click the App registrations link.
  5. Click the saas-workshop-multi-tenant app registration.
  6. In the appsetting.json file, replace CLIENT_ID with the Application (client) ID from this screen.
  7. Replace CLIENT_SECRET with the client secret you noted earlier for the saas-workshop-multi-tenant app registration.

Values from the saas-workshop-single-tenant app registration

All changes in this section occur under the MarketplaceAPI section of the appsettings.json file.

  1. Go back to the list of App registrations.
  2. Click the saas-workshop-single-tenant app registration.
  3. In the appsetting.json file, replace CLIENT_ID with the Application (client) ID from this screen.
  4. In the appsetting.json file, replace TENANT_ID with the Directory (tenant) ID from this screen.
  5. In the appsetting.json file, replace CLIENT_SECRET with the client secret value you stored earlier.

Congratulations, your LandingPage project is ready to publish!

Publishing your landing page

First you must create a publish profile file that will hold the information about your project to publish. Also, you must create an App Service Plan to host your website.

Creating your publish profile

  1. In the Solution Explorer of Visual Studio, right click the LandingPage project and select Publish.

  2. The Publish dialog appears.

  3. Select Azure as your publish target and click the Next button.

  4. Select Azure App Service (Windows) and click the Next button.

    You are now on the App Service tab. You may now need to sign in to Visual Studio with your Azure credentials.

  5. Choose the correct subscription from the list of subscriptions.

  6. To the far right of the words App Service Instances, click the green + (plus) button to create an App Service. The App Service dialog opens.

  7. Name the App Service SaaSWorkshopLandingPage with a number on the end to make it unique.

  8. Choose saas-workshop for the resource group.

  9. Create a new Hosting Plan and name it SaaSWorkshopAppServicePlan.

  10. Click the Create button at the bottom of the screen.

    After clicking the Create button at the bottom of the page it may take a moment for the Hosting Plan and App Service to be created.

  11. After the App Service is created, you will be back at the Publish dialog. Select your new App Service instance and click the Next button.

  12. For Publish type, select Publish (generate pubxmlfile).

  13. Click the Finish button at the bottom of the dialog.

You now have a publish profile that can be used to publish your application.

Publishing the landing page

Near the top-right of the Publish dialog click the Publish button. This deploys your application. You can watch the publish process in the Output window at the bottom of the screen.

The page will launch, but shows an error message. You aren't quite done configuring your landing page application.

Registering your landing page

  1. In the command bar at the top of the Azure portal, search for and select App Services.

  2. Click on the App Service you just created, SaaSWorkshopLandingPage.

  3. On the overview screen in Visual Studio, the URL for the site should be in the Hosting section. Copy it into your paste buffer.

  4. In the command bar at the top of the Azure portal, search for and select App registrations.

  5. Click on the saas-workshop-multi-tenant app registration.

  6. In the left-hand menu click the Authentication link.

  7. In the Web > Redirect URIs section, click Add URI and paste in your Landing Page URL.

  8. Paste it in again on another line, this time adding a suffix of /signin-oidc so that your URI looks something like this.

    https://*.azurewebsites.net/signin-oidc

Click the Save button at the top of the screen.

Exercise: Browse to your landing page

  1. Using the App Service URL to you created, https://<prefix>.azurewebsites.net, browse to that web page.
  2. Authenticate when prompted.
  3. You should see a message that reads, "Token URL parameter cannot be empty."

This is good! You are seeing this message because you aren't coming to the landing page through the Azure portal and no marketplace purchase token is being passed. To finish your configuration, we need to configure Partner Center to be aware of the landing page.

Congratulation! You have finished this lab.

👈 Back to SaaS Offer labs