oauth2
social
Auth0
serverless
openid_connect

Auth0でLINEログインを実装してみた (v2.1対応)

More than 1 year has passed since last update.


Auth0のCustom Social Connection機能

※2017年11月修正点

LINE LoginがOpenID Connect対応したことにより、当初公開していたものから、設定項目やスクリプトを若干変更いたしました。


0. 関連ブログ

認証プラットフォーム Auth0 とは?


1. Auth0のソーシャルログイン機能

 Auth0 はSaaSベースの認証・認可ソリューションで、デフォルトでOpenID Connectを用いた認証・認可を行うことが可能です。Auth0の特徴としてアプリケーションへの認証・認可にGoogleやfacebookなどのソーシャルサービスににコーディングレスで連携をさせることができます。

 B2CやB2B2Cなど、ユーザを増やすことで収益を上げることができるサービスで、なかなかユーザーの取り込みをすることができなかったり、ユーザー登録するのが面倒臭がってなかなかユーザー数が増えないという悩みを抱えているサービス提供者がAuth0認証サービスを利用すれば、ソーシャルアカウントを使ったユーザー登録が簡単に実装できるようになります。

ソーシャルアカウント連携は、Auth0の管理画面からConnections > Socialから行います。

Dashboard.png


1-1. 標準で対応しているソーシャルサービス

2017年8月末時点では以下のソーシャルサービスに対応しています。

スクリーンショット 2017-08-09 21.14.09.png

Auth0と連携することでアプリケーションごとにどのソーシャルサービスと連携をするかをスライドボタンで簡単に設定することができます。また、アプリケーション開発者は各ソーシャルごとの連携開発や、バージョンアップなどに伴う修正・テストなど煩わしい作業をする必要は無くなります。


1-2. リストに載っていないソーシャルは対応できないの?

一般的なSaaSベースの認証サービスでは、リストに載っていないサービスや機能は利用することはできませんが、Auth0にはServerless環境をAuth0サービス契約者に提供しており、Custom Social ConnectionというExtension機能を利用することで、標準リストに載っていないソーシャルアカウントとも簡単に連携ができます。

Extensions.png

試しにLINE Login機能を使ってOAuth2.0連携ができるかどうかを試してみました。


2. LINE側の設定


2-1. LINE Businessにアカウントを登録する。

LINE Login機能を利用するためには、まずLINE Business Centerでアカウントの登録が必要となります(この際、LINEのアカウントが必要となります)。

スクリーンショット 2017-09-05 19.12.41.png

画面右上のログインをクリックするとLINEのログイン画面が表示されますので、LINEアカウントのメールアドレス/パスワードを入力し、正しく認証されるとメールが届きますので、メールに記載された指示に従い自分のプロフィール情報と会社/事業所情報をを登録します。

アカウント登録が完了し、LINE Business Centerにログインしたら、メインページの提供サービスからLINE Loginをクリックします。

スクリーンショット 2017-09-05 19.23.10.png

画面最下部の[LINE Loginを始める]をクリックします。ここでアカウント名、 申し込みタイプ (WEB, NATIVE_APP)、メールアドレス等を登録すると、以下のような画面が表示されます。

LINE_Business.png

[LINE Developerへ]をクリックして、LINE Developerサイトに移動します。


2-2. LINE Developersでアプリ登録をする

LINE Developerサイトに移動すると、先ほど登録したChannel IDの情報が表示されます。

[Basic Information] 画面からEDITボタンを押して設定内容を編集します。ここで表示される、Channel ID / Channel Secretがいわゆる Client ID, Client Secretになります。

スクリーンショット 2017-09-05 20.21.34.png

続いて、[Technical Configuration] を選択します。ここではNATIVE_APP, WEBそれぞれの設定が行えますが、ここではWEBの項目にある、[Callback URL]の定義を行います。Callback URLにはAuth0のCallback URLを設定します。

スクリーンショット 2017-09-05 20.17.48.png


3. Auth0側の設定


3-1. Custom Social Connectionの登録

Auth0のダッシュボードからExtension > Custom Social Connectionsを選択します。

スクリーンショット 2017-09-05 21.48.04.png

次に[NEW CONNECTION]をクリックしします。

スクリーンショット 2017-12-14 13.36.31.png

Setting画面で、以下の内容を登録します。

項目
定義内容

Name
Custom Social Connectionsで表示される名称

Client ID
client_idと対になるclient secret。今回はLINE Developer > Basic Informationの[Channel Secret]の値を定義します

Client Secret
client_idと対になるclient secret。今回はLINE Developer > Basic Informationの[Channel Secret]の値を定義します

