OAuth.ioを使って“LINEでログイン”を簡単に導入する方法！

この記事では、[OAuth.io](https://oauth.io/)を使い簡単に“LINEでログイン”をサービスに導入します。

<img width="300" alt="Line_logo1.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/f1503e1b-b023-64dc-2bca-3f9f031a31ac.png">


動作とコードはこちらから確認出来ます。https://jsfiddle.net/ringcaptcha/27xqhk95/69/

HTML

```html
<a id="line-button" class="btn btn-block btn-social button">
  <i class="fab fa-line"></i> LINEでログイン
</a>
```

CSS

```CSS
.button { 
  color: #EEEEE;
  font-size: 15px;
  background-color: #00C300;  
}
  
.button:hover {
  color: #EEEEE;
  background-color: #00E000
}
  
.button:active {
  background-color: #00B300
}
```

Javascript

```Javascript
$('#line-button').on('click', function() {
  // app public keyを使用してOAuth.ioを初期化します
  OAuth.initialize('YOUR_OAUTH_API_KEY');
  // ポップアップを開きます。
  OAuth.popup('line').then(line => {
    console.log('line:', line);
    // ログインに成功したら、ユーザーの名前を表示させます。
    // #me() は便利なメソッドです。
    // 取得したユーザーのデータをコンソールで確認出来ます。
    line.me().then(data => {
      console.log('me data:', data);
      alert('LINE からの情報では、あなたの名前は ' + data.displayName + ".\n詳細はブラウザのコンソールを確認して下さい。");
    });
    // また、.get()にてLine APIから取得も出来ます。
    line.get('/v1/users/self').then(data => {
      console.log('self data:', data);
	  })
  });
})
```

外部ソース

* jQuery: https://code.jquery.com/jquery-3.2.1.min.js
* oauth.io JS: https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js
* Bootstrap: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
* Font-Aweseome: https://use.fontawesome.com/releases/v5.0.10/css/all.css
* Bootstrap-social: https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css



###導入までのSteps
---

1. LINE appを作成
1. OAuth.ioのアカウントを作成
1. OAuth.ioアカウントとリンクさせる
1. まとめ

### Step1. LINE アカウント、ログイン用Appを作成する
---

* LINEの開発者登録をします。

* こちらからLINE developerページにログインお願いします。　https://developers.line.me/ja/
* LINEのドキュメントはこちらです。　https://developers.line.me/ja/docs/line-login/getting-started/
＊メールアドレスが登録されたLINEアカウントをお持ちでない場合は、LINEを携帯にダウンロードし、［設定］>［アカウント］を選択してメールアドレスを登録してください。<br>

* LINEログインをクリック

<img width="1434" alt="Line_login_top.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/a483ea6f-7e19-1dc6-bef6-6bce3651d5e5.png">

* 初回だけ開発者登録が必要になります。開発者名、メールアドレスを登録します。

![Line_developer.png](https://qiita-image-store.s3.amazonaws.com/0/192668/8c0a6a01-ed64-ffa2-a538-109306f9f3e2.png)

* 新規プロバイダー登録(登録画面が２種類あります。)


    * こちらは、プラスマークをクリックしてからプロバイダー名を入力
<img width="917" alt="Line_choose_provider.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/4321e89e-7e06-ee49-6055-d89d18c4935e.png">
<br>
    * こちらは直接プロバイダー名を入力
![Line_channel_create1.png](https://qiita-image-store.s3.amazonaws.com/0/192668/a44bfae7-64f5-79ff-7e5c-a1323ae0ec2f.png)



* プロバイダー一覧から目的のプロバイダーを選択
* 'LINEログイン'をクリック

![Line_login_channel.png](https://qiita-image-store.s3.amazonaws.com/0/192668/73107990-ec0e-b8f9-ae1a-e29b3474f9f9.png)

* LINEでログインするアプリサービスの情報を入力
* 'アプリタイプ'は'Webで使う(web)'を選択
* 入力内容を確認して'確認'をクリック

![Line_chanel_create2.png](https://qiita-image-store.s3.amazonaws.com/0/192668/44322681-08f8-7611-910b-3012abb6d4d6.png)

* 入力内容を確認して作成をクリック

![Line_app_setting2.png](https://qiita-image-store.s3.amazonaws.com/0/192668/81d4801d-33c0-c1f5-322b-9b82fa89abcb.png)



* 作成したアプリをクリック

![Line_check_credentials.png](https://qiita-image-store.s3.amazonaws.com/0/192668/928fb041-6267-0243-b747-39c2b34cca88.png)

* Steps3. で必要になる'Channel ID'と'Channel Secret'をメモ。

![Line_credentials.png](https://qiita-image-store.s3.amazonaws.com/0/192668/ae325329-f7b7-7ed3-e343-794e3a23045e.png)

* サイドバーのアプリ設定をクリック
* リダイレクト設定、'callback URL'に'https://oauth.io/auth' と入力して更新をクリック

![Line_redirect.png](https://qiita-image-store.s3.amazonaws.com/0/192668/47e919fe-0ac3-bf46-91c4-9b8b9e498161.png)

これで、LINE側の設定は終わりました。次は、OAuth.ioの設定になります。

### Step2. OAuth.ioのアカウント登録
---

OAuth.ioのアカウントをお持ちでない方は、
こちらからOAuth.ioのアカウントを作成お願いします。　https://oauth.io/signup


<img width="634" alt="oauthio_signup.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/457ce4b2-a127-4b01-26d3-fe853f7bb878.png">

### Step3. LINEとOAuth.ioアカウントをリンクさせる。
---
* OAuth.ioにログイン後、ダッシュボードにて、画面左側にある ‘Integrated APIs’を選択

<img width="1344" alt="oauthio_general.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/3395bb5d-8e47-c5bd-b592-48cfc228516e.png">

* 右上の'+Add APIs'をクリック

<img width="1350" alt="oauthio_api_integration.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/098311cc-2fde-ab31-2074-92610ffcba3a.png">

* ポップアップの検索バーに'LINE'と入力

<img width="594" alt="provider_list.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/8aa88e94-7627-971a-7855-c12e8102021d.png">

* 'LINE'をクリック

<img width="589" alt="OAuth_line.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/5e9f0a26-c20c-d257-e910-b053793a24ca.png">

*  Step1. でメモしたLINEの'Channel ID'、'Channel Secret'を'client_id'、'client_secret'にそれぞれ入力
*  'scope'に'profile'と入力
*  全て入力し終えたら、'Save changes'をクリック

![OAuth_io_savechange.png](https://qiita-image-store.s3.amazonaws.com/0/192668/8d736767-90fb-7beb-1e61-570554d36834.png)

* 'Try Auth'をクリック

![Oauthio_tryAuth.png](https://qiita-image-store.s3.amazonaws.com/0/192668/01d064ae-623c-3584-dbf7-0ad6def7f692.png)

* LINEのログイン画面に移ります。LINEにログインして下さい。
　
 <img width="514" alt="Line_login.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/03748898-8d9b-608c-e21f-50d375187977.png">

* 個人情報について確認し、'同意する'をクリック

![OAuthio_permission.png](https://qiita-image-store.s3.amazonaws.com/0/192668/821d7ea6-46e3-25b4-cf76-d05db6e9e655.png)

* 同意後、下記のポップアップが表示されれば、LINEでログイン成功です。

　a. OAuth.ioのAPI Keyが発行されます; このKeyにより、OAuth.ioで設定したすべての連携先にアクセスできます。
　b. コードスニペットをコピーし、'LINEでログイン'ボタンを設置したい場所にペーストします。
　c. LINEからのレスポンスが確認できます。
　d. レスポンスで取得した Javascript オブジェクトの詳細な利用方法です。

<img width="588" alt="OAuth_io_result.png" src="https://qiita-image-store.s3.amazonaws.com/0/192668/5d41d316-f42d-3f34-2f69-97cabdf5daa0.png">

### まとめ
---
たったこれだけで、LINE ログインボタンをあなたのサービスに導入できました。
OAuth.ioは１７０以上のソーシャルプロバイダーと連携していますので、
簡単にソーシャルログインボタンを増やすことが出来ます。
OAuth.ioの詳細はこちらからご確認下さい。 https://oauth.io/