次の方法で共有

チュートリアル: Microsoft ID プラットフォームを使用してユーザーをサインインさせる Node.js Web アプリを設定する

適用対象: 次の内容が従業員テナントに適用されることを示す白いチェック マーク記号が付いた緑の円。 従業員テナント :次の内容が外部テナントに適用されることを示す白いチェック マーク記号が付いた緑の円。 外部テナント (詳細)

このチュートリアルでは、外部テナントの顧客向けアプリまたは従業員テナントの従業員にユーザーをサインインさせる Node/Express.js Web アプリを構築する方法について説明します。 このチュートリアルでは、Microsoft Graph API を呼び出すためのアクセス トークンを取得する方法についても説明します。

このチュートリアルは、3 部構成のシリーズのパート 1 です。

このチュートリアルでは、次の手順を行います。

  • Node.js プロジェクトを設定する
  • 依存関係のインストール
  • アプリ ビューと UI コンポーネントを追加する

[前提条件]

Node.js プロジェクトを作成する

  1. コンピューター内の任意の場所に、 ciam-sign-in-node-express-web-app などのノード アプリケーションをホストするフォルダーを作成します。

  2. ターミナルで、 cd ciam-sign-in-node-express-web-appなどの Node Web アプリ フォルダーにディレクトリを変更し、次のコマンドを実行して新しい Node.js プロジェクトを作成します。

    npm init -y

    init -y コマンドは、Node.js プロジェクトの既定の package.jsonファイルを作成します。

  3. 次のプロジェクト構造を実現するために、追加のフォルダーとファイルを作成します。

        ciam-sign-in-node-express-web-app/
    ├── server.js
    └── app.js
    └── authConfig.js
    └── package.json
    └── .env
    └── auth/
        └── AuthProvider.js
    └── controller/
        └── authController.js
    └── routes/
        └── auth.js
        └── index.js
        └── users.js
    └── views/
        └── layouts.hbs
        └── error.hbs
        └── id.hbs
        └── index.hbs   
    └── public/stylesheets/
        └── style.css

アプリの依存関係をインストールする

必要な ID と関連する npm パッケージ Node.js インストールするには、ターミナルで次のコマンドを実行します。

npm install express dotenv hbs express-session axios cookie-parser http-errors morgan @azure/msal-node

アプリ UI コンポーネントをビルドする

  1. コード エディターで views/index.hbs ファイルを 開き、次のコードを追加します。

        <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

    このビューでは、ユーザーが認証されると、ユーザー名とリンクが表示され、 /auth/signout および /users/id エンドポイントにアクセスできます。それ以外の場合は、ユーザーがサインインするために /auth/signin エンドポイントにアクセスする必要があります。 これらのエンドポイントの高速ルートは、この記事の後半で定義します。

  2. コード エディターで views/id.hbs ファイルを 開き、次のコードを追加します。

        <h1>Azure AD for customers</h1>
    <h3>ID Token</h3>
    <table>
        <tbody>
            {{#each idTokenClaims}}
            <tr>
                <td>{{@key}}</td>
                <td>{{this}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    <a href="/">Go back</a>

    このビューを使用して、ユーザーが正常にサインインした後に Microsoft Entra 外部 ID がこのアプリに返す ID トークン要求を表示します。

  3. コード エディターで views/error.hbs ファイルを 開き、次のコードを追加します。

        <h1>{{message}}</h1>
    <h2>{{error.status}}</h2>
    <pre>{{error.stack}}</pre>

    このビューを使用して、アプリの実行時に発生するエラーを表示します。

  4. コード エディターで views/layout.hbs ファイルを 開き、次のコードを追加します。

        <!DOCTYPE html>
    <html>        
        <head>
            <title>{{title}}</title>
            <link rel='stylesheet' href='/stylesheets/style.css' />
        </head>            
        <body>
            {{{content}}}
        </body>        
    </html>

    layout.hbs ファイルはレイアウト ファイルにあります。 これには、アプリケーション ビュー全体で必要な HTML コードが含まれています。

  5. コード エディターで、 public/stylesheets/style.css ファイルを開き、次のコードを追加します。

        body {
      padding: 50px;
      font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
    }

    a {
      color: #00B7FF;
    }

次のステップ

チュートリアル: Node/Express.js Web アプリにサインインを追加

  • Last updated on