SwissID アカウントでのサインアップおよびサインインを設定する - Azure AD B2C

[アーティクル]
06/01/2023

"開始する前に"、[ポリシーの種類の選択] セレクターを使用して、設定するポリシーの種類を選択します。 Azure Active Directory B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザーフローを使用する、または完全に構成可能なカスタムポリシーを使用する) があります。この記事で必要な手順は、方法ごとに異なります。

この記事では、Azure Active Directory B2C (Azure AD B2C) を使用するアプリケーションで SwissID アカウントを持つ顧客にサインアップとサインインを提供する方法について説明します。 OpenID Connect プロトコルを使用して、ユーザーフローまたはカスタムポリシーに SwissID を追加します。詳細については、「SwissID 統合のガイドライン - OpenID Connect」を参照してください。

前提条件

ユーザーフローを作成して、ユーザーがアプリケーションにサインアップおよびサインインできるようにします。
Web アプリケーションを登録します。

「Active Directory B2C でのカスタムポリシーの概要」にある手順を完了します。
Web アプリケーションを登録します。

SwissID アプリケーションを作成する

Azure AD B2C で SwissID アカウントを持つユーザーのサインインを有効にするには、アプリケーションを作成する必要があります。 SwissID アプリケーションを作成するには、次の手順に従います。

SwissID Business Partner サポートに問い合わせます。

SwissID にサインアップした後、Azure AD B2C テナントに関する情報を入力します。

キー注意

リダイレクト URI https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp という URI を指定します。カスタムドメインを使用する場合は、「https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp」と入力します。 your-tenant-name を実際のテナントの名前に、your-domain-name を実際のカスタムドメインに置き換えます。

トークンエンドポイントの認証方法 client_secret_post

キー	注意
リダイレクト URI	`https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp` という URI を指定します。カスタムドメインを使用する場合は、「`https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp`」と入力します。 `your-tenant-name` を実際のテナントの名前に、`your-domain-name` を実際のカスタムドメインに置き換えます。
トークンエンドポイントの認証方法	`client_secret_post`

アプリが登録された後、SwissID によって次の情報が提供されます。この情報を使用して、ユーザーフローまたはカスタムポリシーを構成します。

キー	Note
環境	SwissID OpenId の既知の構成エンドポイント。たとえば、「 `https://login.sandbox.pre.swissid.ch/idp/oauth2/.well-known/openid-configuration` 」のように入力します。
クライアント ID	SwissID クライアント ID。たとえば、「 `11111111-2222-3333-4444-555555555555` 」のように入力します。
Password	SwissID クライアントシークレット。

SwissID を ID プロバイダーとして構成する

複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選び、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal の左上隅にある [すべてのサービス] を選択してから、 [Azure AD B2C] を検索して選択します。
[ID プロバイダー] を選択してから、 [新しい OpenID Connect プロバイダー ] を選択します。
[名前] を入力します。たとえば、「SwissID」と入力します。
[メタデータ URL] で、SwissID OpenId の既知の構成エンドポイントの URL を入力します。次に例を示します。
```
https://login.sandbox.pre.swissid.ch/idp/oauth2/.well-known/openid-configuration
```
[クライアント ID] で、SwissID クライアント ID を入力します。
[クライアントシークレット] で、SwissID クライアントシークレットを入力します。
[スコープ] で、openid profile email を入力します。
[応答の種類] および [応答モード] の既定値はそのままにします。
(省略可能) [ドメインのヒント] に、「swissid.com」と入力します。詳しくは、「Azure Active Directory B2C を使用した直接サインインの設定」をご覧ください。
[ID プロバイダー要求のマッピング] で、次の要求を入力します。
- [ユーザー ID] : sub
- [名] : given_name
- [姓] : family_name
- [電子メール] : email
[保存] を選択します。

ユーザーフローに SwissID ID プロバイダーを追加する

この時点では、SwissID ID プロバイダーは設定されていますが、サインインページではまだ使用できません。ユーザーフローに SwissID ID プロバイダーを追加するには:

