Auth0のユニークな機能 - AD/LDAP Connector編

# はじめに
この記事は[初めてのAuth0ハンズオン](https://qiita.com/hisashiyamaguchi/items/2d0bcae052077f6ae4a4)の続編で、Auth0のユニークな機能の一つである[AD/LDAP Connector](https://auth0.com/docs/connector/overview)の設定手順です。[AD/LDAP Connector](https://auth0.com/docs/connector/overview)はオンプレミス環境のWindows Active DirectoryやLDAPとAuth0を接続して、ディレクトリ上のUser CredentialでApplicationにログインできる機能です。通信トラフィックはオンプレミス環境からAuth0クラウド環境のみで、Auth0クラウド環境からオンプレミス環境へのトラフィック無しで接続できることが特徴です。

# 事前準備
事前に下記をご準備お願いします。

- MacまたはWindows PC
- Chrome
- Node.js, Node Package Manager
- Auth0の無料トライアルアカウント
- Windows 2016または2019のAWS EC2インスタンス

# 手順
## Auth0側
左ペインの"Connections"->"Enterprise"をクリック、"Active Directory / LDAP"をクリックして"CREATE CONNECTION"を押します。

<img src="https://i.imgur.com/0DLBFF1.png" width=70%>

"Connection Name"に任意の名前を入力、他の項目は空欄のまま下の"CREATE"を押します。

<img src="https://i.imgur.com/0IB9W5L.png" width=70%>

"Setup"タブをクリックして"Provisioning Ticket Url:"をコピーします。
**<font color="DarkOrange">Active Directory側の設定で必要になります。</font>**

<img src="https://i.imgur.com/JdhdQx2.png" width=70%>

## Active Directory側
Windows ServerのEC2インスタンスを作成します。
**<font color="DarkOrange">この記事ではWindows Server 2019で検証しています。</font>**

Active Directoryを構築します。
**<font color="DarkOrange">詳細な構築手順は割愛します。この記事では[ここ](https://qiita.com/omaenimutyuu/items/4b6359b0968fb14288f7)を参考に構築しています。</font>**

Windows ServerにChromeをインストールしてデフォルトのブラウザーに設定します。
**<font color="DarkOrange">詳細なインストール手順は割愛します。この記事では[ここ](https://qiita.com/Arahabica/items/04f8469842f29550b831)を参考にインストールしています。</font>**

AD/LDAP Connectorの[MSIファイル](https://cdn.auth0.com/connector/windows/adldap-5.0.9.msi)をダウンロードして実行、"Next"を押します。
**<font color="DarkOrange">この記事ではDomain Controllerにインストールしていますが、Domain Controllerと通信可能なネットワーク上に存在する別のサーバにインストールすることも可能です。</font>**
<img src="https://i.imgur.com/t7axjX3.png" width=70%>

ライセンス許諾のチェックボックスをチェックして”Next”を押します。
<img src="https://i.imgur.com/HmZXCYS.png" width=70%>

デフォルトのまま"Next"を押します。
<img src="https://i.imgur.com/mhjYdwK.png" width=70%>

"Install"を押します。
<img src="https://i.imgur.com/TYwsgBJ.png" width=70%>

インストールが完了するとConfiguration ToolがChromeで開きます。"Ticket URL"に"Provisioning Ticket Url:"の内容をペーストして"Continue"を押します。
<img src="https://i.imgur.com/sNa9Gfd.png" width=70%>

"Base DN", "Username", "Password"を入力して"Save"を押します。
- Base DN : Active Directoryの構築中に指定したDN
- Username : Domain Adminのユーザ名
- Password : Domain Adminのパスワード
**<font color="DarkOrange">設定が成功するとAuth0クラウド環境へのアウトバンド通信が開始し接続に成功すると全てグリーンになります。</font>**
<img src="https://i.imgur.com/l3jVg7g.png" width=70%>
<img src="https://i.imgur.com/0rSjzAE.png" width=70%>

## 動作確認
左ペインの"Applications"をクリックして右上の"CREATE APPLICATION"を押します。

<img src="https://i.imgur.com/ZtGP5PL.png" width=70%>

"Name"に任意の名前を入力、"Choose an application type"で"Simgle Page Web Applications"を選択して”CREATE”を押します。

<img src="https://i.imgur.com/70rHJkw.png" width=70%>

"Settings"タブをクリックして"Allowed Callback URLs", "Allowed Web Origins", "Allowed Logout URLs"に"`http://localhost:3000`"を入力して画面下の"SAVE CHANGES"を押します。

Applicationの[GitHubリポジトリ](https://github.com/auth0-samples/auth0-react-samples)をローカルPCにクローンします。

```console
$ git clone https://github.com/auth0-samples/auth0-react-samples.git
```

auth0-react-samples/01-Login/srcに移動します。

```console
$ cd auth0-react-samples/01-Login/src
```

auth_config.json.exampleをコピーしてauth_config.jsonを作成します。

```console
$ cp auth_config.json.example auth_config.json
```

auth_copnfig.jsonを編集します。
**<font color="DarkOrange">"clientID"は"Appications"->"作成したApplication"->"Settings"から確認できます。</font>**

```json
{
  "domain": "kiriko.auth0.com",
  "clientId": "xxxx"
}
```

auth0-react-samples/01-Loginに移動します。

```console
$ cd auth0-react-samples/01-Login
```

npm installを実行して必要なパッケージをインストールします。

```console
$ npm install
```

npm startを実行してApplicationを起動します。

```console
$ npm start
```
Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押します。
**<font color="DarkOrange">手順通りに設定していればAuth0のUniversal Login画面が表示されます。</font>**

左ペインの"Applications"から作成したApplictionをクリック、"Connections"タブを選択して作成したコネクション以外のフリップスイッチをオフにします。

<img src="https://i.imgur.com/nHeffDS.png" width=70%>

左ペインの"Connections"->"Enterprise"をクリック、"Active Directory / LDAP"->作成したコネクションをクリックしてステータスが"Online"になっていることを確認し"▷"を押します。
<img src="https://i.imgur.com/eK8Lcnf.png" width=70%>

ログインウィジェットでActive Directory上の任意のユーザ・パスワードを入力して"LOG IN"を押します。"It works!"の画面が表示されれば成功です。
<img src="https://i.imgur.com/KQJV1IV.png" width=70%>
<img src="https://i.imgur.com/r54ekLs.png" width=70%>

念の為、作成したApplictionでもログインできるか試します。Chromeで`http://localhost:3000`にアクセスして右上の"Log in"を押してログインウィジェットでActive Directory上の任意のユーザ・パスワードを入力して"LOG IN"を押します。ログインできれば成功です。

<img src="https://i.imgur.com/5DkrXGy.png" width=70%>

# おわりに
社員様向けのディレクトリサービスとしてWindows Active 
Directoryをオンプレミス環境でご運用されているお客様は多数いらっしゃるかと思います。AD/LDAP ConnectorはAuth0クラウド環境からオンプレミス環境への通信トラフィックは発生しないため、オンプレミス環境のFirewallポリシーを変更することなく自社内のActive DirectoryとAuth0を接続することが可能です。