본문 바로가기

Project 기록/와글와글(web)

[프로젝트] nodemailer 사용해서 인증번호 확인 해보자 ② (react)

728x90
반응형

 

①에서는 먼저 입력해 놓은 내용을 클라이언트에게 메일을 보냈었다 

 

이제는 난수를 생성하고 고것이 사용자가 다시입력한 것과 일치하는지 알아 보자!!!

 

 

 


 

우선 서버에게 요청할 함수.js다.

 

발송된 인증번호를 number에 , 내가입력한 인증번호를 inputnumber로 뒀따

constructor(props) {
        super(props);
        this.state = {
            email: '',
            usingemail: false, // 인증번호가 맞아서 가입가능한가??

            number: '',      //보내진 인증번호
            inputnumber: '', //내가 입력한 인증번호
                             // 이 두개가 똑같아야 한다
        }




sendEmail(e){
        e.preventDefault();
        console.log(this.state.email);
        const data = {
            email: this.state.email           //입력한 email state값
        }

        fetch('http://localhost:3001/sendEmail',{
            method: "post",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
        })
        .then(res => res.json())
        .then(json => {
            this.setState({
                number: json.number,       //number이름의 state값에 생성한 인증번호를 받아왔따
            })

            console.log(this.state.number);
        })
        
    }

 

 

 

 

이제 서버.js 를 보자

 

①의 코드에서 추가 되었다.

 

router.post('/sendEmail', async function (req, res) {


    let user_email = req.body.email;    //받아온거

    console.log(user_email);

    let number = Math.floor(Math.random() * 1000000)+100000; // ★★난수 발생 ★★★★★
    if(number>1000000){                                      // ★★
       number = number - 100000;                             // ★★
    }

    console.log(number);

    // 메일발송 함수

    let transporter = nodemailer.createTransport({
        service: 'gmail'
        , prot: 587
        , host: 'smtp.gmlail.com'
        , secure: false
        , requireTLS: true
        , auth: {
            user: '구글.com'
            , pass: '비밀번호'
        }
    });

    let info = await transporter.sendMail({
        from: '구글@gmail.com',
        to: user_email,         //받아온 이메일 에게
        subject: '인증번호입니다!',
        text: String( number ),        //이 부분은 string값만 보낼수 있다길래
      });                              // 강제로 변경 해줬따


      let checkemail = await new Object();
        checkemail.number = number;        // checkemail 객체를 따로 만들고

     await res.send(checkemail);           // 클라이언트에게 보내기


})

 

math.random() :  0 이상 1 미만의 난수를 만든다 1000000을 곱해줫으니까 6자리 랜덤 숫자가 나올 것이다

 

(코드를 보면 await을 남발했다 잘 몰라서 순서를 주고싶었다. 더 공부를 하자 !!!!)

 

 

 

발송을 해보면  랜덤 숫자가  도착했다

 


 

이제 발송된 인증번호와 내가 친 인증번호가 맞는지 확인 해보자

 

async onSubmit(e) {
        e.preventDefault();

        if(this.state.number == this.state.inputnumber){ // 인증번호가 맞는지 검사 현재 number는 스트링 값
            this.setState({
                usingemail : true
            })
            
         console.log("인증번호 맞다");
            
    }

 

if 문에 `===` 가 아닌 `==` 를 줬다

 

아까 위의 코드에서 string값으로 변환을 해줫더니 그게 남아있나 보다 데이터 타입이 달라도 되는 ==를 사용했다

 

 

 

 

 


결과: 

 

이메일을 치고 전송을 눌렀다 

 

 

 

 

 

 

인증번호를 입력 하니 console창이 맞다고 외쳐준다 

 

 

 

 

고맙닫!!!

 

 

 

 

 

반응형