18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWS Cognito ユーザープールにLINEサインイン連携を設定する

Last updated at Posted at 2022-07-10

この記事の目的

  • Cognito ユーザープールにLineサインイン連携を設定
  • これによりLineアカウント認証を使って独自サービスのログイン制御を実現できます

👇これより先は下記記事の内容を前提とします

Cognitoドメインの取得

  • 後で必要になるので、Cognitoの設定画面からCognitoドメインを取得します。
    image

LINEログインチャンネルの作成

  • LINE Developers コンソールにサインインします。

  • プロバイダーを作成します。
    image

  • LINE ログイン を選択します。
    image

  • オプションは適当に設定します。
    image

  • チャンネル基本設定を選択します。
    image

  • OpenID Connectの申請を選択します。
    image

  • スクリーンショットには下記例文のような画像を提示している前提のページの画像取得して貼り付けます。

【例文】

メールアドレス取得の目的を以下に記載します。
 

  • サービスの提供・維持
  • サービスやコンテンツの開発・改善
  • 不正アクセスなど、不正利用の防止
  • お客様に最適化されたコンテンツの提供

取得したメールアドレスは、お客様から同意を得た範囲または適用法で認められる場合を除き、利用の目的の範囲を越えて取り扱いません。また、目的外利用を行わないための適切な措置を講じます。

【例文の画像イメージ】
e-mail

  • 保存を選択します。
    image

  • LINEログイン設定を選択します。

  • コールバックURLの編集を選択します。
    image

  • コールバックURLに上記[Cognitoドメインの取得]で取得したURLに続けて[/oauth2/idpresponse]を指定します。
    image

  • 開発中と表示されている部分を選択します。

  • チャンネルを公開します。
    ※ チャンネルを公開しないと、ログインユーザが自分自身のみに限定されます。
    image
    image

  • チャンネル基本設定を選択します。

  • チャンネルIDを取得します。
    image

  • チャンネルシークレットを取得します。
    image

フェデレーテッドアイデンティティプロバイダー の追加

  • アイデンティティプロバイダーを追加
    image

  • OpenID Connectを指定します。
    image

  • クライアント IDに上記LINEログインチャンネルのチャンネルIDを指定します。

  • クライアントのシークレットに上記LINEログインチャンネルのクライアントシークレットを指定します。

  • 許可されたスコープに[profile email openid]を指定します。

  • Google属性にemailを指定します。
    image

  • 発行者 URL を通じた自動入力を選択します。

  • 発行者 URLにhttps://access.line.meを指定します。

  • OpenID Connect 属性にemailを指定します。
    image

  • Cognitoユーザプールのアプリケーションの統合タブを選択します。
    image

  • アプリケーションクライアントを選択します。
    image

  • ホストされた UI の編集を選択します。
    image

  • IDプロバイダーでLINEを選択します。
    image
    image

  • 変更を保存します。
    image

ホストされたUIのカスタマイズ

LINEログインの雰囲気をそれらしく見せるため、ホストされたUIを少しだけカスタマイズします。

カスタマイズCSSのダウンロード

  • Cognitoユーザープールのアプリケーションの統合を選択します。
    image

  • ホストされたUIのカスタマイズを選択します。
    image

  • CSSテンプレートをダウンロードします。
    image

ダウンロードしたtemplate.cssの以下の箇所を設定修正します。

  • .idpDescription-customizable
    display: none;に設定変更
     これにより余計なテキストが非表示になります。
  • .idpButton-customizable
    background-color: #06c755;に設定変更
    これによりLINEログインボタンの色がLINEの標準色に変わります。
  • .idpButton-customizable:hover
    background-color: #06c755;に設定変更
    これによりLINEログインボタンの色がLINEの標準色に変わります。
CSS template.css

.idpDescription-customizable {
  padding-top: 10px;
  padding-bottom: 10px;
  display: none;
  font-size: 16px;
}

.idpButton-customizable {
  height: 40px;
  width: 100%;
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;
  background-color: #06c755;
  border-color: #fff;
}

.idpButton-customizable:hover {
  color: #fff;
  background-color: #06c755;
}


  • 編集したCSSファイルをアップロード
    image

動作確認

  • ローカルサーバを起動します。
PS C:\home\git\material.angular.github> ng s --o
  • "Auth"をクリックして、サインインできることを確認します。

image

👇前提記事

👇関連記事

👇GitHubはこちら

👇参考URL

18
6
1

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
18
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?