SSO を使用してサインインしているユーザーの ID を取得する

getAccessToken API を使用して、Office にサインインしている現在のユーザーの ID を含むアクセス トークンを取得します。 アクセス トークンには、サインインしているユーザーに関する ID 要求 (名前や電子メールなど) が含まれているため、ID トークンでもあります。 また、ID トークンを使用して、独自の Web サービスを呼び出すときにユーザーを識別することもできます。 getAccessTokenを呼び出すには、Office で SSO を使用するように Office アドインを構成する必要があります。

この記事では、ID トークンを取得し、作業ウィンドウにユーザーの名前、電子メール、および一意の ID を表示する Office アドインを作成します。

注:

Office と getAccessToken API での SSO は、すべてのシナリオで機能するわけではありません。 SSO が使用できない場合は、常にフォールバック ダイアログを実装してユーザーにサインインします。 詳細については、「 Office ダイアログ API を使用した認証と承認」を参照してください。

アプリの登録を作成する

Office で SSO を使用するには、Microsoft ID プラットフォームが Office アドインとそのユーザーに認証および承認サービスを提供できるように、Azure portalでアプリ登録を作成する必要があります。

1. アプリを登録するには、[Azure portal - アプリの登録] ページに移動します。

2. 管理者の資格情報を使用して Microsoft 365 テナントにサインインします。 たとえば、「 MyName@contoso.onmicrosoft.com 」のように入力します。