Azure AD B2C テナントで、 [ユーザーフロー] を選択します。
SwissID ID プロバイダーを追加するユーザーフローをクリックします。
[ソーシャル ID プロバイダー] から [SwissID] を選択します。
[保存] を選択します。
ポリシーをテストするには、 [ユーザーフローを実行します] を選択します。
[アプリケーション] には、以前に登録した testapp1 という名前の Web アプリケーションを選択します。 [応答 URL] に https://jwt.ms と表示されます。
[ユーザーフローを実行します] ボタンを選択します。
サインアップまたはサインインページで、[SwissID] を選択して、SwissID アカウントでサインインします。

サインインプロセスが成功すると、ブラウザーは https://jwt.ms にリダイレクトされ、Azure AD B2C によって返されたトークンの内容が表示されます。

ポリシーキーを作成する

SwissID から受け取ったクライアントシークレットは、Azure AD B2C テナントに保存する必要があります。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。上部メニューで [ディレクトリ + サブスクリプション] フィルターを選択し、ご利用のテナントが含まれるディレクトリを選択します。
Azure portal の左上隅にある [すべてのサービス] を選択してから、 [Azure AD B2C] を検索して選択します。
[概要] ページで、 [Identity Experience Framework] を選択します。
[ポリシーキー] を選択し、 [追加] を選択します。
オプションについては、Manualを選択します。
ポリシーキーの名前を入力します。たとえば、「 SwissIDSecret 」のように入力します。プレフィックス B2C_1A_ がキーの名前に自動的に追加されます。
[シークレット] に、SwissID クライアントシークレットを入力します。
[キー使用法] として [Signature] を選択します。
Create をクリックしてください。

SwissID を ID プロバイダーとして構成する

ユーザーが SwissID アカウントを使用してサインインできるようにするには、そのアカウントを Azure AD B2C がエンドポイント経由で通信できる相手のクレームプロバイダーとして定義する必要があります。エンドポイントは、特定のユーザーが認証されていることを確認するために Azure AD B2C で使う一連の要求を提供します。

SwissID アカウントをクレームプロバイダーとして定義するには、そのアカウントをポリシーの拡張ファイル内の ClaimsProviders 要素に追加します。

TrustFrameworkExtensions.xml を開きます。
ClaimsProviders 要素を見つけます。存在しない場合は、それをルート要素の下に追加します。

新しい ClaimsProvider を次のように追加します。

<ClaimsProvider>
  <Domain>SwissID.com</Domain>
  <DisplayName>SwissID</DisplayName>
  <TechnicalProfiles>
    <TechnicalProfile Id="SwissID-OpenIdConnect">
      <DisplayName>SwissID</DisplayName>
      <Protocol Name="OpenIdConnect" />
      <Metadata>
        <Item Key="METADATA">https://login.sandbox.pre.swissid.ch/idp/oauth2/.well-known/openid-configuration</Item>
        <Item Key="client_id">Your Swiss client ID</Item>
        <Item Key="response_types">code</Item>
        <Item Key="scope">openid profile email</Item>
        <Item Key="response_mode">form_post</Item>
        <Item Key="HttpBinding">POST</Item>
        <Item Key="UsePolicyInRedirectUri">false</Item>
      </Metadata>
      <CryptographicKeys>
        <Key Id="client_secret" StorageReferenceId="B2C_1A_SwissIDSecret" />
      </CryptographicKeys>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="sub" />
        <OutputClaim ClaimTypeReferenceId="identityProvider" PartnerClaimType="iss" />
        <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
        <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="given_name" />
        <OutputClaim ClaimTypeReferenceId="surName" PartnerClaimType="family_name" />
        <OutputClaim ClaimTypeReferenceId="email" />
      </OutputClaims>
      <OutputClaimsTransformations>
        <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
        <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
        <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
        <OutputClaimsTransformation ReferenceId="CreateDisplayName" />
      </OutputClaimsTransformations>
      <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
    </TechnicalProfile>
  </TechnicalProfiles>
</ClaimsProvider>

[client_id] を SwissID クライアント ID に設定します。
ファイルを保存します。

ユーザー体験を追加する

この時点では、ID プロバイダーはセットアップされていますが、サインインページではまだ使用できません。独自のカスタムユーザー体験がない場合は、既存のテンプレートユーザー体験の複製を作成してください。そうでない場合は、次の手順に進みます。

スターターパックから TrustFrameworkBase.xml ファイルを開きます。
Id="SignUpOrSignIn" を含む UserJourney 要素を見つけ、その内容全体をコピーします。
TrustFrameworkExtensions.xml を開き、UserJourneys 要素を見つけます。要素が存在しない場合は追加します。
コピーした UserJourney 要素の内容全体を UserJourneys 要素の子として貼り付けます。
ユーザー体験の ID の名前を変更します。たとえば、「 Id="CustomSignUpSignIn" 」のように入力します。

