Microsoft Authenticatorを使った多要素認証をしたい、という話があったので、色々調べていたところ、Microsoftアカウントでログインできそうだったので試してみました。
本来はAuthenticatorの仕組みを使って多段階認証したいのだと思いますので、この内容は正直副産物です。
手順
1.Bubble側アプリを作る
まずは、以下のプラグインをインストールします。
bubble plugin
ログインページにログインボタンを配置します。
ソーシャルログインはアカウントがなければ作成し、あればログインになるのでボタンは1つでだいじょうぶです。
ワークフローは簡単で、Signup/login with a Socail Networkで、OAuth providerにOutlookを選択します。
ログイン後はmypageに飛ばしています。
マイページを作成します。
ログインしていることを確認するため、User.emailを表示します。
Azure Active Directoryの設定
MicrosoftアカウントでAzure Active Direcrotyがあることが前提です。
Microsoft 365を契約していれば、多要素認証を入れなければ無料で設定できるようです。
アプリを登録する
Microsoft 365管理センターから、Azure Active Directoryを開きます。
概要ページ「追加」から「アプリの登録」を選択します。
アプリケーションの登録で、アプリの表示名を決め、アカウントの種類は用途に合うものを選択して登録します。
テストだけなら自分の組織内にしておいた方が安全です。
クライアントシークレットを作成
登録したアプリの概要を開き、「クライアントの資格情報」から証明書またはシークレットの追加をクリックします。
新しいクライアントシークレット をクリックし、クライアントシークレットの説明は適当に入力します。
テストなので有効期限は特に変えず、追加します。
bubbleプラグインの設定
①クライアントシークレットの値、②アプリケーションIDをそれぞれBubbleのプラグイン画面に入力します。
リダイレクトURIを設定する
Azureの画面で、アプリにリダイレクトURIを追加するをクリックします。
プラットフォームを追加をクリックし、Webを選択します。
Webの構成で、リダイレクトURIにbubbleのプラグイン画面のURlを登録します。
開発バージョンでも動くように、/version-test/のURIも追加しておきます。
以上で設定は完了です。
ログインしてみる
さて、画面をPreviewしてログインボタンをクリックしてみましょう。
マイページに遷移して、Microsoftアカウントのメールアドレス（ID）が表示されれば成功です。
多要素認証を利用するには、Active Directory側での設定が必要です。
詳しくは以下をご確認の上、設定してください。
チュートリアル:Azure AD Multi-Factor Authentication を使用してユーザーのサインイン イベントのセキュリティを確保する
Microsoft
参考
How to Set up the Outlook Plugin in Your Bubble App
Coaching No Code Apps
