【Flutter】APIとImage.networkでの認証のはなし。。

起きたエラー

Flutterにて、HTTPのBasic認証を通じてAPIから記事の一部を取得し、Image.networkで画像を表示しようとしたら、何らかの理由でエラーが発生し、画像の表示が失敗しました。
以下コードの一部です。

sample.dart

Future<List<Article>> searchArticle(String keyword) async {
    final url = Uri.parse(
        'https://example.com/wp-json/wp/v2/posts?_embed');
    final String username = dotenv.env['USERNAME']!;
    final String password = dotenv.env['PASSWORD']!;
    final String basicAuth =
        'Basic ${base64Encode(utf8.encode('$username:$password'))}';
    final http.Response res = await http.get(url, headers: {
      'authorization': basicAuth,
    });
}

今回の例では、WordPressの記事の内容を取得してくるために「WP REST API」を使用しています。

受け取った結果をリストに格納し、Image.networkで画像を表示しようとしたら、以下のエラーで画像表示に失敗してしまいました。

HTTP request failed, statusCode: 401

原因

FlutterのImage.networkウィジェットは、単にURLから画像を取得しようとしますが、認証ヘッダーなどの追加情報なしでは画像を取得することができないようです。

記事を取得するリクエストと画像を取得するリクエストは異なるものであり、それぞれのリクエストで認証が必要でした。。。

解決策

なので同様にBasic認証を介して取得します。

sample_image.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

class AuthenticatedNetworkImage extends StatelessWidget {
  final String imageUrl;
  const AuthenticatedNetworkImage({super.key, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    String username = dotenv.env['USERNAME']!;
    String password = dotenv.env['PASSWORD']!;
    String basicAuth =
        'Basic ${base64Encode(utf8.encode('$username:$password'))}';

    return Image.network(
      imageUrl,
      headers: {
        'authorization': basicAuth,
      },
      fit: BoxFit.cover,
    );
  }
}