コマーシャル マーケットプレースで無料または試用版 SaaS オファーのランディング ページを構築するBuild the landing page for your free or trial SaaS offer in the commercial marketplace

この記事では、Microsoft コマーシャル マーケットプレースで販売される無料または試用版 SaaS アプリのランディング ページを構築するプロセスについて説明します。This article guides you through the process of building a landing page for a free or trial SaaS app that will be sold on the Microsoft commercial marketplace.

概要Overview

ランディング ページは、サービスとしてのソフトウェア (SaaS) オファーのための "ロビー" と考えることができます。You can think of the landing page as the "lobby" for your software as a service (SaaS) offer. 顧客がアプリを取得することを選択すると、その SaaS アプリケーションへのサブスクリプションをアクティブ化して構成するために、コマーシャル マーケットプレースはその顧客をランディング ページに移動します。After the customer chooses to get your app, the commercial marketplace directs them to the landing page to activate and configure their subscription to your SaaS application. サービスとしてのソフトウェア (SaaS) オファーを作成した場合は、パートナー センターで、Microsoft 経由で販売するかどうかを選択できます。When you create a software as a service (SaaS) offer, in Partner Center, you can choose whether or not to sell through Microsoft. Microsoft コマーシャル マーケットプレースでオファーを一覧表示するだけで、Microsoft 経由で販売しない場合は、潜在顧客がそのオファーをどのように操作できるかを指定できます。If you want to only list your offer in the Microsoft commercial marketplace and not sell through Microsoft, you can specify how potential customers can interact with the offer. [今すぐ入手 (無料)] または [無料試用版] 一覧オプションを有効にする場合は、ユーザーが無料サブスクリプションまたは無料試用版にアクセスするために移動できるランディング ページの URL を指定する必要があります。When you enable the Get it now (Free) or Free trial listing option, you must specify a landing page URL to which the user can go to access the free subscription or trial.

ランディング ページの目的は、単純に、無料試用版または無料サブスクリプションをアクティブ化できるようにユーザーを受け付けることです。The purpose of the landing page is simply to receive the user so they can activate the free trial or free subscription. Azure Active Directory (Azure AD) と Microsoft Graph を使用して、ユーザーのシングル サインオン (SSO) を有効にしたり、無料試用版または無料サブスクリプションをアクティブ化するために使用できるユーザーに関する重要な詳細 (名前、メール アドレス、組織など) を取得したりします。Using Azure Active Directory (Azure AD) and Microsoft Graph, you will enable single sign-on (SSO) for the user and get important details about the user that you can use to activate their free trial or free subscription, including their name, email address, and organization.

サブスクリプションをアクティブ化するために必要な情報は限られており、Azure AD と Microsoft Graph によって提供されるため、基本的な同意を超える内容を必要とする情報を要求する必要はありません。Because the information needed to activate the subscription is limited and provided by Azure AD and Microsoft Graph, there should be no need to request information that requires more than basic consent. アプリケーションに関する追加の同意を必要とするユーザーの詳細が必要な場合、これらの情報は、サブスクリプションのアクティブ化が完了した後に要求する必要があります。If you need user details that require additional consent for your application, you should request this information after subscription activation is complete. これにより、ユーザーによる円滑なサブスクリプションのアクティブ化が可能になり、破棄されるリスクが軽減されます。This enables frictionless subscription activation for the user and decreases the risk of abandonment.

ランディング ページには通常、次の情報とリスト オプションが含まれています。The landing page typically includes the following information and listing options:

  • 無料試用版または無料サブスクリプションの名前と詳細を指定します。Present the name and details of the free trial or free subscription. たとえば、試用版の使用制限または期間を指定します。For example, specify the usage limits or duration of a trial.
  • ユーザーのアカウントの詳細 (姓名、組織、電子メールを含む) を指定します。Present the user's account details, including first and last name, organization, and email.
  • ユーザーに別のアカウントの詳細を確認するか、または置き換えるよう求めます。Prompt the user to confirm or substitute different account details.
  • ユーザーをアクティブ化の後の次のステップに案内します。Guide the user on next steps after activation. たとえば、ウェルカム メールを受信したり、サブスクリプションを管理したり、サポートを受けたり、ドキュメントを参照したりします。For example, receive a welcome email, manage the subscription, get support, or read documentation.

この記事の以降のセクションでは、ランディング ページを構築するプロセスについて説明します。The following sections in this article will guide you through the process of building a landing page:

  1. ランディング ページでの Azure AD アプリ登録を作成します。Create an Azure AD app registration for the landing page.
  2. アプリの開始点としてコード サンプルを使用します。Use a code sample as a starting point for your app.
  3. 要求と共に送信された、サインイン後に Azure AD から受信された ID トークンにエンコードされている要求から情報を読み取ります。Read information from claims encoded in the ID token, received from Azure AD after sign in, that was sent with the request.
  4. Microsoft Graph API を使用して、必要に応じて追加情報を収集します。Use the Microsoft Graph API to gather additional information, as required.

Azure AD アプリの登録を作成するCreate an Azure AD app registration

