呑呑呑チームプロジェクト-その他の情報を入力

まず前にやっている間に止まったので、私たちはコインを利用して情報を取得しました.
もともとこの部分はバックグラウンドでやっていたのですが、テストのためにブログの内容を見てその通りにしました.
public/index.htmlで、次のコードをheadラベルに入れます.

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

アプリもありますjsをブログを見てフォローすると、またエラーが発生し、次のコードのように置き換えられます.

import "./App.css";
import Auth from "./Auth";
import Profile from "./Profile";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";

function App() {
  return (
    <Router>
    <div className="App">
      <Routes>
        <Route path="/oauth/kakao/callback" element={<Authcheck />} />
        <Route path="/" element={<KakaoLogin />} />
        <Route path="/profile" element={<Pro />} />
      </Routes>
    </div>
    </Router>
  );
}
export default App;

function KakaoLogin() {
  const REST_API_KEY = "526de075efd0393b1b3dd0cbc43354ed";
  const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback";
  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  
  return <a href={KAKAO_AUTH_URL}>Kakao Login</a>;
}

function Authcheck() {
  return Auth()
}

function Pro() {
  return Profile()
}

Auth.js

import React from "react";
import { useEffect } from "react";
import axios from "axios";
import qs from "qs";
import { useNavigate } from "react-router-dom";

const Auth = () => {
    const REST_API_KEY = "526de075efd0393b1b3dd0cbc43354ed";
    const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback";
    const CLIENT_SECRET = "5kIEwgPacM7aV9m1Yk6BXRqdaTLe2jh1";

    const code = new URL(window.location.href).searchParams.get("code");
    
    const navigate = useNavigate();

    const getToken = async () => {
        const payload = qs.stringify({
            grant_type: "authorization_code",
            client_id: REST_API_KEY,
            redirect_uri: REDIRECT_URI,
            code: code,
            client_secret: CLIENT_SECRET,
        },
        console.log(code));

        try {
        // access token 가져오기
        const res = await axios.post(
          "https://kauth.kakao.com/oauth/token",
          payload
        );
        
        // Kakao Javascript SDK 초기화
        window.Kakao.init(REST_API_KEY);
        // access token 설정
        window.Kakao.Auth.setAccessToken(res.data.access_token);
        navigate("/profile");
        } catch (err) {
            console.log(err);
        }
    };

    useEffect(() => {
        getToken();
      }, []);
    return null;
};

export default Auth;

ブログではushistoryを使用していますが、これもスイッチがルータに変更されたようにNavigateに変更されました.
だから探して、上のように変えました.
Profile.jsファイルを作成し、次のコードを追加しました.

import React, { useEffect, useState } from "react";

const Profile = () => {
  const [user_id, setUserId] = useState();
  const [nickName, setNickName] = useState();
  const [profileImage, setProfileImage] = useState();

  const getProfile = async () => {
    try {
      // Kakao SDK API를 이용해 사용자 정보 획득
      let data = await window.Kakao.API.request({
        url: "/v2/user/me",
      });

      // 사용자 정보 변수에 저장
      setUserId(data.id);
      setNickName(data.properties.nickname);
      setProfileImage(data.properties.profile_image);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
    getProfile();
  }, []);
  return (
    <div>
      <h2>{user_id}</h2>
      <h2>{nickName}</h2>
      <img src={profileImage}></img>
    </div>
  );
};

export default Profile;

コードの説明を見たい場合は、ブログに詳しくリストしてください.
そしてサーバーを開いて入り、
こうしてメンバー番号のニックネーム履歴書の写真が届きました
次に、Webサイトに必要な他の情報を入力する情報入力フォームを作成します.
プロジェクト1で作成したボイラーボードに会員登録書類を作成しました
そこでコードを使ってみましょう.
ExtraInformation.jsという名前のファイルを作成し、次のコードを追加しました.

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'


function ExtraInformation(props) {
  const navigate = useNavigate()
  const  [Email, setEmail] = useState("")
  const  [Name, setName] = useState("")
  const  [Password, setPassword] = useState("")
  const  [ConfirmPassword, setConfirmPassword] = useState("")

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value)
  }

  const onNameHandler = (event) => {
    setName(event.currentTarget.value)
  }

  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value)
  }

  const onConfirmPasswordHandler = (event) => {
    setConfirmPassword(event.currentTarget.value)
  }

  const onSubmitHandler = (event) => {
    event.preventDefault();
    
    let body = {
      email: Email,
      password: Password
    }

  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column' }}
        onSubmit={onSubmitHandler}>
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        
        <label>Name</label>
        <input type="text" value={Name} onChange={onNameHandler} />

        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />

        <label>Confirm Password</label>
        <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler} />

        <br />
        <button type="submit">
          Register
        </button>
      </form>
    </div>
  )
}