3. [新規登録] を選択します。 [アプリケーションを登録] ページで、次のように値を設定します。

   • Office-Add-in-SSO に [名前] を設定します。
   • [サポートされているアカウントの種類] を [任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント (例: Skype、 Xbox、Outlook.com)] に設定します。
   • アプリケーションの種類を [Web ] に設定し、[ リダイレクト URI] を [ https://localhost:[port]/dialog.html] に設定します。 [port]を Web アプリケーションの正しいポート番号に置き換えます。 Yo Office を使用してアドインを作成した場合、ポート番号は通常 3000 で、package.json ファイルにあります。 Visual Studio 2019 でアドインを作成した場合、ポートは Web プロジェクトの SSL URL プロパティにあります。
   • [登録] を選択します。

4. [Office アドイン SSO] ページで、アプリケーション (クライアント) ID とディレクトリ (テナント) ID の値をコピーして保存します。 以降の手順では、それらの両方を使用します。

   注:

   このアプリケーション (クライアント) ID は、Office クライアント アプリケーション (たとえば、PowerPoint、Word、Excel) などの他のアプリケーションがアプリケーションへの承認されたアクセスを求める場合の "対象ユーザー" の値です。 また、アプリケーションが Microsoft Graph への承認されたアクセスを求める場合の "クライアント ID" でもあります。

5. [管理] の下の [認証] を選択します。 [ 暗黙的な許可 ] セクションで、 アクセス トークン と ID トークンの両方のチェック ボックスをオンにします。

6. フォームの最上部で [保存] を選択します。

7. [管理]の下の[API の公開]を選択します。 [ 設定 ] リンクを選択します。 これにより、 api://[app-id-guid] 形式のアプリケーション ID URI が生成されます。ここで、 [app-id-guid] は アプリケーション (クライアント) ID です。

8. 生成された ID に、二重スラッシュと GUID の間に localhost:[port]/ を挿入します (末尾にスラッシュ "/" を追加します)。 [port]を Web アプリケーションの正しいポート番号に置き換えます。 Yo Office を使用してアドインを作成した場合、ポート番号は通常 3000 で、package.json ファイルにあります。 Visual Studio 2019 でアドインを作成した場合、ポートは Web プロジェクトの SSL URL プロパティにあります。

   完了すると、ID 全体にフォーム api://localhost:[port]/[app-id-guid]が必要です(たとえば、 api://localhost:44355/c6c1f32b-5e55-4997-881a-753cc1d563b7)。

9. [Scope の追加] ボタンをクリックします。 開いたパネルで、<Scope>名として「access_as_user」と入力します。

10. [同意できるのはだれですか?] を [管理者とユーザー] に設定します。

11. 管理者とユーザーの同意プロンプトを構成するためのフィールドに、Office クライアント アプリケーションが現在のユーザーと同じ権限を持つアドインの Web API を使用できるようにする access_as_user スコープに適した値を入力します。 提案:

    • 同意表示名管理: Office はユーザーとして機能できます。
    • 管理者の同意の説明: 現在のユーザーと同じ権限で Office がアドインの Web API を呼び出すことを可能にします。
    • ユーザーの同意の表示名: Office は自分の役割を果たすことができます。
    • ユーザーの同意の説明: Office で、持っているのと同じ権限でアドインの Web API を呼び出せるようにします。

12. [状態] が [有効] に設定されていることを確認してください。

13. [スコープの追加] を選択します。

    注:

    テキスト フィールドのすぐ下に表示される <Scope> 名のドメイン部分は、前に設定したアプリケーション ID URI と自動的に一致し、末尾に /access_as_user が追加されます(たとえば、 api://localhost:6789/c6c1f32b-5e55-4997-881a-753cc1d563b7/access_as_user)。

14. [ 承認されたクライアント アプリケーション ] セクションで、次の ID を入力して、すべての Microsoft Office アプリケーション エンドポイントを事前に承認します。

    • ea5a67f6-b6f3-4338-b240-c655ddc3cc8e (すべての Microsoft Office アプリケーション エンドポイント)

    注:

    ea5a67f6-b6f3-4338-b240-c655ddc3cc8e ID は、次のすべてのプラットフォームで Office を事前に承認します。 または、何らかの理由で一部のプラットフォームで Office への承認を拒否する場合は、次の ID の適切なサブセットを入力することもできます。 承認を保留するプラットフォームの ID は除外してください。 これらのプラットフォーム上のアドインのユーザーは Web API を呼び出せなくなりますが、アドイン内の他の機能は引き続き機能します。

    • d3590ed6-52b3-4102-aeff-aad2292ab01c (Microsoft Office)
    • 93d53678-613d-4013-afc1-62e9e444a0a5 (Office on the web)
    • bc59ab01-8403-45c6-8796-ac3ef710b3e3 (Outlook on the web)

15. [クライアント アプリケーションの追加] ボタンを選択し、開いたパネルで[app-id-guid]をアプリケーション (クライアント) ID に設定し、api://localhost:44355/[app-id-guid]/access_as_userのボックスをチェックします。

16. [アプリケーションの追加] を選択します。

17. [管理] の下の [API アクセス許可] を選択し、[アクセス許可の追加] を選択します。 開いたパネルで、[Microsoft Graph] を選択してから [委任されたアクセス許可] を選択します。

18. アドインに必要な権限を検索するには、[アクセス許可を選択] の検索ボックスを使用します。 プロファイルのアクセス許可を検索して選択します。 Office アプリケーションがアドイン Web アプリケーションにトークンを取得するには、 profile アクセス許可が必要です。

    • profile

    注:

    User.Read アクセス許可は既定でリストされています。 必要のないアクセス許可を要求しないことをお勧めします。そのため、アドインで実際に必要ない場合は、このアクセス許可のチェック ボックスをオフにすることをお勧めします。

19. パネル下部にある [アクセス許可の追加] ボタンを選択します。

20. 同じページで、[管理者の同意を付与する] <tenant-name> ボタンを選択し、表示される確認に対して [はい] を選択します。

Office アドインを作成する

Visual Studio 2019

1. Visual Studio 2019 を起動し、[ 新しいプロジェクトの作成] を選択します。
2. Excel Web アドイン プロジェクト テンプレートを検索して選択します。 [次へ] を選択します。 注: SSO はどの Office アプリケーションでも機能しますが、Excel はこの記事で使用されているアプリケーションです。
3. sso-display-user-info などのプロジェクト名を入力し、[作成] を選択します。 他のフィールドは既定値のままにすることができます。
4. [ アドインの種類の選択 ] ダイアログ ボックスで、[ Excel に新しい機能を追加する] を選択し、[完了] を選択 します。

プロジェクトが作成され、ソリューションに 2 つのプロジェクトが含まれます。

• sso-display-user-info: アドインを Excel にサイドローディングするためのマニフェストと詳細が含まれています。
• sso-display-user-infoWeb: アドインの Web ページをホストする ASP.NET プロジェクト。

Yo Office

開発環境を設定していることを確認します。

1. 次のコマンドを入力してプロジェクトを作成します。

   yo office --projectType taskpane --name 'sso-display-user-info' --host excel --js true
   

プロジェクトは、 sso-display-user-info という名前の新しいフォルダーに作成されます。

マニフェストを構成する

Visual Studio 2019

ソリューション エクスプローラーで、sso-display-user-info>sso-display-user-infoManifest>sso-display-user-info.xmlを開きます。

Yo Office

Visual Studio Code で、 manifest.xml ファイルを開きます。

1. マニフェストの下部付近には、閉じる </Resources> 要素があります。 次の XML を </Resources> 要素のすぐ下に挿入しますが、終了 </VersionOverrides> 要素の前に挿入します。 Outlook 以外の Office アプリケーションの場合は、 <VersionOverrides ... xsi:type="VersionOverridesV1_0"> セクションの末尾にマークアップを追加します。 Outlook では、<VersionOverrides ... xsi:type="VersionOverridesV1_1"> セクションの末尾にマークアップを追加します。

   <WebApplicationInfo>
       <Id>[application-id]</Id>
       <Resource>api://localhost:[port]/[application-id]</Resource>
       <Scopes>
           <Scope>openid</Scope>
           <Scope>user.read</Scope>
           <Scope>profile</Scope>
       </Scopes>
   </WebApplicationInfo>
   

2. [port]をプロジェクトの正しいポート番号に置き換えます。 Yo Office を使用してアドインを作成した場合、ポート番号は通常 3000 で、package.json ファイルにあります。 Visual Studio 2019 でアドインを作成した場合、ポートは Web プロジェクトの SSL URL プロパティにあります。

3. 両方の [application-id] プレースホルダーを、アプリ登録の実際のアプリケーション ID に置き換えます。

4. ファイルを保存します。

挿入した XML には、次の要素と情報が含まれています。

• <WebApplicationInfo> - 次の要素の親。
• <Id> - アドインのクライアント ID これは、アドインの登録の一環として取得するアプリケーション ID です。 詳細については、「Azure AD v2.0 のエンドポイントに SSO を使用する Office アドインを登録する」をご覧ください。
• <Resource> - アドインの URL。 これは、AAD にアドインを登録したときに使用したのと同じ URI (api: プロトコルを含む) です。 この URI のドメイン部分は、アドインのマニフェストの <Resources> セクションの URL で使用されるサブドメインを含むドメインと一致する必要があり、URI は <Id> のクライアント ID で終わる必要があります。
• <Scopes> - 1 つ以上の<Scope>要素の親。
• <Scope> - アドインが AAD に対して必要とするアクセス許可を指定します。 profileとopenIDのアクセス許可は常に必要であり、アドインが Microsoft Graph にアクセスしない場合は、必要な唯一のアクセス許可である可能性があります。 その場合は、必要な Microsoft Graph のアクセス許可に <Scope> 要素 ( User.Read、 Mail.Readなど) も必要です。 コードで使用している、Microsoft Graph にアクセスするためのライブラリでは、他にもアクセス許可が必要な場合があります。 たとえば、.NET 用 Microsoft Authentication Library (MSAL) には、 offline_access アクセス許可が必要です。 詳細については、「Office アドインで Microsoft Graph へ承認」を参照してください。

jwt-decode パッケージを追加する

getAccessToken API を呼び出して、Office から ID トークンを取得できます。 まず、JWT デコード パッケージを追加して、ID トークンのデコードと表示を容易にしましょう。

Visual Studio 2019

1. Visual Studio ソリューションを開きます。

2. メニューで、[ツール] >[NuGet パッケージ マネージャー] >[パッケージ マネージャー コンソール] を選択します。

3. パッケージ マネージャー コンソールで次のコマンドを入力します。

   Install-Package jwt-decode -Projectname sso-display-user-infoWeb

Yo Office

1. ターミナル/コンソール ウィンドウから、アドイン プロジェクトのルート フォルダーに移動します。

2. 次のコマンドを入力します

   npm install jwt-decode

作業ウィンドウに UI を追加する

作業ウィンドウを変更して、ID トークンから取得するユーザー情報を表示できるようにします。

Visual Studio 2019

1. Home.html ファイルを開きます。

2. 次のスクリプト タグをページの <head> セクションに追加します。 これには、先ほど追加した jwt デコード パッケージが含まれます。

   <script src="Scripts/jwt-decode-2.2.0.js" type="text/javascript"></script>
   

3. <body> セクションを次の HTML に置き換えます。

   <body>
     <h1>Welcome</h1>
     <p>
       Sign in to Office, then choose the <b>Get ID Token</b> button to see your
       ID token information.
     </p>
     <button id="getIDToken">Get ID Token</button>
     <div>
       <span id="userInfo"></span>
     </div>
   </body>
   

Yo Office

1. src/taskpane/taskpane.html ファイルを開きます。

2. <body> セクションを次の HTML に置き換えます。

   <body>
     <h1>Welcome</h1>
     <p>
       Sign in to Office, then choose the <b>Get ID Token</b> button to see your
       ID token information.
     </p>
     <button id="getIDToken">Get ID Token</button>
     <div>
       <span id="userInfo"></span>
     </div>
   </body>
   

getAccessToken API を呼び出す

最後の手順では、 getAccessTokenを呼び出して ID トークンを取得します。

Visual Studio 2019

1. Home.js ファイルを開きます。

2. ファイルのすべての内容を次のコードで置き換えます。

   (function () {
     "use strict";
   
     // The initialize function must be run each time a new page is loaded.
     Office.initialize = function (reason) {
       $(document).ready(function () {
         $("#getIDToken").on("click", getIDToken);
       });
     };
   
     async function getIDToken() {
       try {
         let userTokenEncoded = await OfficeRuntime.auth.getAccessToken({
           allowSignInPrompt: true,
         });
         let userToken = jwt_decode(userTokenEncoded);
         document.getElementById("userInfo").innerHTML =
           "name: " +
           userToken.name +
           "<br>email: " +
           userToken.preferred_username +
           "<br>id: " +
           userToken.oid;
         console.log(userToken);
       } catch (error) {
         document.getElementById("userInfo").innerHTML =
           "An error occurred. <br>Name: " +
           error.name +
           "<br>Code: " +
           error.code +
           "<br>Message: " +
           error.message;
         console.log(error);
       }
     }
   })();
   

3. ファイルを保存します。

Yo Office

1. src/taskpane/taskpane.js ファイルを開きます。

2. ファイルのすべての内容を次のコードで置き換えます。

   import jwt_decode from "jwt-decode";
   
   Office.onReady((info) => {
     if (info.host === Office.HostType.Excel) {
       document.getElementById("getIDToken").onclick = getIDToken;
     }
   });
   
   async function getIDToken() {
     try {
       let userTokenEncoded = await OfficeRuntime.auth.getAccessToken({
         allowSignInPrompt: true,
       });
       let userToken = jwt_decode(userTokenEncoded);
       document.getElementById("userInfo").innerHTML =
         "name: " +
         userToken.name +
         "<br>email: " +
         userToken.preferred_username +
         "<br>id: " +
         userToken.oid;
       console.log(userToken);
     } catch (error) {
       document.getElementById("userInfo").innerHTML =
         "An error occurred. <br>Name: " +
         error.name +
         "<br>Code: " +
         error.code +
         "<br>Message: " +
         error.message;
       console.log(error);
     }
   }
   

3. ファイルを保存します。

アドインを実行する

Visual Studio 2019

[デバッグ]> [デバッグの開始] を選択するか、F5 キーを押します。

Yo Office

コマンド ラインから npm start を実行します。

1. Excel が起動したら、アプリ登録の作成に使用したのと同じテナント アカウントで Office にサインインします。
2. [ ホーム ] リボンで、[ タスクウィンドウの表示 ] を選択してアドインを開きます。
3. アドインの作業ウィンドウで、[ ID トークンの取得] を選択します。

アドインには、サインインしたアカウントの名前、電子メール、ID が表示されます。

注:

エラーが発生した場合は、この記事の登録手順でアプリの登録を確認してください。 アプリの登録を設定するときに詳細が見つからないのは、SSO の操作に関する問題の一般的な原因です。 それでもアドインを正常に実行できない場合は、「 シングル サインオン (SSO) のエラー メッセージのトラブルシューティング」を参照してください。

アドインを停止する

Visual Studio 2019

[ デバッグの停止] を選択するか、 Shift キーを押しながら F5 キーを押します。

Yo Office

コマンド ラインから npm stop を実行します。

関連項目

要求を使用してユーザーを確実に識別する (サブジェクトとオブジェクト ID)