Azure Active Directory B2C を使って、モバイル ID でのサインアップとサインインを設定する

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

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

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

1. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。

2. Azure portal の左上隅にある [すべてのサービス] を選択してから、 [Azure AD B2C] を検索して選択します。

3. [ID プロバイダー] を選択してから、 [新しい OpenID Connect プロバイダー ] を選択します。

4. [名前] を入力します。 たとえば、「モバイル ID」と入力します。

5. [メタデータ URL] で、モバイル ID OpenId の既知の構成エンドポイントの URL を入力します。 次に例を示します。

   https://openid.mobileid.ch/.well-known/openid-configuration
   

6. [クライアント ID] で、モバイル ID クライアント ID を入力します。

7. [クライアント シークレット] で、モバイル ID クライアント シークレットを入力します。

8. [スコープ] で、openid, profile, phone, mid_profile を入力します。

9. [応答の種類] (code)、および[応答モード] (form_post) の既定値はそのままにします。

10. (省略可能) [ドメインのヒント] に、「mobileid.ch」と入力します。 詳しくは、「Azure Active Directory B2C を使用した直接サインインの設定」をご覧ください。

11. [ID プロバイダー要求のマッピング] で、次の要求を入力します。

    • [ユーザー ID] : sub
    • [表示名] : name

12. [保存] を選択します。

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

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

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

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

ポリシー キーを作成する

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

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

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

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

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

1. TrustFrameworkExtensions.xml を開きます。

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

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

   <ClaimsProvider>
   <Domain>mobileid.ch</Domain>
   <DisplayName>Mobile-ID</DisplayName>
   <TechnicalProfiles>
     <TechnicalProfile Id="MobileID-OAuth2">
     <DisplayName>Mobile-ID</DisplayName>
     <Protocol Name="OAuth2" />
     <Metadata>
       <Item Key="ProviderName">Mobile-ID</Item>
        <Item Key="authorization_endpoint">https://m.mobileid.ch/oidc/authorize</Item>
         <Item Key="AccessTokenEndpoint">https://openid.mobileid.ch/token</Item>
         <Item Key="ClaimsEndpoint">https://openid.mobileid.ch/userinfo</Item>
         <Item Key="scope">openid, profile, phone, mid_profile</Item>
         <Item Key="HttpBinding">POST</Item>
         <Item Key="UsePolicyInRedirectUri">false</Item>
         <Item Key="token_endpoint_auth_method">client_secret_post</Item>
         <Item Key="BearerTokenTransmissionMethod">AuthorizationHeader</Item>
         <Item Key="client_id">Your application ID</Item>
       </Metadata>
       <CryptographicKeys>
         <Key Id="client_secret" StorageReferenceId="B2C_1A_MobileIdSecret" />
       </CryptographicKeys>
       <OutputClaims>
         <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="sub"/>
         <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name"/>
         <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="mobileid.ch" />
         <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
       </OutputClaims>
       <OutputClaimsTransformations>
         <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
         <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
         <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
         <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
       </OutputClaimsTransformations>
       <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
       </TechnicalProfile>
     </TechnicalProfiles>
   </ClaimsProvider>
   

4. [client_id] を モバイル ID クライアント ID に設定します。

5. ファイルを保存します。

ユーザー体験を追加する

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

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

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

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

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

2. 次のオーケストレーション ステップで、ClaimsExchange 要素を追加します。 ID を、ターゲットの要求交換 ID の値に設定します。TechnicalProfileReferenceId の値を、前に作成した技術プロファイルの ID に更新します。

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

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

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="MobileIDExchange" TechnicalProfileReferenceId="MobileID-OAuth2" />
  </ClaimsExchanges>
</OrchestrationStep>

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

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

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

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

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

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

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

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

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