export default ExtraInformation

これはボイラーボードの会員入力コードです.これを修正します.
必要な追加情報が何なのかを考えると、まずネット名が必要かもしれませんが、今は使用条項に同意し、マーケティングの同意を受けることに同意しただけなので、これを追加しました.
ボタンを選択すると、誰もが選択され、解け、グーグルで検索して入れます.

import axios from 'axios';
import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

function ExtraInformation(props) {
  const navigate = useNavigate()
  const [NickName, setNickName] = useState("")
  const [allCheck, setAllCheck] = useState(false);
  const [ageCheck, setAgeCheck] = useState(false);
  const [useCheck, setUseCheck] = useState(false);
  const [marketingCheck, setMarketingCheck] = useState(false);

  const onNickNameHandler = (event) => {
    setNickName(event.currentTarget.value)
  }

  const allBtnEvent =()=>{
    if(allCheck === false) {
      setAllCheck(true);
      setAgeCheck(true);
      setUseCheck(true);
      setMarketingCheck(true);
    }else {
      setAllCheck(false);
      setAgeCheck(false);
      setUseCheck(false);
      setMarketingCheck(false);
    } 
  };
  
  const ageBtnEvent =()=>{
    if(ageCheck === false) {
      setAgeCheck(true)
    }else {
      setAgeCheck(false)
    }
  };
  
  const useBtnEvent =()=>{
    if(useCheck === false) {
      setUseCheck(true)
    }else {
      setUseCheck(false)
    }
  };
  
  const marketingBtnEvent =()=>{
    if(marketingCheck === false) {
      setMarketingCheck(true)
    }else {
      setMarketingCheck(false)
    }
  };

  useEffect(()=>{
    if(ageCheck===true && useCheck===true && marketingCheck===true){
      setAllCheck(true)
    } else {
      setAllCheck(false)
    }
  }, [ageCheck,useCheck, marketingCheck])

  const onSubmitHandler = (event) => {
    event.preventDefault();
    
    if(ageCheck===true && useCheck===true){
      let body = {
        nickName: NickName,
        agreeMarketing: marketingCheck 
      }
      axios.post('/api/extraInfo', body)
      .then(res => console.log(res.data))
      .catch(err => console.log(err))
    }
  }

  return (
    <div style={{
      display: 'flex', justifyContent: 'center', alignItems: 'center',
      width: '100%', height: '100vh'
    }}>
      <form style={{ display: 'flex', flexDirection: 'column' }}
        onSubmit={onSubmitHandler}>
        <label>닉네임</label>
        <input type="text" value={NickName} onChange={onNickNameHandler} />

        <di>
        		<input type="checkbox" id="all-check" checked={allCheck} onChange={allBtnEvent}/>
        		<label for="all-check">전체동의</label>
        </di>

        <div>
        		<input type="checkbox" id="check1" checked={ageCheck} onChange={ageBtnEvent}/>
        		<label for="check1">만 14세 이상입니다 <span >(필수)</span></label>
        </div>

        <div>
        		<input type="checkbox" id="check2" checked={useCheck}  onChange={useBtnEvent}/>
        		<label for="check2">이용약관 <span >(필수)</span></label>
        </div>
        
        <div>
        		<input type="checkbox" id="check3" checked={marketingCheck}  onChange={marketingBtnEvent}/>
        		<label for="check3">마케팅 동의 <span >(선택)</span></label>
        </div>

        <br />
        <button type="submit">
          Register
        </button>
      </form>
    </div>
    
  )
}

export default ExtraInformation

ここで受け取った結果が正しいか確認してみましょう.
サーバ側のインデックス.jsは次のコードでaxiosを受け入れました

app.post('/api/extraInfo', (req, res) => {
  const user = new User(req.body)

  user.save((err, userInfo) => {
    if (err) return res.json({ success: false, err})
    return res.status(200).json({
      success: true
    })
  })
})

コードはモンゴルDBにデータを入れるコードです
最初は11000コードエラーばかりだったので検索してみるとモンゴルDBコレクションを削除すればいいと聞いたので削除しました.

そしてデータは正常に転送されました.

モンゴルDBにも正常なデータがあります
テストのために、ユーザー・スキーマを作成しました.