準備
LINE developersのアカウント作成
まず最初にLINE developersのアカウントを作成します。
プロバイダーとLINEログインチャネル作成
下記概要ページにしたがって「プロバイダー」とLINEログインの「チャネル」を作成します。
概要
devlopersコンソールにログイン
プロバイダー（利用者の情報（LINE IDなど）を取得する開発者・企業・組織のこと）を作成
チャネルを作成
今回はLINEログインチャネルを作成します
「新規チャネル作成」→「LINEログイン」を選択します。
必須項目を入力して「作成」します。アプリタイプは今回は「ウェブアプリ」を選択します。
。
LINEログインチャネルの設定
LINEログインアプリを作成すると次のようなページができます。ここでいろいろ情報が確認できます。
チャネルID（チャネルに対してユニークなID）やチャネルシークレットは後々いろいろ必要になってくるのでメモをしておくと良いかもしれません。
webアプリにlLINEログインを組み込む
それでは作成するWEBアプリにLINEログインを組み込んでいきたいと思います。
大枠は下記公式ドキュメントも参照ください。
PHPでコードを書く
まず初めに、PHPで簡単にハローワールドのコードを書きます。
<?php
echo 'Hello, World!!';
ローカルサーバーを立ち上げる
ターミナルを立ち上げ、ファイルが置いてあるディレクトリでPHPのローカルサーバを立ち上げます。-Sがポイントです。
php -S localhost:8000 index.php
にアクセスして「Hello, World!!」が表示されていることを確認します。
ngrokでローカルサーバーを外部からでもつなげるようにする
次に「ngrok」というサービスを使って、自分のPCからしかアクセスできない「ハローワールド」を外からでもアクセスできるようにします。
ngrok公式
ngrokが便利すぎる
ngrokのインストール
下記セットアップページにしたがって、ngrok公式からダウンロードします。
ngrokでサーバーを立ち上げる
先ほどローカルサーバーを立ち上げた同じディレクトリで、下記コマンドを入力してサーバーを立ち上げます。
ngrok http 8000
するとターミナル上に下記が表示され、http or httpsで外部からアクセスができるようになります。
※フリープランの場合はサーバーを複数立ち上げられません。もしも既に立ち上がっている場合は下記コマンドでサーバーを停止してください。
killall ngrok
// ngrokのサーバー停止
Forwardingにあるhttps://8bbebde7cc12.ngrok.ioにアクセスしてみます。（このURLはサーバーを立ち上げ直すたびに毎回変わります）
ハローワールドが表示されていることが確認できました！
コールバックURLを設定する
次に、コールバックURLを設定します。このURLはLINEの認証突破後に、「認可コード」と「State」を受け取るために設定します。(この２つは後ほどまた出てきます)
ここには先ほどngrokで外部からアクセスできるようにしたURLを設定します。
メールアドレスの取得権限を申請する
メールアドレスの情報を取得したい場合は下記手順で申請をしておきます。
ユーザーに認証と認可を要求する
次に、URLにアクセスした時にLINEの認証画面を挟むように設定します。
とりあえず、URLにパラメータをくっつけます。
URL
https://access.line.me/oauth2/v2.1/authorize
いろいろ複雑なので、まずは必須パラメータのみくっつけて試します。そして私はpostman(https://www.postman.com/)を使ってURLを作りました。
GETにしてurlを入れて、KEYとVALUEにパラメータを入れるとURLができるので便利です。
できたURLはこんな感じです。client_idとredirect_uriは適宜変更してください。
https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id=**********&redirect_uri=[https://](https://8bbebde7cc12.ngrok.io/)*****************/&state=1238al8esad8&scope=profile%20openid
これをこのままブラウザのURLにコピペしてアクセスします。
正しくパラメータが設定できていれば、LINEのログイン画面にアクセスします。
401エラーの時
これは私も引っかかって「？？？」となったのですが、個人LINE等でアクセスしようすると公開前設定のため、アクセスができません。
確認のためにLINEログインチャネルの「権限設定」で個人LINEをメールで招待等で招待しておいてください。また、Tester権限の付与がよいらしい。開発中のアプリのテストのテストができるのはTester権限とのこと。
「ログイン」してみる
次に先ほどの認証画面で「ログイン」を押します。
「Hello, World」の文字が表示されたら成功です！！
ここでアクセス後のURLをよく見てみます。先ほど設定した「コールバックURL」の後ろに何やらいろいろくっついているのがわかります。これがcode(認可コード)とstateです。
このcodeはこの後アクセストークンを発行するために必要な情報になります。アクセストークンを発行することで、LINE上に登録されているユーザー名やプロフィール画像、ユーザーID等の情報を取得することができます。
次の記事ではこのcodeを使ってアクセストークンを取得し、画面上にLINEのユーザー名や画像を表示させてみたいと思います。
今日のところはここまでです。
↧