無料でLINE ログインの機能を試す

## はじめに
公式サイトの[LINEログインを始めよう](https://developers.line.biz/ja/docs/line-login/getting-started/)をベースに、LINEログインの機能がどのようなものか試してみます。

上記のページで紹介されている方法はHerokuというサービスを利用したものですが、Herokuは少し前に有料となってしまったので、無料で使えるRenderを代わりに使って環境構築を行います。

### 前提条件
* GitHubアカウントをもっていること
* LINE関連の設定が終わっていること
* Renderアカウントの作成が終わっていること

### 参考
* [LINE関連の設定（前回の記事）](https://qiita.com/course_k/items/85bf9cfab971cb5b97ee#line%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A)
※後で作成するので「チャネルの作成」の手順の実施は不要

* [Renderアカウントの作成](https://dashboard.render.com/register)
※Render.comのアカウント作成ページへ飛びます

## LINEログイン用チャネル作成
### 新規チャネル作成
LINE Developersコンソールの左ペインにある「プロバイダー」から自身のプロバイダーを選択します
（ここでは「試験用」）
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/9f19bf87-76da-25b3-d869-de239dc1d1e1.png'>

「新規チャネル作成」をクリックします。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/9f2b3db1-93d2-1fea-0317-0e3d63f4eac0.png'>

「LINEログイン」を選択します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/9ac961d0-70d3-128f-71c0-ca1e45c4db98.png'>

チャネル作成に必要な情報を入力します。
・アプリタイプ
→「ウェブアプリ」を選択

・「2要素認証の必須化」
→オフにする

それ以外の項目は自由に設定してよいです。
入力が完了したら、「作成」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/3f3de33d-70ec-a114-4773-9ea47438a87c.png'>

チャネルの情報が表示されます。
表示されている情報のうち、「チャネルID」とページ下部にある「チャネルシークレット」を控えておきます。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/26b83e07-f098-0e24-68f5-296ef7f46068.png'>

これでチャネルの作成は完了です。

### チャネル設定
チャネル名の右下にある「開発中」をクリックします。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/b5c001e0-88f9-9804-ee0d-4e4d1ef943c5.png'>

「公開」を選択します。
公開状態でないとLINEログインを試すことができません。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/6e76024f-b042-214f-4793-0e4e76f9a5a2.png'>

ステータスが「公開済み」に変わればOKです。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/13324c17-0ebc-7777-9ef0-2620efd01f9f.png'>

## アプリの準備
### リポジトリのフォーク、クローン
LINEでは、ログイン機能を手軽に試すためにアプリを用意してくれています。
以下のGitHubリポジトリを自身のリポジトリにフォークして、ローカルにクローンしてください。
https://github.com/line/line-login-starter

なお、アプリはJavaで書かれているようです。
※後続の作業はJavaが全くわからなくてもできます。

### 設定ファイルのカスタマイズ
このアプリはHerokuというサービスを使ってデプロイすることを前提とした作りになっています。
そのため、今回使うRenderでデプロイするためには、いくつか設定を変える必要があります。

なお、以降のファイルの編集はVisual Studio Codeを使用して行っています。

#### Dockerfileの作成
RenderではWebサービスをDockerを使用して構築することができます。
Javaのアプリを動作させるための設定を記載します。

まずファイルを新規作成して、名前を`Dockerfile`とします。
`pom.xml`などと同じ階層に作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/8c51f6ae-6140-74d1-094f-f944046dd286.png)

中身は以下の通り設定します
```dockerfile:Dockerfile
FROM openjdk:8-alpine
ENV MAVEN_OPTS="-Xmx256m"
RUN apk add --no-cache maven
COPY . /app
WORKDIR /app
RUN mvn clean package -Dmaven.test.skip=true
EXPOSE 8080
ENTRYPOINT ["java", "-Xmx256m", "-jar", "/app/target/line-login-starter.jar"]
```

#### ymlファイルの修正
`src/main/resources`にある`application.yml`を編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/e6d366b9-bd09-09d2-aa22-662f9d80a28c.png)

```diff_yaml:application.yml
server:
    port: 9000

management:
    address: 127.0.0.1
    port: 9100

logging:
    level:
        com.linecorp.sample: DEBUG
# 追加分
+ linecorp:
+   platform:
+     channel:
+       channelId: ${LINECORP_PLATFORM_CHANNEL_CHANNELID}
+       channelSecret: ${LINECORP_PLATFORM_CHANNEL_CHANNELSECRET} 
+       callbackUrl: ${LINECORP_PLATFORM_CHANNEL_CALLBACKURL}
```
ソースコードにチャネルIDやチャネルシークレットをベタ書きすることは避けたいので、環境変数を利用するようにしています。
環境変数についてはRenderでWebサービスを作る際に設定します。

ファイルの修正が終わったら、コミット、およびプッシュしておきます。

:::note warn
参照しているリポジトリが古いせいなのか、ブランチ名がmainではなくmasterとなっているので注意してください。
（わたしだけかもしれませんが）
:::

アプリの修正は以上となります。

## RenderでのWebサービス作成
自身のダッシュボードにアクセスします。
https://dashboard.render.com/

「New +」をクリックし、「Web Service」を選択します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/fc6ecba3-4224-8246-3739-e03b068d16b7.png'>

初期状態のままで「Next」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/eb8c7b3f-79fc-9c20-3774-e096d6df2886.png'>

GitHubの「Connect account」を押下します。 
※過去にすでに連携済の場合、この画面は表示されません。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/61f2a1f8-a7a6-3bd9-58a6-8ef50ab79fe6.png'>

GitHubアカウントの連携を済ませた後、Renderをどのリポジトリにインストールするかを聞かれるので、「Only select repositories」を選択し、先ほど設定を行ったリポジトリを選びます。
画面下部の「Install」を押下します。
※過去に連携済の場合、この画面は表示されません。
<img width='100%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/c38926f7-f594-0a54-c5ef-10d341dd0977.png'>

選択したリポジトリが表示されるので、「Connect」を押下します。
※わたしの場合、すでに過去に連携済なので複数リポジトリが表示されています。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/d7a2d586-63fb-c1be-f0be-2cb6971d69af.png'>

Web Serviceの設定を行います。
以下の項目を設定します。
・Inctance Type
→「Free」を選択します。
「Free」にするとクレジットカード情報の入力すら不要なのが嬉しいところです。

・Environment Variables
画像では環境変数名が途中で見切れていますが、application.ymlで使用する環境変数を3つ設定しています。

`LINECORP_PLATFORM_CHANNEL_CHANNELID`
→LINEチャネルで確認していたチャネルIDを設定します。

`LINECORP_PLATFORM_CHANNEL_CHANNELSECRET`
→チャネルシークレットを設定します。

`LINECORP_PLATFORM_CHANNEL_CALLBACKURL`
→URLはWebサービス作成後でないと確定しないのですが、空にはできないので適当な値を設定します。あとから修正します。

入力が完了したら「Create Web Service」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/eba12aed-115d-79ae-b4b6-14fb5f300c61.png'>

アプリのビルドが始まります。
少し時間がかかりますが、無事に完了すると画像の通り「Live」になります。
失敗した場合はデプロイログへのリンクが表示されるので、確認してください。

また、URLも発行されているので控えておきます。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/4ecfa43e-392a-0356-5ef7-5961d96d6500.png'>

URLが発行されたので、先ほどの環境変数のURLを修正しましょう。
左ペインの「Environment」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/de935470-0256-ea32-726b-76ca1c184304.png)

