2탄은 pocketbase 를 사용해서 회원가입을 하는 방법이다.

1. vscode 에서 회원가입 컨트롤러 구현

UI 는 알아서 예쁘게 꾸미시면 됩니다.

진짜 기본만하겠습니다.

아 그리고 저는 Getx 를 사용합니다.
get 을 안쓰시는 분들은 어떻게 동작하는지 참고하시면 좋을거같습니다.

• 회원가입 페이지 컨트롤러 생성

register-controller.dart

import 'dart:developer';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pocketbase/pocketbase.dart';

import '../global/g_dio.dart';

class RegisterPageController extends GetxController {
  String baseUrl = 'http://127.0.0.1:8090';

  final pb = PocketBase('http://127.0.0.1:8090');
  TextEditingController userId = TextEditingController();
  TextEditingController passWord = TextEditingController();

  
}

register 컨트롤러를 만들고 textField 에 아이디 , 비밀번호, 비밀번호 확인을 입력했을때 text 를 입력받을수있게
TextEditngController 를 선언한다

그리고 register 회원가입 함수를 만든다

그 전에 먼저 pocketbase 의 관리자 토큰을 확인해야함

먼저는 날것의 방법으로 해보려고함

pocketbase 로그인 창으로 다시 이동

F12 개발자 툴 open 하고

로그인하면

이렇게 나옴

밑으로 내리면

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

관리자 토큰 나옴

//! 회원가입 기능
  register() async {
    try {
      var res = await dio.post(
        '$baseUrl/api/collections/users/records',
        options: Options(
          headers: {
            'Authorization':
                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MDc2NjMzMTIsImlkIjoiMjJ6bnExY3V1ZWk0c2U4IiwidHlwZSI6ImFkbWluIn0.oiJnEpQ0ZLEgUNuwkuVMN1muRQnxi7cXTsfJZ2fMnEk',
            'Content-Type': 'application/json',
          },
        ),
        data: {
          'email': userId.text,
          'password': passWord.text,
          'passwordConfirm': passWordConfirm.text,
        },
      );
      inspect(res.data);
      Get.snackbar('success', 'register success',
          backgroundColor: Colors.green, duration: Duration(seconds: 10));
    } catch (e, stackTrace) {
      print(e);
      print(stackTrace);
    }
  }

이렇게 붙여넣으면 됨

컨트롤러 전체 코드

import 'dart:developer';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pocketbase/pocketbase.dart';

import '../global/g_dio.dart';

class RegisterPageController extends GetxController {
  String baseUrl = 'http://127.0.0.1:8090';

  final pb = PocketBase('http://127.0.0.1:8090');
  TextEditingController userId = TextEditingController();
  TextEditingController passWord = TextEditingController();
  TextEditingController passWordConfirm = TextEditingController();

  //! 회원가입 기능
  register() async {
    try {
      var res = await dio.post(
        '$baseUrl/api/collections/users/records',
        options: Options(
          headers: {
            'Authorization':
                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MDc2NjMzMTIsImlkIjoiMjJ6bnExY3V1ZWk0c2U4IiwidHlwZSI6ImFkbWluIn0.oiJnEpQ0ZLEgUNuwkuVMN1muRQnxi7cXTsfJZ2fMnEk',
            'Content-Type': 'application/json',
          },
        ),
        data: {
          'email': userId.text,
          'password': passWord.text,
          'passwordConfirm': passWordConfirm.text,
        },
      );
      inspect(res.data);
      Get.snackbar('success', 'register success',
          backgroundColor: Colors.green, duration: Duration(seconds: 10));
    } catch (e, stackTrace) {
      print(e);
      print(stackTrace);
    }
  }
}

많은 분들이 처음 flutter 를 할때 api 요청시 header 에 토큰을 넣는방법을 궁금해하시거나
모르는 경우가 있음

저도 그랬음

위의 코드를 보면 option 안에 headers 에다가 토큰을 넣으면됨

아 그리고 Content-Type : application/json 을 꼭 넣어줘야함
안넣으면 400 에러남

3. vscode 에서 회원가입 페이지 구현

회원가입 페이지 전체 코드

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:personal_blog/bin/register-pg-ctl.dart';

class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  @override
  Widget build(BuildContext context) {
    RegisterPageController controller = Get.put(RegisterPageController());
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(
          horizontal: 20,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              alignment: Alignment.centerLeft,
              child: Text(
                '아이디',
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              controller: controller.userId,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(15)),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: Text(
                '비밀번호',
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              controller: controller.passWord,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(15)),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            Container(
              alignment: Alignment.centerLeft,
              child: Text(
                '비밀번호 확인',
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              controller: controller.passWordConfirm,
              decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.black,
                      width: 1,
                    ),
                    borderRadius: BorderRadius.circular(15)),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            ElevatedButton(
              onPressed: () {
                controller.register();
              },
              child: Text(
                '회원가입',
              ),
            )
          ],
        ),
      ),
    );
  }
}

email 은 무조건 @ 랑 .com 붙여줘야하고
비밀번호는 8 ~ 72 자리가 되어야함
이러고 회원가입 버튼 누르면 회원가입 완료됨

그리고 회원가입 정보가 생성됨

죄송함다 저녁에 정신없이 작성하다 보니까 이상한 collection 에 회원가입도 아니고 로그인도 아닌 이상한 post 요청 기능을 만들어버렸네요

이번에는 관리자 토큰을 날것의 방법으로 가져와서 썻는데 이후에 좀더 보안적인 부분을 신경쓴 방법을 적어보겠습니다.
다음은 로그인 기능 구현방법을 소개해보겠슴다

[출처] https://velog.io/@sk1440sk/flutter-pocketbase-%EC%82%AC%EC%9A%A9%EB%B2%95-2%ED%83%84%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-%EB%A1%9C%EA%B7%B8%EC%9D%B8