ユーザー体験に ID プロバイダーを追加する

これでユーザー体験ができたので、ユーザー体験に新しい ID プロバイダーを追加します。最初にサインインボタンを追加してから、ボタンをアクションにリンクします。アクションは、前に作成した技術プロファイルです。

ユーザー体験内で、Type="CombinedSignInAndSignUp" または Type="ClaimsProviderSelection" を含むオーケストレーションステップ要素を見つけます。これは通常、最初のオーケストレーションステップです。 ClaimsProviderSelections 要素には、ユーザーがサインインに使用できる ID プロバイダーの一覧が含まれています。要素の順序により、ユーザーに表示されるサインインボタンの順序が制御されます。 ClaimsProviderSelection XML 要素を追加します。 TargetClaimsExchangeId の値をフレンドリ名に設定します。
次のオーケストレーションステップで、ClaimsExchange 要素を追加します。 ID を、ターゲットの要求交換 ID の値に設定します。TechnicalProfileReferenceId の値を、前に作成した技術プロファイルの ID に更新します。

次の XML は、ID プロバイダーを使用したユーザー体験の最初の 2 つのオーケストレーションステップを示しています。

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="SwissIDExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="SwissIDExchange" TechnicalProfileReferenceId="SwissID-OpenIdConnect" />
  </ClaimsExchanges>
</OrchestrationStep>

証明書利用者ポリシーを構成する

証明書利用者ポリシー (例 SignUpSignIn.xml) は、Azure AD B2C が実行されるユーザー体験を指定します。証明書利用者内の DefaultUserJourney 要素を検索します。 ID プロバイダーを追加したユーザー体験 ID と一致するように ReferenceId を更新します。

次の例では、CustomSignUpSignIn ユーザー体験について、ReferenceId を CustomSignUpSignIn に設定しています。

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

カスタムポリシーをアップロードする

Azure portal にサインインします。
ポータルツールバーにある [ディレクトリ + サブスクリプション] アイコンを選択し、Azure AD B2C テナントを含むディレクトリを選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[ポリシー] で [Identity Experience Framework] を選択します。
[カスタムポリシーのアップロード] を選択し、変更した 2 つのポリシーファイルを拡張ポリシー (TrustFrameworkExtensions.xml など)、証明書利用者ポリシー (SignUpSignIn.xmlなど) の順序でアップロードします。

カスタムポリシーのテスト

証明書利用者ポリシー (B2C_1A_signup_signin など) を選択します。
[アプリケーション] には、前に登録した Web アプリケーションを選択します。 [応答 URL] に https://jwt.ms と表示されます。
[今すぐ実行] ボタンを選択します。
サインアップまたはサインインページで、[SwissID] を選択して、SwissID アカウントでサインインします。

サインインプロセスが成功すると、ブラウザーは https://jwt.ms にリダイレクトされ、Azure AD B2C によって返されたトークンの内容が表示されます。

運用環境に移行する

SwissID IdP では、運用前環境と運用環境が提供されます。この記事で説明する構成では、運用前環境を使用します。運用環境を使用するには、次の手順を実行します。

運用環境について SwissId サポートに問い合わせます。
既知の構成エンドポイントの URI を使用して、ユーザーフローまたはカスタムポリシーを更新します。

次のステップ

SwissID トークンをアプリケーションに渡す方法を確認します。

Azure Active Directory B2C を使用して SwissID アカウントでのサインアップおよびサインインを設定する

前提条件

SwissID アプリケーションを作成する

SwissID を ID プロバイダーとして構成する

ユーザー フローに SwissID ID プロバイダーを追加する

ポリシー キーを作成する

SwissID を ID プロバイダーとして構成する

ユーザー体験を追加する

ユーザー体験に ID プロバイダーを追加する

証明書利用者ポリシーを構成する

カスタム ポリシーをアップロードする

カスタム ポリシーのテスト

運用環境に移行する

次のステップ

その他のリソース

ユーザーフローに SwissID ID プロバイダーを追加する

ポリシーキーを作成する

カスタムポリシーをアップロードする

カスタムポリシーのテスト