シングル サインオン (SSO) のクイック スタート

  • [アーティクル]

この記事では、Office アドイン用 Yeoman ジェネレーターを使用して、シングル サインオン (SSO) を使用する Excel、Outlook、Word、または PowerPoint 用の Office アドインを作成します。

注:

Office アドイン用 Yeoman ジェネレーターによって提供される SSO テンプレートは localhost でのみ実行され、展開できません。 運用目的で SSO を使用して新しい Office アドインを構築する場合は、「 シングル サインオンを使用する Node.js Office アドインを作成する」の手順に従います。

前提条件

  • Node.js (最新 LTS バージョン)。

  • 最新バージョンの Yeoman と Office アドイン用の Yeoman ジェネレーター。これらのツールをグローバルにインストールするには、コマンド プロンプトから次のコマンドを実行します。

    npm install -g yo generator-office

    注:

    Yeomanのジェネレーターを過去に取付けている場合でも、npmからのパッケージを最新のバージョンにすることをお勧めします。

  • Mac を使用していて Azure CLI がコンピューターにインストールされていない場合は、Homebrew をインストールする必要があります。 このクイック スタート中に実行する SSO 構成スクリプトは、Homebrew を使用して Azure CLI をインストールした後、Azure CLI を使用して Azure の SSO を構成します。

アドイン プロジェクトの作成

ヒント

Yeoman ジェネレーターは、スクリプトの種類が JavaScript または TypeScript の Excel、Outlook、Word、または PowerPoint 用の SSO 対応 Office アドインを作成できます。 次の手順では、JavaScript と Excel を指定しますが、使用しているシナリオに最適なスクリプト タイプと Office クライアント アプリケーションを選択する必要があります。

次のコマンドを実行し、Yeoman ジェネレーターを使用してアドイン プロジェクトを作成します。 プロジェクトを含むフォルダーが現在のディレクトリに追加されます。

yo office

注:

yo officeコマンドを実行すると、Yeoman のデータ収集ポリシーと Office アドイン CLI ツールに関するプロンプトが表示される場合があります。 提供された情報を使用して、必要に応じてプロンプトに応答します。

プロンプトが表示されたら、以下の情報を入力してアドイン プロジェクトを作成します。

  • プロジェクトの種類を選択します。Office Add-in Task Pane project supporting single sign-on (localhost)
  • スクリプトの種類を選択します。JavaScript
  • アドインに何の名前を付けたいですか?My Office Add-in
  • Which Office client application would you like to support?: (どの Office クライアント アプリケーションをサポートしますか) 、、Outlook、Wordまたは を選択ExcelしますPowerpoint。

コマンド ライン インターフェイスでの Yeoman ジェネレーターのプロンプトと回答。

ウィザードを完了すると、ジェネレーターによってプロジェクトが作成されて、サポートしているノード コンポーネントがインストールされます。

注:

バージョン 20.0.0 以降 Node.js 使用している場合は、ジェネレーターがインストールを実行するときに、サポートされていないエンジンがあることを示す警告が表示されることがあります。 この問題の修正に取り組んでいます。 その間、警告は生成するジェネレーターまたはプロジェクトに影響しないため、無視できます。

ヒント

アドイン プロジェクトの作成後に Yeoman ジェネレーターが提供する次の手順ガイダンスは無視できます。 この記事中の詳しい手順は、このチュートリアルを完了するために必要なすべてのガイダンスを提供します。

プロジェクトを確認する

Yeoman ジェネレーターで作成したアドイン プロジェクトには、SSO が有効な作業ウィンドウ アドインのコードが含まれています。

構成

次のファイルは、アドインの構成設定を指定します。

  • プロジェクトのルート ディレクトリにある./manifest.xmlファイルで、アドインの機能と設定を定義します。

  • ./.ENV ファイルはプロジェクトのルート ディレクトリにあり、アドイン プロジェクトで使用される定数を定義します。

作業ウィンドウ

