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

2025-05-16

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

注:

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 クライアントアプリケーションをサポートしますか) Excel、Outlook、Word、またはPowerpointを選択します。

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

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

プロジェクトを確認する

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

構成

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

プロジェクトのルートディレクトリにある ./manifest.xml または manifest.json ファイルは、アドインの設定と機能を定義します。
./.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 のないページです。 JavaScript を読み込む <script> タグは、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 を構成します。

プロジェクトのルートフォルダーに移動します。
```
cd "My Office Add-in"
```
次のコマンドを実行して、アドインの SSO を構成します。
```
npm run configure-sso
```
警告

このコマンドは、テナントが 2 要素認証を要求するように構成されている場合、失敗します。このシナリオでは、シングルサインオンを使用する Node.js Office アドインの作成に関するチュートリアルのすべての手順に従って、Azure アプリの登録と SSO 構成の手順を手動で完了する必要があります。
Web ブラウザーウィンドウが開き、Azure にサインインするように指示されます。 Microsoft 365 管理者の資格情報を使用して Azure にサインインします。これらの資格情報を使用して Azure に新しいアプリケーションが登録され、SSO に必要な設定が構成されます。

注:

この手順で、管理者以外の資格情報を使用して Azure にサインインした場合、configure-sso スクリプトは、組織内のユーザーにアドインの管理者の同意を提供しません。そのため、SSO はアドインのユーザーは使用できず、サインインするように求められます。
資格情報を入力したら、ブラウザーウィンドウを閉じ、コマンドプロンプトに戻ります。 SSO の構成プロセスが続行されると、コンソールに書き込まれたステータスメッセージが表示されます。コンソールメッセージで説明されているように、Yeoman ジェネレーターが作成したアドインプロジェクト内のファイルは、SSO プロセスで必要なデータで自動的に更新されます。

アドインをテストする

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

Excel、Word、および PowerPoint

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

SSO の構成プロセスが完了したら、次のコマンドを実行してプロジェクトを構築し、ローカル Web サーバーを起動して以前に選択した Office クライアントアプリケーションにアドインをサイドロードします。
注:
- Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
- 初めてコンピューターで Office アドインを開発する場合は、コマンドラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。メッセージが表示されたら、「 Y 」と入力して除外を許可します。除外を許可するには管理者特権が必要であることに注意してください。許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。
- Yeoman ジェネレーターを初めて使用して Office アドインを開発すると、既定のブラウザーでウィンドウが開き、Microsoft 365 アカウントにサインインするように求められます。サインインウィンドウが表示されない場合、サイドローディングまたはログインタイムアウトエラーが発生した場合は、 atk auth login m365を実行します。
```
npm start
```
前のコマンドを実行したときに Excel、Word、またはPowerPointが開いたら、前のセクションの手順 3 で SSO を構成するときに Azure に接続するために使用した Microsoft 365 管理者アカウントと同じ Microsoft 365 organizationのメンバーであるユーザーアカウントでサインインしていることを確認します。これにより、SSO を正常に実行するための適切な条件が確立されます。
Office クライアントアプリケーションで、[ ホーム ] タブを選択し、[ タスクウィンドウの表示 ] を選択してアドイン作業ウィンドウを開きます。
作業ウィンドウの下部にある [マイユーザープロファイルの情報を取得する] ボタンを選択して、SSO プロセスを開始します。
アドインの代わりにアクセス許可を要求するダイアログウィンドウが表示される場合は、SSO はシナリオでサポートされず、代わりにアドインが別のユーザー認証方法に戻っていることを意味します。これは、テナント管理者がアドインに Microsoft Graph にアクセスするための同意を付与していない場合、またはユーザーが有効な Microsoft アカウントまたは Microsoft 365 Education または Work アカウントで Office にサインインしていない場合に発生する可能性があります。 [ Accept]\(同意\) を選択して続行します。

注:

ユーザーがこのアクセス許可の要求を受け入れると、今後再びプロンプトが表示されることはありません。
アドインは、サインインしたユーザーのプロファイル情報を取得し、ドキュメントに書き込みます。次の画像は、Excel ワークシートに書き込まれたプロファイル情報の例を示します。
ローカル Web サーバーを停止してアドインをアンインストールする場合は、該当する手順に従います。
- サーバーを停止するには、次のコマンドを実行します。 npm startを使用した場合は、次のコマンドによってアドインもアンインストールされます。
```
npm stop
```
- アドインを手動でサイドロードした場合は、「サイドロードされたアドインを削除する」を参照してください。

Outlook

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