Authorization URL
Authorization ServerのURL。今回は https://access.line.me/oauth2/v2.1/authorizeを定義します

Token URL
Authorization Serverでaccess_tokenのやりとりで使用されるURL。 今回は https://api.line.me/oauth2/v2.1/token を定義します

Fetch User Profile Script
Access Tokenを用いてユーザー属性の取得を定義します


3-2. Fetch User Profile Scriptの定義

Fetch User Profile Scriptのサンプルスクリプトを紹介します。

以下のサンプルスクリプトによるユーザー属性取得の定義は、LINE Developers - LINE Loginを参照しています。

ちなみに2017年11月末時点ではLINE Loginは残念ながらメールアドレスを取得することはできないようです。他のソーシャルではメールアドレスを対応しているので、LINE Loginの今後の課題かと思います。

スクリーンショット 2017-09-06 13.44.05.png

次に、AppsをクリックしてLINEログインに対応するCLIENTアプリを設定します。ここで表示されるAppsはAuth0 Dashboard > Clients で既に登録済みのアプリケーションとなります。CLIENTアプリの登録方法は Auth0 Documentation - Clients をご参照ください。

スクリーンショット 2017-09-06 14.02.40.png

MyWebApという名称で登録したCLIENTアプリは、Node.js版サンプルProjectを使用しています。Auth0は様々な開発フレームワークに対応しており、Githubにサンプルソースが公開されています。

MyWebAppのスライドボタンをクリックして、MyWebAppにアクセスした際にLINEでのソーシャルログインを可能にします。

同様に、Auth0 Dashboard > Clients > MyWebApp > Connections を確認してみます。

スクリーンショット 2017-09-07 16.42.02.png

この図では、Auth0標準認証Database "Auth0" と、Socialログインで "facebook"の2つがEnabledになっています。この状態では、MyWebAppにアクセスをすると、以下のようなログイン画面が表示されます。

スクリーンショット 2017-09-07 16.49.56.png


4. 実際にLINEログインを試してみる

ここで、先ほどのLINEをEnabledにしてみましょう。すると次のようなログイン画面が変化します。

スクリーンショット 2017-09-07 16.52.04.png

赤い色で LOG IN WITH LINEというアイコンが追加されているのがわかります (今回のデモではLINEの標準ロゴを使用していないので、Auth0標準のアイコンになっています)。そのうち標準のSocial Connectionに追加される?ことがあったら、LINEの緑のロゴで表示されると思います。

このLOG IN WITH LINEをクリックすると、LINEのログイン画面が表示されます。

スクリーンショット 2017-09-07 17.50.32.png

ブラウザのURLをみると  http://access.line.me/にリダイレクトされていることがわかります。ここでLINEアカウントのメールアドレス/パスワードを使用してログインボタンをクリックすると、初回の認証時に以下のプロフィール情報へのアクセスを認可要求する画面が表示されます。(LINEビジネスに法人登録した場合には表示される?個人アカウントで試した場合には表示されませんでした)

スクリーンショット 2017-09-05 20.11.43.png

ここで [同意する] をクリックすると、OAuth2.0での認可が承認され、リクエストされたページが表示されます。

スクリーンショット 2017-09-07 21.36.36.png

ちなみ認可後にWelcome [Username] の上に表示されている写真は、LINEのプロフィールで設定したものです。

OAuth 2.0でのUserInfo取得をした時点で、LINEのプロフィールに設定されたPictureURLを表示させるだけでなく、User属性として (Auth0 Dashboard > Users > User Details)保持します。

Custom Social Loginの動画


5. まとめ

どうでしたか? Auth0は標準で30種類以上のソーシャルログインに対応しているだけでなく、OAuth 2.0/OpenID Connectに対応しているソーシャルサービスであれば、リストに掲載されていないものでもほとんどコーディングをすることなく対応させることができます。

B2CやB2B2Cなど、ユーザを増やすことで収益を上げることができるサービスで、なかなかユーザーの取り込みをすることができなかったり、ユーザー登録するのが面倒臭がってなかなかユーザー数が増えないという悩みを抱えているサービス提供者がAuth0認証サービスを利用すれば、ソーシャルアカウントを使ったユーザー登録が簡単に実装できるようになります。


6. Auth0 フリートライアルご利用方法

Auth0はフリートライアルも提供していますので、どれだけ簡単に実装できるか試してみてはいかがでしょうか?

フリートライアルは、Auth0のホームページにアクセスし、画面右上のスクリーンショット 2017-09-07 21.59.09.pngをクリックするとトライアル登録が行うことができます。ユーザー登録にはGitgubやGoogle, Microsoftアカウントを使用してサインアップすることできます。