はじめに
前回は、.NET MAUIのネイティブ機能を活用して、生成した画像をデバイスに保存する機能を実装しました。今回は、APIキーをソースコードに埋め込むのではなく、サーバーから安全に取得する方式に変更します。モバイルアプリにAPIキーを含めないことで、セキュリティを向上させることができます。
また今回から、開発環境をVisual Studio 2026、.NET 10に変更しました。.NET 10は、LTS（長期サポート）版としてリリースされたバージョンです。
今回作成する機能
前回までのアプリに、APIキーをサーバーから安全に取得する機能を追加します。
- モバイルアプリにAPIキーを埋め込まず、Web側（サーバー側）から取得
- 取得したキーはSecureStorageに保存し、以降は再利用
この機能を、これまでと同じく、インターフェイスで抽象化し、DIで差し替える形で実装します。この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フレームワークのことです。
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を呼び出し、画像をクライアントに返す設計