SSO 構成プロセスが完了したら、次のコマンドを実行してプロジェクトを構築し、ローカル Web サーバーを起動します。
注:
- Office アドインでは、開発中でも HTTP ではなく HTTPS を使用する必要があります。次のいずれかのコマンドを実行した後に証明書のインストールを求められた場合は、Yeoman ジェネレーターが提供する証明書をインストールするプロンプトに同意します。変更を行うには、管理者としてコマンドプロンプトまたはターミナルを実行する必要がある場合もあります。
- 初めてコンピューターで Office アドインを開発する場合は、コマンドラインで、Microsoft Edge WebView にループバックの除外を許可するように求められる場合があります (「Microsoft Edge WebView の localhost ループバックを許可する」)。メッセージが表示されたら、「 Y 」と入力して除外を許可します。除外を許可するには管理者特権が必要であることに注意してください。許可されたら、(マシンから除外を削除しない限り) 今後 Office アドインをサイドロードするときに、除外を求められません。詳細については、 Office アドインを読み込むか Fiddler を使用する場合は、「localhost からこのアドインを開くことができない」を参照してください。
- Yeoman ジェネレーターを初めて使用して Office アドインを開発すると、既定のブラウザーでウィンドウが開き、Microsoft 365 アカウントにサインインするように求められます。サインインウィンドウが表示されない場合、サイドローディングまたはログインタイムアウトエラーが発生した場合は、 atk auth login m365を実行します。
```
npm start
```
Outlook が起動し、アドインをサイドロードします。前のセクションの手順 3 で SSO を構成している間に Azure の接続に使用した Microsoft 365 管理者アカウントと同じ Microsoft 365 組織のメンバーであるユーザーで Outlook にサインインしている必要があります。これにより、SSO を正常に実行するための適切な条件が確立されます。
Outlook で新しいメッセージを作成します。
メッセージ作成ウィンドウで、[ タスクウィンドウの表示 ] ボタンを選択してアドイン作業ウィンドウを開きます。
作業ウィンドウの下部にある [マイユーザープロファイルの情報を取得する] ボタンを選択して、SSO プロセスを開始します。
アドインの代わりにアクセス許可を要求するダイアログウィンドウが表示される場合は、SSO はシナリオでサポートされず、代わりにアドインが別のユーザー認証方法に戻っていることを意味します。これは、テナント管理者がアドインに Microsoft Graph にアクセスするための同意を付与していない場合、またはユーザーが有効な Microsoft アカウントまたは Microsoft 365 Education または Work アカウントで Office にサインインしていない場合に発生する可能性があります。 [ Accept]\(同意\) を選択して続行します。

注:

ユーザーがこのアクセス許可の要求を受け入れると、今後再びプロンプトが表示されることはありません。
アドインは、サインインしたユーザーのプロファイル情報を取得し、メールメッセージの本文に書き込みます。
ローカル Web サーバーを停止してアドインをアンインストールする場合は、該当する手順に従います。
- サーバーを停止するには、次のコマンドを実行します。 npm startを使用した場合は、次のコマンドもアドインをアンインストールする必要があります。
```
npm stop
```
- アドインを手動でサイドロードした場合は、「サイドロードされたアドインを削除する」を参照してください。

次の手順

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

トラブルシューティング

「開発環境のセットアップ」の手順に従って、環境が Office 開発の準備ができていることを確認します。
一部のサンプルコードでは、ES6 JavaScript を使用しています。これは、Trident (インターネットエクスプローラー 11) ブラウザーエンジンを使用する古いバージョンの Office と互換性がありません。アドインでこれらのプラットフォームをサポートする方法については、「古い Microsoft Webview と Office バージョンをサポートする」を参照してください。開発に使用する Microsoft 365 サブスクリプションがまだない場合は、Microsoft 365 開発者プログラムを通じてMicrosoft 365 E5開発者サブスクリプションを受ける資格があります。詳細については、FAQ を参照してください。または、 1 か月間の無料試用版にサインアップするか、 Microsoft 365 プランを購入することもできます。

Yo Office が実行する自動 npm install ステップが失敗する可能性があります。 npm startを実行しようとしたときにエラーが表示された場合は、コマンドプロンプトで新しく作成したプロジェクトフォルダーに移動し、npm installを手動で実行します。 Yo Office の詳細については、「 Yeoman ジェネレーターを使用して Office アドインプロジェクトを作成する」を参照してください。
Yeoman ジェネレーターまたはプロジェクトの npm install を実行すると、警告が生成される場合があります。ほとんどの場合、これらの警告は無視しても問題ありません。依存関係が非推奨になり、プロジェクトが依存する他のパッケージで依存関係がサポートされない場合があります。これらの警告を解決する場合は、 npm-check-updates ツールを使用します。
- ルートプロジェクトディレクトリ内のコマンドプロンプトで、 npm i -g npm-check-updatesを実行します。これにより、ツールがグローバルにインストールされます。
- ncu -u を実行します。これにより、すべてのパッケージのレポートと、更新されるバージョンが表示されます。
- npm installを実行して、すべてのパッケージを更新します。