ごきげんよう。たらこは焼きタラコ派のmです(何
Twitterログイン、Facebookログインにつづいて「LINEログイン」が現れましたねw
今日は早速それを使ってみましたのでご紹介したいと思いますw
↓自分のサービスに実装を反映しました
いったん取り下げますmm
LINE Loginを実装してみた
アカウントを作ろう
まずはアカウント作成です。
Business Centerというところからできるようです。
1. ログインボタン
このあと、
2.ログイン画面が表示されます。
3.そのあとにアカウント情報と企業情報を埋めます。
……キャプチャ撮り忘れました><
4.そしたら次はお目当てのLINE Loginを選択!
5.LINE Loginの説明をよんで、利用開始を押すと……今度は『ビジネスアカウント』なるものの作成が始まります。これは……なんだろうw
ここに設定した画像と名前が、LINE Loginの認証表示の時の絵と名前になるようです。
6.完了すると、また選択ですっ! はい、LINE Loginを選びますw
7.そして利用開始ボタンをポチります。
LINE Login Channelを作ろう
8.ここからLINE Loginの設定のようです。
空白を埋めていきます。
Application Typeは、今回はWebでのログインなので『WEB』を選びました。
Contact mailing list addressは、連絡用メールかと思われます。
終わったらCreateを押しましょう。
9.続いてTechnical configurationを選択します。
10.そこで、callbackのURLを指定します。
注意!!
ここは『https』でなければなりません!
あと、プログラム内の『redirect_uri』と一致していなければなりません!
ここで凄く苦戦していたのです……。
これでLINE Loginを使うための準備は完了です!
プログラムを実装しよう
では早速実装です!
Login画面呼び出し
LINE Loginの呼び出しをするときは簡単です。
テストなので、簡単にhtmlを書いてみました。
URLはこれです
https://access.line.me/dialog/oauth/weblogin
response_type
"code"で固定のようです。
client_id
channel IDが入ります。これは先程のチャンネル作成画面に書かれています。
redirect_uri
ログインした後戻ってくるURLです。
URLエンコードしましょう!
https必須です!
チャンネルの時のTechnical configurationのところと同じ場所にしましょう!
state
オプションらしいです。何か値を引き継ぎたい時に使うのが良いでしょう。
ここはURLエンコードしてはいけないとのことです。
ドキュメントはこんな感じです。
https://developers.line.me/web-login/integrating-web-login
callback.php
では、ログインした後に戻ってくるページです。
構成的には以下です。
1.ログインに成功すると『code』が戻ってきます。(errorならerrorCodeが帰ってきます)
2.戻ってきた『code』を使って、APIを呼び出す。
3.APIから戻ってきた値を見て煮るなり焼くなり好きにする。
私はこんなかんじで書いてみました。phpです。
session_start(); $code = $_GET['code']; echo "Code= " . $code; $url = "https://api.line.me/v1/oauth/accessToken"; // POSTデータ $data = array( "grant_type" => "authorization_code", "client_id" => "チャンネルID", "client_secret" => "チャンネルシークレット", "code" => $code, "redirect_uri" => "リダイレクトする場所(使わなくてもよさ気…?)" ); $data = http_build_query($data, "", "&"); $header = array( "Content-Type: application/x-www-form-urlencoded", "Content-Length: ".strlen($data) ); $context = array( "http" => array( "method" => "POST", "header" => implode("\r\n", $header), "content" => $data ) ); $res = file_get_contents($url, false, stream_context_create($context)); $token = json_decode($res, true); if(isset($token['error'])){ echo 'ログインエラーが発生しました。'; echo "error" . $token['error']; echo $token['error_description']; exit; } while(list($key,$value) = each($token)){ echo $key.' -> '.$value; }
こんな感じです~
URL
https://api.line.me/v1/oauth/accessToken
メソッド
POST
header
Content-Type: application/x-www-form-urlencoded
データは……
公式よりw
codeのところで、ログインした時に帰ってきた値をつかいます。
redirect_uriはこのときは使わないかもしれません。
実行!
では実行です!!
ボタンはこんな感じに。(私が描きましたw)
それを……
ポチッとな!
そうすると、LINEのログインページに移動します。
LINEに設定したメールアドレスとパスワードを入力です。
ログイン!
すると規約がでました!
なお、絵はゲーム系に使うと怒られる系の絵だったのでこまりんに変更ですw
そして『同意する』
すると……
しっかり値が戻ってきましたねw
モザイクだらけでゴメンナサイw
返ってきたデータの意味は……
こんな感じですね。
『mid』でユーザー識別が出来そうです。
なのでこれを使って登録などすれば良さそうです。
ここから更にいっぱいデータがほしい時はREST APIになるらしいです。
2016/4/9追記
LINEの名前(displayName)とLINEのプロフィール画像を取得
LINEの名前と画像は取得できないの?という意見をいただきましたので、その取得も書いておきます~。
名前と画像の取得は簡単で、headerにアクセストークンを設定して
https://api.line.me/v1/profileにアクセスするだけですw
URL
https://api.line.me/v1/profile
メソッド
GET
header
Authorization: Bearer アクセストークン
コードはこんな感じでしょうか。
function getProfile($access_token){ $url = "https://api.line.me/v1/profile"; $context = array( "http" => array( "method" => "GET", "header" => "Authorization: Bearer ". $access_token ) ); $res = file_get_contents($url, false, stream_context_create($context)); return json_decode($res, true); } session_start(); $code = $_GET['code']; $url = "https://api.line.me/v1/oauth/accessToken"; // POSTデータ $data = array( "grant_type" => "authorization_code", "client_id" => "チャンネルID", "client_secret" => "チャンネルシークレット", "code" => $code, "redirect_uri" => "リダイレクトするURL(いらな気…?)" ); $data = http_build_query($data, "", "&"); $header = array( "Content-Type: application/x-www-form-urlencoded", "Content-Length: ".strlen($data) ); $context = array( "http" => array( "method" => "POST", "header" => implode("\r\n", $header), "content" => $data ) ); $res = file_get_contents($url, false, stream_context_create($context)); $token = json_decode($res, true); if(isset($token['error'])){ echo 'ログインエラーが発生しました。'; echo "error" . $token['error']; echo $token['error_description']; exit; } $profile = getProfile($token['access_token']); echo "profile:" . $profile['displayName'] ; echo "status message:" . $profile['statusMessage'] ; echo 'image: <img src="' . $profile['pictureUrl'] . '/large" alt="" /> .';
そうすると、以下のものが返ってきます。
https://developers.line.me/restful-api/api-reference
displayNameがLINEに表示される名前です。
midは識別IDみたいなものです。
statusMessageは、あのリストに表示される時の文字ですw
pictureUrlはプロフィールの画像です。
largeとsmallがあるようですね。
実行してみると……
こんな感じでLINEの名前とプロフィール画像、そしてステータスメッセージが取得できましたw