.NET MAUIアプリ構築で、APIキーをサーバーから安全に取得する

マルチターゲットアプリ開発の新しいアプローチ～.NET 9 新テンプレートの基本～ 第6回

　本連載では、.NET 9で登場した新しいソリューションテンプレートである「.NET MAUI Blazor HybridアプリとWebアプリ」について解説します。前回は、.NET MAUIのネイティブ機能を活用して、生成した画像をデバイスに保存する機能を実装しました。今回は、APIキーをソースコードに埋め込むのではなく、サーバーから安全に取得する方式に変更します。モバイルアプリにAPIキーを含めないことで、セキュリティを向上させることができます。

はじめに

　前回は、.NET MAUIのネイティブ機能を活用して、生成した画像をデバイスに保存する機能を実装しました。今回は、APIキーをソースコードに埋め込むのではなく、サーバーから安全に取得する方式に変更します。モバイルアプリにAPIキーを含めないことで、セキュリティを向上させることができます。

　また今回から、開発環境をVisual Studio 2026、.NET 10に変更しました。.NET 10は、LTS（長期サポート）版としてリリースされたバージョンです。

今回作成する機能

　前回までのアプリに、APIキーをサーバーから安全に取得する機能を追加します。

• モバイルアプリにAPIキーを埋め込まず、Web側（サーバー側）から取得
• 取得したキーはSecureStorageに保存し、以降は再利用

　この機能を、これまでと同じく、インターフェイスで抽象化し、DIで差し替える形で実装します。このAPIサーバー経由でのキー取得の流れをシーケンス図にすると、次のようになります。

APIサーバー経由でのキー取得（シーケンス図）

APIサーバーの構築

　これまで、MAUIではAPIキーをソースコードに埋め込む形で実装していましたが、これはセキュリティ上好ましくありません。ここからは、WebプロジェクトをAPIサーバーとしても機能させ、MAUIアプリからはサーバー経由でAPIキーを取得する方式に変更します。

APIサーバーのポート番号の確認

　実装の前に、APIサーバーのポート番号を確認しておきましょう。Visual StudioでImageGenerator.Webプロジェクトを実行すると、ブラウザが起動してURLが表示されます（例：https://localhost:7299）。

　このポート番号は、プロジェクトのPropertiesフォルダにあるlaunchSettings.jsonのapplicationUrlで確認・変更できます。以降の説明では、このポート番号を使用します。

APIエンドポイントの作成

　ImageGenerator.WebプロジェクトのProgram.csを修正して、Minimal APIを使ったエンドポイントを定義します。Minimal APIとは、ASP.NET Coreで導入された最小構成のWeb APIフレームワークのことです。

［リスト1］Program.csの一部

var builder = WebApplication.CreateBuilder(args);

// 既存のサービス登録
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// CORSポリシーの追加 (1)
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowMauiApp", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

～既存のサービス登録～

var app = builder.Build();

app.UseStaticFiles();
app.UseAntiforgery();

// CORSを有効化 (2)
app.UseCors("AllowMauiApp");

// APIエンドポイントの追加 (3)
app.MapGet("/api/config", (IConfiguration configuration, ILogger<Program> logger) =>
{
    logger.LogInformation("APIキーのリクエストを受信しました");
    var apiKey = configuration["OpenAI:ApiKey"];
    if (string.IsNullOrEmpty(apiKey))
    {
        return Results.NotFound("API key not configured");
    }
    return Results.Ok(new { ApiKey = apiKey });
});

～略～

　CORS（Cross-Origin Resource Sharing）は、異なるオリジン（ドメインやポート）からのHTTPリクエストを制御する仕組みです。

　MAUIアプリからWebサーバーへのアクセスはクロスオリジンとなるため、CORSポリシーを設定して許可しています（1）（2）。/api/configエンドポイントでは、ユーザーシークレットからAPIキーを読み込んで返します（3）。

　また、ILogger<Program>を使って、リクエスト受信時にコンソールへメッセージを出力しています。コマンドラインからサーバーを起動した際に、アクセスの確認に役立ちます。

セキュリティに関する注意

　今回実装したAPIエンドポイントは、開発環境向けの動作確認用です。本番環境では、次の対策が必要になるでしょう。

• 認証・認可の追加（JWT、APIキーなど）
• 接続元の限定許可
• サーバー側でOpenAI APIを呼び出し、画像をクライアントに返す設計