1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Azure AD B2CにLINEアカウントでログインする

Last updated at Posted at 2022-01-28

Azure AD B2Cでは、OpenID ConnectやSAML等のプロトコルで外部IDプロバイダーと連携することにより、FacebookやTwitter等のソーシャルアカウントでのログインが可能です。

参考:https://docs.microsoft.com/ja-jp/azure/active-directory-b2c/add-identity-provider

この記事ではOpenID Connectを使い、LINEアカウントでAD B2Cにログインする方法をご紹介します。

Open ID Connectの設定(LINE)

参考:https://developers.line.biz/ja/docs/line-login/integrate-line-login/

プロバイダーおよびチャネルの作成

  1. LINE Developers Consoleにアクセスし、新規プロバイダーを作成します。
    1.png

  2. プロバイダーのチャネル設定から「LINEログイン」を選択します。
    2.png

  3. チャネル名や管理者のメールアドレスなどの情報を入力し、作成します。

    • アプリタイプは「ウェブアプリ」を選択します。
      3.png
      4.png
  4. チャネル作成後、基本設定画面から以下の値を控えておきます。

    • チャネルID
    • チャネルシークレット
      5.png
      6.png

コールバックURLの作成

  1. LINEログイン設定タブを表示し、「コールバックURL」にhttps://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authrespを設定します。
    • your-tenant-nameの箇所はお使いのB2Cテナント名に置き換えてください。
      7.png

チャネルを公開する

チャネルは、デフォルトでは非公開の状態となっています。

非公開の場合、LINEログインできるユーザーはチャネルに招待済みのユーザーのみに限定されるため、他のLINEアカウントでログインするにはチャネルを公開する必要があります。

参考:https://developers.line.biz/ja/docs/line-login/getting-started/#step-6-publish-channel

チャネルの設定画面から、「非公開」のステータスを選択することで公開ができます。

※チャネルは公開から非公開には戻せないため、もし再度非公開にする場合はチャネルを作り直す必要があります。

8.png

【補足】メールアドレスの取得権限の申請

LINEでは、Google等同様にログインユーザーのメールアドレスを取得し、B2Cに連携することが可能です。

ただしドキュメント内の以下の引用の通り、メールアドレスの取得にはメールアドレスの取得・利用について記載された文面を別途用意する必要があるとのことですので、今回は省略します。

申請条件に同意して、メールアドレスの取得と利用についてユーザーに提示する文面のスクリーンショットをアップロードします。

カスタムIDPの設定(AD B2C)

B2Cの管理画面でLINEログインの設定を行います。
汎用OpenId Connectの設定を参考に、ユーザーフローおよびカスタムポリシーでの設定をご紹介します。

ユーザーフロー

  1. B2Cの管理画面のメニューから「IDプロバイダー」を選択し、「新しいOpen ID Connectプロバイダー」を選択します。

  2. 設定画面で以下の情報を入力し保存します。

    • 名前:LINE(任意の名前で問題無し)
    • メタデータURL:https://access.line.me/.well-known/openid-configuration
    • クライアントID:プロバイダーおよびチャネルの作成で生成されたチャネルID
    • クライアントシークレット:プロバイダーおよびチャネルの作成で生成されたチャネルシークレット
    • スコープ:openid profile
    • 応答の種類:code
    • 応答モード:form_post
    • ユーザーID:sub
    • 表示名:name

    9.png

  3. 「サインアップとサインイン」のユーザーフローを作成します。
    10.png

  4. ユーザーフロー作成画面の「カスタムIDプロバイダー」は先ほど追加したIDプロバイダーを選択します。
    11.png

カスタムポリシー

前提として、カスタムポリシーは下記URLの「SocialAccounts」のポリシーをベースとして説明します。

