読者です 読者をやめる 読者になる 読者になる
WEB拍手ぱちぱちっと
Clap/拍手

01.MENU
Blog  / ブログ
Videos  / 動画
Pictures  / 絵
Game Materials  / 素材
SS(ShortStory)  / 小ネタ

02.MENU
Novels  / 小説
Chat  / チャット
BBS  / 掲示板
Others  / その他
Old Top  / 旧Top

Traffic Jam Products


LINE Loginを実装してみた

解説系 紹介系 プログラム 技術

 

ごきげんよう。たらこは焼きタラコ派のmです(何

 

Twitterログイン、Facebookログインにつづいて「LINEログイン」が現れましたねw

今日は早速それを使ってみましたのでご紹介したいと思いますw

 

 ↓自分のサービスに実装を反映しました

アイコレ! コレクション共有SNS

いったん取り下げますmm

 

LINE Loginを実装してみた

アカウントを作ろう

まずはアカウント作成です。

Business Centerというところからできるようです。

business.line.me

1. ログインボタン

f:id:m_training:20160408012521p:plain

 

このあと、

2.ログイン画面が表示されます。

3.そのあとにアカウント情報と企業情報を埋めます。

……キャプチャ撮り忘れました><

 

4.そしたら次はお目当てのLINE Loginを選択!

f:id:m_training:20160408012740p:plain

5.LINE Loginの説明をよんで、利用開始を押すと……今度は『ビジネスアカウント』なるものの作成が始まります。これは……なんだろうw

ここに設定した画像と名前が、LINE Loginの認証表示の時の絵と名前になるようです。

 

f:id:m_training:20160408012911p:plain

f:id:m_training:20160408013141p:plain

 

6.完了すると、また選択ですっ! はい、LINE Loginを選びますw

f:id:m_training:20160408013233p:plain

 

7.そして利用開始ボタンをポチります。

f:id:m_training:20160408013339p:plain

 

LINE Login Channelを作ろう

8.ここからLINE Loginの設定のようです。

空白を埋めていきます。

Application Typeは、今回はWebでのログインなので『WEB』を選びました。

Contact mailing list addressは、連絡用メールかと思われます。

終わったらCreateを押しましょう。

f:id:m_training:20160408013418p:plain

9.続いてTechnical configurationを選択します。

 

f:id:m_training:20160408013702p:plain

 

10.そこで、callbackのURLを指定します。

f:id:m_training:20160408013806p:plain

注意!!

ここは『https』でなければなりません!

あと、プログラム内の『redirect_uri』と一致していなければなりません!

ここで凄く苦戦していたのです……。

 

これでLINE Loginを使うための準備は完了です!

 

プログラムを実装しよう

では早速実装です!

Login画面呼び出し

LINE Loginの呼び出しをするときは簡単です。

テストなので、簡単にhtmlを書いてみました。

f:id:m_training:20160408014149p:plain

 

URLはこれです

https://access.line.me/dialog/oauth/weblogin

 

response_type

"code"で固定のようです。

 

client_id

channel IDが入ります。これは先程のチャンネル作成画面に書かれています。

 

redirect_uri

ログインした後戻ってくるURLです。

URLエンコードしましょう!

https必須です!

チャンネルの時のTechnical configurationのところと同じ場所にしましょう!

 

state

オプションらしいです。何か値を引き継ぎたい時に使うのが良いでしょう。

ここはURLエンコードしてはいけないとのことです。

 

ドキュメントはこんな感じです。

f:id:m_training:20160408014710p:plain

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

データは……

f:id:m_training:20160408020733p:plain

公式よりw

codeのところで、ログインした時に帰ってきた値をつかいます。

redirect_uriはこのときは使わないかもしれません。

 

実行!

では実行です!!

f:id:m_training:20160408015844p:plain

ボタンはこんな感じに。(私が描きましたw)

それを……

ポチッとな!

f:id:m_training:20160408020001p:plain

そうすると、LINEのログインページに移動します。

LINEに設定したメールアドレスとパスワードを入力です。

ログイン!

f:id:m_training:20160408020056p:plain

すると規約がでました!

なお、絵はゲーム系に使うと怒られる系の絵だったのでこまりんに変更ですw

そして『同意する』

すると……

f:id:m_training:20160408020420p:plain

しっかり値が戻ってきましたねw

モザイクだらけでゴメンナサイw

 

返ってきたデータの意味は……

f:id:m_training:20160408020913p:plain

こんな感じですね。

『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="" /> .';
    

 

そうすると、以下のものが返ってきます。

f:id:m_training:20160409011327p:plain

https://developers.line.me/restful-api/api-reference

displayNameがLINEに表示される名前です。

midは識別IDみたいなものです。

statusMessageは、あのリストに表示される時の文字ですw

pictureUrlはプロフィールの画像です。

largeとsmallがあるようですね。

f:id:m_training:20160409011507p:plain

 

 実行してみると……

f:id:m_training:20160409011609p:plain

こんな感じでLINEの名前とプロフィール画像、そしてステータスメッセージが取得できましたw

 

 

Official LINE Account
友だち追加
@hgf7288s