오픈 뱅킹

오픈 뱅킹 관련하여 테스트용으로도 AccessToken를 발급받지 못하는 문제로 프로젝트 시연 과정은 찍지 못했습니다.

[ 계좌 목록 및 내역 확인 절차]

과정

일부 스크린샷

(인증)

오픈 뱅킹 사이트에서 redirection URL 등 설정 후, 환경변수 세팅하기

사용자 인증 (인증 사이트로 redirect)

OAuth - AccessToken 발급

사용자 인증 완료 후, 설정한 redirection URL에서 인증 코드 받기
useEffect를 이용하여 받은 코드로 다시 요청을 보내서 AccessToken과 유저고유번호를 받아옴
로컬 스토리지에 해당 정보 저장후 /list 등 은행 목록 조회 페이지로 redirect

(계좌 목록 페이지)

headers에 Authorization의 값으로 AccessToken, params에 유저고유번호를 첨부하여 GET 요청

받아온 data 목록을 map을 이용하여자식 item 컴포넌트로 전달 (은행이름, 은행번호, 은행별칭 데이터)

화면에 그려주기 (예: 국민은행 000-000.. 잔액조회버튼, QR이체버튼 / 신한은행 000-000.. 잔액조회버튼, QR이체버튼)

특정 은행 잔액조회 버튼 클릭 시, 해당 은행 번호를 query로 redirect (예: /balance?bankNum=${bankNum} )

(계좌 목록 상세 페이지: 잔액 및 사용 내역조회)

은행 번호 query 추출하여 변수에 담기

params 키로 요구하는 항목들 담아서 AccessToken과 함께 잔액, 사용내용 GET 요청 보내기

받아온 잔액 데이터 잔액 화면에 그려주기 (예: 잔액조회 - 국민은행 : 잔액 500,000원 - 사용가능 금액 : 500,000원)

받아온 사용 내역 데이터 화면에 그려주기 (예: 날짜 - 23.9.11 , 내용 - 편의점 , 금액 - 3,000원 , 잔액 500,000원)

(계좌 목록 상세 페이지: QR 조회)

QR 코드 띄우기 - 내가 돈을 이체해주어야 할 상대방의 은행 QR 코드를 읽는 상황

QR Reader 페이지에서 QR 코드 인식 후, 계좌 이체 모달 띄우기 (예: 내 계좌 번호 : ~~, 이체할 계좌번호 : QR에서 추출된 번호, 보낼 금액 : {입력}) 메시지 - ~~~계좌로 $$$원을 이체합니다 .)

그 뒤 성공 또는 실패 응답 코드 발송

Next.js에서 CORS Proxy 설정

chore: CORS Proxy 설정

rewrites를 이용하여 오픈뱅킹 API 루트인 v2.0/{모든경로} 인 경우에 proxy 설정을 해주어 CORS 문제를 해결하였습니다.


/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/v2.0/:path*',
        destination: 'https://testapi.openbanking.or.kr/v2.0/:path*',
      },
    ];
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

QR 코드 다루기

(QR 코드 생성)


'use client';
import React from 'react';
import { QRCodeSVG } from 'qrcode.react';
import styles from './qr.module.css';


const QrCode = () => {
  const fintech_use_num = '120230044088951024139191'; // 상대방의 은행 번호

  return (
    <div className={styles.qrContainer}>
      <QRCodeSVG size={256} value={fintech_use_num} />
      <p className={styles.finNum}>{fintech_use_num}</p>
    </div>
  );
};

export default QrCode;

(QR 리더기로 해당 값 읽기)


'use client';
import React, { useState } from 'react';
import QrCodeReader, { QRCode } from 'react-qrcode-reader';
import styles from './qr.module.css';
import ModalWithdraw from '@/components/withdraw/ModalWithDraw';

const QrReaderPage = () => {
  const [val, setVal] = useState(''); 
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleRead = (val: any) => {
    setIsModalOpen(true);    // 카메라로 QR을 찍었을 때, 
    setVal(val);   // 상대방 계좌를 저장 후 모달을 띄우고, 모달 컴포넌트로 값 전달
  };

  return (
    <div className={styles.qrContainer}>
      <QrCodeReader delay={100} width={600} height={500} action={handleRead} />
      {isModalOpen && <ModalWithdraw toFinNum={val} setIsModalOpen={setIsModalOpen} />}
      {val}
    </div>
  );
};

export default QrReaderPage;