Azure AD B2C を使用して独自の Web API で認証を有効にする

• Visual Studio Code
• C# for Visual Studio Code (最新バージョン)
• .NET 5.0 SDK (英語)

• Visual Studio Code または別のコード エディター
• Node.js ランタイム

dotnet new コマンドを使用します。 dotnet new コマンドは、Web API プロジェクトアセットを含む TodoList という名前の新しいフォルダーを作成します。 ディレクトリを開き、 Visual Studio Code を開きます。

dotnet new webapi -o TodoList
cd TodoList
code . 

"必要な資産をプロジェクトに追加する" というメッセージが表示されたら、[ はい] を選択します。

Express for Node.js を使用して Web API を構築します。 Web API を作成するには、次の操作を行います。

1. TodoList という名前の新しいフォルダーを作成します。
2. TodoList フォルダーの下に、app.jsという名前のファイルを作成します。
3. コマンド シェルで、 npm init -yを実行します。 このコマンドを実行すると、 Node.js プロジェクトの既定のpackage.jsonファイルが作成されます。
4. コマンド シェルで npm install express を実行します。 このコマンドを実行すると、Express フレームワークがインストールされます。

認証ライブラリを追加するには、次のコマンドを実行してパッケージをインストールします。

dotnet add package Microsoft.Identity.Web

認証ライブラリを追加するには、次のコマンドを実行してパッケージをインストールします。

npm install passport
npm install passport-azure-ad
npm install morgan

Morgan パッケージは、Node.js用の HTTP 要求ロガー ミドルウェアです。

Startup.csを開き、クラスの先頭に次のusing宣言を追加します。

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.Identity.Web;

ConfigureServices(IServiceCollection services) 関数を検索します。 次に、 services.AddControllers(); コード行の前に、次のコード スニペットを追加します。

public void ConfigureServices(IServiceCollection services)
{
    // Adds Microsoft Identity platform (Azure AD B2C) support to protect this Api
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
            .AddMicrosoftIdentityWebApi(options =>
    {
        Configuration.Bind("AzureAdB2C", options);

        options.TokenValidationParameters.NameClaimType = "name";
    },
    options => { Configuration.Bind("AzureAdB2C", options); });
    // End of the Microsoft Identity platform block    

    services.AddControllers();
}

Configure 関数を検索します。 次に、 app.UseRouting(); コード行の直後に、次のコード スニペットを追加します。

app.UseAuthentication();

変更後、コードは次のスニペットのようになります。

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();

    app.UseRouting();
    
    // Add the following line 
    app.UseAuthentication();
    // End of the block you add
    
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

app.js ファイルに次の JavaScript コードを追加します。

// Import the required libraries
const express = require('express');
const morgan = require('morgan');
const passport = require('passport');
const config = require('./config.json');

// Import the passport Azure AD library
const BearerStrategy = require('passport-azure-ad').BearerStrategy;

// Set the Azure AD B2C options
const options = {
    identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
    clientID: config.credentials.clientID,
    audience: config.credentials.clientID,
    issuer: config.credentials.issuer,
    policyName: config.policies.policyName,
    isB2C: config.settings.isB2C,
    scope: config.resource.scope,
    validateIssuer: config.settings.validateIssuer,
    loggingLevel: config.settings.loggingLevel,
    passReqToCallback: config.settings.passReqToCallback
}

// Instantiate the passport Azure AD library with the Azure AD B2C options
const bearerStrategy = new BearerStrategy(options, (token, done) => {
        // Send user info using the second argument
        done(null, { }, token);
    }
);

// Use the required libraries
const app = express();

app.use(morgan('dev'));

app.use(passport.initialize());

passport.use(bearerStrategy);

//enable CORS (for testing only -remove in production/deployment)
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept');
    next();
});

/Controllers フォルダーの下に、PublicController.cs ファイルを追加し、次のコード スニペットに追加します。

using System;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;

namespace TodoList.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class PublicController : ControllerBase
    {
        private readonly ILogger<PublicController> _logger;

        public PublicController(ILogger<PublicController> logger)
        {
            _logger = logger;
        }

        [HttpGet]
        public ActionResult Get()
        {
            return Ok( new {date = DateTime.UtcNow.ToString()});
        }
    }
}

