Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

Azure Functions を 使うときに認証をかけたい場合があるだろう。今回は、つぎの3つのテーマを達成するために少しづつやってみよう。

Screen Shot 2017-10-27 at 10.36.15 PM.png

  • Azure Functions と、Azure Active Directory B2c を連携させてユーザ認証する
  • Facebook と連携してアカウントを作れるようにする
  • 多要素認証を有効にする
  • RBAC

まずは今回は最初の一つ目からやってみたい。

1. Azure Active Directory B2C を作成する

Azure Active Directory B2C はクラウドのID マネジメントシステムで、一般ユーザ向けに認証認可の管理や、多くの、SNSとの連携 (Facebook, Google 等) 多要素認証など、コンシューマ向けのID管理で必要なことは一通りできる様子。さて、これをServerless の基盤と合わせて設定するとどれぐらいでできるだろうか?

1.1. Azure Active Directory B2C とテナントと作成する

最初に、Azure Active Directory B2C を作成する。普通にポータルから作れる。するとつぎのような選択が出て来るので、Create a new Azure AD B2C Tenant を選ぶ。これを選ぶと、テナントが作られる。

Screen Shot 2017-10-27 at 10.37.57 PM.png

なぜかJapan がないので、US にしておくが、つぎのような画面が出て来るので、情報を入れて、Create を押すと、テナントと、Azure Active Directory B2C が出来上がる。

Screen Shot 2017-10-27 at 10.38.40 PM.png

ところが、これだけだと、サブスクリプションが紐づいてないので、何もできない。紐付けよう

Screen Shot 2017-10-27 at 10.45.35 PM.png

1.2. B2C とサブスクリプションを紐付ける

これで、サブスクリプションとの紐付けができた。リソースグループに、B2C ができているので、それをクリックして、こちらをクリック

Screen Shot 2017-10-27 at 10.47.14 PM.png

2. アプリケーションを作成する

認証をかけてリソースを守る対象を「アプリケーション」として登録する。

2.1. Azure Function を作成する

適当に Http Trigger の Function を作成してみよう。

Screen Shot 2017-10-27 at 10.54.33 PM.png

URL が取得できる。

2.2. アプリケーションを登録する

この 保護する対象のアプリケーションを B2C に登録しよう。

Screen Shot 2017-10-27 at 10.50.23 PM.png

Add ボタンをクリックしてアプリを登録

アプリを登録するときのポイントは一つだけで、Reply URL に保護対象のFunction App のURL + .auth/login/aad/callback というURLにする。これは、AD側で認証してもらった後に、Azure Functions 側に戻って来るときのURLだ。ここで、ADからのトークンを受け取って、ユーザを登録したり認証したりする。

Screen Shot 2017-10-27 at 10.57.58 PM.png

アプリができると、IDが振られる

Screen Shot 2017-10-27 at 10.58.51 PM.png

ただ、これだけだと、まだ何もできない。

3. Sign up or Sign in Policy を設定する

まずは追加ボタン

Screen Shot 2017-10-27 at 11.03.01 PM.png

今回は、一般ユーザをe-mail/passowrd で認証するので、Local 認証というのを選ぶ

Screen Shot 2017-10-27 at 11.05.02 PM.png

Select sign-up attributes はサインアップするときに必要な項目を定義する。もちろんe-mail (password はカウントしない)だけでやりたいので、e-mail のみ選択。

Screen Shot 2017-10-27 at 11.05.25 PM.png

Select Application Claim は、認証後にアプリにどういう情報を渡すか?という設定。いろんな値が渡せる。基本的にリクエストヘッダーから取得できる様子。

Screen Shot 2017-10-27 at 11.05.44 PM.png

最終的に、この画面になるので、Create を押すとポリシーができる。

Screen Shot 2017-10-27 at 11.06.43 PM.png

3. Azure Function の設定

Authentication / Authorization をクリック

Screen Shot 2017-10-27 at 11.15.00 PM.png

設定画面が出て来るので、App Service AuthenticationOn にして、Action to take when request is not authenticated をLog in with Active Directory に設定し、Azure Active Directory をクリック

Screen Shot 2017-10-27 at 11.17.05 PM.png

設定に行く前に、先ほど設定したSign up or Sign in Policy を開いてみるとつぎのような画面になっている。赤で囲んだところをコピーしておく。よくみると、Application で設定した値が設定されているのがわかるだろう。

Screen Shot 2017-10-27 at 11.18.47 PM.png

そして、先ほどの、AD の設定画面に戻る。

Client ID に Application を作成したら取得できた Application ID をセットする。Issuer Url には、先ほど Sign up or Sign in Policy で取得したURLを貼っておく。これは、AD B2C とテナントの発行者のURL。

Screen Shot 2017-10-27 at 11.20.31 PM.png

これで設定OK!しっかりセーブしておこう

Screen Shot 2017-10-27 at 11.20.55 PM.png

  1. 動作確認

Sign up or Sign in Policyをサイド開けてみよう。よくみると、Run now というボタンがある。実はこれで設定を試せる。押してみよう。

Screen Shot 2017-10-27 at 11.31.42 PM.png

できてるっぽい

Screen Shot 2017-10-27 at 11.33.37 PM.png

せっかくなので、さっき作ってみた Azure Functions をテストしてみる。テスト実行してみると、しっかり、401 の認証エラーになる。さて、最後のテスト

Screen Shot 2017-10-27 at 11.35.17 PM.png

Azure Functions のURLを入れてブラウザを叩く。Sign up/in 画面きたー!アカウントないから、サインアップする。

Screen Shot 2017-10-27 at 11.36.33 PM.png

ちゃんと、e-mail が本当にあるか確認してくれる。そしてセーブ。

Screen Shot 2017-10-27 at 11.37.07 PM.png

認証されて動いた!!!

Screen Shot 2017-10-27 at 11.38.27 PM.png

そして、AD B2C の方には新しいユーザが登録されている。

Screen Shot 2017-10-27 at 11.39.11 PM.png

終わりに

次回は、Facebook 認証と多要素認証について書いてみたい!これは楽チンだわ。

TsuyoshiUshio@github
プログラマ。自分の学習用のブログです。内容は会社とは一切関係ありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away