kintoneとOutlookを連携してスケジュール管理をする#02 #JavaScript

経緯

kintoneのOutlookを連携してスケジュール管理をしたい。
けど検索して出てくる記事が古いため、アレンジしてなるべく最新のものに対応する。

要するに「Outlook連携 - kintoneからOutlookスケジュールを登録しよう！！」のOutlook連携をほぼサンプルのまま使っていたのだけど、先日急に動かなくなったので最新化対応したいということ。

やりたいこと

MSAL v2 に対応してkintoneとOutlookのスケジュールを連携させたい。
kintone UI Component v1 対応したUIを構築したい。
FullCalendar.js を導入してカレンダー表示させたい。

参考サンプル

こちらの２つのサンプルを参考にOutlook連携カスタマイズを行います。
1. Outlook連携 - kintoneからOutlookスケジュールを登録しよう！！
2. クイックスタート: PKCE 対応の承認コードフローを使用して JavaScript SPA 内でユーザーをサインインさせ、アクセストークンを取得する

今回（本記事）のゴール

AzureADで認証しサインインする。

記事一覧

AzureADの設定

「クイックスタート: PKCE 対応の承認コードフローを使用して JavaScript SPA 内でユーザーをサインインさせ、アクセストークンを取得する」の記事を見て環境を構築し、サンプルを実際に動かしてサインインできることを確認します。

認証の設定でプラットフォームは「シングルページアプリケーション」でリダイレクトURIを設定します。
サンプルを動かして認証を確認するのであれば「 http://localhost:3000/ 」が設定されていれば大丈夫です。
kintoneに実装する際は、アプリのURLを追加で設定します。

MSAL v2 では暗黙的な許可を使用しないので、チェックはしないでください。
※MSAL v1 では両方にチェックを入れます。

サンプルを動かし、サインインボタンを押してサインインできれば環境構築はOKです。
サンプルはAzureADのクイックスタートから入手すると諸々設定済みなので確認が簡単です。

サインイン処理を実装する

Microsoftのサンプルをそのまま動くように実装します。

javascript

https://unpkg.com/kintone-ui-component/umd/kuc.min.js
https://js.cybozu.com/jquery/3.3.1/jquery.min.js
https://alcdn.msauth.net/browser/2.13.1/js/msal-browser.js ← ★追加
authConfig.js ← ★追加
authPopup.js ← ★追加
buttonSettings.js
ui.js

css

buttons.css

ボタンに処理を登録

サインインボタン作成時にボタン押下時の処理を登録します。
実行する処理は authPopup.js の signIn() です。

ui.js

// ボタンの表示情報を取得
let BS = window.buttonSettings;

// カスタマイズのメイン処理
let uiService = {
    setting: {
        lang: {},
        i18n: {},
        ui: {}
    },
    data: {
        ui: {},
    },

    // 初期処理
    init: function () {
        // ログインユーザーの言語設定を取得
        this.setting.lang = kintone.getLoginUser().language || 'ja';
        this.setting.i18n = this.setting.lang in BS.lang ? BS.lang[this.setting.lang] : BS.lang.en;
        this.setting.ui = BS.setting.ui;
    },

    // ボタン表示設定
    uiNotSignCreateForIndex: function (kintoneHeaderSpace) {
        if (typeof kintoneHeaderSpace === 'undefined') {
            return;
        }

        // サインイン前のボタン表示
        this.data.ui.HeaderNotSigned = document.createElement('div');
        // ボタンを作成
        this.data.ui.btnSignIn = this.createButton(this.setting.ui.buttons.signIn, this.setting.i18n.button);
        // サインインボタン押下時の処理を登録
        this.data.ui.btnSignIn.addEventListener('click', function (event) {
            authPopupService.signIn();
        });
        // ボタンを表示用に格納
        this.data.ui.HeaderNotSigned.appendChild(this.data.ui.btnSignIn);
        kintoneHeaderSpace.appendChild(this.data.ui.HeaderNotSigned);
    },

    // ボタンを作成
    createButton: function (setting, lang) {
        if (typeof setting === 'undefined' || !setting) {
            return null;
        }

        let uiButton;
        let text = lang ? lang[setting.text] || setting.text || '' : setting.text || '';
        let type = setting.type;
        let className = setting.className ? setting.className : '';

        uiButton = new Kuc.Button({ text: text, type: type, className: className });
        return uiButton;
    },
};

// 画面表示時イベント
kintone.events.on('app.record.index.show', function (event) {
    // 初期処理
    uiService.init();
    // サインインボタン表示
    uiService.uiNotSignCreateForIndex(kintone.app.getHeaderSpaceElement());
});

認証プログラムの実装

Microsoftのサンプルをそのまま使います。
やることは認証情報を設定して loginPopup をしているだけです。
authConfig.js の redirectUri には実装するkintoneアプリのURLを設定してください。
※AzureADのリダイレクトURIにも同じURLを設定してください。

authConfig.js

const msalConfig = {
    auth: {
        clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        authority: "https://login.microsoftonline.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        redirectUri: "https://xxx.cybozu.com/k/xxx/",
    },
    cache: {
        cacheLocation: "sessionStorage",
        storeAuthStateInCookie: false,
    },
    system: {
        loggezrOptions: {   
            loggerCallback: (level, message, containsPii) => {  
                if (containsPii) {      
                    return;     
                }       
                switch (level) {        
                    case msal.LogLevel.Error:       
                        console.error(message);     
                        return;     
                    case msal.LogLevel.Info:        
                        console.info(message);      
                        return;     
                    case msal.LogLevel.Verbose:     
                        console.debug(message);     
                        return;     
                    case msal.LogLevel.Warning:     
                        console.warn(message);      
                        return;     
                }   
            }   
        }   
    }
};

const loginRequest = {
    scopes: ["User.Read"]
};

authPopup.js は基本そのままいいですが、ログインに成功したことを確認するためコンソールにメッセージを出力するよう追加しています。

authPopup.js

const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

let authPopupService = {
    // ログイン情報による制御
    selectAccount: function() {
        const currentAccounts = myMSALObj.getAllAccounts();
        if (currentAccounts.length === 0) {
            return;
        } else if (currentAccounts.length > 1) {
            console.warn("Multiple accounts detected.");
        } else if (currentAccounts.length === 1) {
            username = currentAccounts[0].username;
            console.log(username);
        }
    },

    //サインイン後の処理
    handleResponse: function(response) {
        if (response !== null) {
            username = response.account.username;
            // 認証の成功を確認
            console.log("succsess");
            console.log(username);
        } else {
            this.selectAccount();
        }
    },

    // サインイン
    signIn: function() {
        myMSALObj.loginPopup(loginRequest)
            .then(this.handleResponse)
            .catch(error => {
                console.error(error);
            });
    },
}

実装できたらボタンを押下して確認

kintone画面のボタンを押下するとログイン画面が表示されます。
ログインを行い、認証に成功するとコンソールにメッセージ（ログインユーザーのメールアドレス）が表示されることが確認できます。

認証まで成功すれば、あとはその後にやりたい処理を加えていくだけです。

次回

サインアウトとボタン表示制御