DEV Community: garicchi

ASP.Net+Swagger+TypeScriptでEnumの表示名を自動生成する

garicchi — Thu, 25 Jan 2024 08:53:11 +0000

ASP.NetはSwaggerをサポートしており、Controllerを書くだけでopenapi schemaが自動生成されて便利です。

そして自動生成されたopenapi schemaから、openapi-generatorなどのツールを利用して、TypeScriptのコードを自動生成すれば、Single Page Applicationが作りやすくなります。

レスポンスのPayloadにEnum型があった場合

しかし、レスポンスのPayloadにEnum型のプロパティがあった場合、あまり良いコードが得られません。

例えば、こんなC#のenumがあったとして、

public enum WeatherType
{
    Sunny = 0,
    Cloudy = 1,
    Rainy = 2,
}

普通にopenapi-generatorで自動生成すると、以下のTypeScriptのコードが得られます。

export const WeatherType = {
    NUMBER_0: 0,
    NUMBER_1: 1,
    NUMBER_2: 2
} as const;
export type WeatherType = typeof WeatherType[keyof typeof WeatherType];

EnumのメンバーがNUMBER_{数字} になってわかりにくいです。

x-enum-varnames

メンバーのキー名を変更するには、openapi schemaにx-enum-varnamesという名前で配列を入れてやればよいです。
https://github.com/OpenAPITools/openapi-generator/issues/893#issuecomment-416617460

ASP.NetのSwaggerジェネレータ (今回はSwashbuckle)の場合、SchemaFilterという機能があり、これを使えば、出力されるopenapi schemaをいじることができます。

こんな感じのSchemaFilterを用意して

public class EnumSchemaFilter : ISchemaFilter
{
    public void Apply(OpenApiSchema model, SchemaFilterContext context)
    {
        if (context.Type.IsEnum)
        {
            var varNamesArray = new OpenApiArray();
            foreach (var memberVal in Enum.GetValues(context.Type))
            {
                var memberName = Enum.GetName(context.Type, memberVal);
                varNamesArray.Add(new OpenApiString(memberName));
            }

            model.Extensions.Add("x-enum-varnames", varNamesArray);
        }
    }
}

AddSwaggerGenで指定してやります

builder.Services.AddSwaggerGen(options =>
{
    options.SchemaFilter<EnumSchemaFilter>();
});

すると、openapi schemaにはx-enum-varnamesにメンバー名が入るようになります。

"WeatherType": {
  "enum": [
    0,
    1,
    2
  ],
  "type": "integer",
  "format": "int32",
  "x-enum-varnames": [
    "Sunny",
    "Cloudy",
    "Rainy"
  ]
}

これを使ってTypeScriptを生成すると、キーが正しくメンバー名になります。

export const WeatherType = {
    Sunny: 0,
    Cloudy: 1,
    Rainy: 2
} as const;
export type WeatherType = typeof WeatherType[keyof typeof WeatherType];

表示名を変えたい

x-enum-varnamesを使えば、TypeScriptのオブジェクトのキーとして、Enumのメンバー名を使用できましたが、
実際にUIに値を表示したい時は、もっと違う文字列を表示したいかもしれません。

例えばメンバー名を Sunny= とした場合、= はTypeScriptのオブジェクトのキーとして使えないのでエラーになります。

また、各国の言語に翻訳した名前を表示したいかもしれません。

EnumのAttributeを表示する

そこで、EnumにAttributeをつけて、それを表示するようにしてみます。
今回は System.ComponentModel.DataAnnotations.DisplayAttribute を使用します。

public enum WeatherType
{
    [Display(Name = "晴れ")]
    Sunny = 0,

    [Display(Name = "曇り")]
    Cloudy = 1,

    [Display(Name = "雨")]
    Rainy = 2,
}

openapi schemaのテキトーなキーに、この表示名をつけれればいいので、
EnumSchmeFilterを以下のように修正し、 x-enum-displays というスキーマを追加してみます。

