촬리의늘솔길

KISA 핀테크 아카데미 기초반 3일차 2차시 <수업일지> 본문

✍~2022/FinTech

KISA 핀테크 아카데미 기초반 3일차 2차시 <수업일지>

리촬리 2021. 8. 25. 17:20
<Route path="/adduser" exact>
            <AddUser></AddUser>

app.js 에 Adduser 페이지추가

 

 

Adduser .js

const AddUser = () => {
  const openAuthSite = () => {
    let tmpwindow = window.open("about:blank");
    tmpwindow.location.href = "https://naver.com";
    let clientId = "q7kH44ThJwjpvNRg0BbJvE1yxvx5X53DKz1rNgPF";
    //본인의 클라이언트 아이디를 입력해주세요
    tmpwindow.location.href = `https://testapi.openbanking.or.kr/oauth/2.0/authorize?response_type=code&client_id=${clientId}&redirect_uri=http://localhost:3000/authResult&scope=login inquiry transfer&state=12345678901234567890123456789012&auth_type=0`;
  };
  return (
    <div>

authResult 라우터 추가

 

import { useLocation } from 'react-router'

import queryString from "query-string"

//쿼리 스트링을 가져오기 위한 React Hook

npm install query-string

 

쿼리스트링 작업 결과 (로그)

 

화면에 보이게

더보기

Auth Result.js

import React from 'react'
import Header from '../component/Header'
import { useLocation } from 'react-router'
import queryString from "query-string"
//쿼리 스트링을 가져오기 위한 React Hook



const AuthResult = () => {
    const {search} = useLocation();
    const{code} = queryString.parse(search)
    return (
        <div>
            <Header title ="인증결과"></Header>
            <p>인증코드 : {code}</p>
        </div>
    )
}

export default AuthResult

 

 

 

토큰이 안받아와져서 헤맸는데

CORS오류라고 강사님께서 말씀해주심

내일 다시 해보도록!

728x90