💨

Auth0でLINEを使ったソーシャルログインをできるようにした

2023/08/31に公開

LINE

Auth0

OIDC

tech

はじめに

昨今のログイン画面では基本的にGoogleやFacebookなどのアカウントを使用してログインができるようになっています。
このようなソーシャルログインは当たり前のようにあり、私も実際にLINEを使って認証できるように試してみました。
しかし、自前で実装しようとしたら何から取り組めばいいか分からずに立ち止まってしまいました。
そこで、Auth0に助けを求めたら案外簡単に搭載できてしまったので、共有するために記事を投稿しました。

LINE認証のフロー

LINE認証を行う際の認証フローは、ドキュメントで示しているようにOpenID Connectです。
そして、下記のリンクで示している認証フローはいわゆるAuthorization Codeを使用したフローとなっています。

Authorization Codeなので、仕様に沿ったパラメータやパスを準備すれば、LINE認証はできます。
ただ、その準備が面倒なので、今回はAuth0様に準備をして頂きました。
それでは実際の手順を書いていきます。

Auth0での準備

クイックスタートを参考にして、ログイン画面が表示できるようにしておいてください。
なお、クイックスタートではRegular Web ApplicationでApplicationを作成していますが、今回私はSingle Page Applicationのアプリケーションで同様の設定を行っています。
特に表示に違いは無い認識ですが、若干違うかもしれないので共有しておきます。

LINE Developersでの設定

①ログイン用のチャンネルの作成

LINE Developersにアクセスしてアカウントを作成します。
アカウントを作り、コンソール画面に移動したらProviderという項目があるので、そちらをクリックすると下記のような画面があります。

画面内の「Create a new provider」をクリックしてください。
任意のプロバイダー名を入力して、プロバイダーを作成します。

作成すると、上記プロバイダー画面が表示されるので、ChannelsタブでLine Loginを作成してください。
入力画面で以下の項目があるので、必要に応じて埋めてください。

Channel type
- 「Line Login」を選択してください。
Provider
- 先程作成したプロバイダーを選択してください
Company or owner's country or region
Channel icon
- こちらは任意です
Channel name、Channel description
- 下記画像のように連携する連携の許可画面で表示される名前と説明です。
Category,Subcategory
- 適宜一致するものを選択します。
Email address
- 通知を受け取るメールアドレスを設定します。
Privacy policy URL,Terms of use URL
- 利用規約やプライバシーポリシーがあればそのリンクを設定します。
App Types
- ログインでLINEを使用するアプリケーションの種類を指定します。
- WEBアプリケーションとモバイルアプリの二つありますが、今回はWEBアプリケーションのみ行います。
- スマホアプリについては、ドキュメントを参照ください。
  
  上記項目のほかにRequire two-factor authenticationという項目があります。
  これは二要素認証を行うかを設定する項目です。
  有効にするとメールアドレスとパスワードの「知識情報」でログインした後に、画面に表示された数字をLINEアプリに入力する「所持情報」による認証を強制するようにできます。
  
  一度二要素認証を行ったブラウザは一年ほど二要素を行った情報が残り、ログインするたびに認証番号を入力させることはないです。

②Auth0へのリダイレクトURLを設定

LINE Loginチャンネルを作成しアクセスしたら、LINE Loginタブを開き「Use LINE Login in your web app」にhttps://<先程作成したAuth0のDomain>/login/callbackを設定します。
そして、LINE LoginのステータスをPublishedに変更してください。

この設定を行わないと、他が適切な設定であっても400エラー画面が表示されログインができません。
私はこの記事で原因を見つけるまで、上記原因で30分ぐらい悩みました。
これでLINE側の設定は完了です。
それでは最後にAuth0の設定を行いましょう。

Auth0でLINE認証を有効にする

Auth0のテナントにアクセスし、サイドメニューのAuthentication→Socialへ移動します。
画面右上にある「Create Connection」ボタンをクリックし、Lineの要素を選択します。

画面に従いLineとの連携を作成すると下記のようにクライアントIDとクライアントシークレットを設定する項目があります。

こちらにLINE Developersで作成したLINE LoginのBasic settingsタブに存在するクライアントIDとクライアントシークレットを設定します。
AttributesはLINEとAuth0の連携する際に共有する情報を選択します。
個人を特定するためのBasic Profileは最低限必須なので、チェックは外せない状態です。
Email addressについてはLINEとAuth0を連携する時のスコープにemailを含めるかを選択できます。
これにチェックをつけないとAuth0側ではユーザー名やアイコンは保存されますが、メールアドレスはAuth0側に保持することはできません。
また、LINE側でもLINE LoginのBasic settingsで「OpenID Connect」の項目をAppliedにする必要があります。
以上を行うと、スコープにemailを含めることで画像のように、LINEがAuth0への情報提供を同意する画面においてメールアドレスの項目が追加されます。

よって、Auth0側にもLINEで使用しているメールアドレスの情報を保持することができます。
ただ、メールアドレスの項目は必須ではないため、上記Email addressにチェックしたからといって、必ずLINEからのログインの場合メールアドレスを取得できると考えることはできません。
Advancedに「Sync user profile attributes at each login」という設定がありますが、これはLINEでプロフィール情報が変更された時Auth0と同期させるかを選択できます。
これを有効にすると、LINEでログインした時に保存するユーザーデータが常に最新のものになります。
ここまで入力したらLINEとのコネクションを作成します。
作成した後の画面でApplicationsというタブがあるので、そこに表示されている「Auth0での準備」で作ったApplicationを有効にします。
これで、すべての設定が完了しました。
それではReactアプリを動かし、画面に表示される「Log in」ボタンをクリックします。
すると、以下のようなLINEでのログインができるボタンが表示されます。

ボタンをクリックすると、LINEのログイン画面が表示されます。

情報を入力し、二要素認証を有効にしている場合はスマホのLINEアプリに認証番号を入力します。
また、LINEで情報提供の同意画面で同意した後Auth0側での同意を行います。

すると、Reactアプリにリダイレクトされ画面にLINEで設定した名前が表示されています。
なお、Auth0側の同意画面はローカル環境以外ではおそらくスキップすることができます。
ただ、具体的な手順を記載できないので、あくまで多分とさせていただきます。
以上でLINE認証が完了しました。
設定が完了したので、最後にTerraformへの反映を行うと言いたいところですが、TerraformにはLINE認証の設定がありません。
実際にイシューにも記載されており、現状サポートしていない旨の回答があります。
ですが、回答者曰く簡単にできるらしいので、楽しみに待っていようと思います。

おわりに

今回はLINEとAuth0を連携し、Auth0のログイン画面でLINE認証ができるようにしました。
複雑な工程はなく、とても簡単にできたので達成したときは感動しました。
IDaaSはやっぱり凄いですね。
ただ、一点気になることはありました。
Auth0とLINE間でのAuthorization Codeですが、PKCEが設定されていません。
LINE側にPKCEの用意はあるので、機能自体は搭載できそうではあります。
しかし、調べてもAuth0側でLINEとAuthorizatoin Codeのフローでやり取りする際、PKCE用のパラメータを付与する方法がわかりませんでした。
今はそこまで困らないですが、OAuthのバージョンが2.1になったらPKCEの対応は必須となるので、搭載方法は把握しておきたいなと思います。
また、分かったら別途記事を書こうと思います。
ここまで読んでいただきありがとうございました。