Azure Functions と Azure Active Directory B2C を連携させる　その２

前回の記事 [Azure Functions と Azure Active Directory B2C を連携させる　その１
](https://qiita.com/TsuyoshiUshio@github/items/8e6c604fa698e39de959)に続いて、Azure Active Directory B2C の Local 認証(email による、ADユーザによる認証）に加えて、ソーシャルによくある Facebook から情報を持ってきて、ログインしたり、新しいユーザを作ったりする機能のセットアップを試してみる。下の図はその設定が終わった図だ。

<img width="1333" alt="Screen Shot 2017-10-29 at 12.32.57 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/aa35a952-7f99-5a81-29af-82e5b8d8abb0.png">

# Facebook Application を作成する

最初に、Facebook Application の登録を行う。方法はここに書いてある。

* [Azure Active Directory B2C: Provide sign-up and sign-in to consumers with Facebook accounts](https://docs.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-setup-fb-app)

全くこのままなので、特に問題ないが、一応自分のを晒しておくとこんな感じ。前回と同じところに設定してみた。

特にポイントとなるのは、ここで、App ID と App Secret を控えておくこと。

<img width="1191" alt="Screen Shot 2017-10-29 at 2.17.49 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/32a6914f-7225-24ce-7474-4860ef0e8061.png">

<img width="937" alt="Screen Shot 2017-10-29 at 2.28.06 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/7c49ad1c-ca85-4b9e-2ffe-bb7574b27285.png">

<img width="1187" alt="Screen Shot 2017-10-29 at 2.18.11 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/7e5c9c05-4e88-18ec-6fa4-fa0a8d3a6bb9.png">

<img width="1197" alt="Screen Shot 2017-10-29 at 2.18.21 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/f6b94663-d54d-0f06-15b6-272784d93007.png">

# B2C 側の設定の追加



## identity provider

新たに Facebook を登録する。

先ほどの、Facebook Application の App ID と App Secret をここに登録する。

<img width="540" alt="Screen Shot 2017-10-29 at 2.18.42 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/9e0dac09-2d29-8ff3-8b04-14030aac2e4f.png">

## Sign-up or sign-in policies

ここは、新しいのを作るのでなく既存のを選択して編集する。identity provider として　Facebookを登録すると、新たに、Facebook が選択可能になるので選択してセーブするだけ。

<img width="896" alt="Screen Shot 2017-10-29 at 2.33.41 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/fb3c4d35-ea2d-22ff-bd36-4acc31daf64d.png">

_NOTE:_ ちなみにここで、reply url が `..../.auth/login/aad/callback` になっているが、これはこれで良い。ちなみに facebook 専用の reply url は `..../.auth/login/facebook/callback` だが、今回は専用ではないので、この reply url ではない。

* [How to configure your App Service application to use Facebook login](https://docs.microsoft.com/en-us/azure/app-service/app-service-mobile-how-to-configure-facebook-authentication)

<img width="584" alt="Screen Shot 2017-10-29 at 2.19.16 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/059fcccb-f0e3-2fdb-8a69-bd2cddc0b357.png">

# Azure Functions の設定

設定は変更する必要はない。紛らわしいのが プロバイダとして、Facebook という項目があることで、Action to take when request is not authenticated のところでも、Log in with Facebook というのが選べるが、ここは、Active Directory のままで良い。私は間違えて、Facebook もコンフィグしているが使われていない。
　Facebook というのは、Facebook の単独認証のことで、今回は、新しいユーザを作っても、Facebook から情報をもらって、AD にユーザ登録をする。だからAD の認証なのだ。上にややこしい注意書きが出ているが無視して良い。そもそもここに書いてあることは Functions では設定できない。

<img width="577" alt="Screen Shot 2017-10-29 at 2.38.23 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/f157a93e-1eee-e012-3c1d-39f28ecda3ee.png">


# 悲惨なる結果

実はこの設定は完璧なのだが、私がトライすると、悲惨なことになった。Facebookの認証のページも出てくるのだが、最終的につぎのようになメッセージが帰ってきた。B2C, Facebookのアクティビティログにも特に何も出ていない。インターネットをみても、それらしい情報もない。

> You do not have permission to view this directory or page.

正直、１日ぐらい悩んで、今わかった。なぜわかったかというと、Azure Functions には、Kudo という仕組みがあり、中身がみれる。

<img width="1154" alt="Screen Shot 2017-10-29 at 2.44.42 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/46626a5e-3932-cbcd-19b0-8c53d7b68177.png">

散々色々設定を試してダメだった挙句、ふと思いついてここをみると

```
2017-10-28T15:58:05  PID[14244] Error       An error of type 'server_error' occurred during the login process: 'AADB2C90243: The IDP's client key/secret is not properly configured.
Correlation ID: 3a08ed5b-ed71-4763-94a0-2b9e0771474a
Timestamp: 2017-10-28 15:58:05Z
'
2017-10-28T15:58:48  PID[14244] Error       An error of type 'server_error' occurred during the login process: 'AADB2C90243%3a+The+IDP%27s+client+key%2fsecret+is+not+properly+configured.%0d%0aCorrelation+ID%3a+4fadd580-fa82-49be-8c79-16265b84e22d%0d%0aTimestamp%3a+2017-10-28+15%3a58%3a48Z%0d%0a'

```

な、なんだと、IDP's client key/secret が間違っているだと、、、俺は確かに、Facebook Application のページからコピー＆ペーストしたはず、、、もう一度、、、

原因がわかった。なんと、私は、OneNote にコピペしたのだが、その時に先頭が大文字になっていた orz。こんな単純なことが原因だったとは、、、orz

<img width="1333" alt="Screen Shot 2017-10-29 at 12.32.57 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/3277c5ea-2143-cba5-ebdc-0acd2c8f602d.png">

そして、ついに、エラーが出ずここに来た！

<img width="1315" alt="Screen Shot 2017-10-29 at 2.49.20 AM.png" src="https://qiita-image-store.s3.amazonaws.com/0/3470/3e191759-8d5a-4c1a-82a9-6ff02f1337eb.png">


# まとめ

B2C は結局むっちゃくちゃ簡単に設定できたのだった。ただ一点間抜けにもパスワードの先頭が大文字になっていたことをのぞいて、、、いけてるエンジニアになるときは、ロジカルに考えよう。まずログを見よう。話はそれからだ。

よし、これで、Facebook まで組み込めた。明日は、多要素認証を決めて終わりだ！

* [How to configure your App Service application to use Azure Active Directory login](https://docs.microsoft.com/en-us/azure/app-service/app-service-mobile-how-to-configure-active-directory-authentication)