LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで） 技術的なこと
この記事は約6分で読めます。

LINEアカウントでログインを実現したい。そのためのプロトタイプ的なことをやってみました。環境としてはHerokuにPHPをデプロイしました。

 

LINEアカウントでログインテストの手順

参考にした記事

LINE Loginを実装してみた - Traffic Jam
ごきげんよう。たらこは焼きタラコ派のｍです（何 Twitterログイン、Facebookログインにつづいて「LINEログイン」が現れましたねｗ 今日は早速それを使ってみましたのでご紹介したいと思いますｗ ↓自分のサービスに実装を反映しました...
milk0824.hatenadiary.jp

上の記事を参考にさせていただきました。1年半近く前の情報なので、LINE側の画面レイアウトなんかが違ったりしてます。しかし、内容としては丸ッとそのまま使えました。先駆者の存在は本当にありがたいです。

 

事前に必要なもの

・LINEログインのChannel
・Herokuアカウント
・折れない心

 

後々必要になってくる３つの情報

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
まずは「Channel基本設定」画面にある「Channel ID」と「Channel Secret」の２つ。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
そして、「アプリ設定」画面にある「Callback URL」です。こちらは任意で編集できます。

 

 

ログインの入り口になるindex.htmlを書く

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
ボタンだけがポツンと置かれたHTMLです。リンクは「あなたのチャンネルID」という部分と、「redirect_uri=」の後のURLを変更してください。

 

 

ログインボタンをクリックした後の挙動を実装する

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
callback.phpにログインボタンクリック後の処理を記述します。といっても、参考記事に書かれていた内容をコピペしたものです。「あなたのチャンネルID」と「あなたのチャンネルシークレット」という所に「Channel ID」と「Channel Secret」を入れます。

 

 

Herokuでアプリを新規作成する

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

適当なApp nameっを決めて「Create app」ボタンをクリック。

 

 

HerokuでPHPが使えるようにビルドパックをセットする

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

アプリ管理画面でSettingsをクリックします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

「Add buildpack」ボタンをクリック。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

みんな大好き「PHP」をクリック。これでPHPが使えるようになりました。

 

 

Gitでコミットからデプロイまで

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
先ほど作った「index.html」「callback.php」と画像が入った「img」フォルダを配置したフォルダです。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
コマンドプロンプトで、上記のフォルダに移動します。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git init」でgit初期化処理をします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
該当フォルダ内に「.git」フォルダができていれば成功です。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
Herokuにデプロイするために「heroku git:remote -a アプリ名」とコマンドを打ちます。これでHerokuに「git push」できるようになります。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git status」コマンドで、コミット対象となっているファイル一覧を見ます。すべて赤くなっているので、対象ですね。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git add .」で現在のフォルダのすべてのファイルをコミット直前のステージング段階にします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git status」コマンドを打つと、全て緑色になっています。これらのファイルをコミットできる状態です。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git commit」でコミットをします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
コミット時のメッセージの編集画面です。操作は「Vi」というエディタと同じ。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
「git log」でコミットログを見ると、先ほどコミットした内容が確認できます。コミット日時も記録されるので、開発が進んだ時に振り返るときなんかに便利です。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
いよいよHerokuにデプロイです。「git push heroku master」とコマンドを打つだけでOKです。

 

 

動作の確認

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
なぜかHeroku上のindex.htmlにアクセスできなかったので、ローカルのindex.htmlを開きました。ポツンと置かれたログインボタンをクリックします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
SNS連携とかで見かける例の画面が来ました！「同意する」ボタンをクリック。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
すると、コールバックURLにリダイレクトされました。ちょっとレスポンスが思ってたのと違うのですが、概ねやりたいことはできました。

 

 

課題

コールバックURLに飛んだ時、本来であれば同意したLINEアカウントの情報が表示されるはず。それが表示されなかったので原因の究明と解決をしなきゃです。

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）
他にもHeroku側でこんなエラーが出てました。どうもPHPビルドパックにアプリケーションがうまく適合してないっぽいです。これについても原因の究明と解決をしなきゃです。

こんな感じで転びながらも前進していけば、いずれ実装ができあがります。ふぁ～いと。

 

【ここから追記】

課題が解決しました！

「もしかしたら・・・」と思いついたことを試してみたらうまくいきました！やったことはというと、「index.html」ファイルを「index.php」に拡張子を変更しただけです。

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

↑中身はそのままにして、PHPファイルに変更（ファイル名を変更）しただけです。そしてコミット後、「git push heroku master」でデプロイします。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

すると、Herokuにアクセスするとちゃんとログインボタンが表示されました。

 

 

LINEアカウントでログインするテストを動かしてみた（HerokuにPHPで）

認証した後のコールバック画面も、想定通りLINEからのレスポンスが表示できました。この戻って来たmidを識別子としてユーザー管理すればOKですね。

 

 

うまくいっていなかった原因

これは裏も取ってないし、完全に私の予想の範囲ですが、「Heroku上でPHPとhtmlが共存できないのかもなぁ」という印象です。実際、PHPに変えただけでうまくいっちゃいましたしね。時間のある時にしっかり裏をとらなきゃですが、今のところは動いたからOKとします。

 

最後まで読んでいただき、ありがとうございます。

コメント

タイトルとURLをコピーしました