public class EnumSchemaFilter : ISchemaFilter
{
    public void Apply(OpenApiSchema model, SchemaFilterContext context)
    {
        if (context.Type.IsEnum)
        {
            var varNamesArray = new OpenApiArray();
+           var displayArray = new OpenApiArray();
            foreach (var memberVal in Enum.GetValues(context.Type))
            {
                var memberName = Enum.GetName(context.Type, memberVal);
                varNamesArray.Add(new OpenApiString(memberName));
+               var obj = new OpenApiObject();
+               var display = (DisplayAttribute?)memberVal.GetType().GetMember(memberVal.ToString() ?? "").FirstOrDefault()?.GetCustomAttributes(typeof(DisplayAttribute), true).FirstOrDefault();
+               obj["value"] = new OpenApiInteger(Convert.ToInt32(memberVal));
+               obj["display"] = new OpenApiString(display?.Name);
+               displayArray.Add(obj);
            }

            model.Extensions.Add("x-enum-varnames", varNamesArray);
+           model.Extensions.Add("x-enum-displays", displayArray);
        }
    }
}

これで生成されたスキーマは以下のようになります。

"WeatherType": {
  "enum": [
    0,
    1,
    2
  ],
  "type": "integer",
  "format": "int32",
  "x-enum-varnames": [
    "Sunny",
    "Cloudy",
    "Rainy"
  ],
  "x-enum-displays": [
    {
      "value": 0,
      "display": "晴れ"
    },
    {
      "value": 1,
      "display": "曇り"
    },
    {
      "value": 2,
      "display": "雨"
    }
  ]
}

あとはこれを使って、TypeScriptコードを生成してやればよいのですが、標準では今回作った x-enum-displays を読めないので、コード生成テンプレートを修正してやります。

テンプレートはここにあるので落としてきます
https://github.com/OpenAPITools/openapi-generator/tree/master/modules/openapi-generator/src/main/resources/typescript-fetch

次に、テンプレートの中にある modelEnumInterfaces.mustache に以下を追加します。

