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 하고
로그인하면
이렇게 나옴
밑으로 내리면
관리자 토큰 나옴
//! 회원가입 기능
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 요청 기능을 만들어버렸네요
이번에는 관리자 토큰을 날것의 방법으로 가져와서 썻는데 이후에 좀더 보안적인 부분을 신경쓴 방법을 적어보겠습니다.
다음은 로그인 기능 구현방법을 소개해보겠슴다
성장중인 백엔드 개발자!!