`LINECORP_PLATFORM_CHANNEL_CALLBACKURL`の値を書き換えます。
発行されたURLの末尾に`/auth`を追加したものを設定します。
「Save Change」を押下します。
※環境変数変更後、自動でデプロイが始まります。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/3ef83904-a57d-a602-e6a5-44ef1a8c4e7d.png'>

これでRenderの設定は以上です。

## LINEログイン設定の変更
LINE側にもURLを設定したいので、再度LINEチャネルの画面に戻ります。
「LINEログイン設定」タブから、「コールバックURL」の「編集」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/2304c77a-8ff9-9324-3504-eaae13050a5e.png'>

先ほどRenderの環境変数に設定したURLと同じように、WebサービスURLの末尾に`/auth`を追加したものを設定します。
「更新」を押下します。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/59059189-4040-7aff-f5ef-97520ee7077c.png'>

以上でLINEログインのための設定はすべて完了です。

## LINEログインを試す
RenderのページにあるURLをクリックします。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/676411b2-81a5-5b0f-7f4d-8d46b466459b.png'>

「Log in」ボタンだけがあるシンプルなページが表示されます。
ボタンを押下しましょう。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/8feda45e-c644-50d6-11fa-3d7ef4f8d61e.png'>

LINEのログインページに遷移します。
ご自身のLINEアカウントでログインしてみてください。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/88b4f0e4-8307-c36e-33a7-823e72858438.png'>

ログインが成功すると以下のようなページが表示されます。
<img width='70%' src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/251137/8d3f0374-cc0b-657f-b470-e4631b9f90eb.png'>

アプリさえ用意していれば、このように簡単にLINEログインの機能を盛り込むことができます。

## まとめ
LINEログインをどのようにして利用するのかを確認しました。
実際の実装を書いていないので、LINEログインを自分で開発するためには数ステップ必要ですが、コールバックURLを適切に設定して、リダイレクトするようにしてしまえば、認証の機能はLINEがやってくれているので、自身で実装する必要はありません。

大まかなLINEログインについては理解できたなおで、次がどのようにリダイレクトさせるのか、など細かいところの実装を自分で作り込んでみようと思います。

## 参考にしたサイト
* [LINEログインを始めよう | LINE Developers](https://developers.line.biz/ja/docs/line-login/getting-started/)