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

## この記事の目的

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

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

- [AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す](https://docusaurus.plant11.com/cloud/cognito_auth)

## Cognitoドメインの取得

- 後で必要になるので、Cognitoの設定画面からCognitoドメインを取得します。
![image](https://user-images.githubusercontent.com/38905609/178088612-7249f843-25c2-4877-9f5e-02e73a5bc1ac.png)

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

- [LINE Developers コンソール](https://developers.line.biz/console/)にサインインします。

- プロバイダーを作成します。  
![image](https://user-images.githubusercontent.com/38905609/178129288-c3bf09ca-7894-4917-af7d-8bf405c252e6.png)

- LINE ログイン を選択します。
![image](https://user-images.githubusercontent.com/38905609/178129333-2266c97e-eb3a-4af1-aa86-f86d5f826ef2.png)

- オプションは適当に設定します。  
![image](https://user-images.githubusercontent.com/38905609/178129430-c29434e5-b7a6-489c-a1de-69d0ace2ab63.png)

- チャンネル基本設定を選択します。
![image](https://user-images.githubusercontent.com/38905609/178129469-cc433a75-6c06-47a7-bbe4-0cc96935a528.png)

- OpenID Connectの申請を選択します。
![image](https://user-images.githubusercontent.com/38905609/178129503-854c900a-0879-432c-aaa8-26371f580ca4.png)

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

### 【例文】

> メールアドレス取得の目的を以下に記載します。
> &nbsp;  
>
> - サービスの提供・維持
> - サービスやコンテンツの開発・改善
> - 不正アクセスなど、不正利用の防止
> - お客様に最適化されたコンテンツの提供
>
> 取得したメールアドレスは、お客様から同意を得た範囲または適用法で認められる場合を除き、利用の目的の範囲を越えて取り扱いません。また、目的外利用を行わないための適切な措置を講じます。

【例文の画像イメージ】
![e-mail](https://user-images.githubusercontent.com/38905609/178129931-cca92c83-f708-492c-81d8-9891965acef2.png)

- 保存を選択します。
![image](https://user-images.githubusercontent.com/38905609/178129883-58e4cb7f-45fc-4844-b445-dea9c9c0c703.png)

- LINEログイン設定を選択します。
- コールバックURLの編集を選択します。
![image](https://user-images.githubusercontent.com/38905609/178130009-35b2ec3d-6be4-48b0-b8ea-93200954c5e1.png)

- コールバックURLに上記[Cognitoドメインの取得]で取得したURLに続けて[`/oauth2/idpresponse`]を指定します。
![image](https://user-images.githubusercontent.com/38905609/178130074-8cb05d89-bfc5-4c2d-8de8-48770bb57b16.png)

- 開発中と表示されている部分を選択します。
- チャンネルを公開します。  
※ チャンネルを公開しないと、ログインユーザが自分自身のみに限定されます。
![image](https://user-images.githubusercontent.com/38905609/178130125-dc665edd-8f74-4182-ae50-7c58f1a614b5.png)
![image](https://user-images.githubusercontent.com/38905609/178130151-57822ddc-cbbf-420e-8144-254916f88d9f.png)

- チャンネル基本設定を選択します。
- チャンネルIDを取得します。
![image](https://user-images.githubusercontent.com/38905609/178131361-a41e5b9e-2480-45f0-bec8-7fd960888535.png)

- チャンネルシークレットを取得します。
![image](https://user-images.githubusercontent.com/38905609/178142160-80c8ea2d-0885-4d1b-a23a-7cefc97949ad.png)

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

- アイデンティティプロバイダーを追加
![image](https://user-images.githubusercontent.com/38905609/178131440-c6787cdc-6011-4cdc-b033-b12d1edf702c.png)

- OpenID Connectを指定します。
![image](https://user-images.githubusercontent.com/38905609/178131492-7b9ffbf3-ddea-4a97-a190-73feb5af895c.png)

- クライアント IDに上記LINEログインチャンネルのチャンネルIDを指定します。
- クライアントのシークレットに上記LINEログインチャンネルのクライアントシークレットを指定します。
- 許可されたスコープに[`profile email openid`]を指定します。
- Google属性にemailを指定します。
![image](https://user-images.githubusercontent.com/38905609/178131682-ee11f1f2-1403-40c4-b397-4468d6a53464.png)

- 発行者 URL を通じた自動入力を選択します。
- 発行者 URLに`https://access.line.me`を指定します。
- OpenID Connect 属性にemailを指定します。
![image](https://user-images.githubusercontent.com/38905609/178131890-0f0adf31-38da-4876-9801-393060614dee.png)

- Cognitoユーザプールのアプリケーションの統合タブを選択します。
![image](https://user-images.githubusercontent.com/38905609/178090085-e77c8995-e393-44cd-b485-07775242b6fa.png)

- アプリケーションクライアントを選択します。
![image](https://user-images.githubusercontent.com/38905609/178090125-557234af-b5a1-4883-92ea-faedd709591a.png)

- ホストされた UI の編集を選択します。
![image](https://user-images.githubusercontent.com/38905609/178090175-28926db7-4cbc-4d32-afbb-783d867583db.png)

- IDプロバイダーでLINEを選択します。
![image](https://user-images.githubusercontent.com/38905609/178133651-20afc1ea-4d0e-4ef0-9bbf-16d2476ccc48.png)
![image](https://user-images.githubusercontent.com/38905609/178133688-ef1bb4b6-2578-4264-9cd5-c233ccb9685c.png)

- 変更を保存します。
![image](https://user-images.githubusercontent.com/38905609/178090308-f3ff820a-b82a-4b9c-8d12-927158bd5213.png)

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

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

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

- Cognitoユーザープールのアプリケーションの統合を選択します。
![image](https://user-images.githubusercontent.com/38905609/178134782-1014ec1b-d4c3-49f4-8564-8d375f8571c4.png)

- ホストされたUIのカスタマイズを選択します。
![image](https://user-images.githubusercontent.com/38905609/178134829-37b5e15a-76cb-46fb-9358-0e40f03576d8.png)

- CSSテンプレートをダウンロードします。
![image](https://user-images.githubusercontent.com/38905609/178134874-d02b0507-2d79-447f-84ee-b713ee994efd.png)

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

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

```css: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](https://user-images.githubusercontent.com/38905609/178135030-b4cd5d60-3ff7-474c-86f8-766e579f3020.png)

## 動作確認

- ローカルサーバを起動します。

```ps
PS C:\home\git\material.angular.github> ng s --o
```

- "Auth"をクリックして、サインインできることを確認します。  

![image](https://user-images.githubusercontent.com/38905609/178134489-5519af44-0de7-49e6-b660-93500037d0e7.png)

## 👇前提記事

- [AWS Cognito ユーザープールを認証制御に利用してLambda関数を呼び出す](https://docusaurus.plant11.com/AWS/cognito_auth)

## 👇関連記事

- [AWS Cognito ユーザープールにGoogleサインイン連携を設定する](https://docusaurus.plant11.com/cloud/cognito_google)

## 👇GitHubはこちら

- <https://github.com/plant11-repositories/material.angular.github/tree/cognito>  
[![image](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/plant11-repositories/material.angular.github/tree/cognito)

## 👇参考URL

- [LINE公式　ウェブアプリにLINEログインを組み込む](https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request)
- [LINE公式 アカウントガイドライン](https://www.linebiz.com/sites/default/files/media/jp/logo/line-official-account/LINE_Official_Account_logo_Guidelines.pdf)
- [LINE Developers コンソール](https://developers.line.biz/console/)