認証サービス「Auth0」がLINE Loginを正式サポート！設定手順を詳細に解説します！ #Auth0JP

Auth0がついにLINE Loginをサポート！

Auth0はWebやモバイルなどのアプリケーション向けの認証機能を提供するサービスです。メールアドレス・パスワードによる認証のほか、ソーシャルログイン、エンタープライズ連携など様々なユースケースに簡単な設定で対応できる点を特長としています。

以前から発表のあったLINE Loginのサポートですが、2019年8月に正式にサポートしました！

• Auth0、LINE Loginの統合サポート提供開始

これまではCustom Connectionを利用した方法でしか利用ができませんでしたが、今回のサポートにより LINE Loginの設定をかなり簡単にできる ようになりました。

早速試してみたいと思います。

LINE Loginを準備する

まずはLINE Loginの準備をしましょう。LINE LoginはLINE Developersから作成することができます。LINE Developers自体はLINEアカウントがあれば誰でも登録ができます。

• LINE Developers

プロバイダーを作成します。任意のプロバイダー名を設定しましょう。

次にチャネルを作成します。チャネルはプロバイダーの中に複数作成できます。

「任意」と書かれている項目以外は埋める必要があります。

項目	値
アプリアイコン	任意なので未設定でOK
アプリ名	アプリの好きな名前
アプリ説明	アプリの説明を記載
アプリタイプ	WEBで使う [WEB]
メールアドレス	自分のメールアドレス
プライバシーポリシーURL	任意なので未設定でOK
サービス利用規約URL	任意なので未設定でOK

次に進み、LINE Developers Agreementの内容に同意し、作成します。

作成後はチャネル一覧が表示されます。先ほど作成したチャネルをクリックし、詳細画面に表示されている Channel ID と Channel Secret を控えておきます。

さらに下部にある「OpenID Connect」の「メールアドレス」という項目があります。こちらは、LINE Loginした際にメールアドレスを取得するために必要な設定になります。「申請」を押すと、メール取得権限の申請が行えます。

LINE Developersでの作業は一旦完了です。Auth0側の設定を終えたあと、追加で設定が必要になります。

Auth0でLINE Loginを設定する

次にAuth0の設定に移ります。簡単ではありますがアカウントの作成から記載しています。既にアカウントをお持ちの方は読み飛ばしてください。

アカウントの作成

アカウント作成を以下から行います。アカウントを作成すると、同時にTenantが作成されます。

• Sign Up - Auth0

このTenant内にサンプルアプリケーション用の環境を用意していきます。

LINE Loginを設定する

次に、LINE Loginの設定を行います。

LINE Loginの設定については以下の公式ドキュメントに記載されている通り、非常に簡単に設定できます。

• Add Line Login to Your App

左メニューの「Connections」を開くとLINEのロゴがあります！

クリックすると、LINE Login用の設定画面が開きます。

項目	値
Channel ID	作成済みのLINEのチャンネルのChannel ID
Channel Secret	作成済みのLINEのチャンネルのChannel Secret
Basic Profile	ON（固定）
Email address	試したい場合はON

Email address は注意書きがあるように、LINEのチャンネル側で取得申請を行なっていなければログイン時に要求することができません。

これでLINE Loginの設定は終わりです。なお、諸々設定が完了している場合はサンプルアプリケーションを用意せずとも、「TRY」からログインを試すことができます。

Applicationの作成

Tenant内には複数のApplicationを作成できます。右メニューの「Applications」を選び「+ CREATE APPLICATION」をクリックします。

「Single Page Web Applications」を選びます。

作成後、「Connections」タブを開き「Social」の「line」にチェックを入れます。これで、サンプルアプリケーションでLINE Loginが行えるようになります。

サンプルアプリケーションの実行

「Quick Start」タブでは、サンプルアプリケーションの設定付きのソースコードがダウンロードできます。つまり、ソースコードの修正なくすぐに試せるようになっています。

今回は、最もシンプルな「JavaScript」を選択します。

「DOWNLOAD SAMPLE」をクリックし、ソースコードをダウンロードします。

ダウンロードしたソースコード（Zipファイル）を解凍し、以下のコマンドを実行するとアプリケーションを起動できます。

# npmを使う場合
$ npm install && npm start

# yarnを使う場合
$ yarn install && yarn start

サンプルアプリケーションの実行には、ログイン後のコールバック設定などを行なっておく必要があります。「Settings」タブを開き、以下の項目を埋めます。

項目	値
Allowed Callback URLs	http://localhost:3000
Allowed Web Origins	http://localhost:3000
Allowed Logout URLs	http://localhost:3000

これで、サンプルアプリケーションの構築ができました。

LINE LoginへのコールバックURLの設定

次にLINE Developersの画面に戻り、「アプリ設定」タブの「リダイレクト設定」を編集します。

以下を設定します。

https://<Auth0のTenantのドメイン>/login/callback

Auth0のTenantのドメインは、Auth0のApplicationの詳細画面から確認できます。

試してみる

それではログインを試してみましょう。サンプルアプリケーションの「Login」をクリックします。

LINE Loginのボタンが表示されます！

ログインおよび認可画面が表示され、許諾するとログインできます。

無事にLINEアカウントでログインできました。

なおこちらの記事にも記載がありますが、サンプルアプリケーションのプロフィール情報ではメールアドレスが確認できません。メールアドレスが取得できているかどうかの確認は、Auth0の管理画面のユーザー情報から確認しましょう。

LINE Loginを導入し、簡単なログイン方法を提供しよう！

LINEは国内の月間アクティブユーザー数（MAU）が8,000万以上となっており、かなり普及率の高いサービスです。また、使っている場合は利用頻度は高くなるため（普段使いしている場合は常にログイン状態にあると言っても過言ではない）、このログイン状態であることを活かして認証させない手はありません。

また、Auth0との組み合わせにより LINEに限定しない形でのソーシャルログインの提供 が可能になります。例えばGoogleやFacebook、Twitterなどと組み合わせれば、ほぼ全てのユーザーを網羅できるのではないでしょうか。

Auth0とLINE Loginを活用し、簡単に認証できるサービスを作っていきましょう！

参考

本ブログの執筆にあたり、下記の情報を参考にしました。

• IdM実験室: Auth0がLINE Loginに対応しました