AWS Amplify（Cognito）でLINEへソーシャルログインする

`Amplify`は、高速でアプリを開発できる開発プラットフォームです。
`Amplify`で作成した`Vue.js`アプリで`LINE`とのログイン連携を試したので、メモしておきます。

Googleとのログイン連携は[こちら](https://qiita.com/items/1c32e43816ea1d6a204d)

# 作成したもの

LINEアカウントの入力部分は動画編集でトリム（削除）しています。

![ezgif-1-b42325d989ca.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/e61bdc8e-ef3f-79f9-329e-1475664c5c07.gif)

ソースコードの全量は[GitHub](https://github.com/Thirosue/amplify-sns-fedaration)にあります。
https://github.com/Thirosue/amplify-sns-fedaration

# 前提

* `Amplify`の設定が完了していること(`amplify configure`、`amplify init`および`amplify push`が済んでいること)
* `Amplify`で作成した`Vue.js`アプリが存在すること(`aws-amplify`と`aws-amplify-vue`の導入・設定が済んでいること)

`Amplify`の状態は以下のとおり（`amplify status`）

```bash
$ amplify status

Current Environment: prod

| Category | Resource name | Operation | Provider plugin |
| -------- | ------------- | --------- | --------------- |
```

`Amplify`のバージョンは`v4`系

```bash
% amplify -v
4.21.3
```

Amplifyの設定は[こちら](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)を参照してください。
[AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)
https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/

# 手順

`LINE`とのログイン連携の手順は以下のとおりです。

1. LINE側（`LINE Developers`）の設定
1. 認証モジュールの追加（`amplify add auth`）
1. `Congnito`のLINE連携（`OpenID Connect`）設定 
1. LINE側（`LINE Developers`）にリダイレクトURLの設定

# 1. LINE側（`LINE Developers`）の設定

## Step1. LINE Developers ( [https://developers.line.biz/ja/](https://developers.line.biz/ja/) ） にログインします

![スクリーンショット 2020-07-05 15.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/b4c49c04-55be-5ad0-47e5-86457f8d8453.png)

## Step2. プロバイダーを作成します。

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

![スクリーンショット 2020-07-05 15.38.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/5e5e2133-0af3-676b-1d52-2a3c5298c4fb.png)

## Step3. チャンネルを作成します。

少しわかりづらいですが、「Create a LINE Login channel」を選択し、チャンネルを作成します。

![スクリーンショット 2020-07-05 15.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/10adafcf-9be4-777a-4568-d2949ddcaa4d.png)

チャンネル名やメールアドレスなどの必須項目を入力し、作成します。

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/f0d3c2e9-4266-39cd-30dc-600f1784cee4.jpeg)

作成したチャンネルの「チャンネル ID（Channel ID）」と「チャンネル シークレット（Channel secret）」は`3. Congnito のLINE連携（OpenID Connect）設定`で利用するので、メモしておきましょう。

# 2. 認証モジュールの追加（`amplify add auth`）

認証機能をコマンドライン（`Amplify CLI`）で追加していきます。
以下コマンドで認証モジュール（`Cognito`）を追加します。

```bash
amplify add auth
```

## Step1. Do you want to use the default authentication and security configuration? (Use arrow keys)

`Default configuration with Social Provider (Federation)`を選択

```bash
 Do you want to use the default authentication and security configuration?
  Default configuration
❯ Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.
```

## Step2. How do you want users to be able to sign in? (Use arrow keys)

どれでもいいですが、`Username`を選択

```bash
 How do you want users to be able to sign in? (Use arrow keys)
❯ Username
  Email
  Phone Number
  Email or Phone Number
  I want to learn more.
```

## Step3. Do you want to configure advanced settings? (Use arrow keys)

`Yes, I want to make some additional changes.`を選択

```bash
 Do you want to configure advanced settings?
  No, I am done.
❯ Yes, I want to make some additional changes.
```

## Step4. What attributes are required for signing up?

`Email`の選択を外して、`Name`を有効にする

```bash
 What attributes are required for signing up?
 ◯ Gender (This attribute is not supported by Login With Amazon.)
 ◯ Locale (This attribute is not supported by Facebook, Google.)
 ◯ Given Name (This attribute is not supported by Login With Amazon.)
❯◉ Name
 ◯ Nickname (This attribute is not supported by Facebook, Google, Login With Amazon.)
 ◯ Phone Number (This attribute is not supported by Facebook, Login With Amazon.)
 ◯ Preferred Username (This attribute is not supported by Facebook, Google, Login With Amazon.)
```

選択結果は以下のとおり

```bash
 What attributes are required for signing up? Name
```

## Step5. `Do you want to enable any of the following capabilities? (Press <space> to select, <a> to toggle all, <i> to invert selection)`

デフォルト（未選択）のまま進む

## Step6. What domain name prefix do you want to use?

ドメインの接頭辞はデフォルトのまま進む（※デフォルトの値が設定されていることを確認して進む）

```bash
 What domain name prefix do you want to use? amplifysnsfedarationyyyyyyy-xxxxxxx
```

## Step7. Enter your redirect signin URI:

ローカルで試すので、`http://localhost:8080/`を入力

```bash
Enter your redirect signin URI: http://localhost:8080/
```

## Step8. Do you want to add another redirect signin URI (y/N)

ローカルで試すので、その他のリダイレクトURLは不要

```bash
Do you want to add another redirect signin URI (y/N) N
```

## Step9. Enter your redirect signout URI:

ローカルで試すので、`http://localhost:8080/`を入力

```bash
Enter your redirect signout URI: http://localhost:8080/
```

## Step10. ? Do you want to add another redirect signout URI (y/N)

ローカルで試すので、その他のサインアウトURLは不要

```
? Do you want to add another redirect signout URI (y/N) N
```

## Step11. `Select the social providers you want to configure for your user pool: (Press <space> to select, <a> to toggle all, <i> to invert selection)`

`LINE`（`OpenID Connect`）は`Amplify CLI`でサポートされていない（`version 4.21.3`）ので、デフォルトのまま進む。

```bash
 Select the social providers you want to configure for your user pool:
```

## Step12. 設定の反映（AWSリソースの作成）

以下コマンドで設定を反映（AWSリソースの作成）します。

```bash
amplify push
```

### 実行結果

正常に認証モジュールが追加されていることを以下コマンド（`amplify status`）で確認します。

```bash
$ amplify status

Current Environment: prod

| Category | Resource name                | Operation | Provider plugin   |
| -------- | ---------------------------- | --------- | ----------------- |
| Auth     | amplifysnsfedarationXXXXXXXX | No Change | awscloudformation |

```

## 設定の全量

```bash
% amplify add auth
Using service: Cognito, provided by: awscloudformation

 The current configured provider is Amazon Cognito.

 Do you want to use the default authentication and security configuration? Default configuration with Social Provider (Federation)
 Warning: you will not be able to edit these selections.
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? Yes, I want to make some additional changes.
 Warning: you will not be able to edit these selections.
 What attributes are required for signing up? Name
 Do you want to enable any of the following capabilities?
 What domain name prefix do you want to use? amplifysnsfedarationyyyyyyy-xxxxxxx
 Enter your redirect signin URI: http://localhost:8080/
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: http://localhost:8080/
? Do you want to add another redirect signout URI No
 Select the social providers you want to configure for your user pool:
Successfully added resource amplifysnsfedarationdff223d9 locally

Some next steps:
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

hirosue@PC876 amplify-sns-fedaration % amplify push
✔ Successfully pulled backend environment prod from the cloud.
```

# 3. `Congnito`のLINE連携（`OpenID Connect`）設定 

## Step1. `AWS`にログインして、`Cognito`のサービスページに移動します。

![スクリーンショット 2020-07-05 16.12.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/479a0737-db42-7ff5-f21b-ca0679c5a3cd.png)

## Step2. ユーザプールを選択します。

「ユーザープールの管理」を選択し、

![スクリーンショット 2020-07-05 16.12.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/8a1a75d3-416c-fafa-93b3-1598aecf4a5e.png)

`2. 認証モジュールの追加`で作成した「ユーザープール」を選択します。

対象の「ユーザープール」の名称は、`Amplify`の状態（`amplify status`）で確認したリソース名（`Resource name`）で始まります。

![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/c6a49c2c-c48f-8966-3447-aab0f861b4db.jpeg)

## Step3. 「ID プロバイダー」（`OpenID Connect`）を追加します。

![スクリーンショット 2020-07-05 16.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/5929109a-e752-83df-ab85-b1287918a098.png)

図のとおり入力します。

|項目名         |値      　　　　　　　　　|
|:-------------|:----------------------|
|プロバイダ名    |`LINE`（任意の値）　　　　　　　　　                                                  |
|クライアントID  |（`1. LINE側（LINE Developers）の設定`で設定した「チャンネル ID（Channel ID）」）|
|クライアントのシークレット（オプション）  |（`1. LINE側（`LINE Developers`）の設定`で「チャンネル シークレット（Channel secret）」|
|属性のリクエストメソッド  |`GET`（デフォルトのまま）　|
|承認スコープ  |`profile mail openid`　|
|発行者  |`https://access.line.me`　|
|識別子（オプション）  |-　|
|認証エンドポイント  |`https://access.line.me/oauth2/v2.1/authorize`　|
|トークンエンドポイント  |`https://api.line.me/oauth2/v2.1/token`　|
|ユーザー情報エンドポイント  |`https://api.line.me/v2/profile`　|
|Jwks uri  |`https://api.line.me/oauth2/v2.1/verify`　|

![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/4bdb075d-7fbc-33c5-b760-33b522f8fa96.jpeg)

- （参考リンク）LINEとの連携設定
  - [LINE Developers ドキュメント（ウェブアプリにLINEログインを組み込む）](https://developers.line.biz/ja/docs/line-login/integrate-line-login/)
  - [LINE Developers APIリファレンス（Social API v2.1リファレンス）](https://developers.line.biz/ja/reference/social-api/)
  - [LINE Developer 設定](https://blog.u-chan-chi.com/post/amplify-oidc-line-vue/#Line-Developer%E8%A8%AD%E5%AE%9A)

## Step4. Step3で作成した「ID プロバイダー」（`OpenID Connect`）の属性マッピングを変更します。

`2. 認証モジュールの追加`で作成した「ユーザープール」は`Name`属性が必須であるため、`sub`⇆`Name`のマッピングを追加します。

![スクリーンショット 2020-07-05 16.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/6793a139-cbd7-3f17-da00-97c64d8f24f2.png)

* （参考）「ユーザープール」の設定

```bash
 What attributes are required for signing up? Name
```

## Step5. アプリクライアントの設定で`LINE`ログインを有効化します。

作成されている2つのアプリクライアント（`xxxxxxxxxxxxxx_app_client`および`xxxxxxxxxxxxxx_app_clientWeb`）に対し、`LINE`連携を有効化します（チェックして保存する）。

![スクリーンショット 2020-07-05 16.54.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/fb3f0acc-b654-4dfe-ccf2-f8646962555d.png)

# 4. LINE側（`LINE Developers`）にリダイレクトURLの設定

`1. LINE側（LINE Developers）の設定`で作成した「プロバイダー」に`Cognito`で作成された認証のリダイレクトURLを設定します。

## Step1. `Amplify`の設定ファイル（`aws-exports.js`）を確認して、`Cognito`のドメインを確認します。

`2. 認証モジュールの追加`の結果作成された、`Amplify`の設定ファイル（`aws-exports.js`）の`Cognito`のドメインの箇所を確認します。

```bash
% cat src/aws-exports.js | grep domain
        "domain": "amplifysnsfedarationyyyyyyy-xxxxxxx-prod.auth.ap-northeast-1.amazoncognito.com",
```

## Step2. `1. LINE側（LINE Developers）の設定`で作成した「プロバイダー」に`Cognito`で作成された認証のリダイレクトURLを設定します。

「TOP」-「Cognito Test」-「Cognito Test」-「LINE Login」と移動して、リダイレクトURL（`CallBack URL`）を入力します。

設定する値は`https://（Step1で確認したドメイン）/oauth2/idpresponse`です。
上の例の場合は、`https://amplifysnsfedarationyyyyyyy-xxxxxxx-prod.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse`となります。

![スクリーンショット 2020-07-05 17.03.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/74225cbb-95f3-5b15-b9dd-47446ce53331.png)

# アプリケーションの修正

`App.vue`を修正します。

ログインに付随する細かい処理（ダイアログ出力、状態の管理（ローディング、サインイン）など）の説明は割愛します。
詳細は、全量のソースコード（[GitHub](https://github.com/Thirosue/amplify-sns-fedaration)）を確認してください。
https://github.com/Thirosue/amplify-sns-fedaration

## `html`の修正

###「LINEでログイン」のリンクを追加

```html
<a href="#" @click="signIn('LINE')">LINEでログイン</a>
```

### サインインで画面切り替え

サインイン状態（signedIn）で表示を切り替えます。

```html
      <!-- サインイン状態はstoreかdataに設定する -->
      <template v-if="signedIn">
        <h1>Logged in</h1>
        <a href="#" @click="signOut"><font color="gray">Sign Out</font></a>
      </template>
      <template v-else>
        <amplify-authenticator v-bind:authConfig="authConfig" />
        <ul>
          <li><a href="#" @click="signIn('LINE')">LINEでログイン</a></li>
        </ul>
      </template>
```

## `method`の追加

ログイン処理を追加します。

```JavaScript:Vue.js
import { Auth, Hub } from "aws-amplify";
//（...中略...）

  methods: {
    async signIn(provider) {
      this.$store.dispatch("loading", true); //処理中表示（処理開始）
      const res = await Auth.federatedSignIn({ provider });
      console.log(res);
    },
```

## イベントフックを追加

```JavaScript:Vue.js
import { Auth, Hub } from "aws-amplify";
//（...中略...）

  async beforeCreate() {
    //サインインイベントフックを追加
    Hub.listen("auth", async (data) => {
      switch (data.payload.event) {
        case "signIn": { // サインインイベントをフック
          const cognitoUser = await Auth.currentAuthenticatedUser();
          console.log(`signed in ... ${cognitoUser.username}`);
          this.$store.dispatch("signedIn", true);
          this.$store.dispatch("loading", false); //処理中表示（処理終了）
          Swal.fire({ // ダイアログ表示
            position: "top-end",
            icon: "success",
            title: "ログインしました",
            showConfirmButton: false,
            timer: 1500,
          });
          break;
        }
        default:
          break;
      }
    });
  },
```

# 確認

## アプリケーションの起動

以下コマンド（`yarn serve`）でアプリケーションを起動します

```bash
yarn serve
```

## [http://localhost:8080/](http://localhost:8080/)へアクセスして確認します。

「LINEでログイン」リンクをクリックすると、LINEへログインした後、ログイン後状態に遷移します。

![ezgif-1-b42325d989ca.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73176/e61bdc8e-ef3f-79f9-329e-1475664c5c07.gif)


# 参考リンク

- Amplify関連
  - [AWS Amplifyとは](https://aws.amazon.com/jp/amplify/) 
  - [AWS 怠惰なプログラマ向けお手軽アプリ開発手法 2019](https://feature-webpush.dma9ecr5ksxts.amplifyapp.com/)
  - [AWS Amplify（Cognito）でGoogleソーシャルログインする](https://qiita.com/items/1c32e43816ea1d6a204d)

- LINEとの連携設定
  - [LINE Developers ドキュメント（ウェブアプリにLINEログインを組み込む）](https://developers.line.biz/ja/docs/line-login/integrate-line-login/)
  - [LINE Developers APIリファレンス（Social API v2.1リファレンス）](https://developers.line.biz/ja/reference/social-api/)
  - [LINE Developer 設定](https://blog.u-chan-chi.com/post/amplify-oidc-line-vue/#Line-Developer%E8%A8%AD%E5%AE%9A)