[Flutter] 슈파베이스 연동하기 – ❶ 슈파베이스란?

슈파베이스(Supabase)는 모바일 및 웹 애플리케이션 개발 플랫폼을 빠르게 개발할 수 있는 백엔드 서비스입니다. 파이어베이스와 마찬가지로 백엔드를 직접 설계하지 않고 슈파베이스 SDK로 다양한 백엔드 기능을 사용할 수 있습니다. 이번 프로젝트는 슈파베이스와 플러터를 사용해서 일정 관리 앱을 구현해보도록 하겠습니다.

슈파베이스 연동하기는 총 3편입니다.

슈파베이스 연동하기 – ❶ 슈파베이스란?

1. 사전 지식

1.1 슈파베이스란?

앱 개발의 오랜 역사 동안 ‘올인원 백엔드 서비스’라고 하면 파이어베이스가 가장 대표적인 서비스였습니다. 하지만 세계에서 가장 유명한 스타트업 인큐베이터 중 하나인 와이 콤비네이터(Y Combinator)에 2020년 슈파베이스 팀이 합류하면서 큰 변화를 이끌고 있습니다. 슈파베이스는 인증, 데이터베이스, 실시간 구독 등 파이어베이스의 주요 기능을 대체할 수 있는 서비스를 출시하며 그 사업성을 인정받았습니다. 또한 2022년에는 8,000만 달러의 Series B 투자를 유치하기도 했습니다.

관계형 데이터베이스 기반인 슈파베이스

슈파베이스는 ‘파이어베이스의 대안’이라고 마케팅하고 있는 올인원 서버리스(All-in-one Serverless) 백엔드 솔루션입니다. NoSQL 기반인 파이어베이스의 파이어스토어와 다르게 슈파베이스는 프로그래밍 업계에서 가장 많이 사용하는 SQL 데이터베이스중 하나인 PostgreSQL을 사용합니다. PostgreSQL은 관계형 데이터베이스로 데이터를 정규화해 관리하기 편합니다. 슈파베이스를 사용하다가 직접 SQL 데이터베이스를 운영하고 싶어하는 사용자도 많기 때문에 슈파베이스가 PostgreSQL 데이터베이스를 사용한다는건 큰 인기의 비결 중 하나입니다.

슈파베이스의 신념

슈파베이스는 파이어베이스의 주요 기능들을 대체할 수 있는 서비스를 제공하고 있으며, 서비스의 종류는 다음 표에서 확인할 수 있습니다.

▼ 슈파베이스 서비스와 파이어베이스 서비스 비교 및 설명

1.2 행 수준 보안

행 수준 보안(Row Level Security, 이하 RLS)은 PostgreSQL의 강력한 보안 도구 중 하나입니다. PostgreSQL을 사용하는 슈파베이스에서도 RLS는 보안을 설정하는 가장 중요한 기술 중 하나입니다. RLS를 사용하면 CRUDcreate, read, update, delete 작업을 진행할 때 사용자별로 실행할 수 있는 작업을 제한할 수 있습니다. 예를 들어 일정을 수정하거나 삭제하는 기능은 일정을 생성한 사용자만 할 수 있도록 제한할 수 있습니다. 그럼 간단히 RLS를 설정하는 PostgreSQL Policy 문법에 대해 알아보겠습니다.

PostgreSQL Policy 문법 : 기본

CREATE POLICY {name} ON {table_name}
   -- ❶ 다수의 Policy 적용 시 권한 적용 설정
   [ AS { PERMISSIVE | RESTRICTIVE } ]
   -- ❷ 적용할 CRUD 기능 설정
   [ FOR { ALL | SELECT | INSERT | UPDATE | DELETE } ]
   -- ❸ 적용할 대상 설정
   [ TO { role_name | PUBLIC | CURRENT_ROLE | CURRENT_USER | SESSION_USER } [, ...] ]
   -- ❹ 쿼리를 실행할 때 조회 가능 여부를 판단하는 설정
   [ USING ( using_expression ) ]
   -- ❺ INSERT나 DELETE문을 실행할 때 실행할 조건 확인
   [ WITH CHECK ( check_expression ) ]

RLS Policy를 생성할 때 필수 코드는 ‘CREATE POLICY {name} ON {table_name}’입니다. 나머지 조건은 필요에 따라 추가하면 됩니다. {name}에는 Policy의 이름을 입력하면 되고 {table_name}에는 Policy를 적용할 테이블의 이름을 입력하면 됩니다. 다음은 각 Policy에 대한 설명입니다.

다수의 Policy 적용 시 권한 적용 설정

