반응형

 

1. Firebase App Check

- 앱의 보안성을 강조하기 위한 서비스 입니다. 앱의 무단 접근, 자동화 봇 등에 의한 보안 위협으로부터 앱을 보호하면, 신뢰할 수 있는 사용자만이 앱에 액세스 할 수 있도록 보장합니다.

- Firebase App Check는 클라이언트-서버 인증 방식을 사용하여 동작합니다. 앱 클라이언트는 인증된 앱으로 등록되어 있는지 확인하기 위해 Firebase App Check SDK를 사용하여 앱 서버에 요청을 보내고, 서버는 이 요청에 대해 Firebase App Check API를 사용하여 요청을 검증합니다. 이를 통해 클라이어트가 신뢰할 수 있는 Firebase 프로젝트에 속하는 앱인지 확인하고, 무단 액세스를 차단할 수 있습니다.

 

2. Flutter에 적용하기

  • Firebase Console에서 Firebase 프로젝트를 생성하고, 해당 프로젝트에 Firebase App Check를 활성화합니다.
  • Flutter 프로젝트의 pubspec.yaml 파일에  Firebase App Check Flutter 패키지를 추가합니다. 
dependencies:
  firebase_app_check: ^0.7.0
  • Flutter 프로젝트의 main.dart 파일에 Firebase App Check를 구성합니다. 
import 'package:firebase_app_check/firebase_app_check.dart';
import 'package:flutter/material.dart';

void main() async {
  // Firebase 초기화
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // Firebase App Check 활성화
  FirebaseAppCheck.instance.activate(webRecaptchaSiteKey: 'YOUR_RECAPTCHA_SITE_KEY');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Firebase App Check Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Firebase App Check Demo'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}
  • Firebase App Check를 사용하여 네트워크 요청을 검증하기 위해 package:http 패키지를 사용하여 네트워크 요청을 보낼 때, FirebaseAppCheckToken을 추가합니다.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:firebase_app_check/firebase_app_check.dart';

final _httpClient = http.Client();

Future<String> fetchData() async {
  // Firebase App Check 토큰 가져오기
  final FirebaseAppCheckToken appCheckToken = await FirebaseAppCheck.instance.getToken();

  // 네트워크 요청 보내기
  final response = await _httpClient.get(
    Uri.parse('https://example.com/data.json'),
    headers: {
      // Firebase App Check 토큰 헤더 추가
      'X-Firebase-AppCheck': 'Bearer ${appCheckToken.token}',
    },
  );

  // 데이터 반환
  return utf8.decode(response.bodyBytes);
}

 

728x90
반응형
반응형
  • 일반 쿼리와 같이 특정 조건에 맞는 데이터를 찾고자할때 where를 사용한다. 
  • 예를 들어 현재 시간과 같거나 이전에 등록된 상품을 조회한다고 한다면 아래와 같이 쓰게 된다.
var snapshot = await FirebaseFirestore.instance.collection('product')
        .where('regTime', isLessThanOrEqualTo: DateTime.now().toString())
        .get();
  • 조회한 데이터를 sort시킨다고 하면 이 또한 일반 쿼리에서 사용하는 orderBy를 사용하면 된다.
  • 예를 들어 등록된 시간별로 sort시켜보자.
// 내림 차순
var snapshot = await FirebaseFirestore.instance.collection('product')
        .orderBy('regTime', descending: true)
        .get();
        
// 오름 차순
var snapshot = await FirebaseFirestore.instance.collection('product')
        .orderBy('regTime')
        .get();
  • 만약 sort 조건으로 두가지 이상을 사용한다고 하면 orderBy 뒤에 추가로 .orderBy(${field})를 추가해주면 된다.
  • 단 firebase는 단일 필드에 대한 인덱스는 자동으로 제공하지만 두가지 이상에 대해서는 직접 색인(index)를 추가해주어야 한다.
  • 그럼 where와 orderBy를 같이 사용하려고 한다면 어떻게 될까? 
var snapshot = await FirebaseFirestore.instance.collection('product')
        .where('regTime', isLessThanOrEqualTo: DateTime.now().toString())
        .orderBy('productName', descending: true).orderBy('price')
        .limit(5)
        .get();
  • 위의 코드와 같이 where조건과 orderBy를 진행했으나 원하는 결과가 아닌 오류가 발생하였다.
Failed assertion: line 487 pos 13: 'conditionField == orders[0][0]': 
The initial orderBy() field "[[FieldPath([productName]), true]][0][0]" 
has to be the same as the where() field parameter "FieldPath([regTime])" 
when an inequality operator is invoked.
  • where절에 사용한 parameter와 뒤에 이어지는 orderBy가 같아야 한다는 의미 메시지를 던져주게 된다.
  • 결과적으로 where와 orderBy를 같이 사용할때는 where절에 사용한 필드에 대한 orderBy가 바로 뒤에 따라오고 그 다음에 원하는 orderBy를 사용해야만 한다.
var snapshot = await FirebaseFirestore.instance.collection('product')
        .where('regTime', isLessThanOrEqualTo: DateTime.now().toString())
        .orderBy('regTime', descending: true)
        .orderBy('productName', descending: true).orderBy('price')
        .limit(5)
        .get();
  • 그리고 저렇게 된다면  where절에 사용한 필드를 orderBy에 사용했기때문에 firebase의 색인에 위의 코드에서 orderBy에 사용한 세가지 필드의 sort조건에 맞는 색인을 만들어 두어야 한다.
728x90
반응형

+ Recent posts