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

この記事では、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

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

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/