❶ PERMISSIVE와 RESTRICTIVE는 다수의 Policy가 같이 적용되는 상황에 OR 조건을 사용할지 AND 조건을 사용할지 결정하는 값입니다. PERMISSIVE는 어느 쪽이든 하나의 Policy만 충족하면 되는 OR 조건을 사용하게 되고, RESTRICTIVE는 비교적 제한적으로 모든 Policy가 충족되어야 하는 AND 조건을 사용하게 됩니다. 만약 PERMISSIVE와 RESTRICTIVE Policy가 모두 존재한다면 각각 최소 하나의 Policy가 통과돼야만 쿼리 실행이 허가됩니다.

적용할 CRUD 기능 설정

❷ Policy를 적용할 CRUD 기능입니다. SQL에서 실행 가능한 CRUD 기능인 ‘SELECT, INSERT, UPDATE, DELETE’ 모두 입력 가능하며 ‘ALL’ 입력 시 모든 기능에서 Policy가 적용됩니다.

적용할 대상 설정

❸ Policy를 적용할 대상을 정합니다. PostgreSQL에서 제공되는 데이터베이스 관련 권한들을 특정 이름으로 모아 놓은 Role을 입력하면 되며, 기본값은 모두에게 적용되는 PUBLIC입니다.

쿼리를 실행할 때 조회 가능 여부를 판단하는 설정

❹ 쿼리를 실행할 때 조회 가능한 Row를 판단하는 조건을 입력합니다. 일반 SQL문을 입력할 수 있으며 Boolean인 참, 거짓 값을 반환하는 조건을 입력해야 합니다.

INSERT나 DELETE문을 실행할 때 실행할 조건 확인

❺ 데이터를 새로 생성하거나 삭제할 때 허가할지 결정하는 조건문입니다. 일반 SQL문을 입력할 수 있으며 Boolean을 반환하는 조건을 입력해야 합니다. Using문과 다르게 새로 생성 또는 변경될 예정인 데이터에 적용됩니다.

PostgreSQL Policy 문법 : 누구나 데이터를 읽을 수 있는 권한 예제

USING(true)를 입력하면 어떤 상황에서도 조회가 허가되는 조건을 구현할 수 있습니다.

CREATE POLICY "policy_name"
ON public.schedule
FOR SELECT USING (
   true
);

PostgreSQL Policy 문법 : 인증된 사용자만 데이터를 생성할 수 있는 권한 예제

슈파베이스는 authenticated라는 인증된 사용자에게만 부여되는 Role이 있습니다. TO authenticated를 입력하면 인증된 사용자에게만 특정 Policy를 부여할 수 있습니다.

CREATE POLICY "policy_name"
ON public.schedule
FOR INSERT
TO authenticated
WITH CHECK (true);

PostgreSQL Policy 문법 : 이메일에 따라 데이터를 업데이트할 수 있는 권한 예제

슈파베이스에서 auth.jwt( ) 함수를 실행하면 JWT 정보를 가져올 수 있습니다. auth.jwt( ) ->> ‘email’을 실행하면 현재 로그인한 사용자의 액세스 토큰에서 이메일 정보를 추출합니다. 다음 예제는 테이블 email 컬럼에 데이터를 생성한 사용자의 이메일이 입력되는 걸 가정합니다.

CREATE POLICY "policy_name"
ON public.schedule
FOR UPDATE USING (
   auth.jwt() ->> 'email' = email
) WITH CHECK (
   auth.jwt() ->> 'email' = email
);

PostgreSQL Policy 문법 : 생성자만 데이터를 삭제할 수 있는 권한 예제

다음 예제는 테이블 user_id 컬럼에 데이터를 생성한 사용자의 ID가 입력되는 걸 가정합니다.

CREATE POLICY "policy_name"
ON public.schedule
FOR DELETE USING (
  auth.uid() = user_id
);

1.3 슈파베이스 인증

슈파베이스 인증에서 구글 로그인을 사용하려면 파이어베이스 설정을 해야 합니다. 왜냐하면 구글 로그인은 기본적으로 파이어베이스 인증을 통해서 진행할 수 있도록 제작되어 있기 때문입니다. 구글 로그인을 위해 파이어베이스 인증을 추가하지만 파이어베이스 인증이나 파이어스토어같은 파이어베이스 서비스는 이 프로젝트에서 사용하지 않습니다.

1.3.1 OAuth 설정하기

[To Do]

