前回、LINEディベロッパの管理画面での設定作業が完了したので、
今回はいよいよ、OAuth認証のログインプログラムを書いて、認証成功して、ユーザーのメールアドレス（& LINE-ID)の取得を行ってみたいと思います。
ちなみに、今回のOAuth認証は、フロントJavascriptで簡易に書いてみたいと思うので、
もっとセキュアに、CGI等を使ってバックエンドで行いたい場合は、リファレンスを元に行ってみてください。
LINEログイン リファレンスサイト : https://developers.line.biz/ja/reference/line-login/
ログインボタン
最初に、LINEログインボタンを作る必要があります。
正規に行うために、レギュレーションに則したデザインを構築しましょう。
LINEログインボタン デザインガイドライン
必要情報のまとめ
- 表示文字 : （推奨）「LINEでログイン」 or 「ログイン」
- Baseカラー : #06C755
- マウスオーバーレイヤー
【注意】
色、サイズ、マージン、レイヤーなど、各種に細かな制約が書かれています。
必ず遵守しておくようにしましょう。
setting情報
次のJSON形式で、setting.json（ファイル名はなんでも良いです）ファイルを作成。
{
"ver" : "2.1",
"client_id" : "YOUR CLIENT ID",
"channel_secret" : "YOUR CHANNEL SECRET",
"callback_url" : "http://example.com/callback.html"
}
verの値は、今後バージョンアップの時の対応のために、今のところは使っていないけど、とりあえず入れています。
（無くても動きます）
ボタン設置
簡単なレギュレーションを反映させた、CSSを作っておいたので、次のHTMLコードをページ内に設置すると、それがログインボタンになるようにしています。
<button class="line-login-button" type="button">LINEログイン</button>
サイズや、ボタンの文字列などは、好きに変更してもらっても大丈夫です。（レギュレーションは守ってね）
Javascriptで実行
大きく分けて２つの手順で処理をします。
ログインページへのリダイレクト処理
javascriptのtype="module"で、次の import と、インスタンス実行するだけで、ボタンが押された時に、ログインページへ移動できるようになります。
import { LineLogin } from "../src/line_login.js";
~~
new LineLogin(setting_data)
setting_data は、jsonデータをそのままobjectデータとして、書いてもいいですが、
jsonファイルをよみこみたい場合は、setting.json読み込み用のモジュールも用意しておきました。
new Setting("setting.json").promise.then(setting_data => {
new LineLogin(setting_data)
})
"setting.json"のパス（ブラウザアクセスできるパス※表示htmlからの相対パスでもOK）を書く事で、setting.jsonを読み込んで、
LineLogin() インスタンスを起動してくれる、自動処理にしています。
Callback処理
callback.html は、別ページとして用意しておいた方が、コールバック取得時の処理が楽に行えるようになります。
同一ページで、GETクエリで判定して、1モジュールで処理することもできますが、
汎用性を考えて、今回は、callback.html として、ページを分けています。
new Callback().promise.then(this.profile.bind(this))
呼ばれたページで、src/callback.jsをインスタンス起動すると、
コールバックで返って付与されたGETクエリを元に、一気にプロフィールデータまでを取得する処理が走ります。
Profileデータ取得後の処理
Profileデータが無事に取得できると、Callback() クラスの非同期でthenイベントが走るので、
profile()関数を実行するように書いてあるので、profile()関数を事前に作って、
取得したデータをデータベースに登録するなり、表示を切り替えるなりして、サービス動作に繋げてください。
サンプル
Githubにモジュールを登録しておきました。
いわゆる、未来の自分が使いやすくするための、武器ですね。
https://github.com/yugeta/line_login
あとがき
今回一気にLINEログイン処理を、比較的簡単なJavascriptのみで実行してみましたが、
callbackに、localhostが使えたり、
管理画面設定はめんどくさいけど、比較的サクッとできてしまうので、
手慣れたら、1時間ぐらいで設置完了できるライブラリを作る事ができました。
メールアドレスや、LINE-IDなどを取得できるので、マーケティング活用も活性化できて、
良いツールができましたね。
0 件のコメント:
コメントを投稿