※下記のポリシーはFacebookログインを前提としておりますので、そちらの設定はあらかじめコメントアウトしてください。

  1. B2C管理画面のポリシーキー設定から、以下のキーを追加します。

    • オプション:手動
    • 名前:LINESecret
    • シークレット:プロバイダーおよびチャネルの作成で生成されたチャネルシークレット
    • アクティブ化する日を設定する:未チェック
    • 有効期限を設定する:未チェック
    • キー使用法:署名

    12.png

  2. ポリシーキーの一覧に「B2C_1A_{シークレット名}」が追加されるため、キー名を控えておきます。
    13.png

  3. カスタムポリシーTrustFrameworkBase.xmlClaimsProviders配下に、LINEのIDプロバイダーを追加します。

    <ClaimsProvider>
      <Domain>line.me</Domain>
      <DisplayName>Login with LINE</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="LINE-OpenIdConnect">
          <DisplayName>LINE</DisplayName>
          <Description>Login with your LINE account</Description>
          <Protocol Name="OpenIdConnect"/>
          <Metadata>
            <Item Key="METADATA">https://access.line.me/.well-known/openid-configuration</Item>
            <Item Key="client_id">{クライアントID}</Item>
            <Item Key="response_types">code</Item>
            <Item Key="scope">openid profile</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="{シークレットキー名}" />
          </CryptographicKeys>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="sub"/>
            <OutputClaim ClaimTypeReferenceId="tenantId" PartnerClaimType="tid"/>
            <OutputClaim ClaimTypeReferenceId="givenName" PartnerClaimType="given_name" />
            <OutputClaim ClaimTypeReferenceId="surName" PartnerClaimType="family_name" />
            <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="name" />
            <OutputClaim ClaimTypeReferenceId="email" PartnerClaimType="email" />
            <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="line.me" />
          </OutputClaims>
          <OutputClaimsTransformations>
            <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
            <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
            <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
            <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
          </OutputClaimsTransformations>
          <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
        </TechnicalProfile>
      </TechnicalProfiles>
    </ClaimsProvider>
    
  4. カスタムポリシーTrustFrameworkBase.xmlUserJourneyにIDプロバイダーを設定します。

    • UserJourneys配下の、SignUpOrSignInのうち、Step1のClaimsProviderSelections、Step2のClaimsExchanges配下に、IDプロバイダーの設定を追加します。

      <UserJourney Id="SignUpOrSignIn">
        <OrchestrationSteps>
          <OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
            <ClaimsProviderSelections>
              <ClaimsProviderSelection TargetClaimsExchangeId="LINEExchange" />
              ...
            </ClaimsProviderSelections>
            ...
          </OrchestrationStep>
          <OrchestrationStep Order="2" Type="ClaimsExchange">
            ...
            <ClaimsExchanges>
              <ClaimsExchange Id="LINEExchange" TechnicalProfileReferenceId="LINE-OpenIdConnect" />
              ...
            </ClaimsExchanges>
          </OrchestrationStep>
        </OrchestrationSteps>
        ...
      </UserJourney>
      
  5. 以下の順にカスタムポリシーをアップロードします。

    1. TrustFrameworkBase.xml
    2. TrustFrameworkLocalization.xml
    3. TrustFrameworkExtensions.xml
    4. SignUpOrSignin.xml

動作確認

これでLINEログインの設定は完了です。

ポリシーを実行してみます。

  1. フローを実行すると、LINEログイン画面が表示されます。
    14.png

  2. QRコードログインを試してみます。
    15.png

  3. LINEアプリで画面に表示された本人確認のコードを入力します。
    16.png

  4. 初回ログイン時はB2C側の画面に遷移し、ユーザー情報の入力画面になります。

    • 「ユーザー名」の箇所は、LINEのユーザー名になっていることがわかります。

    17.png

  5. Createボタンを押すと認証完了です!このようにトークンが発行されました。
    18.png

まとめ

今回はOpenID Connectを利用し、LINEアカウントでAzure AD B2Cにログインする方法をご紹介しました。

また、B2C側では汎用OpenID Connectの設定を行っているため、OpenID Connectがサポートされている他の外部IDプロバイダーでも同様の方法で連携が可能です。

関連記事

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?