/*
customized
*/
{{^stringEnums}}
{{#vendorExtensions}}
export function Get{{classname}}DisplayName(v: {{classname}}) {
    switch(v) {
{{#x-enum-displays}}
        case {{value}}:
            return "{{display}}";
{{/x-enum-displays}}
        default:
            throw new Error(`value ${v} is not supported`);
    }
}
{{/vendorExtensions}}
{{/stringEnums}}

あとはopenapi generatorで生成する時に、 -t オプションで、先ほど修正したテンプレートのディレクトリを指定します。

テンプレートのカスタマイズはこのドキュメントを参考にしてください。

これで、生成されたTypeScriptには、enumから表示名を取得する関数が追加されます。

export const WeatherType = {
    Sunny: 0,
    Cloudy: 1,
    Rainy: 2
} as const;
export type WeatherType = typeof WeatherType[keyof typeof WeatherType];

/*
customized
*/
export function GetWeatherTypeDisplayName(v: WeatherType) {
    switch(v) {
        case 0:
            return "晴れ";
        case 1:
            return "曇り";
        case 2:
            return "雨";
        default:
            throw new Error(`value ${v} is not supported`);
    }
}

こんな感じで表示名を取得できます。

// 晴れ が返される
GetWeatherTypeDisplayName(WeatherType.Sunny)

Azure AD B2C学習メモ

garicchi — Sat, 06 Jan 2024 07:54:40 +0000

モチベーション

Auth0、Firebase Authenticationなど、Webサービスの認証を、独立した外部サーバーにするID as a Serviceですが、
Azureにも同じようなものが存在していて、それがAzure AD B2Cです。

セキュリティ対策が大変なユーザー認証周りを既存のサービスやライブラリに任せることができたり、
ソーシャルログインやMFAなどの対応が楽になるというメリットがある一方、
使い方を把握する必要があります。

参考になったリンクや情報をメモしておきます。

想定アーキテクチャ

今回想定するアーキテクチャはシンプルなSPAとバックエンドAPIの構成になります。

ライブラリとドキュメントの場所

ADB2Cテナントの作成

AADB2Cでは、認証サーバーをテナントという概念で管理していて、まずはテナントを作成する必要があります。
テナントは下記ドキュメントで作成できます。

https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/tutorial-create-tenant

アプリを作るとき、プラットフォームを聞かれますが、spaを選択します。

テナントを作ったら、ポータルから以下のconfig情報を頑張って探してきます。

  "AzureAdB2C": {
    "Instance": "https://{テナント名}.b2clogin.com",
    "ClientId": "{ポータルに記載されているClientId}",
    "Domain": "{テナント名}.onmicrosoft.com",
    "SignUpSignInPolicyId": "{サインインサインアップのポリシーID (B2C_1_*)}",
    "AllowWebApiToBeAuthorizedByACL": true
  },

SPAとAADB2Cとの接続

AADB2CはOpenIdConnectというプロトコルで通信を行うので、フロントエンドJavaScriptからOpenIdConnectを使う必要があります。

しかし、AADB2Cに最適なライブラリ(msal-browser)が公式から提供されているのでこれを使います。
https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/configure-authentication-sample-spa-app

githubにも使い方のmarkdownがあるので、これを参考にするのも良さそうです。
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser#msal-basics

MSAL-browserはPublicClientApplicationクラスにconfigを渡すのですが、
先程テナントを作るときに作ったconfigをうまく割り当てます

new PublicClientApplication({
    auth: {
      clientId: aadb2cOption.ClientId,
      redirectUri: `${appConfig.FrontendUrl}/auth-redirect`,
      navigateToLoginRequestUrl: false,
      authority: `${aadb2cOption.Instance}/${aadb2cOption.Domain}/${aadb2cOption.SignUpSignInPolicyId}`,
      knownAuthorities: [aadb2cOption.Instance]
    },
    cache: {
      cacheLocation: 'sessionStorage', // This configures where your cache will be stored
      storeAuthStateInCookie: false // Set this to "true" if you are having issues on IE11 or Edge
    }
  })

ASP.NET APIとAADB2Cを接続する

ASP.NETのバックエンドAPIと接続するには、下記ドキュメントが良さそうです。
https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/enable-authentication-web-api?tabs=csharpclient

ASP.NETとAADB2Cを接続するには、 Microsoft.Identity.Web というライブラリを使います。

Microsoft.Identity.Web.UI というライブラリもありますが、これはControllerが自動で生えるので今回は使いません。

ServiceCollectionを作るときに、AddMicrosoftIdentityWebApiというのをつけます。
これでAuthorize属性がついたエンドポイントは、tokenの検証が入ります。

builder.Services.AddAuthentication()
            .AddMicrosoftIdentityWebApi(builder.Configuration, "AzureAdB2C");

AddMicrosoftIdentityWebApp もありますが、これはバックエンドがAPI用ではなく、普通のASP.NET MVCのrazor page用 (cookie認証) での使用が本来の用途のようなので今回は使用しません。

API通信をする

あとはMSAL-browserのドキュメントに則って通信をすれば、良いです。
せっかくなのでメモ書きを残しておきます。

ログインをするには、loginRedirectを使います。

await msalClient.initialize();
await auth.client.value.loginRedirect({
      scopes: ['openid']
})

するとAADB2Cのログイン画面にリダイレクトされ、認証が成功すると、redirect-urlにリダイレクトが返ってきます。

リダイレクトが返ってきたら、handleRedirectPromise();を実行して、authorization codeを受け取ります。
さらにその中でtoken endpointにリクエストを送り、id_tokenとaccess_tokenを取得します。

await msalClient.handleRedirectPromise();

最後に、取得したaccess_tokenをAuthorization Headerに入れて、ASP.NETのAPIを呼び出せば成功するはずです。

雑メモ

AADB2CのリダイレクトURLが変わらない

どうやら反映に1時間ほどかかるようです。すぐに反映したい場合はテナント内のアプリケーションを作り直すとよさそうです。

https://learn.microsoft.com/en-us/answers/questions/1181295/azure-b2c-redirect-url-takes-around-1h-before-take

How to set log level in Application Insights in ASP.Net

garicchi — Fri, 22 Dec 2023 06:19:43 +0000

Whenever I do logging of information level in application insights, I could not see any logs within that.

As the solution of that, I needed to specify log level with below configuration key.

Logging:ApplicationInsights:LogLevel:Default

if I specify log level in this key Logging:LogLevel:Default , it does not affect to log of application insights because the provider name is application insights.

ReactNativeでauth0を使う時にaudienceパラメータを付与する

garicchi — Fri, 18 Aug 2023 06:39:09 +0000

通常のauth0 react sdkでは、audienceパラメータは以下のように注入することができるが

<Auth0Provider
        authorizationParams={{
          redirect_uri: window.location.origin,
          audience: Config.Auth0.audience,
          scope: "read:current_user"
        }}
      >

react nativeのauth0sdkではaudienceパラメータを、Auth0Providerでは付与できない

<Auth0Provider
      domain={Config.Auth0.domain}
      clientId={Config.Auth0.clientId}
    >

このまま使うと、例えばAspdotnetのAPIサーバーに通信したときに以下のようにキー複合化エラーが出る。
これはaudienceパラメータが無いかららしい

IDX10609: Decryption failed. No Keys tried: toke n:

ではどうするかというと、ログイン時(authorize)にaudienceを渡すことができる

<Button onPress={async () => await authorize({
                    audience: Config.Auth0.audience
                })} title='login' />

この認証情報をつかって発行されたaccessTokenはaudienceパラメータが付与されている

react native expoでauth0 sdkを使うと TypeError: Cannot read property 'hasValidAuth0Instance' of null となる

garicchi — Thu, 17 Aug 2023 22:30:00 +0000

react native expoで auth0を使いたくて、チュートリアルをしていると、以下のエラーが起きた

TypeError: Cannot read property 'hasValidAuth0Instance' of null

ググってもそれらしい情報が出ず、困っていたが、どうやらauth0のネイティブモジュールが正しくビルドできていなかったようだ。

チュートリアルでは

expo prebuild

の指示があり、これでネイティブモジュールもビルドできていたのではないかと思っていたがどうやらそうではないらしい

ということでandroidプロジェクトをビルドしてみるとうまく動いた

# jdkが必要

cd ./android
./gradlew :app:build

ちなみに上記コマンドはビルド失敗するのだが、auth0のモジュールはビルドできていたのか、expoは動いた

package.jsonには expo run:android もあるので、こちらも試してみるとよいだろう

npm run android

Auth0のReact sampleが動かない問題の対処方法

garicchi — Fri, 11 Aug 2023 04:48:45 +0000

Auth0の公式React quickstartは自分の環境では動かなかった

サンプルでログインするとUnauthorizedになる

サンプルアプリを動かすと、ログイン後、Unauthorizedになるが、これはAuth0の設定画面でAuthentication Methodsが Client Secret (Post) になっているからだった

これをNoneにすればUnauthorizedが出ずに動く

原因を探ると、認証サーバーの /oauth/token エンドポイントにaccess tokenを取得しに行ったときに、client secretを一緒にpostしないといけないらしい

External APIページで Ping APIを押すと401になる

External APIページで Ping APIを押すと、401になって返ってこない。
サンプルAPIサーバーのコンソールを見ると、InvalidTokenError: Invalid Compact JWS auth0 と言われている。

これはクライントsdkの authorizationParamsにaudienceを入れていないからになる。

ので以下のように追加で解決

index.js

root.render(
  <Auth0Provider
    {...config}
    authorizationParams= {{
      redirect_uri: window.location.origin,
+     audience: config.audience
    }}
  >