링크로 로그인 수정

2026-02-24 10:32:06 +09:00
parent fb7e46054e
commit 5da74dac3a
15 changed files with 707 additions and 53 deletions
--- a/userfront/lib/features/auth/presentation/login_screen.dart
+++ b/userfront/lib/features/auth/presentation/login_screen.dart
@@ -14,6 +14,7 @@ import '../../../core/services/oidc_redirect_guard.dart';
 import '../../../core/notifiers/auth_notifier.dart';
 import '../domain/login_challenge_resolver.dart';
 import '../domain/cookie_session_policy.dart';
+import '../domain/login_link_route_policy.dart';
 import '../../profile/domain/notifiers/profile_notifier.dart';
 import '../../../core/services/web_window.dart';

@@ -111,8 +112,8 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
      final loginIdParam = uri.queryParameters['loginId'];
      final codeParam = uri.queryParameters['code'];
      final pendingRefParam = uri.queryParameters['pendingRef'];
-      final hasShortCodePath =
-          uri.pathSegments.length >= 2 && uri.pathSegments.first == 'l';
+      final shortCodeFromPath = extractLoginShortCode(uri);
+      final hasShortCodePath = shortCodeFromPath != null;
      final hasTokenParam = uri.queryParameters.containsKey('t');
      final hasVerificationToken =
          widget.verificationToken != null || hasTokenParam;
