Final Project DevLog 4

A complete log of the innumerable errors I met today.
1.[Error]アドレスのないページにリダイレクト

client/src/pages/SignIn.jsx

export default function SignIn() {
  const REST_API_KEY = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const REDIRECT_URI = "http://localhost:3000/oauth/kakao";
  const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

  const socialLoginHandler = () => {
    window.location.assign(KAKAO_LOGIN_URL);
  };

  return (
    <button onClick={socialLoginHandler}>Login with Kakao</button>
)
}

上のコードは、Login with Kakaoボタンを押したときに、KAKAO LOGIN URLで接続するロジックです.

    const code = new URL(window.location.href).searchParams.get("code");
      console.log(code); 
    const getuserInfo = (code) => {
      const userInfo = axios.get(`http://localhost:80/oauth/kakao/callback?code=${code}`, { authorizationCode: code });
     };
   이걸 Oauth에서 사용하려 한다.

質問する
まず、上記のコードはKAKAO LOGIN URLで行う必要があります.
SignIn.jsxに入れるべきかどうか、Auth.jsxというページを生成して書くべきかどうか分かりません.
2つ目の方法は正しいようですが、この場合、新しいページ、Appを作成する必要があります.jsのパスはどうしたらいいのか分からず、悩んでいました.
KAKAO LOGIN URLアドレスはhttp://localhost:3000ではなくhttps://kauth.kakao.com/oauth~~なのでpathのアプリを集めました.jsは接続できないように見えます.
数時間の思考を経て(🥲), KAKAO LOGIN URLページが何ページなのか間違って理解していたことに気づきました.
24172❌本来思っていたKAKAO LOGIN URLページがKAKA IDとパスワードされ、アドレスウィンドウコード=認証コードを受け取る場所:
実際、KAKAO LOGIN URLページはKAKA IDをダンプするページです(上のアドレスウィンドウをよく見るとすぐにわかります):2479182

、すなわちREDIRECT URI、「http://localhost:3000/oauth/kakao「プラス」次の画面.」
❗️ Logging In...アプリケーションは、画面がhttp://localhost:3000で始まるためです.jsからpathまで1ページにリンクできます!👏👏
/oauth/kakaoは、kakao開発者で設定したredirect uriです.(変更可能)

上のロギングIn...画面表示中は、次の論理が実行されます.
1.クライアントがKakaoに認証コードを請求する
2.サーバに渡す
3.認証コードでサーバoauthを設定します.jsでKakaoのEXSESTORKENをいただきました
4.https://kapi.kakao.com/v2/user/meでKACAにユーザ情報を要求して受信し、クライアントに送信する.
解決する
client/src/pages/Oauth.jsxファイルを作成し、次の論理を挿入します(論理のみを参照).

   const code = new URL(window.location.href).searchParams.get("code");
      console.log(code); 
    const getuserInfo = (code) => {
      const userInfo = axios.get(`http://localhost:80/oauth/kakao/callback?code=${code}`, { authorizationCode: code });
     };

App.jsに<Route path="/oauth/kakao" element={<Oauth />} />を追加するとLogging In...表示されるページはアドレスがあるページなので、ファイルに追加してauthしてください.jsx内にコードを書けばいいです.
コード#コード#
(Redux-toolkit)

function Oauth() {
  const code = new URL(window.location.href).searchParams.get("code");

  const navigate = useNavigate();
  const dispatch = useDispatch();
  const userInfo = useSelector((state) => state.user);

  useEffect(async () => {
    await axios
      .post(`http://localhost:80/oauth/kakao?code=${code}`)
      .then((data) => {
        console.log(data);
        console.log("서버에서 주는 유저인포", data.data.data.userInfo);
        dispatch(setUserInfo(data.data.data.userInfo));
      //const userLocalInfo = JSON.stringify(data.userInfo);
      //localStorage.setItem("userLocalInfo", userLocalInfo);
      //First Project에서는 위 코드처럼 유저정보를 Redux로 local에 저장했지만, 이 경우에 새로고침을 했을 때 정보가 날아가서 이번에는 그렇게 하지 말고 accessToken으로 처리를 시도해보려 한다.
        navigate("/");
      })
      .catch((err) => console.log(err));
  }, []);

  return (
    <>
      {userInfo.id ? (
        <Navigate to="/" />
      ) : (
        <div className="flex justify-center items-center text-ducks-gray-666 font-poppins text-18 m-90 h-18 w-18">
          Logging In...
        </div>
      )}
    </>
  );
}

