ClovaでLINEログインを使ってみる（アカウント連携）

# はじめに

この記事では、Clovaスキルのアカウント連携をLINEログインを用いて作成していきたいと思います。
LINEログインを用いることで、スキルユーザーのLINEプロフィール情報（名前や画像のURLなど）を取得することができます。
また、これを応用してLINEログインではなく他のSNSなどのAPIや自社のサービスと連携させることができます。

# アカウント連携とは

Clovaの外部のサービスを連携させることができる機能です。
ユーザーはClovaアプリからスキルを有効にするときに連携しているサービスからログインを求められます。
ログインすることでアクセストークンが発行され、アクセストークンを利用することで連携しているサービスのユーザー情報などを取得することができます。

外部サービスとの連携に`OAuth2.0`という認証方式を使用します。
OAuth2.0については以下の記事がわかりやすいかと思います。
[一番分かりやすい OAuth の説明](https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be)

# LINEログインとは

公式ドキュメントより

> LINEログインを使用すると、アプリやウェブサイトのアカウントをユーザーのLINEアカウントで簡単に作成することができます。LINEログインは、iOS、Android、またはウェブアプリに組み込むことができます。

LINE以外のサービスでもユーザー名やプロフィール画像などを取得することができるようにするAPIです。

# LINEログインの新規チェンネル作成

以下のリンクからLINE Developlers コンソールへログインし適当なプロバイダーを選択するか作成するかしてください。

https://developers.line.me/console/

次に新規チャンネル作成から「LINEログイン」を選択してください。

<img width="819" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/2a0ca04d-519b-ac3c-fa5d-f5e56ccab5a3.png">

LINEログインの情報の入力を求められるので、適当に以下を入力します。

* アプリ名: サンプルLINEログイン
* アプリの説明: Clovaとの連携テストに使用します。
* アプリタイプ: WEB
* メールアドレス: ご自身のメールアドレスをご使用ください。

するとチャネルが作成され、Channel IDやChannel Secretが取得できるのでメモしておきます。

<img width="1189" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/cfcf36e6-b732-c9c5-d973-1335ed3d85df.png">

# Clovaスキルの新規チャンネル作成

では次にClovaスキルを作成していきたいと思います。
lINEログイン同様に以下のリンクからLINE Developlers コンソールへログインし適当なプロバイダーを選択するか作成するかしてください。

https://developers.line.me/console/

次に新規チャンネル作成から「Clovaスキル」を選択してください。

<img width="821" alt="LINE_Developers.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/2f341443-f523-0675-cbe1-2d43a516e07e.png">

チャネル名を`サンプルアカウント連携`などと入力し、チャンネル作成を完了してください。

次にスキル基本設定で以下を入力して作成してください。

|項目|値|
|-----------------|------------------|
|タイプ|カスタム|
|ExtensionID|com.あなたの名前.account-sampleなど|
|スキル名|サンプルアカウント連携|
|呼び出し名（メイン）|サンプルアカウント連携|
|呼び出し名（サブ）||
|AudioPlayerの使用|いいえ|
|提供者について|個人|
|提供者名|ご自身の情報を入力してください。|
|担当者メールアドレス|ご自身の情報を入力してください。|
|Extensionと連携するLINEのアカウント|選択しない|

次に、サーバーの設定画面に行き、以下を入力します

|項目|値|
|-----------------|------------------|
|ExtensionサーバーのURL|ご自身のエンドポイントとして使いたいサーバーのURL|
|アカウント連携の有無|はい|
|ログインURL|https://access.line.me/oauth2/v2.1/authorize|
|アカウント設定ページのURL(任意)|空白でOKです|
|クライアントID|LINEログイン作成時のChannel IDを入力|
|プライバシーポリシーのURL (日本語)|適当に入力してください（https://sample.comとか)|
|ドメインリスト(任意)|空白でOKです|
|権限の範囲(任意)|profile|
|許可付与タイプ(任意)|許可コード承認|
|アクセストークンURI|https://api.line.me/oauth2/v2.1/token|
|アクセストークン再発行URI(任意)|https://api.line.me/oauth2/v2.1/token|
|クライアントシークレット|LINEログイン作成時のChannel Secretを入力|
|クライアントの資格情報の転送方式(任意)|HTTP Basic|

次にLIENログインに戻り、リダイレクトURLの指定をします。
LINEログインの設定画面に戻りアプリ設定の`Callback URL`で以下のURLを入力します。

```
https://clova-cic.line-apps.com/v1/al/token
```

ここまでできたらアカウント連携の設定は完了です。
スキル画面からLINEログインを試してみましょう。

Clovaのモバイルアプリから今作成したClovaスキルを開き、利用開始ボタンを押します。

<img width="375" alt="IMG_1882.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/461f3036-1af6-18ad-fe80-40a44c73d827.png">

するとおなじみのLINEログイン画面が出てくるのでログインしてください。

<img width="375" alt="IMG_1883.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/320da60a-76f4-784f-1f76-2e12f84d9267.png">

ログインが完了すると「利用開始」が「利用停止」に変わっていると思います。

<img width="375" alt="IMG_1885.png" src="https://qiita-image-store.s3.amazonaws.com/0/195882/cb0f7a81-81e6-6b1b-f016-f991137018ef.png">

# LINEアカウント情報の取得方法

それではエンドポイントでのLINEユーザー情報（今回はLINEの表示名）を取得します。

まずはLINEログイン単体での取得方法についてみて行きます。
以下のGETで`displayName(LINEの表示名)`、`userId`、`pictureUrl(トプ画のURL)`を取得することができます。

```
>> URL
https://api.line.me/v2/profile

>> Header
Authorization: Bearer {access token}
```

レスポンスは以下のような感じです。(公式ドキュメントより)

```
{
  "userId":"U4af4980629...",
  "displayName":"Brown",
  "pictureUrl":"https://example.com/abcdefghijklmn",
}
```

Headerのアクセストークンを取得することでユーザー情報を取得します。

それでは次に、Clovaでのアクセストークンの取得方法をみて行きましょう。
以下で取得することができます。

```
// bodyはCEKからエンドポイントに送られるJSON
body.session.user.accessToken;
```

node.jsで書くと以下のようになります。

```js
const rp = require('request-promise');

const accessToken = body.session.user.accessToken;
console.log(accessToken);
var options = {
  method: 'GET',
  uri: 'https://api.line.me/v2/profile',
  headers: {
    'Authorization': `Bearer ${accessToken}`
  }
};

rp(options).then( data => {
  console.log(data);
  console.log(data.displayName); // LINEアカウントの名前　　　
}).catch( err => {
  // エラー発生
})
```

# 終わりに

ClovaスキルとLINEログインを直接アカウント連携させる機会も少ないかもしれないですが、他にもfacebookなどや自社サービスなどと連携させたスキルを開発するのも面白いのではないでしょうか。