Auth0の2要素認証でTwilio連携してSMSを使用する

2020.03.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Auth0は、MFAを実装するためにSMSが使用できます。

ログイン情報を入力後、ユーザーが所有しているデバイスにSMSを介してコードが送信され、 そのコードを入力してログイントランザクションが完了します。

今回は実際にSMSを使用したMFAを実装したいと思います。

注意点として、Auth0のフリープランだった場合、SMSのコードが100個までしか発行できません。 この制限を解除するには、Twilioと連携する必要があります。 その他のプランでもSMSを利用するにはTwilioとの連携が必要です。 そして、地理的な地域のアクセス許可を有効にする必要があります。

Twilioの設定方法も含め試していきたいと思います。

Twilioアカウントの作成

https://www.twilio.com/ja/にアクセスし、左上の方にある無料サインアップをクリックします。

入力フォームで必要な情報を入力し、アカウントを作成します。

メールアドレスの確認を行うためのリンクが登録したメールアドレスに送られてくるので、そのリンクをクリックします。 クリックすると以下のような画面に遷移します・

自身が持つ電話番号を入力しすると確認コードが送られてくるので、そのコードを入力すれば完了です。

ログインが完了しているはずなので、 Auth0で必要な TwilioアカウントSIDTwilio認証トークン を取得します。

https://jp.twilio.com/consoleにアクセスしましょう。

アカウントSIDAUTHTOKENというのが表示されているので、それぞれコピーして控えておきます。

TwilioでMessaging Servicesの作成と設定

https://www.twilio.com/console/sms/servicesに遷移し、Messaging Servicesを作成します。

FRIENDLY NAMEに任意の値を入力し、USE CASEには2 Factor Authenticationを選択します。

電話番号の購入

電話番号を購入します。

現在、Twilioでは日本の電話番号でSMS送信をできないみたいです。 Twilioの国際電話番号の利用可能性とその機能 のページを参照し、SMSが利用可能で国内 SMSのみがNOとなっている国を選択します。 今回はアメリカにします。

CountryUnited States, 機能SMSとして検索すると、以下のように購入できる電話番号が表示されます。

電話番号を選択し、購入ボタンを押せば購入完了となります。

Messaging Servicesに電話番号を追加

コンソール(SMS < Messaging Services < [YOUR_Messaging_Service] < Numbers)で先ほど購入した電話番号でSMSを送信するように設定します。

Add an Existing Numberをクリックし、購入した電話番号にチェックを入れて追加します。

Messaging ServicesにAlpha Sender ID を追加

コンソール(SMS < Messaging Services < [YOUR_Messaging_Service] < Features)でAlpha Sender IDを追加します。

Alpha Sender IDでSMSを送信すると、ユーザーはそのIDで受信するのでメッセージの識別がしやすくなります。

ただし、日本は現在デフォルトでサポートされておらず、番号の事前登録、限定販売 - 営業担当者に相談 が必要です。

Alpha Sender IDの国際サポート

地理的な地域のアクセス許可の設定

コンソールのMessaging Geographic Permissions設定画面で、 japanにチェックを入れておきます。

ここまでで

  • Twilioアカウントの作成
  • 電話番号の購入
  • Messaging Servicesの作成
  • Messaging Servicesに電話番号の追加
  • Messaging ServicesにAlpha Sender IDの追加
  • 地理的な地域のアクセス許可の設定

を行いました。これでSMSを送れるようにするTwilioの設定が完了です。

Auth0での設定

ダッシュボード -> Multifactor Auth にアクセスし、Always require Multi-factor Authenticationのトグルをオンにします。

※ 常にMFAを有効にするという設定です。Rulesを使えばアプリケーション毎にMFA要素をオンオフできますが、今回は割愛します。

次に、SMSのボックスをクリックします。

SMSの設定画面がオープンするので入力していきます。

  • Twilio SID
    • Twilioのコンソールに表示されているアカウントSID
  • Twilio AuthToken
    • Twilioのコンソールに表示されているAUTHTOKEN
  • SMS Source
    • Use Copilot
    • Use From
      • From電話番号を使用して送信する
  • Copilot SID
    • SMS SourceでUse Copilotを選択した場合に入力
    • 作成したMessaging ServicesのSERVICE SID
  • From
    • SMS SourceでUse Fromを選択した場合に電話番号を入力。今回はこちらを使用します。
  • Enrollment Template
    • デバイスの登録中にAuth0によって送信されるメッセージ
    • 例: あなたの認証コードは{{code}}です。このコードを入力して、登録を確認してください
  • Verification Template
    • デバイスの所持を検証するためにAuth0によって送信されるメッセージ
    • 例: あなたの認証コード: {{code}}

SAVEボタンを押してAuth0の設定は完了です。

サンプルアプリケーションでSMSを試してみる

設定が終わったのでサンプルアプリケーションを使って試してみましょう。

Auth0が提供しているサンプルを使用します。今回は、

https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login を使います。

※ インストール方法やアプリの起動は上記レポジトリのREADMEを参照してください。

アプリを起動し、ログインのリンクをクリックすると以下のようにログインフォームが現れます。

メールアドレスとパスワードを入力し、アカウントの認証が終わると電話番号を入力する画面に遷移します。

自分の持つ端末の電話番号を入力し送信してください。

コードを入力する画面に遷移するので、電話番号に送られてきたコードを入力すればログインが完了となります。

TwilioのProgrammable SMS Dashboardにアクセスすると、 成功したか、失敗したかなどのSMSのイベントを確認できます。

最後に注意点の確認

Auth0からTwilioを使用してSMS送信する時の注意点

  • 国外に送信する場合は国内SMSのみがNoになっている国の電話番号を取得する
  • 日本の電話番号にAlpha Sender IDを使ってSMSを送信する場合は番号の事前登録、限定販売 - 営業担当者に相談 が必要
  • 地理的な地域のアクセス許可の設定で日本が許可されていることを確認する