@@ -122,8 +123,7 @@ class _LoginScreenState extends ConsumerState<LoginScreen>
      final notice = uri.queryParameters['notice'];

      if (hasShortCodePath) {
-        final shortCode = uri.pathSegments[1];
-        _verifyShortCode(shortCode);
+        _verifyShortCode(shortCodeFromPath);
      }
      if (hasLoginCode) {
        _verifyLoginCode(loginIdParam, codeParam, pendingRef: pendingRefParam);
--- a/userfront/lib/features/auth/presentation/qr_camera_bootstrap_policy.dart
+++ b/userfront/lib/features/auth/presentation/qr_camera_bootstrap_policy.dart
@@ -0,0 +1,54 @@
+enum QrCameraBootstrapStatus {
+  ready,
+  detectorUnsupported,
+  permissionError,
+  cameraError,
+}
+
+class QrCameraBootstrapResult {
+  const QrCameraBootstrapResult(this.status, {this.errorDetail = ''});
+
+  final QrCameraBootstrapStatus status;
+  final String errorDetail;
+
+  bool get isReady => status == QrCameraBootstrapStatus.ready;
+}
+
+typedef QrOpenCameraAndPlay = Future<void> Function();
+typedef QrStopCamera = Future<void> Function();
+
+bool isQrPermissionError(Object error) {
+  final raw = error.toString();
+  return raw.contains('NotAllowedError') ||
+      raw.contains('PermissionDeniedError') ||
+      raw.contains('SecurityError');
+}
+
+Future<QrCameraBootstrapResult> bootstrapQrCamera({
+  required bool hasBarcodeDetector,
+  required QrOpenCameraAndPlay openCameraAndPlay,
+  required QrStopCamera stopCamera,
+}) async {
+  try {
+    await openCameraAndPlay();
+    if (!hasBarcodeDetector) {
+      await stopCamera();
+      return const QrCameraBootstrapResult(
+        QrCameraBootstrapStatus.detectorUnsupported,
+        errorDetail: 'BarcodeDetector is not supported in this browser.',
+      );
+    }
+    return const QrCameraBootstrapResult(QrCameraBootstrapStatus.ready);
+  } catch (e) {
+    if (isQrPermissionError(e)) {
+      return QrCameraBootstrapResult(
+        QrCameraBootstrapStatus.permissionError,
+        errorDetail: e.toString(),
+      );
+    }
+    return QrCameraBootstrapResult(
+      QrCameraBootstrapStatus.cameraError,
+      errorDetail: e.toString(),
+    );
+  }
+}
--- a/userfront/lib/features/auth/presentation/qr_scan_route.dart
+++ b/userfront/lib/features/auth/presentation/qr_scan_route.dart
@@ -0,0 +1,17 @@
+import '../../../../core/i18n/locale_utils.dart';
+
+String buildQrApprovePath(
+  String scannedValue, {
+  String? localeCode,
+  Uri? currentUri,
+}) {
+  final value = scannedValue.trim();
+  final explicitLocale = localeCode?.trim();
+  final uri = currentUri ?? Uri.base;
+  final resolvedLocale = explicitLocale != null && explicitLocale.isNotEmpty
+      ? explicitLocale.toLowerCase().replaceAll('_', '-')
+      : normalizeLocaleCode(
+          extractLocaleFromPath(uri) ?? resolvePreferredLocaleCode(),
+        );
+  return '/$resolvedLocale/approve?ref=${Uri.encodeQueryComponent(value)}';
+}
--- a/userfront/lib/features/auth/presentation/qr_scan_screen.dart
+++ b/userfront/lib/features/auth/presentation/qr_scan_screen.dart
@@ -1,30 +1,2 @@
-import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
-import 'package:userfront/i18n.dart';
-
-class QRScanScreen extends StatefulWidget {
-  const QRScanScreen({super.key});
-
-  @override
-  State<QRScanScreen> createState() => _QRScanScreenState();
-}
-
-class _QRScanScreenState extends State<QRScanScreen> {
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: Text(tr('ui.userfront.qr.title', fallback: 'Scan QR Code')),
-        leading: IconButton(
-          icon: const Icon(Icons.arrow_back),
-          onPressed: () => context.pop(),
-        ),
-      ),
-      body: const Center(
-        child: Text(
-          'QR Scanner is temporarily disabled for WASM build stability.',
-        ),
-      ),
-    );
-  }
-}
+export 'qr_scan_screen_stub.dart'
+    if (dart.library.js_interop) 'qr_scan_screen_web.dart';
--- a/userfront/lib/features/auth/presentation/qr_scan_screen_stub.dart
+++ b/userfront/lib/features/auth/presentation/qr_scan_screen_stub.dart
@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:userfront/i18n.dart';
+
+import 'qr_scan_route.dart';
+
+class QRScanScreen extends StatefulWidget {
+  const QRScanScreen({super.key});
+
+  @override
+  State<QRScanScreen> createState() => _QRScanScreenState();
+}
+
+class _QRScanScreenState extends State<QRScanScreen> {
+  final TextEditingController _controller = TextEditingController();
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _submit() {
+    final raw = _controller.text.trim();
+    if (raw.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(
+            tr(
+              'msg.userfront.qr.permission_required',
+              fallback: '카메라 권한이 필요합니다.',
+            ),
+          ),
+        ),
+      );
+      return;
+    }
+    context.go(buildQrApprovePath(raw));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(tr('ui.userfront.qr.title', fallback: 'Scan QR Code')),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () => context.pop(),
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Text(
+              tr(
+                'msg.userfront.qr.permission_error',
+                fallback: '카메라 권한 요청에 실패했습니다. 브라우저/OS 설정을 확인해주세요.',
+              ),
+            ),
+            const SizedBox(height: 12),
+            TextField(
+              key: const ValueKey('qr_scan_manual_input'),
+              controller: _controller,
+              decoration: const InputDecoration(
+                labelText: 'QR Payload',
+                hintText: 'https://.../ql/{ref} 또는 ref',
+              ),
+              onSubmitted: (_) => _submit(),
+            ),
+            const SizedBox(height: 12),
+            FilledButton.icon(
+              key: const ValueKey('qr_scan_submit_button'),
+              onPressed: _submit,
+              icon: const Icon(Icons.check_circle),
+              label: Text(
+                tr('ui.userfront.qr.result_success', fallback: '승인 화면으로 이동'),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/userfront/lib/features/auth/presentation/qr_scan_screen_web.dart
+++ b/userfront/lib/features/auth/presentation/qr_scan_screen_web.dart
@@ -0,0 +1,293 @@
+import 'dart:async';
+import 'dart:js_interop';
+import 'dart:js_interop_unsafe';
+import 'dart:ui_web' as ui_web;
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:userfront/i18n.dart';
+import 'package:web/web.dart' as web;
+
+import 'qr_camera_bootstrap_policy.dart';
+import 'qr_scan_route.dart';
+
+@JS('BarcodeDetector')
+extension type _BarcodeDetector._(JSObject _) implements JSObject {
+  external factory _BarcodeDetector();
+  external JSPromise<JSArray<_DetectedBarcode>> detect(JSObject source);
+}
+
+extension type _DetectedBarcode._(JSObject _) implements JSObject {
+  external String? get rawValue;
+}
+
+class QRScanScreen extends StatefulWidget {
+  const QRScanScreen({super.key});
+
+  @override
+  State<QRScanScreen> createState() => _QRScanScreenState();
+}
+
+class _QRScanScreenState extends State<QRScanScreen> {
+  late final web.HTMLVideoElement _videoElement;
+  late final String _viewType;
+  final TextEditingController _manualController = TextEditingController();
+
+  web.MediaStream? _stream;
+  _BarcodeDetector? _detector;
+  Timer? _scanTimer;
+  bool _scanInFlight = false;
+  bool _navigated = false;
+  bool _initializing = true;
+  String? _error;
+  String? _status;
+
+  @override
+  void initState() {
+    super.initState();
+    _viewType = 'qr-camera-${DateTime.now().microsecondsSinceEpoch}';
+    _videoElement = web.HTMLVideoElement()
+      ..autoplay = true
+      ..muted = true
+      ..playsInline = true
+      ..style.border = '0'
+      ..style.width = '100%'
+      ..style.height = '100%'
+      ..style.objectFit = 'cover';
+
+    ui_web.platformViewRegistry.registerViewFactory(_viewType, (int viewId) {
+      return _videoElement;
+    });
+
+    unawaited(_initializeScanner());
+  }
+
+  @override
+  void dispose() {
+    _scanTimer?.cancel();
+    _stopCamera();
+    _manualController.dispose();
+    super.dispose();
+  }
+
+  Future<void> _initializeScanner() async {
+    setState(() {
+      _initializing = true;
+      _error = null;
+      _status = tr('ui.userfront.qr.title', fallback: 'Scan QR Code');
+    });
+    final hasBarcodeDetector = globalContext
+        .hasProperty('BarcodeDetector'.toJS)
+        .toDart;
+
+    final result = await bootstrapQrCamera(
+      hasBarcodeDetector: hasBarcodeDetector,
+      openCameraAndPlay: () async {
+        final constraints = web.MediaStreamConstraints(
+          video: web.MediaTrackConstraints(facingMode: 'environment'.toJS),
+          audio: false.toJS,
+        );
+        _stream = await web.window.navigator.mediaDevices
+            .getUserMedia(constraints)
+            .toDart;
+        _videoElement.srcObject = _stream;
+        await _videoElement.play().toDart;
+      },
+      stopCamera: () async {
+        _stopCamera();
+      },
+    );
+
+    if (!mounted) {
+      return;
+    }
+
+    switch (result.status) {
+      case QrCameraBootstrapStatus.ready:
+        _detector = _BarcodeDetector();
+        setState(() {
+          _initializing = false;
+          _status = tr(
+            'msg.userfront.login.qr.scan_hint',
+            fallback: 'QR 코드를 카메라 중앙에 맞춰주세요.',
+          );
+        });
+        _startScanLoop();
+        break;
+      case QrCameraBootstrapStatus.detectorUnsupported:
+        setState(() {
+          _initializing = false;
+          _status = tr(
+            'msg.userfront.login.qr.scan_hint',
+            fallback: 'QR 코드를 카메라 중앙에 맞춰주세요.',
+          );
+          _error = tr(
+            'msg.userfront.qr.camera_error',
+            fallback: 'Camera error: {{error}}',
+            params: {'error': result.errorDetail},
+          );
+        });
+        break;
+      case QrCameraBootstrapStatus.permissionError:
+        setState(() {
+          _initializing = false;
+          _error = tr(
+            'msg.userfront.qr.permission_error',
+            fallback: 'Permission request failed. Check browser/OS settings.',
+          );
+        });
+        break;
+      case QrCameraBootstrapStatus.cameraError:
+        setState(() {
+          _initializing = false;
+          _error = tr(
+            'msg.userfront.qr.camera_error',
+            fallback: 'Camera error: {{error}}',
+            params: {'error': result.errorDetail},
+          );
+        });
+        break;
+    }
+  }
+
+  void _startScanLoop() {
+    _scanTimer?.cancel();
+    _scanTimer = Timer.periodic(const Duration(milliseconds: 250), (_) async {
+      if (!mounted || _scanInFlight || _navigated) {
+        return;
+      }
+      final detector = _detector;
+      if (detector == null) {
+        return;
+      }
+      if (_videoElement.readyState < web.HTMLMediaElement.HAVE_CURRENT_DATA) {
+        return;
+      }
+
+      _scanInFlight = true;
+      try {
+        final detected = await detector.detect(_videoElement).toDart;
+        final items = detected.toDart;
+        for (final item in items) {
+          final raw = item.rawValue?.trim();
+          if (raw != null && raw.isNotEmpty) {
+            _handleScanSuccess(raw);
+            break;
+          }
+        }
+      } catch (_) {
+      } finally {
+        _scanInFlight = false;
+      }
+    });
+  }
+
+  void _stopCamera() {
+    final stream = _stream;
+    if (stream == null) {
+      return;
+    }
+    final tracks = stream.getTracks().toDart;
+    for (final track in tracks) {
+      track.stop();
+    }
+    _videoElement.srcObject = null;
+    _stream = null;
+  }
+
+  void _handleScanSuccess(String payload) {
+    if (_navigated || !mounted) {
+      return;
+    }
+    _navigated = true;
+    _scanTimer?.cancel();
+    _stopCamera();
+    context.go(buildQrApprovePath(payload));
+  }
+
+  void _submitManual() {
+    final payload = _manualController.text.trim();
+    if (payload.isEmpty) {
+      return;
+    }
+    _handleScanSuccess(payload);
+  }
+
+  Future<void> _retry() async {
+    _scanTimer?.cancel();
+    _stopCamera();
+    _detector = null;
+    await _initializeScanner();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(tr('ui.userfront.qr.title', fallback: 'Scan QR Code')),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () => context.pop(),
+        ),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            AspectRatio(
+              aspectRatio: 3 / 4,
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  color: Colors.black,
+                  borderRadius: BorderRadius.circular(12),
+                ),
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12),
+                  child: _initializing
+                      ? const Center(child: CircularProgressIndicator())
+                      : HtmlElementView(viewType: _viewType),
+                ),
+              ),
+            ),
+            const SizedBox(height: 12),
+            if (_status != null) Text(_status!, textAlign: TextAlign.center),
+            if (_error != null) ...[
+              const SizedBox(height: 8),
+              Text(
+                _error!,
+                textAlign: TextAlign.center,
+                style: const TextStyle(color: Colors.red),
+              ),
+            ],
+            const SizedBox(height: 12),
+            FilledButton.icon(
+              onPressed: _initializing ? null : _retry,
+              icon: const Icon(Icons.refresh),
+              label: Text(tr('ui.userfront.qr.rescan', fallback: '다시 스캔')),
+            ),
+            const SizedBox(height: 12),
+            TextField(
+              key: const ValueKey('qr_scan_manual_input'),
+              controller: _manualController,
+              decoration: const InputDecoration(
+                labelText: 'QR Payload',
+                hintText: 'https://.../ql/{ref} 또는 ref',
+              ),
+              onSubmitted: (_) => _submitManual(),
+            ),
+            const SizedBox(height: 8),
+            FilledButton.icon(
+              key: const ValueKey('qr_scan_submit_button'),
+              onPressed: _submitManual,
+              icon: const Icon(Icons.check_circle),
+              label: Text(
+                tr('ui.userfront.qr.result_success', fallback: '승인 화면으로 이동'),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}