app.js ファイルに、次の JavaScript コードを追加します。

// API anonymous endpoint
app.get('/public', (req, res) => res.send( {'date': new Date() } ));

/Controllers フォルダーの下に、HelloController.cs ファイルを追加し、次のコードに追加します。

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Microsoft.Identity.Web.Resource;

namespace TodoList.Controllers
{
    [Authorize]
    [RequiredScope("tasks.read")]
    [ApiController]
    [Route("[controller]")]
    public class HelloController : ControllerBase
    {

        private readonly ILogger<HelloController> _logger;
        private readonly IHttpContextAccessor _contextAccessor;

        public HelloController(ILogger<HelloController> logger, IHttpContextAccessor contextAccessor)
        {
            _logger = logger;
            _contextAccessor = contextAccessor;
        }

        [HttpGet]
        public ActionResult Get()
        {
            return Ok( new { name = User.Identity.Name});
        }
    }
}

HelloController コントローラーは AuthorizeAttribute で装飾され、認証されたユーザーのみにアクセスを制限します。

コントローラーも [RequiredScope("tasks.read")]で装飾されています。 RequiredScopeAttribute は、Web API が適切なスコープ (tasks.read) で呼び出されていることを確認します。

app.js ファイルに、次の JavaScript コードを追加します。

// API protected endpoint
app.get('/hello',
    passport.authenticate('oauth-bearer', {session: false}),
    (req, res) => {
        console.log('Validated claims: ', req.authInfo);
        
        // Service relies on the name claim.  
        res.status(200).json({'name': req.authInfo['name']});
    }
);

/hello エンドポイントは、最初に passport.authenticate() 関数を呼び出します。 認証関数は、認証されたユーザーのみにアクセスを制限します。

認証関数は、Web API が適切なスコープで呼び出されていることも確認します。 許可されるスコープは 、構成ファイルにあります。

appsettings.json ファイルに次の JSON スニペットを追加します。

"Kestrel": {
    "EndPoints": {
      "Http": {
        "Url": "http://localhost:6000"
      },
      "Https": {
         "Url": "https://localhost:6001"   
        }
    }
  }

app.js ファイルに次の JavaScript コードを追加します。 Node アプリケーションの HTTP エンドポイントと HTTPS エンドポイントを設定できます。

// Starts listening on port 6000
const port = process.env.PORT || 6000;

app.listen(port, () => {
    console.log('Listening on port ' + port);
});

プロジェクト ルート フォルダーの下で、 appsettings.json ファイルを開き、次の設定を追加します。

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

appsettings.json ファイルで、次のプロパティを更新します。

プロジェクト ルート フォルダーの下に 、config.json ファイルを作成し、次の JSON スニペットに追加します。

{
    "credentials": {
        "tenantName": "<your-tenant-name>.onmicrosoft.com",
        "clientID": "<your-webapi-application-ID>",
        "issuer": "https://<your-tenant-name>.b2clogin.com/<your-tenant-ID>/v2.0/"
    },
    "policies": {
        "policyName": "b2c_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

config.json ファイルで、次のプロパティを更新します。

コマンド シェルで、次のコマンドを実行して Web アプリを起動します。

 dotnet run

次の出力が表示されます。これは、アプリが稼働していて、要求を受信する準備ができていることを意味します。

Now listening on: http://localhost:6000

プログラムを停止するには、コマンド シェルで Ctrl + C キーを押します。 node app.js コマンドを使用して、アプリを再実行できます。

ブラウザーを開き、http://localhost:6000/public に移動します。 ブラウザー ウィンドウに、現在の日付と時刻と共に次のテキストが表示されます。

コマンド シェルで、次のコマンドを実行して Web アプリを起動します。

node app.js

次の出力が表示されます。これは、アプリが稼働していて、要求を受信する準備ができていることを意味します。

Example app listening on port 6000!

プログラムを停止するには、コマンド シェルで Ctrl + C キーを押します。 node app.js コマンドを使用して、アプリを再実行できます。

ブラウザーを開き、http://localhost:6000/public に移動します。 ブラウザー ウィンドウに、現在の日付と時刻と共に次のテキストが表示されます。

• Microsoft ID ライブラリを使用して Web API を取得します。

• Passport.js ライブラリを使用して Web API を取得します。