コマーシャル マーケットプレースは、Azure AD と完全に統合されています。The commercial marketplace is fully integrated with Azure AD. ユーザーはマーケットプレースに到達し、Azure AD アカウントまたは Microsoft アカウント (MSA) で認証されます。Users arrive at the marketplace authenticated with an Azure AD account or Microsoft account (MSA). 一覧表示のみのオファーから無料試用版サブスクリプションを取得した後、ユーザーはコマーシャル マーケットプレースからランディング ページの URL に移動して、SaaS アプリケーションへのサブスクリプションをアクティブ化して管理します。After acquiring a free or free trial subscription through your list-only offer, the user goes from the commercial marketplace to your landing page URL to activate and manage their subscription to your SaaS application. ユーザーが Azure AD SSO でアプリケーションにサインインできるようにする必要があります。You must let the user sign in to your application with Azure AD SSO. ランディング ページの URL は、そのオファーの [技術的な構成] ページで指定されます。(The landing page URL is specified in the offer's Technical configuration page.

ID を使用するための最初の手順として、ランディング ページが Azure AD アプリケーションとして登録されていることを確認します。The first step to using the identity is to make sure your landing page is registered as an Azure AD application. アプリケーションを登録すると、Azure AD を使用してユーザーを認証したり、ユーザー リソースへのアクセスを要求したりできるようになります。Registering the application lets you use Azure AD to authenticate users and request access to user resources. これは、アプリケーションの定義と見なすことができます。これにより、サービスは、アプリの設定に基づいてアプリにトークンを発行する方法を認識できるようになります。It can be considered the application's definition, which lets the service know how to issue tokens to the app based on the app's settings.

Azure portal を使用して新しいアプリケーションを登録しますRegister a new application using the Azure portal

作業を開始するには、新しいアプリケーションの登録に関するページの手順に従います。To get started, follow the instructions for registering a new application. 他の会社のユーザーがこのアプリにアクセスできるようにするには、アプリケーションを使用できるユーザーを指定するよう求められたときに、任意の組織のディレクトリ (任意の Azure AD ディレクトリ - マルチテナント) 内のアカウントと個人用の Microsoft アカウント (Skype や Xbox など) を選択する必要があります。To let users from other companies visit the app, you must choose Accounts in any organizational directory (any Azure AD directory—multitenant) and personal Microsoft accounts (like Skype or Xbox) when asked who can use the application.

Microsoft Graph API にクエリを実行する予定がある場合は、Web API にアクセスするように新しいアプリケーションを構成します。If you intend to query the Microsoft Graph API, configure your new application to access web APIs. このアプリケーションの API のアクセス許可を選択する場合、ユーザーに関する基本情報を収集してオンボード プロセスがスムーズかつ自動的に実行されるようにするには User.Read の既定値で十分です。When you select the API permissions for this application, the default of User.Read is enough to gather basic information about the user to make the onboarding process smooth and automatic. [needs admin consent] (管理者の同意が必要) というラベルが付いた API のアクセス許可を要求すると、管理者以外のすべてのユーザーがランディング ページにアクセスできなくなるため、この要求はしないでください。Do not request any API permissions labeled needs admin consent, as this will block all non-administrator users from visiting your landing page.

オンボードまたはプロビジョニング プロセスの一部として管理者特権のアクセス許可が必要な場合は、マーケットプレースから送信されたすべてのユーザーが最初にランディング ページを操作できるように、Azure AD の増分同意機能を使用することを検討してください。If you do require elevated permissions as part of your onboarding or provisioning process, consider using the incremental consent functionality of Azure AD so that all users sent from the marketplace are able to interact initially with the landing page.

開始点としてコード サンプルを使用するUse a code sample as a starting point

Microsoft は、Azure AD ログインが有効になった単純な Web サイトを実装するいくつかのサンプル アプリを提供してきました。Microsoft has provided several sample apps that implement a simple website with Azure AD login enabled. アプリケーションが Azure AD に登録されると、 [クイック スタート] ブレードには、一般的なアプリケーションの種類と開発スタックの一覧が表示されます (図 1)。After your application is registered in Azure AD, the Quickstart blade offers a list of common application types and development stacks (Figure 1). 環境に適合するものを選択し、ダウンロードと設定の手順に従ってください。Choose the one that matches your environment and follow the instructions for download and setup.

"図 1:Azure portal の [クイック スタート] ブレードFigure 1: Quickstart blade in the Azure portal

Azure portal の [クイック スタート] ブレードを示しています。

コードをダウンロードし、開発環境を設定したら、前の手順で記録したアプリケーション ID、テナント ID、クライアント シークレットが反映されるようにアプリの構成設定を変更します。After you download the code and set up your development environment, change the configuration settings in the app to reflect the Application ID, tenant ID, and client secret you recorded in the previous procedure. 実際の手順は使用しているサンプルによって異なることに注意してください。Note that the exact steps will differ depending on which sample you are using.

ID トークンにエンコードされている要求から情報を読み取るRead information from claims encoded in the ID token

OpenID Connect フローの一部として、Azure AD は、ユーザーがランディング ページに送信されると ID トークンを要求に追加します。As part of the OpenID Connect flow, Azure AD adds an ID token to the request when the user is sent to the landing page. このトークンには、アクティブ化プロセスで役立つ可能性のある複数の基本情報が含まれています。これには、次の表に示す情報が含まれます。This token contains multiple pieces of basic information that could be useful in the activation process, including the information seen in this table.

Value 説明Description
audaud このトークンの対象ユーザー。Intended audience for this token. この場合は、アプリケーション ID に一致し、検証されている必要があります。In this case, it should match your Application ID and be validated.
preferred_usernamepreferred_username アクセスしているユーザーのプライマリ ユーザー名。Primary username of the visiting user. これはメール アドレス、電話番号、またはその他の識別子である場合があります。This could be an email address, phone number, or other identifier.
emailemail ユーザーのメール アドレス。User's email address. このフィールドは空である可能性があることに注意してください。Note that this field may be empty.
namename トークンのサブジェクトを識別する、人間が判読できる値。Human-readable value that identifies the subject of the token. この場合は、ユーザーの名前になります。In this case, it will be the user's name.
oidoid アプリケーションにまたがるユーザーを一意に識別する、Microsoft ID システム内の識別子。Identifier in the Microsoft identity system that uniquely identifies the user across applications. Microsoft Graph は、この値を特定のユーザー アカウントの ID プロパティとして返します。Microsoft Graph will return this value as the ID property for a given user account.
tidtid ユーザーが属している Azure AD テナントを表す識別子。Identifier that represents the Azure AD tenant the user is from. MSA ID の場合、これは常に 9188040d-6c67-4c5b-b112-36a304b66dad になります。In the case of an MSA identity, this will always be 9188040d-6c67-4c5b-b112-36a304b66dad. 詳細については、次のセクション「Microsoft Graph API を使用する」の注意事項を参照してください。For more information, see the note in the next section: Use Microsoft Graph API.
subsub この特定のアプリケーション内のユーザーを一意に識別する識別子。Identifier that uniquely identifies the user in this specific application.

Microsoft Graph API を使用するUse the Microsoft Graph API

ID トークンにはユーザーを識別するための基本情報が含まれていますが、アクティブ化プロセスでオンボード プロセスを完了するには追加の詳細 (ユーザーの会社など) が必要になる可能性があります。The ID token contains basic information to identify the user, but your activation process may require additional details—such as the user's company—to complete the onboarding process. ユーザーにこれらの詳細を強制的に再入力させないようにするには、Microsoft Graph API を使用してこれらの情報を要求します。Use the Microsoft Graph API to request this information to avoid forcing the user to input these details again. 標準の User.Read アクセス許可には、既定では次の情報が含まれます。The standard User.Read permissions include the following information, by default:

Value 説明Description
displayNamedisplayName ユーザーのアドレス帳に表示される名前。Name displayed in the address book for the user.
givenNamegivenName ユーザーの名。First name of the user.
jobTitlejobTitle ユーザーの役職。User's job title.
mailmail ユーザーの SMTP アドレス。SMTP address for the user.
MobilePhonemobilePhone ユーザーの携帯電話番号 (代表)。Primary cellular telephone number for the user.
preferredLanguagepreferredLanguage ユーザーの優先する言語の ISO 639-1 コード。ISO 639-1 code for the user's preferred language.
surnamesurname ユーザーの姓。Last name of the user.

要求に含めるために、ユーザーの会社の名前やユーザーの所在地 (国) などの追加のプロパティを選択できます。Additional properties—such as the name of the user's company or the user's location (country)—can be selected for inclusion in the request. 詳細については、ユーザー リソースの種類のプロパティに関するページを参照してください。For more details, see Properties for the user resource type.

Azure AD に登録されているほとんどのアプリは、会社の Azure AD テナントからユーザーの情報を読み取るための委任されたアクセス許可を付与します。Most apps that are registered with Azure AD grant delegated permissions to read the user's information from their company's Azure AD tenant. それらの情報を取得するための Microsoft Graph への要求にはすべて、認証としてのアクセス トークンを指定する必要があります。Any request to Microsoft Graph for that information must be accompanied by an access token as authentication. アクセス トークンを生成するための具体的な手順は、使用しているテクノロジ スタックによって異なりますが、サンプル コードには例が含まれています。Specific steps to generate the access token will depend on the technology stack you're using, but the sample code will contain an example. 詳細については、「ユーザーの代わりにアクセスを取得」を参照してください。For more information, see Get access on behalf of a user.

注意

MSA テナント (テナント ID は 9188040d-6c67-4c5b-b112-36a304b66dad) のアカウントでは、ID トークンで既に収集されている内容より詳細な情報は返されません。Accounts from the MSA tenant (with tenant ID 9188040d-6c67-4c5b-b112-36a304b66dad) will not return more information than has already been collected with the ID token. そのため、これらのアカウントでは Graph API へのこの呼び出しをスキップできます。So you can skip this call to the Graph API for these accounts.

次のステップNext steps