PHPでLINEログイン実装してみたメモ①〜認可コードが返ってくるまで〜

# 準備

## LINE developersのアカウント作成

まず最初にLINE developersのアカウントを作成します。

https://developers.line.biz/ja/

## プロバイダーとLINEログインチャネル作成

下記概要ページにしたがって「プロバイダー」とLINEログインの「チャネル」を作成します。

[概要](https://developers.line.biz/ja/docs/line-developers-console/overview/)

1. devlopersコンソールにログイン
2. プロバイダー（利用者の情報（LINE IDなど）を取得する開発者・企業・組織のこと）を作成
3. チャネルを作成

今回はLINEログインチャネルを作成します

  https://developers.line.biz/ja/docs/line-login/

- 「新規チャネル作成」→「LINEログイン」を選択します。
![LINE_Developers.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/cbb384ee-7a4f-062b-da5f-b098342cc555.png)

必須項目を入力して「作成」します。アプリタイプは今回は「ウェブアプリ」を選択します。
。![FireShot_Capture_098_-_LINE_Developers_-_developers_line_biz.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/254878d4-b1a1-022c-6ca9-512199b159bf.png)
## LINEログインチャネルの設定

LINEログインアプリを作成すると次のようなページができます。ここでいろいろ情報が確認できます。
![LINE_Developers 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/000c535f-af15-80cc-6194-b21a9ec9ae8e.png)

`チャネルID`（チャネルに対してユニークなID）や`チャネルシークレット`は後々いろいろ必要になってくるのでメモをしておくと良いかもしれません。	

# webアプリにlLINEログインを組み込む

それでは作成するWEBアプリにLINEログインを組み込んでいきたいと思います。

大枠は下記公式ドキュメントも参照ください。

https://developers.line.biz/ja/docs/line-login/integrate-line-login/

## PHPでコードを書く

まず初めに、PHPで簡単にハローワールドのコードを書きます。

```php
<?php
echo 'Hello, World!!';
```

## ローカルサーバーを立ち上げる

ターミナルを立ち上げ、ファイルが置いてあるディレクトリでPHPのローカルサーバを立ち上げます。-Sがポイントです。

```bash
php -S localhost:8000 index.php
```

![localhost_8000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/d366d9d1-70f6-2fd4-473b-8b86866f088a.png)


http://localhost:8000/

にアクセスして「Hello, World!!」が表示されていることを確認します。

## ngrokでローカルサーバーを外部からでもつなげるようにする

次に「ngrok」というサービスを使って、自分のPCからしかアクセスできない「ハローワールド」を外からでもアクセスできるようにします。

### ngrok公式

https://ngrok.com/

### ngrokが便利すぎる

https://qiita.com/mininobu/items/b45dbc70faedf30f484e

### ngrokのインストール

下記セットアップページにしたがって、ngrok公式からダウンロードします。

https://dashboard.ngrok.com/get-started/setup

## ngrokでサーバーを立ち上げる

先ほどローカルサーバーを立ち上げた同じディレクトリで、下記コマンドを入力してサーバーを立ち上げます。

```bash
ngrok http 8000
```

するとターミナル上に下記が表示され、http or httpsで外部からアクセスができるようになります。
![main_php__line-mini-app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/6186dda9-e919-3f16-be7f-5c4c11661357.png)


※フリープランの場合はサーバーを複数立ち上げられません。もしも既に立ち上がっている場合は下記コマンドでサーバーを停止してください。

```bash
killall ngrok
// ngrokのサーバー停止
```

Forwardingにある[https://8bbebde7cc12.ngrok.io](https://8bbebde7cc12.ngrok.io/)にアクセスしてみます。（このURLはサーバーを立ち上げ直すたびに毎回変わります）

![https___8bbebde7cc12_ngrok_io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/c348e12e-9435-6eaa-b0dc-014b9c11288e.png)
ハローワールドが表示されていることが確認できました！

## コールバックURLを設定する

次に、コールバックURLを設定します。このURLはLINEの認証突破後に、「**認可コード**」と「**State**」を受け取るために設定します。(この２つは後ほどまた出てきます)

ここには先ほどngrokで外部からアクセスできるようにしたURLを設定します。
![LINE_Developers 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/bac8831e-37e9-0e78-a425-56e21012b2be.png)

### メールアドレスの取得権限を申請する

メールアドレスの情報を取得したい場合は下記手順で申請をしておきます。

https://developers.line.biz/ja/docs/line-login/integrate-line-login/#applying-for-email-permission

### ユーザーに認証と認可を要求する

次に、URLにアクセスした時にLINEの認証画面を挟むように設定します。

とりあえず、URLにパラメータをくっつけます。

### URL

[`https://access.line.me/oauth2/v2.1/authorize`](https://access.line.me/oauth2/v2.1/authorize)

https://developers.line.biz/ja/docs/line-login/integrate-line-login/#making-an-authorization-request

いろいろ複雑なので、まずは必須パラメータのみくっつけて試します。そして私はpostman(https://www.postman.com/)を使ってURLを作りました。

GETにしてurlを入れて、KEYとVALUEにパラメータを入れるとURLができるので便利です。
![Postman.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/4ed44333-f335-d311-adad-089ae96de179.png)

できたURLはこんな感じです。`client_id`と`redirect_uri`は適宜変更してください。

```bash
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にコピペしてアクセスします。
![FireShot_Capture_098_-_LINE_Developers_-_developers_line_biz_と_PHPでLINEログイン実装してみたメモ_と_FireShot_Capture_098_-_LINE_Developers_-_developers_line_biz_png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/1883fac0-14b3-1daf-02e3-b93b61195d41.png)

正しくパラメータが設定できていれば、LINEのログイン画面にアクセスします。
![LINE_Login_と_FireShot_Capture_098_-_LINE_Developers_-_developers_line_biz_png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/9233ece0-646f-5b33-94fb-fe73fe9ce742.png)




### 401エラーの時

これは私も引っかかって「？？？」となったのですが、個人LINE等でアクセスしようすると公開前設定のため、アクセスができません。

確認のためにLINEログインチャネルの「権限設定」で個人LINEをメールで招待等で招待しておいてください。また、`Tester権限`の付与がよいらしい。開発中のアプリのテストのテストができるのはTester権限とのこと。

![LINE_Developers 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/7ae92fd8-6140-58d5-62f0-466a34f9e82e.png)


## 「ログイン」してみる

次に先ほどの認証画面で「ログイン」を押します。

**「Hello, World」の文字が表示されたら成功です！！**

ここでアクセス後のURLをよく見てみます。先ほど設定した「コールバックURL」の後ろに何やらいろいろくっついているのがわかります。これが`code(認可コード)`と`state`です。

![https___8bbebde7cc12_ngrok_io__code_GFY9wWTWTRItJlKNFeov_state_1238al8esad8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385211/e02ea6d1-eb5f-117b-b5fa-ffb36dad5e59.png)


この`code`はこの後`アクセストークン`を発行するために必要な情報になります。アクセストークンを発行することで、LINE上に登録されている**ユーザー名**や**プロフィール画像**、**ユーザーID等**の情報を取得することができます。

次の記事ではこの**codeを使ってアクセストークンを取得し、画面上にLINEのユーザー名や画像を表示させてみたい**と思います。


今日のところはここまでです。