次のファイルは、アドインの作業ウィンドウ UI と機能を定義します。

  • ./src/taskpane/taskpane.htmlファイルには、作業ペイン用のHTMLマークアップが含まれています。

  • ./src/taskpane/taskpane.cssファイルには、作業ペインのコンテンツに適用されるCSSが含まれています。

  • ./src/taskpane/taskpane.js ファイルには、アドインを初期化するコードと、Office JavaScript API ライブラリを使用して Microsoft Graph のデータを Office ドキュメントに追加するコードも含まれています。

認証

次のファイルは、SSO 処理のサポートを行い、Office ドキュメントにデータを書き込みます。

  • JavaScript プロジェクトの ./src/helpers/documentHelper.js ファイルには、現在の Office ドキュメントに挿入するためのユーザーのプロファイル情報をカプセル化するコードが含まれています。 TypeScript プロジェクトにはそのようなファイルはありません。 代わりに、プロファイル情報を収集するコードは 、./src/taskpane/taskpane.ts ファイル内のインラインです。

  • ./src/helpers/fallbackauthdialog.html ファイルは、フォールバック認証戦略の JavaScript をロードする UI のないページです。 <script> JavaScript を読み込むタグは、Webpack.config.js 実行時にファイルに挿入されます。

  • ./src/helpers/fallbackauthdialog.js ファイルには、msal.js でユーザーにサインオンするフォールバック認証用の JavaScript が含まれています。

  • ./src/helpers/message-helper.js ファイルには、ユーザーに対するエラー メッセージを表示または非表示にする JavaScript が含まれています。

  • ./src/helpers/middle-tier-calls.js ファイルには、データをフェッチするために Web API を呼び出す JavaScript が含まれています。

  • ./src/helpers/sso-helper.js ファイルには、SSO API への JavaScript 呼び出しが含まれており、getAccessTokenアクセス トークンを受け取り、データの Microsoft Graph の呼び出しに含まれます。 エラーが発生した場合、または SSO 認証がサポートされていないシナリオでは、フォールバック戦略が呼び出されます。

SSO を構成する

アドイン プロジェクトが作成され、SSO プロセスを容易にするために必要なコードが含まれるので、次の手順を実行してアドインの SSO を構成します。

  1. プロジェクトのルート フォルダーに移動します。

    cd "My Office Add-in"

  2. 次のコマンドを実行して、アドインの SSO を構成します。

    npm run configure-sso

    警告

    このコマンドは、テナントが 2 要素認証を要求するように構成されている場合、失敗します。 このシナリオでは、 シングル サインオンを使用する Node.js Office アドインの作成 に関するチュートリアルのすべての手順に従って、Azure アプリの登録と SSO 構成の手順を手動で完了する必要があります。

  3. Web ブラウザー ウィンドウが開き、Azure にサインインするように指示されます。 Microsoft 365 管理者の資格情報を使用して Azure にサインインします。 これらの資格情報を使用して Azure に新しいアプリケーションが登録され、SSO に必要な設定が構成されます。

    注:

    この手順で、管理者以外の資格情報を使用して Azure にサインインした場合、configure-sso スクリプトは、組織内のユーザーにアドインの管理者の同意を提供しません。 そのため、SSO はアドインのユーザーは使用できず、サインインするように求められます。

  4. 資格情報を入力したら、ブラウザー ウィンドウを閉じ、コマンド プロンプトに戻ります。 SSO の構成プロセスが続行されると、コンソールに書き込まれたステータス メッセージが表示されます。 コンソール メッセージで説明されているように、Yeoman ジェネレーターが作成したアドイン プロジェクト内のファイルは、SSO プロセスで必要なデータで自動的に更新されます。

アドインをテストする

Excel、Word、または PowerPoint アドインを作成した場合は、次のセクションの手順を実行して試してください。 Outlook アドインを作成した場合は、代わりに Outlook セクションの 手順を完了します。

Excel、Word、および PowerPoint

