Flutter Flow에서 FCM 연결해서 Push Notification 연동하기

2024. 8. 27. 23:14 · Projects/Auto Post : SNS 자동 업로더


일단 참고한 영상은

Retrieve the FCM token from Firebase with Auth using Cloud Messaging API (Legacy) 이걸 봤는데 

 

문제가 있다. 바로 HTTP에서 HTTP v1으로 마이그레이션해야한다는 점이다.  

기존 HTTP에서 HTTP v1로 마이그레이션 공식 문서

 

Headers에 Authorization에다가 원래는 FCM 토큰을 발급해서 넣으면 되는데 작년기준으로 FCM이 바뀌어서 OAuth 2.0 액세스 토큰을 발급받아야 해서 찾아보다가 전송 요청 승인 공식 문서 발견!했지만..?

dart 언어가 없다..?

 

해당 코드를 GPT한테 dart로 바꿔달라고하였더니


1. 우선 패키지 설치를 하고

googleapis: ^13.2.0

googleapis_auth: ^1.6.0

dependencies:
  googleapis_auth: ^1.6.0
  googleapis: ^13.2.0
  http: ^0.14.0

 

2. Firebase Admin SDK를 설정하고 Firebase 서비스에 접근하는 방법을 보여주었다. 

import 'dart:convert';
import 'dart:io';

import 'package:googleapis_auth/auth_io.dart';
import 'package:googleapis/firebase_v1beta1.dart'; // Firebase Admin SDK의 Dart 클라이언트
import 'package:http/http.dart' as http;

Future<void> initializeFirebase() async {
  // 서비스 계정 JSON 파일 경로
  final serviceAccountFile = File('path/to/service-account.json');
  
  // 서비스 계정 JSON 파일 로드
  final serviceAccount = jsonDecode(await serviceAccountFile.readAsString());

  // 클라이언트 인증 정보 설정
  final accountCredentials = ServiceAccountCredentials.fromJson(serviceAccount);

  // 사용할 API 범위 (scope) 설정
  final scopes = ['https://www.googleapis.com/auth/cloud-platform'];

  // Firebase Admin SDK 초기화
  final authClient = await clientViaServiceAccount(accountCredentials, scopes);
  
  // Firebase Admin SDK 클라이언트 인스턴스 생성
  final firebaseAdmin = FirebaseApi(authClient);

  // Firebase 서비스 호출 예시
  final projects = await firebaseAdmin.projects.list();
  print('Firebase Projects: ${projects.projects}');
}

void main() async {
  await initializeFirebase();
}

코드 설명

  • File('path/to/service-account.json'): Google Cloud에서 생성한 서비스 계정 JSON 파일의 경로를 지정합니다.
  • ServiceAccountCredentials.fromJson(): JSON 파일에서 클라이언트 인증 정보를 생성합니다.
  • clientViaServiceAccount(): 인증 정보를 사용하여 Google Cloud API 클라이언트를 생성합니다.
  • FirebaseApi(authClient): Firebase Admin SDK 클라이언트 인스턴스를 생성합니다. FirebaseApi는 Firebase Admin SDK의 API 엔드포인트를 정의하는 클래스입니다.

주의 사항

  • 서비스 계정 JSON 파일을 안전하게 관리하세요. 이 파일에 민감한 정보가 포함되어 있습니다.
  • 위의 코드는 Firebase Admin SDK의 Dart 클라이언트를 사용하는 예제입니다. 실제 사용 환경에 맞게 FirebaseApi 클래스를 정의하거나 기존의 Firebase Admin SDK와 호환되는 방법으로 구현해야 할 수 있습니다.

위의 방법으로 Dart에서 Firebase Admin SDK와 Google Cloud 인증을 설정할 수 있습니다. 직접 Firebase Admin SDK의 Dart 클라이언트를 구현하는 것은 복잡할 수 있으니, 필요한 Firebase Admin SDK의 기능을 HTTP 요청을 통해 호출하거나 서버 측에서 구현하는 방법을 고려할 수 있습니다.


 

여기서 중요한건 Google Cloud에서 생성한 서비스 계정 JSON 파일을 생성행하는데 이걸 어떻게 생성하냐 이거야... 그래서 파이어베이스 전용 제미니한테 물어봤는데...!

 

오오? 좀 똑똑한 거 같다 라는 생각을 1초 정도 하고 일단  흠 오키.. 일단 따라가보자 이거야!

서비스 계정까지 왔는데.. 여기다가 무슨 서비스 계정을 넣냐 이거야...


2024/08/27(화)

회의하면서 개발자(ㅇㅈ)님께 여쭤봤는데 서비스 계정별로 어떤 서비스와 어떤 서비스를 연결할지를 알아야한다고 한다. 

