Auth0でdアカウント・コネクト使ってみた

## はじめに
初めまして。NTTドコモの與久田です。私は、サービスデザイン部にて、アジャイル開発におけるプロダクトオーナーを担当しています。
こちらは、[NTTドコモ R&D Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nttdocomo "NTTドコモ R&D Advent Calendar 2021")の11日目の記事です。
本記事はビジネスクリエーション部技術企画担当と協力し、作成しています。


ドコモでは、dアカウントを用いたサイトへのログインを簡単に実現するための機能として、「[dアカウント・コネクト](https://id.smt.docomo.ne.jp/src/index_business.html "dアカウント・コネクト")」を一般提供しています。dアカウントの登録数は約7,000万を突破、現在も増え続けています。ドコモケータイのユーザーはもちろんのこと、ドコモ以外の通信会社のケータイのユーザーも含め、dアカウントを保有していれば誰でも、dアカウントログインを利用することができます。

近年、会員登録時の手間が大きいことによるユーザの離脱を回避するため、ソーシャルログインをサイトにて提供する例が増えてきております。
しかし、複数アカウントによるログイン機能を提供する場合は、サイトから各基盤に向けて開発をしなければならず、非常に手間が増えるという課題がありました。

そこで各基盤へのハブのような働きをしてくれる、IDaaS(Identity as a Service)と呼ばれるサービスが登場し、複数アカウントによるログイン機能提供時でもサイトからIDaaSに向けての開発をするだけで良くなるという利点があるため、市場規模が拡大し続けています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/23008ece-0a51-53d8-8960-c693873b0f04.png)


本記事ではIDaaSの一つであるAuth0とdアカウント・コネクトを連携する手順について記載します。

### メリット
・dアカウントログイン可能になることで、ユーザはサイト用に新規IDとパスワードを発行しなくてよくなり、ID管理の手間が省けます。

・複数アカウントによるログイン機能を提供するサイトの開発者が、Auth0に向けての認証機能開発をするだけで良くなります。

・dアカウントログイン実装時に、Auth0のライブラリを利用可能になります。

・Auth0を既にご利用中のサイトは、本対応のみでdアカウントによるログインを開発レスで実現することができます。


### 全体の流れ
1. Auth0でサイト用アプリケーションを立ち上げる
1. dアカウント・コネクト利用申請する
1. Auth0とdアカウント・コネクトを連携する
1. サイトからのAuth0の利用方法


それでは、具体的に連携方法について説明していきます。
本記事では、dアカウント・コネクトとAuth0の連携までを記事の対象とします。

## 1. Auth0でサイト用アプリケーションを立ち上げる
[こちら](https://auth0.com/jp "Auth0 Top")から、Auth0へのサインアップを行います。

Auth0ダッシュボード上から「Applications → Applications」を選択し、アプリケーションを立ち上げます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/6cd3c130-c778-a6eb-0dba-3966af466641.png)
アプリケーションの立ち上げが完了したら、「settings → Basic Information → domain」に記載のあるURLをメモしておきます。（「2. dアカウント・コネクト利用申請する」にて利用します。）

## 2. dアカウント・コネクト利用申請する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/0c0b4c1b-5bb0-b4e5-c6f5-9f960256aa64.png)

[こちら](https://g.daccount.docomo.ne.jp/VIEW_OC01/login4 "dアカウント・コネクト利用申請サイト")から、dアカウントを用いて新規登録を実施します。新規登録ボタンを押下後、企業情報等を指定の通り入力してください。
左タブの「サービス情報管理」タブから、今回開発するサービスに関する情報を登録しておきます。
不明点があれば、左タブの「ヘルプ」よりダウンロードできる操作マニュアルをご覧ください。

次に、「RPサイト情報管理」タブからRPサイトの申請を実施します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/b177c4bd-a7e9-37bf-cbee-34a207ef3985.png)
リダイレクトURIには、下記を指定します。
https://Auth0アプリケーションにてコピーしたURL/login/callback


申請が完了したら、詳細画面からクライアントID、クライアントシークレットをメモしておきます。（「3. Auth0とdアカウント・コネクトを連携する」にて利用します。）
また、こちらの申請が認証基盤に反映されるのに最大数時間程度かかることに留意してください。（認証基盤への反映状況はRPサイト情報管理画面、「反映」行から確認できます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/96b8b50a-a659-28ec-c660-322c57b3495a.png)




## 3. Auth0とdアカウント・コネクトを連携する

Auth0ダッシュボード上から「Authentication → Social」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/176f8502-ce75-2969-739f-c0100ddb28c6.png)

Social Connections画面から「Create Connection」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/26694ae3-fc7b-b577-24ee-1b4257e4e9bd.png)


New Social Connection画面から「dAccount」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/c360ea55-9ca7-1264-021f-de6b1349e91e.png)

dアカウント・コネクト申請サイトのRPサイトの設定で取得したクライアントID、クライアントシークレットを「Client ID」「Client Secret」へ入力し、「Create」を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/53c026d8-de5a-89c6-8110-b537873f2d2b.png)

作成が完了すると、dアカウント・コネクトを利用したいアプリケーションを選択する画面が表示されるので、先ほど作成したアプリケーションを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/c2eae39f-a74c-e140-32d9-e08cd95389c7.png)

これで連携は完了です。

以下、Auth0とdアカウント・コネクトの連携が正常にできているか確認していきます。
Auth0ダッシュボード上の「Authentication → Social → daccount」 にある「TRY CONNECTION」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/0e03f557-de23-ba60-47a2-dc58b0331d8c.png)


dアカウントのログイン画面にリダイレクトされるので、任意のdアカウントでログインし、遷移先URL確認画面でOKを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/bd73b871-4678-5511-1f9b-2f113a9404cd.png)



リダイレクト確認でOKを選択し、以下の画面が表示されれば設定完了が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2288108/598fd08e-bd32-2bfc-2cca-066acaa630bc.png)


## 4.サイトからのAuth0の利用方法

各プログラミング言語・フレームワーク向けに[SDK](https://auth0.com/docs/libraries "Auth0 Libraries")が提供されており、これを利用することで簡単に認証機能を実装することができます。


## まとめ
上記の手順により、とても簡単にdアカウント・コネクトとAuth0の連携ができます。
複数アカウントによるログイン機能を提供する場合、Auth0のライブラリを利用したい場合、また既にAuth0を既にご利用中の場合など、ぜひ試してみてください！