Excel、Word、または PowerPoint アドインをテストするには、次の手順を実行します。

  1. SSO の構成プロセスが完了したら、次のコマンドを実行してプロジェクトを構築し、ローカル Web サーバーを起動して以前に選択した Office クライアント アプリケーションにアドインをサイドロードします。

    注:

    Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。 次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。 変更を行うには、管理者としてコマンド プロンプトまたはターミナルを実行する必要がある場合もあります。

    npm start

  2. 前のコマンドを実行するときに Excel、Word、または PowerPoint が開いたら、前のセクションの手順 3 で SSO を構成するときに Azure に接続するために使用した Microsoft 365 管理者アカウントと同じ Microsoft 365 organizationのメンバーであるユーザー アカウントでサインインしていることを確認します。 これにより、SSO を正常に実行するための適切な条件が確立されます。

  3. Office クライアント アプリケーションで、[ ホーム ] タブを選択し、[ タスクウィンドウの表示 ] を選択してアドイン作業ウィンドウを開きます。

    Excel アドイン ボタン。

  4. 作業ウィンドウの下部にある [マイ ユーザー プロファイルの情報を取得する] ボタンを選択して、SSO プロセスを開始します。

  5. アドインの代わりにアクセス許可を要求するダイアログ ウィンドウが表示される場合は、SSO はシナリオでサポートされず、代わりにアドインが別のユーザー認証方法に戻っていることを意味します。 これは、テナント管理者がアドインに Microsoft Graph にアクセスするための同意を付与していない場合、またはユーザーが有効な Microsoft アカウントまたは Microsoft 365 Education または Work アカウントで Office にサインインしていない場合に発生する可能性があります。 [ Accept]\(同意\) を選択して続行します。

    [同意] ボタンが強調表示された [アクセス許可が要求されました] ダイアログ。

    注:

    ユーザーがこのアクセス許可の要求を受け入れると、今後再びプロンプトが表示されることはありません。

  6. アドインは、サインインしたユーザーのプロファイル情報を取得し、ドキュメントに書き込みます。 次の画像は、Excel ワークシートに書き込まれたプロファイル情報の例を示します。

    Excel ワークシートのユーザー プロファイル情報。

Outlook

Outlook アドインを試すには、次の手順を実行します。

  1. SSO 構成プロセスが完了したら、次のコマンドを実行してプロジェクトを構築し、ローカル Web サーバーを起動します。

    注:

    Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。 次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。 変更を行うには、管理者としてコマンド プロンプトまたはターミナルを実行する必要がある場合もあります。

    npm start

  2. 「テスト用に Outlook アドインをサイドロードする」の手順に従って Outlook アドインをサイドロードします。 前のセクションの手順 3 で SSO を構成している間に Azure の接続に使用した Microsoft 365 管理者アカウントと同じ Microsoft 365 組織のメンバーであるユーザーで Outlook にサインインしている必要があります。 これにより、SSO を正常に実行するための適切な条件が確立されます。

  3. Outlook で新しいメッセージを作成します。

  4. メッセージ作成ウィンドウで、[ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。

    Outlook の [メッセージの作成] ウィンドウで強調表示されているアドイン リボン ボタン。

  5. 作業ウィンドウの下部にある [マイ ユーザー プロファイルの情報を取得する] ボタンを選択して、SSO プロセスを開始します。

  6. アドインの代わりにアクセス許可を要求するダイアログ ウィンドウが表示される場合は、SSO はシナリオでサポートされず、代わりにアドインが別のユーザー認証方法に戻っていることを意味します。 これは、テナント管理者がアドインに Microsoft Graph にアクセスするための同意を付与していない場合、またはユーザーが有効な Microsoft アカウントまたは Microsoft 365 Education または Work アカウントで Office にサインインしていない場合に発生する可能性があります。 [ Accept]\(同意\) を選択して続行します。

    [同意] ボタンが強調表示された [アクセス許可が要求されました] ダイアログ。

    注:

    ユーザーがこのアクセス許可の要求を受け入れると、今後再びプロンプトが表示されることはありません。

  7. アドインは、サインインしたユーザーのプロファイル情報を取得し、メール メッセージの本文に書き込みます。

    Outlook の [メッセージの作成] ウィンドウのユーザー プロファイル情報。

次の手順

おめでとうございます。可能な場合 SSO を使用し、SSO がサポートされていない場合は別のユーザー認証方法を使用する作業ウィンドウ アドインを正常に作成しました。 アドインをカスタマイズして異なる権限を必要とする新しい機能を追加する方法については、「Node.js SSO が有効なアドインのカスタマイズする」をご覧ください。

トラブルシューティング

関連項目