iOS QR js기반 바이패스, QR승인 클릭절차 생략

userfront/lib/features/auth/presentation/approve_qr_screen.dart

@@ -18,11 +18,15 @@ class _ApproveQrScreenState extends State<ApproveQrScreen> {
   bool _success = false;
   bool _isCheckingSession = false;
   bool _redirectingToLogin = false;
+  bool _autoApproveTriggered = false;
 
   @override
   void initState() {
     super.initState();
-    _bootstrapCookieSession().then((_) => _redirectIfNotLoggedIn());
+    _bootstrapCookieSession().then((_) {
+      _redirectIfNotLoggedIn();
+      _maybeAutoApprove();
+    });
   }
 
   Future<bool> _bootstrapCookieSession() async {
@@ -61,6 +65,31 @@ class _ApproveQrScreenState extends State<ApproveQrScreen> {
     }
   }
 
+  void _maybeAutoApprove() {
+    if (!mounted || _autoApproveTriggered) return;
+    if (widget.pendingRef == null || widget.pendingRef!.trim().isEmpty) {
+      if (_message == null) {
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (!mounted) return;
+          setState(() {
+            _message = 'Error: pendingRef is missing.';
+          });
+        });
+      }
+      return;
+    }
+
+    final hasStoredToken = AuthTokenStore.getToken()?.isNotEmpty ?? false;
+    final usesCookie = AuthTokenStore.usesCookie();
+    final isLoggedIn = hasStoredToken || usesCookie || _isCheckingSession;
+    if (!isLoggedIn || _isLoading || _success) {
+      return;
+    }
+
+    _autoApproveTriggered = true;
+    _handleApprove();
+  }
+
   Future<void> _handleApprove() async {
     if (widget.pendingRef == null) return;
 
@@ -115,6 +144,9 @@ class _ApproveQrScreenState extends State<ApproveQrScreen> {
     if (!isLoggedIn && !_redirectingToLogin) {
       _redirectIfNotLoggedIn();
     }
+    if (isLoggedIn && !_success && !_isLoading) {
+      _maybeAutoApprove();
+    }
 
     return Scaffold(
       appBar: AppBar(title: const Text("QR Login Approval")),
@@ -151,15 +183,17 @@ class _ApproveQrScreenState extends State<ApproveQrScreen> {
                   ),
                 ),
 
-              if (!_success)
+              if (_isLoading)
-                FilledButton.icon(
+                const Padding(
-                  onPressed: _isLoading || !isLoggedIn ? null : _handleApprove,
+                  padding: EdgeInsets.only(bottom: 16),
-                  icon: const Icon(Icons.check_circle),
+                  child: CircularProgressIndicator(),
-                  label: const Text("Approve Login"),
+                ),
-                  style: FilledButton.styleFrom(
+
-                    minimumSize: const Size.fromHeight(60),
+              if (!_success && !_isLoading)
-                    backgroundColor: Colors.blue,
+                Text(
-                  ),
+                  "Approving login request automatically...",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(color: Colors.grey.shade700),
                 ),
 
               if (!isLoggedIn && !_success)
@@ -172,6 +206,18 @@ class _ApproveQrScreenState extends State<ApproveQrScreen> {
                   ),
                 ),
 
+              if (!_success && !_isLoading && _message != null)
+                FilledButton.icon(
+                  onPressed: !isLoggedIn
+                      ? null
+                      : () {
+                          _autoApproveTriggered = false;
+                          _handleApprove();
+                        },
+                  icon: const Icon(Icons.refresh),
+                  label: const Text("Retry Approval"),
+                ),
+
               if (_success)
                 FilledButton(
                   onPressed: () => context.go(buildLocalizedHomePath(Uri.base)),

userfront/lib/features/auth/presentation/qr_scan_screen_web.dart

@@ -1,26 +1,12 @@
 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:mobile_scanner/mobile_scanner.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});
 
@@ -29,195 +15,120 @@ class QRScanScreen extends StatefulWidget {
 }
 
 class _QRScanScreenState extends State<QRScanScreen> {
-  late final web.HTMLVideoElement _videoElement;
+  final MobileScannerController _scannerController = MobileScannerController(
-  late final String _viewType;
+    autoStart: true,
+    detectionSpeed: DetectionSpeed.noDuplicates,
+    facing: CameraFacing.back,
+    formats: const <BarcodeFormat>[BarcodeFormat.qrCode],
+  );
   final TextEditingController _manualController = TextEditingController();
 
-  web.MediaStream? _stream;
+  bool _isProcessing = false;
-  _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}';
+    _status = tr(
-    _videoElement = web.HTMLVideoElement()
+      'msg.userfront.login.qr.scan_hint',
-      ..autoplay = true
+      fallback: 'QR 코드를 카메라 중앙에 맞춰주세요.',
-      ..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();
+    _scannerController.dispose();
     super.dispose();
   }
 
-  Future<void> _initializeScanner() async {
+  Future<void> _navigateToApprove(String rawPayload) async {
-    setState(() {
+    final payload = rawPayload.trim();
-      _initializing = true;
+    if (payload.isEmpty || _isProcessing || !mounted) {
-      _error = null;
+      return;
-      _status = tr('ui.userfront.qr.title', fallback: 'Scan QR Code');
+    }
-    });
-    final hasBarcodeDetector = globalContext
-        .hasProperty('BarcodeDetector'.toJS)
-        .toDart;
 
-    final result = await bootstrapQrCamera(
+    setState(() {
-      hasBarcodeDetector: hasBarcodeDetector,
+      _isProcessing = true;
-      openCameraAndPlay: () async {
+      _error = null;
-        final constraints = web.MediaStreamConstraints(
+      _status = tr(
-          video: web.MediaTrackConstraints(facingMode: 'environment'.toJS),
+        'ui.userfront.qr.result_success',
-          audio: false.toJS,
+        fallback: '승인 화면으로 이동 중...',
-        );
+      );
-        _stream = await web.window.navigator.mediaDevices
+    });
-            .getUserMedia(constraints)
+
-            .toDart;
+    try {
-        _videoElement.srcObject = _stream;
+      await _scannerController.stop();
-        await _videoElement.play().toDart;
+    } catch (_) {}
-      },
-      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() {
+  void _onDetect(BarcodeCapture capture) {
-    final payload = _manualController.text.trim();
+    for (final barcode in capture.barcodes) {
-    if (payload.isEmpty) {
+      final raw = barcode.rawValue?.trim();
-      return;
+      if (raw != null && raw.isNotEmpty) {
+        unawaited(_navigateToApprove(raw));
+        return;
+      }
     }
-    _handleScanSuccess(payload);
+  }
+
+  String _toScannerErrorMessage(MobileScannerException error) {
+    switch (error.errorCode) {
+      case MobileScannerErrorCode.permissionDenied:
+        return tr(
+          'msg.userfront.qr.permission_error',
+          fallback: '카메라 권한 요청에 실패했습니다. 브라우저/OS 설정을 확인해주세요.',
+        );
+      case MobileScannerErrorCode.unsupported:
+        return tr(
+          'msg.userfront.qr.camera_error',
+          fallback: '카메라 오류: {{error}}',
+          params: {'error': 'QR scanner is not supported in this browser.'},
+        );
+      default:
+        final detail = error.errorDetails?.message;
+        return tr(
+          'msg.userfront.qr.camera_error',
+          fallback: '카메라 오류: {{error}}',
+          params: {'error': detail ?? error.errorCode.message},
+        );
+    }
+  }
+
+  void _submitManual() {
+    unawaited(_navigateToApprove(_manualController.text));
   }
 
   Future<void> _retry() async {
-    _scanTimer?.cancel();
+    setState(() {
-    _stopCamera();
+      _isProcessing = false;
-    _detector = null;
+      _error = null;
-    await _initializeScanner();
+      _status = tr(
+        'msg.userfront.login.qr.scan_hint',
+        fallback: 'QR 코드를 카메라 중앙에 맞춰주세요.',
+      );
+    });
+
+    try {
+      await _scannerController.start();
+    } catch (e) {
+      if (!mounted) {
+        return;
+      }
+      setState(() {
+        _error = tr(
+          'msg.userfront.qr.camera_error',
+          fallback: '카메라 오류: {{error}}',
+          params: {'error': '$e'},
+        );
+      });
+    }
   }
 
   @override
@@ -244,9 +155,43 @@ class _QRScanScreenState extends State<QRScanScreen> {
                 ),
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(12),
-                  child: _initializing
+                  child: Stack(
-                      ? const Center(child: CircularProgressIndicator())
+                    fit: StackFit.expand,
-                      : HtmlElementView(viewType: _viewType),
+                    children: [
+                      MobileScanner(
+                        controller: _scannerController,
+                        onDetect: _onDetect,
+                        errorBuilder: (context, error) {
+                          WidgetsBinding.instance.addPostFrameCallback((_) {
+                            if (!mounted) {
+                              return;
+                            }
+                            setState(() {
+                              _error = _toScannerErrorMessage(error);
+                            });
+                          });
+
+                          return Center(
+                            child: Padding(
+                              padding: const EdgeInsets.all(16),
+                              child: Text(
+                                _toScannerErrorMessage(error),
+                                textAlign: TextAlign.center,
+                                style: const TextStyle(color: Colors.white),
+                              ),
+                            ),
+                          );
+                        },
+                      ),
+                      if (_isProcessing)
+                        Container(
+                          color: Colors.black45,
+                          child: const Center(
+                            child: CircularProgressIndicator(),
+                          ),
+                        ),
+                    ],
+                  ),
                 ),
               ),
             ),
@@ -262,7 +207,7 @@ class _QRScanScreenState extends State<QRScanScreen> {
             ],
             const SizedBox(height: 12),
             FilledButton.icon(
-              onPressed: _initializing ? null : _retry,
+              onPressed: _isProcessing ? null : _retry,
               icon: const Icon(Icons.refresh),
               label: Text(tr('ui.userfront.qr.rescan', fallback: '다시 스캔')),
             ),
@@ -279,7 +224,7 @@ class _QRScanScreenState extends State<QRScanScreen> {
             const SizedBox(height: 8),
             FilledButton.icon(
               key: const ValueKey('qr_scan_submit_button'),
-              onPressed: _submitManual,
+              onPressed: _isProcessing ? null : _submitManual,
               icon: const Icon(Icons.check_circle),
               label: Text(
                 tr('ui.userfront.qr.result_success', fallback: '승인 화면으로 이동'),

userfront/pubspec.lock

@@ -356,6 +356,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  mobile_scanner:
+    dependency: "direct main"
+    description:
+      name: mobile_scanner
+      sha256: c92c26bf2231695b6d3477c8dcf435f51e28f87b1745966b1fe4c47a286171ce
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.2.0"
   node_preamble:
     dependency: transitive
     description:

userfront/pubspec.yaml

@@ -44,6 +44,7 @@ dependencies:
     logging: ^1.2.0
     logger: ^2.0.0
     qr_flutter: ^4.1.0
+    mobile_scanner: ^7.1.4
     easy_localization: ^3.0.7
     toml: ^0.15.0
     web: ^1.1.0