2. [Error] .envファイルの設定
サーバではどうでもいいですが、クライアントでは.envファイルの変数にREACT_APP_を付ける必要があります.
クライアントファイルでは、`${process.env.REACT_APP_KAKAO_CLIENT_ID}`がこのように書かれています.
どうして知ってるの.

私はこの間違いに遭遇しました.分かりました.🥶
(画面上のソリューションをクリックしてここです。に移動します.その後発生した問題もここで最初の原因を見つけました.2番目はグーグルと直接エラー処理で解決しました.)
3.メールはありませんか.
オプションが設定されていても,サーバ端末にはユーザのメール情報がKACAから受信できないというエラーがある.
KAKAO LOGINのURLには&scope=account_emailが付いていることがGoogleで分かった.
つまり.const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}&response_type=code&scope=account_email`;最初は起動しました.しかし,ネットワークコンソールでは500エラー,サーバ端末では400エラー,Redirect URI Missmatchエラーなど多くのエラーが発生した.

単純なタイピングの問題もあります.envファイル設定の問題もあり、サーバ端末でKakaoUserInfoから受信したユーザ情報(KakaoUserInfo.data.kakao accountアクセス)にemailとprofile情報があることを確認して解決し、クライアントでデータを取得した.data.data.ユーザ情報をuserInfoで受信することもコンソールで撮影するのに多くの時間を費やし,それを意識している.
要するに、次のコードを使用すると、正常に動作します.const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}&response_type=code`🍟 サーバ上のノードインデックス.jsでサーバ実行ページを開くと、サーバ側に多くの情報が印刷されます.(もちろん、コンソールに撮る情報)をサーバファイルにconsole.logと書いてから撮ることができます.)ここで見た情報と誤った説明をよく読むと、グーグルが答えを見ることができることに気づきました.
4.[Error]userEffectを使用
質問する
KakaoLogin画面と同意画面を見てエラーを解決しようとしたのですが、一度ログインしてから情報がずっと保存されているかどうかわからず、そのままログインした状態でhttp://localhost:3000からアップロード.
だからスッキリ.
「Chrome設定」>「セキュリティとプライバシー」>「ネットワーク使用レコードの削除」>「拡張」ですべてのレコードを削除し、Chromeの終了後に再開します.
解決したと思っていたのですが、KakaoLoginまで行くと表示されますが、同意の画面が上がったり下がったりしていました.シークレットモードでのログインを繰り返し、通常モードでのログインとなったが、これも初めて使用された.
解決する
これは、最初はuserEffectではなく、以下のコードが記述されているためです.

axios
    .post(`http://localhost:8080/oauth/kakao/callback?code=${code}`)
    .then((data) => {
      dispatch(setUserInfo(data.data.data.userInfo));
      navigate("/");
    })
    .catch((err) => console.log(err));

これは以下のように変更して、解決しました.(+async、非同期処理を待って、私が望む順番(vscode上の順番)で開発者コンソールに撮られて、とても美しいです.)

useEffect(async () => {
    await axios
      .post(`http://localhost:80/oauth/kakao?code=${code}`)
      .then((data) => {
        dispatch(setUserInfo(data.data.data.userInfo));
        navigate("/");
      })
      .catch((err) => console.log(err));
  }, []);

n/a.結論
デザインはまだ完成していません.😅

たくさんの情報が伝わってきた.