Azure Active Directory B2C を使用して GitHub アカウントでサインアップとサインインを設定する

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

• 「Active Directory B2C でのカスタム ポリシーの概要」の手順を完了してください。 このチュートリアルでは、Azure AD B2C テナント構成を使用するようにカスタム ポリシー ファイルを更新する方法について説明します。
• Web アプリケーションを登録します。

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

1. 少なくとも外部 ID プロバイダー管理者特権を持つアカウントで Azure portal にサインインします。
2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
3. Azure portal の左上隅にある [ すべてのサービス ] を選択し、 Azure AD B2C を検索して選択します。
4. ID プロバイダーを選択し、GitHub (プレビュー) を選択します。
5. 名前を入力します。 たとえば、 GitHub です。
6. クライアント ID には、先ほど作成した GitHub アプリケーションのクライアント ID を入力します。
7. クライアント シークレットの場合は、記録したクライアント シークレットを入力します。
8. 保存 を選択します。

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

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

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

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

ポリシー キーを作成する

以前に Azure AD B2C テナントに記録したクライアント シークレットを格納する必要があります。

1. Azure portal にサインインします。
2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
3. Azure portal の左上隅にある [すべてのサービス] を選択してから、[Azure AD B2C] を検索して選択します。
4. [概要] ページで、[Identity Experience Framework] を選びます。
5. [ポリシー キー] を選択し、[追加] を選びます。
6. [オプション] で、[Manual] を選択します。
7. ポリシー キーの名前を入力します。 たとえば、GitHubSecret のようにします。 プレフィックス B2C_1A_ がキーの名前に自動的に追加されます。
8. [ シークレット] に、前に記録したクライアント シークレットを入力します。
9. [ キーの使用法] で、[ Signature] を選択します。
10. Create をクリックしてください。

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

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

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

1. TrustFrameworkExtensions.xmlを開きます。

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

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

   <ClaimsProvider>
     <Domain>github.com</Domain>
     <DisplayName>GitHub</DisplayName>
     <TechnicalProfiles>
       <TechnicalProfile Id="GitHub-OAuth2">
         <DisplayName>GitHub</DisplayName>
         <Protocol Name="OAuth2" />
         <Metadata>
           <Item Key="ProviderName">github.com</Item>
           <Item Key="authorization_endpoint">https://github.com/login/oauth/authorize</Item>
           <Item Key="AccessTokenEndpoint">https://github.com/login/oauth/access_token</Item>
           <Item Key="ClaimsEndpoint">https://api.github.com/user</Item>
           <Item Key="HttpBinding">GET</Item>
           <Item Key="scope">read:user user:email</Item>
           <Item Key="UsePolicyInRedirectUri">0</Item>
           <Item Key="BearerTokenTransmissionMethod">AuthorizationHeader</Item>  
           <Item Key="UserAgentForClaimsExchange">CPIM-Basic/{tenant}/{policy}</Item>
           <!-- Update the Client ID below to the Application ID -->
           <Item Key="client_id">Your GitHub application ID</Item>
         </Metadata>
         <CryptographicKeys>
           <Key Id="client_secret" StorageReferenceId="B2C_1A_GitHubSecret"/>
         </CryptographicKeys>
         <OutputClaims>
           <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name" />
           <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="email" />
           <OutputClaim ClaimTypeReferenceId="numericUserId" PartnerClaimType="id" />
           <OutputClaim ClaimTypeReferenceId="issuerUserId" />
           <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="github.com" AlwaysUseDefaultValue="true" />
           <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
         </OutputClaims>
         <OutputClaimsTransformations>
           <OutputClaimsTransformation ReferenceId="CreateIssuerUserId" />
           <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName"/>
           <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName"/>
           <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId"/>
           <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId"/>
         </OutputClaimsTransformations>
         <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
       </TechnicalProfile>
     </TechnicalProfiles>
   </ClaimsProvider>
   

4. client_idアプリケーション登録のアプリケーション ID に設定します。

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

要求変換の追加

GitHub 技術プロファイルでは、 CreateIssuerUserId 要求変換を ClaimsTransformations の一覧に追加する必要があります。 ファイルに ClaimsTransformations 要素が定義されていない場合は、次に示すように親 XML 要素を追加します。 要求変換には、 numericUserId という名前で定義された新しい要求の種類も必要です。

1. BuildingBlocks 要素を検索します。 要素が存在しない場合は、追加します。
2. ClaimsSchema 要素を見つけます。 要素が存在しない場合は、追加します。
3. ClaimsSchema 要素に numericUserId 要求を追加します。
4. ClaimsTransformations 要素を見つけます。 要素が存在しない場合は、追加します。
5. CreateIssuerUserId 要求変換を ClaimsTransformations 要素に追加します。

<BuildingBlocks>
  <ClaimsSchema>
    <ClaimType Id="numericUserId">
      <DisplayName>Numeric user Identifier</DisplayName>
      <DataType>long</DataType>
    </ClaimType>
  </ClaimsSchema>
  <ClaimsTransformations>
    <ClaimsTransformation Id="CreateIssuerUserId" TransformationMethod="ConvertNumberToStringClaim">
      <InputClaims>
        <InputClaim ClaimTypeReferenceId="numericUserId" TransformationClaimType="inputClaim" />
      </InputClaims>
      <OutputClaims>
        <OutputClaim ClaimTypeReferenceId="issuerUserId" TransformationClaimType="outputClaim" />
      </OutputClaims>
    </ClaimsTransformation>
  </ClaimsTransformations>
</BuildingBlocks>

ユーザー体験を追加する

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

1. スターター パックから TrustFrameworkBase.xml ファイルを開きます。
2. を含む Id="SignUpOrSignIn" 要素の内容全体を検索してコピーします。
3. TrustFrameworkExtensions.xml を開き、UserJourneys 要素を見つけます。 要素が存在しない場合は、要素を追加します。
4. UserJourneys 要素の子としてコピーした UserJourney 要素の内容全体を貼り付けます。
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="GitHubExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="GitHubExchange" TechnicalProfileReferenceId="GitHub-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. サインアップまたはサインイン ページで、GitHub を選択して GitHub アカウントでサインインします。

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

次のステップ

• GitHub トークンをアプリケーションに渡す方法について説明します。
• GitHub フェデレーション ライブ デモと、GitHub アクセス トークン Live デモを渡す方法を確認する