예를들면 오토포스트 앱이랑 구글 플레이스토어랑 연결하는 deployment 계정이 있는 것처럼 연결지를 알아야한다고 한다. 그래서 서비스 계정 기능이 무엇인지부터 공부를 다시 시작해야할 것 같다. 


그래서 일단 서비스 계정 만들어서 JSON파일 받음..

근데 Json 파일을 FlutterFlow에 넣을려면 전에 만들어놓은 Send Push Notification API call에 등록을 해야하는데

Authorization = Bearer "SERVER KEY"

 

sever key가 뭔지 모르겠어.. 그래서 https://developers.google.com/identity/protocols/oauth2/scopes?hl=ko#fcm 여기가 API 가져오는 곳이라고 하는데... 흠....

 

OAuth 2.0 토큰 가져오기

 

2.0토큰 : 로그인을 했을때 발급받는 액세스 토큰

 

링크 모음

[Flutter] FCM foreground, background 설정 (IOS, AOS) with local_notification

https://github.com/bulgariamitko/flutterflowtutorials/blob/main/Videos/notifications.php

What's new at Google I/O 2023

How to get a GCP service account key - 구글 서비스 계정 key json 발급받기

OAuth를 사용한 구글 로그인 인증하기 1편 - OAuth 소개와 준비하기

how to create OAuth 2 token for Firebase push notifications V1 API with .NET8 C# on Windows?

What Bearer token should I be using for firebase Cloud Messaging testing?

Google API의 OAuth 2.0 범위

How to Generate Bearer Token

FlutterFlow 프로젝트에 푸시 알림을 어떻게 추가하나요?

FCM으로 푸시 알림 보내기

FlutterFlow Push Notifications Setup without Firebase Auth — Low Code — Part 1

Scheduled Push Notification

플러터 앱에 Firebase Cloud Messaging(FCM) 푸시알림 설정하기 - Android

 

 

 

 

 

 

 

 

 

728x90

'Projects > Auto Post : SNS 자동 업로더' 카테고리의 다른 글

[AutoPost] 무료 자동화 SNS를 체험하실 자영업자 모집 중!  (13) 2024.11.06
[마케팅] Auto Post가 필요한 소상공인 DB를 쌓자  (2) 2024.10.16
[마케팅] 소상공인들을 위한 마케팅 앱! 100장 받고 한 달간 무료 이용 모집  (1) 2024.10.10
FlutterFlow GridView에서 스크롤 활성화하기  (1) 2024.09.19
FlutterFlow 앱 종료 시 원상복구되는 현상 해결 (switch element)  (2) 2024.09.19
'Projects/Auto Post : SNS 자동 업로더' 카테고리의 다른 글
  • [마케팅] Auto Post가 필요한 소상공인 DB를 쌓자
  • [마케팅] 소상공인들을 위한 마케팅 앱! 100장 받고 한 달간 무료 이용 모집
  • FlutterFlow GridView에서 스크롤 활성화하기
  • FlutterFlow 앱 종료 시 원상복구되는 현상 해결 (switch element)
따`ddah
따`ddah
    250x250
  • 따`ddah
    IT's ddah
    따`ddah
  • 관리    글쓰기
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Projects
        • Auto Post : SNS 자동 업로더
      • kmooc
        • 기계 학습 기반의 데이터 공학
      • Algorithm
        • [C] Do it! 자료구조와 함께 배우는 알고리..
        • 알고리즘 스터디
        • 코딩 테스트
      • Basic
        • 운영체제 OS
        • 컴퓨터구조
        • 소프트웨어공학 (UML)
      • DBMS
        • 데이터베이스 이론
        • MySQL
        • Oracle SQL
        • BigQuery
        • Yammer
      • Programming
        • Python
        • C
        • Java
        • React
        • JavaScript
        • R
      • 빅데이터
      • AI
        • 멀티미디어응용
        • 머신러닝
        • 인공지능
      • 자격증
        • Azure DP-900
        • Azure AI-900
        • SQLD
        • CSTS
      • 대외활동 및 인턴
        • 인턴
        • LG Aimers
        • Outta
        • 빅데이터 분석 학회 BDA
        • 세계시민교육연구소 청년단 GYIA
      • Tool
        • Git
        • IDE
      • 도서
        • IT
      • 그 외
        • 단축키
        • ✞
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자료형
    BDA학회
    주석
    이름나이
    자바스크립트
    input
    오라클SQL
    Oracle
    취업준비
    리액트
    빅데이터분석
    jsx
    importturtle
    javascript
    print(f"")
    취업
    티스토리챌린지
    대학생학회
    js
    파이썬 챗봇 만들기
    파이썬
    AI역량검사
    dbms
    react
    Py
    python
    sql
    오블완
    대외활동
    파이썬{}
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
따`ddah
Flutter Flow에서 FCM 연결해서 Push Notification 연동하기
상단으로

티스토리툴바