[JavaScript] node.js 회원가입시 이메일 인증하여 로그인 하기 구현

 

JavaScript, node.js로 회원가입시 이메일 인증하기 

 

 

html 

'제출'  버튼을 누르면 JS 로 함수 안의 명령들을 처리한 후, joinform.submit() 으로 처리해 주었다. 

    <!---- end intro text section ---->
    <div id="app-content">
        <form id ="joinform" method="post" action="/user/join_success">
            <div class="flow-section account-info-section">
                <div class="container-xs centered">
                    <div class="form-table">
                        <div class="form-element">
                            <input id="username" name="username" type="text" class="generic-input-field form-textbox inputFocus joinJS">
                            <span aria-hidden="true" for="username" class="form-label">이름</span>
                        </div>
                        <div class="form-element">
                            <input id="userbirth" name="userbirth" type="text" class="form-cell form-textbox form-textbox-text form-field inputFocus generic-input-field joinJS">
                            <span aria-hidden="true" class="form-label" for="userbirth">
                                생년월일

 

html_ js

    

    //  모든 절차 통과 후 회원가입 완료
    alert(msg);
    joinform.submit(); 
}

 

아이디, 비밀번호, 이메일 등의 모든 유효성 검사를 거치로 -> sumit()  -> /user/join_success

 

 

user/join_success  js

let join_success = (req, res) => {
    let { username, userbirth, userid, userpw, mobile } = req.body;
    // verifying key 만들어 db에 함께 create 
    let key_for_verify = verifying_key();
    userpw = createPW(userpw);
    users.create({ userid, userpw, username, userbirth, mobile, key_for_verify, })

    let transporter = nodemailer.createTransport({
        service: 'Gmail',
        host: 'smtp.gmail.com',
        auth: {
            user: process.env.GoogleID, //generated ethereal user
            pass: process.env.GooglePW, //generated ethereal password 
        }
    });

    let url = `http://` + req.get('host') + `/user/confirmEmail?key=${key_for_verify}`;
    let options = {
        from: process.env.GoogleID,
        to: '인증메일 받을 이메일 주소 적기',
        subject: '이메일 인증을 진행해주세요.',
        html: `${username}님, 안녕하세요. <h1>이메일 인증을 위해 URL을 클릭해주세요. </h1><br/> ${url}`
    }

    transporter.sendMail(options, function (err, res) {
        if (err) {
            console.log(err)
        } else {
            console.log('email has been successfully sent.');
        }
        transporter.close();
    })
    res.send('<script type="text/javascript"> alert("인증을 위해 이메일을 확인해 주세요."); window.location="/"; </script>');
}


let confirmEmail = async (req, res) => {
    let email_verify = await users.update({ email_verified: true }, { where: { key_for_verify: req.query.key } })
    if (email_verify == undefined) {
        res.send('<script type="text/javascript">alert("Not verified"); window.location="/"; </script>');
        return 0;
    } else {
        res.send('<script type="text/javascript"> alert("Successfully verified"); window.location="/user/login"; </script>');
        }
}

 

login js

let logincheck = async (req, res) => {
    let { userid, userpw } = req.body;
    userpw = createPW(userpw);//고객이 로그인할 때 쓴 비번을 암호화 
    let result = { result: false, }
    let pick = await users.findOne({ where: { userid, email_verified: true } });

    if (pick == undefined) {
        result.msg = '이메일이 존재하지 않습니다.';
    } else {

 

 

 

 

auth: 의 user & pass 는 보안을 위해 .env 파일에 따로 적어놓았다. 

DB에 email_verified 와 key_for_verify 를 만들어 

email_verified = email 검증 되었는지 Boolean (0, 1) 로 표현 

key_for_verify = email 인증 메일 보낼 때 url 끝에 담는 key (randomly 생성) 

 

1. 처음 회원가입할 때 key_for_verify 를 hash로 만들어서 DB에 넣기

2. user에게 email 인증 url 보내기 

3. user가 url 클릭하면 해당 url server 로 구축해 놓기   (user/confirmEmail 부분) 

4. confirmEmail 로 들어오게되면 DB에 넣어둔 (회원가입시 ) key_for_verify가 고객의 url 끝의 key값과 같은 row를 DB에서 찾아서 undefined(없다면) -> not verified alert 있다면 -> login success 

5. user가 login 시 email_verified:true 된 id 만 login success 만들기 

 

 

 

 

배운 점 : server쪽 js에서도 res.send('<script ~ > ) 를 통해 브라우저에 alert를 띄울 수 있다 !!!  '◡'

 

 

 

 

 

 

 

 

 

reference: https://miryang.dev/2019/04/25/nodejs-page-3/

Node.js 기반 홈페이지 만들기 (3) - 회원가입 이메일 인증 - MIRYANG.DEV