Azure Active DirectoryでTwitterにシングルサインオンしてみる。

Azure Active Directoryネタです。

今回はAzure Active DirectoryでTwitterにシングルサインオンをしてみます。

通常、Twitterやfacebookなどサービスにシングルサインオンというと

これらのWebサービスをIdP(OP)としてOAuth、OpenID Connectによる認証連携をイメージしますが

Azure Active Directoryの場合は、AzureAD自体がIdPになり

TwitterなどのWebサービスがSPとなるような構成になります。

1. TwitterのギャラリーアプリをAADに追加

まずは対象のDirectoryを選択

アプリケーションを選択して、追加をクリック

今回はギャラリーからアプリを追加

Twitterのアプリケーションを選択

追加するとこんな画面が表示される

シングルサインオンの構成をクリックしてパスワードシングルサインオンになっていることを確認

2. ユーザの割り当てを実行

Twitterのギャラリーアプリ設定画面から、「ユーザの割り当て」を選択してユーザ一覧にアクセスし

対象のAzureADユーザに対して割り当てを行う。

割り当てでは「ユーザの代わりにTwitter資格情報を入力する」にチェックを付けて

紐付けるTwitterのユーザ名／パスワードを入力する。

これで、AzureAD側の設定は完了です。

3. アクセスパネルからシングルサインオンを行う

https://myapps.microsoft.comにアクセスしてAzureADユーザでログインを行うと

以下のようにシングルサインオン用のパネルが表示されます。

複数のディレクトリに属すAzureADユーザの場合は右上のメニューからディレクトリを選択することが可能。

また、各ブラウザのAzureAD用のプラグインがインストールされていない場合は

パネルをクリックするとプラグインのインストール画面に遷移します。

AzureADのシングルサインオンの仕様上、プラグインをインストールしないと認証連携が動作しません。

インストール後にTwitterのアクセスパネルをクリックすると

一瞬Twitterのログイン画面が表示されて、AzureADに保持しているクレデンシャルと

プラグインのDOM操作によって自動ログインが行われます。

 

ChromeExtensionだと、以下のスクリプトがAzureADから発行されて

クライアントのChromeExtensionで当スクリプトを実行することで自動ログインを実装しているっぽいです。

function setResult(state, message){
    var element = document.createElement('input');
    element.type = 'hidden';    
    element.id = 'waad_signinext_result';
    element.value = message;
    document.body.appendChild(element);

    try{
        var isChrome = window.chrome;
        if(isChrome){
            var res = JSON.stringify({ state: state, message: message });            
            chrome.extension.sendMessage({ loginResult: res }, function (response){});                        
        }
    }
    catch(err){}
}
            
function doFormFill(){
    try{
        var param_userName = document.getElementById('signin-email');
        if (!param_userName) throw "Input element 'signin-email' not found";
        param_userName.value = 'test@example.com';

        var param_password = document.getElementById('signin-password');
        if (!param_password) throw "Input element 'signin-password' not found";
        param_password.value = 'hogefuga';


        var signin =  document.querySelector('.primary-btn'); 
        if (!signin) throw "Input element 'primary-btn' not found"; 
        signin.click();

        setResult('success', 'all elements found');                
    }
    catch(err){
        setResult('error',err);            
        throw err;
    }
}

doFormFill();

HTTP通信やコードから全てを追ったわけではないので推測になりますが

おそらくは、AzureADからクレデンシャル付きの各アプリ固有のJSが送られてきて、

それをSessionStorageに保存して、各プラグインがSessionStorageに格納されたJSを

evalで実行するといった流れだと思われます。

 

ギャラリーアプリはTwitter以外にもfacebookやAWS(コンソール)、Salesforceにも対応しています。

SalesforceはSAMLだけじゃなくて今回の無理矢理（？）自動ログインの方法にも対応しています。

 

印象としてセキュリティポリシー云々でエンタープライズ領域で良いかどうかはわかんないけど

個人的に利用する分には便利だなーって感じです。

ただ、個人的に利用するんだったらLastPassみたいなパスワード管理サービスでも良いような気がしますが…。

おそらくLastPassもAzureADと同じような仕組みで自動ログインしているものと思われます。