오늘은 저번 시간과 다르게 클라이언트가 아닌 서버를 활용해 firebase auth 회원가입 예제를 구현해보도록 하겠습니다.
우선 최종 코드 먼저 복붙 하셔서 사용해보시기 바랍니다.
완벽한 웹사이트처럼 구현된 코드는 아니니 이점 유의하시기 바랍니다.
const { request, response } = require('express');
const express = require('express')
const app = express();
var port = 3000
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
var firebase = require("firebase/app");
const firebaseConfig = {
,개인키
};
require("firebase/auth");
require("firebase/firestore");
firebase.initializeApp(firebaseConfig);
app.get('/', (request, response) => {
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post" action="/process">
<label for="pass" class="label">Email Address</label>
<input name="new_email" type="text"><br>
<label for="pass" class="label">Password</label>
<input name="new_pw_1" type="password" class="input" data-type="password"><br>
<label for="pass" class="label">Repeat Password</label>
<input name="new_pw_2" type="password" class="input" data-type="password"><br>
<input type="submit">
</form>
</body>
</html>
`
response.send(html)
})
app.post('/process', (request, response) => {
var post = request.body;
var email = post['new_email']
var new_pw_1 =post['new_pw_1']
var new_pw_2 =post['new_pw_2']
if (new_pw_1!=new_pw_2){
response.send('확인 비밀번호 다름')
} else{
firebase.auth().createUserWithEmailAndPassword(email, new_pw_2)
.then(() => {
response.send('로그인 완료')
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
response.send(error.code)
});
}
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
다음과 같이 입력하면
로그인 완료가 나옵니다.
회원가입 완료인데 실수네요.. 작은 실수니 이해해주세요..
웹 개발자 도구를 켜면 아래와 같이 email, pw데이터가 post방식으로 전달된 것을 알 수 있습니다.
firebase서버에도 이메일이 정상적으로 기록되었습니다.
이메일 형식이 이상하거나 확인 비밀번호를 잘못 입력하면 '로그인 완료' 대신 다른 메시지가 나오니 한 번 씩 해보시기 바랍니다.
이제 코드의 핵심적인 부분을 설명해 드리도록 하겠습니다.
const { request, response } = require('express');
const express = require('express')
const app = express();
var port = 3000
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
var firebase = require("firebase/app");
const firebaseConfig = {
개인키
};
require("firebase/auth");
require("firebase/firestore");
firebase.initializeApp(firebaseConfig);이 부분은 모듈을 가져오고 firebase에 접근하기 위한 부분이니 구체적인 설명은 생략하도록 하겠습니다.
bodyparser부분은 express모듈로 firebase 사용을 목적으로 하는 해당 튜토리얼에서 설명하지 않도록 하겠습니다.
궁금하시다면 express 웹페이지에 접속해서 살펴보시기 바랍니다.
app.get('/', (request, response) => {
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form method="post" action="/process">
<label for="pass" class="label">Email Address</label>
<input name="new_email" type="text"><br>
<label for="pass" class="label">Password</label>
<input name="new_pw_1" type="password" class="input" data-type="password"><br>
<label for="pass" class="label">Repeat Password</label>
<input name="new_pw_2" type="password" class="input" data-type="password"><br>
<input type="submit">
</form>
</body>
</html>
`
response.send(html)
})
이 부분은 회원가입 정보를 입력하는 페이지를 찍어주는 코드입니다.
localhost:3000에 접속하면 나오는 페이지입니다.
해당 코드에서 가장 중요한 것은 html 코드 안에 있는 form 태그입니다.
form 태그쪽 코드를 보면 post방식을 취하고 있고 /process로 정보를 보내주겠다는 코드가 있습니다.
아래에 form data부분처럼 입력한 데이터를 보내주는 코드입니다.
form 태그는 html에서 데이터를 주고받는데 자주 사용되니 개인적으로 반드시 공부해보시기 바랍니다.
app.post('/process', (request, response) => {
var post = request.body;
var email = post['new_email']
var new_pw_1 =post['new_pw_1']
var new_pw_2 =post['new_pw_2']
if (new_pw_1!=new_pw_2){
response.send('확인 비밀번호 다름')
} else{
firebase.auth().createUserWithEmailAndPassword(email, new_pw_2)
.then(() => {
response.send('로그인 완료')
})
.catch(function (error) {
var errorCode = error.code;
var errorMessage = error.message;
response.send(error.code)
});
}
})이 부분이 아마 전 시간과 가장 차이가 나는 부분일 텐데요.
{} 안에 있는 코드들이 html 코드 내에 있었습니다.
때문에 클라이언트 쪽에서 firebase서버와 통신을 진행할 수 있었던 것이지요.
위의 코드에서 app.post는 app.get과 다릅니다.
app.post는 post방식으로 받은 데이터를 받을 수 있도록 합니다.
때문에 request.body로 form data를 받아올 수 있는 것이지요.
그렇게 가져온 데이터를 변수에 넣어주고 firebase.auth() 함수를 이용해 회원가입 프로세스를 진행하는 것입니다.
끝까지 봐주셔서 감사합니다 ㅎㅎㅎ
'기타 > Firebase By Node js' 카테고리의 다른 글
| Firebase auth 사용법 : Firebase 회원가입 예제(1) (0) | 2020.09.13 |
|---|---|
| Firebase 사용법 : 기본 환경설정 (1) | 2020.09.12 |
