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

  • [アーティクル]

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

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

注:

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

アプリの登録をCreateする

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設定します。 を Web アプリケーションの正しいポート番号に置き換えます [port] 。 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]/ します。 を Web アプリケーションの正しいポート番号に置き換えます [port] 。 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 の追加] ボタンをクリックします。 開いたパネルで、スコープ>名として「」<と入力access_as_userします。

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

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

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

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

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

    注:

    テキスト フィールドのすぐ下に <表示されるスコープ> 名のドメイン部分は、前に設定したアプリケーション 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 アプリケーション エンドポイント)

    注:

    ID は ea5a67f6-b6f3-4338-b240-c655ddc3cc8e 、次のすべてのプラットフォームで 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. [クライアント アプリケーションの追加] ボタンを選択し、開いたパネルで を [アプリケーション (クライアント) ID] に設定[app-id-guid]し、 のボックスapi://localhost:44355/[app-id-guid]/access_as_userをチェックします。

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

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

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

    • profile

    注:

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

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

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

Office アドインを作成する

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

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

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

マニフェストを構成する

ソリューション エクスプローラーで、sso-display-user-info>sso-display-user-infoManifest>sso-display-user-info.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 アドインを登録する」をご覧ください。
  • <リソース> - アドインの URL。 これは、AAD にアドインを登録したときに使用したのと同じ URI (api: プロトコルを含む) です。 この URI のドメイン部分は、アドインのマニフェストの [リソース>] セクションの URL で<使用されるサブドメインを含むドメインと一致する必要があり、URI は ID> のクライアント ID で<終わる必要があります。
  • <>スコープ - 1 つ以上<の Scope> 要素の親。
  • <スコープ> - アドインが AAD に対して必要とするアクセス許可を指定します。 profileopenIDと のアクセス許可は常に必要であり、アドインが Microsoft Graph にアクセスしない場合は、必要な唯一のアクセス許可である可能性があります。 その場合は、必要な Microsoft Graph のアクセス許可の Scope> 要素も必要<です。たとえば、 User.ReadMail.Readです。 コードで使用している、Microsoft Graph にアクセスするためのライブラリでは、他にもアクセス許可が必要な場合があります。 たとえば、.NET 用の Microsoft Authentication Library (MSAL) にはアクセス許可が必要です offline_access 。 詳細については、「Office アドインで Microsoft Graph へ承認」を参照してください。

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

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

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

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

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

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

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

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

  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>

getAccessToken API を呼び出す

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

  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. ファイルを保存します。

アドインを実行する

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

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

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

注:

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

関連項目

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