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

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

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

HTML

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

CSS

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

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を作成
2. OAuth.ioのアカウントを作成
3. OAuth.ioアカウントとリンクさせる
4. まとめ

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

---

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

• こちらからLINE developerページにログインお願いします。　https://developers.line.me/ja/

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

• LINEログインをクリック

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

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

  • こちらは、プラスマークをクリックしてからプロバイダー名を入力

* こちらは直接プロバイダー名を入力 

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

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

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

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

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

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

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

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

---

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

Step3. LINEとOAuth.ioアカウントをリンクさせる。

---

• OAuth.ioにログイン後、ダッシュボードにて、画面左側にある ‘Integrated APIs’を選択

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

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

• 'LINE'をクリック

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

• 'Try Auth'をクリック

• LINEのログイン画面に移ります。LINEにログインして下さい。
  　

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

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

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

まとめ

---

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