1. 파이어베이스 콘솔로 이동하여 <[MustHave 코드팩토리의 플러터 프로그래밍(2판)> 20장에서 파이어베이스 연동할 때 사용했던 프로젝트를 선택합니다. 다른 프로젝트도 동일하므로 현재 작업 중인 있다면 해당 프로젝트로 진행해도 무관합니다.

2. [설정] > [프로젝트 설정]을 클릭합니다.

3. [서비스 계정] > [서비스 계정 권한 관리]를 클릭합니다.

4. 파이어베이스 프로젝트와 연결된 GCP(Google Cloud Platform) 프로젝트로 연결되면 파이어베이스 프로젝트와 같은 이름의 프로젝트가 실행 중인지 확인합니다. 만약 아니라면 다른 구글 계정으로 콘솔에 진입됐을 수 있습니다. 그렇다면 계정 로그아웃을 한 후 파이어베이스 프로젝트를 생성한 계정으로 다시 로그인해주세요. 동일한 이름의 GCP 프로젝트로 잘 이동이 됐다면 [메뉴] > [API 및 서비스] > [OAuth 동의 화면]을 눌러주세요.

5. [외부] 옵션 버튼을 선택하고 [만들기] 버튼을 누릅니다.

6. 별 표시가 있는 필드는 모두 입력을 한 다음 [저장 후 계속] 버튼을 누릅니다.

7. [범위 추가 또는 삭제] 버튼을 클릭합니다.

8. 맨 위 세 개의 API는 구글 계정과 관련된 것으로 모두 선택해줍니다. 만약 로그인을 한 후 관련된 다른 정보도 받고 싶다면 다른 API도 선택해 추가하면 됩니다. 다음으로 아래에 있는 [업데이트] 버튼을 눌러줍니다. 아래로 스크롤해서 [저장 후 계속] 버튼을 눌러줍니다.

9. 이어서 나온 화면에서도 [저장 후 계속] 버튼을 눌러 진행하고 모든 단계가 확인되면 설정 완료입니다. 모든 단계가 파란색으로 채워지면 설정 완료입니다. [대시보드로 돌아가기]를 눌러 마무리하세요.

1.3.2 파이어베이스 인증 설정하기

슈파베이스 인증 연동을 위해 파이어베이스 인증을 활성화하는 방법부터 배워보겠습니다.

[To Do]

1. 파이어베이스 콘솔(https://console.firebase.google.com)로 접속해서 플러터 프로젝트와 연동되어 있는 프로젝트를 선택합니다.

2. 왼쪽 사이드바에 [빌드] > [Authentication] > [시작하기]를 눌러서 파이어베이스 인증 서비스를 활성화해줍니다. 만약 이전에 파이어베이스 인증을 활성화한 이력이 있다면 이 화면이 나오지 않고 다음 화면이 나올 수 있습니다.

3. [Sign-in method] > [Google]을 눌러서 구글 로그인 설정에 진행합니다.

4. [사용 설정] > [저장] 버튼을 누르면 설정이 완료됩니다. 매우 간단하지 않나요? 앞으로 다른 소셜 로그인 기능이 필요할 경우 파이어베이스 인증에 소셜 로그인 연동을 추가하고 파이어베이 스 인증의 문서를 따라 설정하면 됩니다.

5. 파이어베이스 인증은 디지털 지문 등록을 요구하는 서비스 중 하나입니다. 파이어베이스 인증을 사용하기 위해 Debug SHA-1을 등록해보겠습니다. 실제 프로덕션 환경에서도 사용하고 싶다면 Release SHA-1도 등록해주면 됩니다. 안드로이드 앱은 앱의 개발자를 인증하기 위해서 디지털 지문digital signature을 요구합니다. 추가적으로 파이어베이스 플랫폼에서도 특정 서비스를 사용할 때 디지털 지문 등록을 요구합니다. 플러터 프로젝트도 처음 생성했을 때 기본 전자 서명이 생성되며 이 전자 서명은 원한다면 추후 변경할 수 있습니다. 이제 프로젝트의 안드로이드 디지털 지문을 가져오는 방법에 대해 알아보겠습니다.

6. 탐색기에서 android/gradlew 파일을 우클릭한 후 [Open In] > [Terminal]을 선택합니다. gradlew 파일은 안드로이드 환경에서 프로젝트를 실행해야 생깁니다. iOS 환경에서 실습하고 있는 독자라면 gradlew 파일이 보이지 않을 수도 있습니다. 그럴 경우 Android 환경에서 프로젝트를 한번 실행해서 gradlew 파일을 생성 후 이어서 실습을 진행하세요.

7. 실행된 터미널에서 맥 사용자는 ‘./gradlew signingReport’를 실행해주고 윈도우 사용자는 ‘.\gradlew.bat signingReport’를 실행합니다. 정상적으로 실행되면 상단으로 스크롤해서 “> Task :app:signingReport” 구문을 찾은 다음 Variant: debug를 확인하고 그 아래에 있는 SHA-1 값을 복사합니다. 추후 디지털 지문의 SHA-1 키를 입력하라고 하면 이 값을 입력하면 됩니다.

8. 파이어베이스 프로젝트 선택 후 [세팅] > [프로젝트 설정] > [내 안드로이드 앱] > [디지털 지문 추가] 버튼을 누릅니다.

9. 그다음 저장해두었던 SHA-1 Debug 디지털 지문을 붙여넣습니다. 마지막으로 저장 버튼을 누릅니다.