abc-waas-prebuiltui-sdk
Advanced tools
ABC WaaS SDK를 위한 미리 만들어진 UI 컴포넌트 라이브러리입니다. abc-waas-core-sdk의 모든 기능을 포함하며, 별도로 abc-waas-core-sdk를 설치할 필요가 없습니다.
useLanguage Hook 제공npm install abc-waas-prebuiltui-sdk
또는
yarn add abc-waas-prebuiltui-sdk
또는
pnpm add abc-waas-prebuiltui-sdk
import React from "react";
import { AbcWaasProvider } from "abc-waas-prebuiltui-sdk";
const config = {
API_WAAS_MYABCWALLET_URL: "https://dev-api.waas.myabcwallet.com",
MW_MYABCWALLET_URL: "https://mw.myabcwallet.com",
CLIENT_ID: "your_client_id_here",
CLIENT_SECRET: "your_client_secret_here",
};
function App() {
return (
<AbcWaasProvider config={config}>
<YourApp />
</AbcWaasProvider>
);
}
export default App;
import { Login } from "abc-waas-prebuiltui-sdk";
function LoginPage() {
return <Login />;
}
import { Logout } from "abc-waas-prebuiltui-sdk";
function UserProfile() {
return <Logout />;
}
로그인 페이지에서 사용할 수 있는 완성된 로그인 UI입니다.
import { Login } from "abc-waas-prebuiltui-sdk";
function LoginPage() {
return (
<div>
<h1>로그인</h1>
<Login />
</div>
);
}
특징:
사용자 프로필이나 설정 페이지에서 사용할 수 있는 로그아웃 버튼입니다.
import { Logout } from "abc-waas-prebuiltui-sdk";
function UserProfile() {
return (
<div>
<h2>사용자 정보</h2>
<Logout />
</div>
);
}
특징:
언어 설정을 관리하는 Hook입니다.
import { useLanguage } from "abc-waas-prebuiltui-sdk";
function LanguageSelector() {
const { language, setLanguage } = useLanguage();
return (
<div>
<p>현재 언어: {language}</p>
<button onClick={() => setLanguage("ko")}>한국어</button>
<button onClick={() => setLanguage("en")}>English</button>
</div>
);
}
기능:
<Login />로그인 UI 컴포넌트
Props: 없음 (환경 변수로 설정)
환경 변수:
REACT_APP_GOOGLE_CLIENT_ID: Google OAuth 클라이언트 IDREACT_APP_GOOGLE_REDIRECT_URI: Google OAuth 리다이렉트 URIREACT_APP_APPLE_CLIENT_ID: Apple OAuth 클라이언트 IDREACT_APP_APPLE_REDIRECT_URI: Apple OAuth 리다이렉트 URIREACT_APP_NAVER_CLIENT_ID: Naver OAuth 클라이언트 IDREACT_APP_NAVER_REDIRECT_URI: Naver OAuth 리다이렉트 URIREACT_APP_KAKAO_CLIENT_ID: Kakao OAuth 클라이언트 IDREACT_APP_KAKAO_REDIRECT_URI: Kakao OAuth 리다이렉트 URIREACT_APP_LINE_CLIENT_ID: LINE OAuth 클라이언트 IDREACT_APP_LINE_REDIRECT_URI: LINE OAuth 리다이렉트 URI<Logout />로그아웃 버튼 컴포넌트
Props: 없음
useLanguage()언어 설정을 관리하는 Hook
반환값:
{
language: "ko" | "en";
setLanguage: (language: "ko" | "en") => void;
}
UseLanguageTypetype UseLanguageType = "ko" | "en";
프로젝트 루트에 .env 파일을 생성하고 다음 환경 변수들을 설정하세요:
# Google OAuth
REACT_APP_GOOGLE_CLIENT_ID=your_google_client_id
REACT_APP_GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback
# Apple OAuth
REACT_APP_APPLE_CLIENT_ID=your_apple_client_id
REACT_APP_APPLE_REDIRECT_URI=http://localhost:3000/auth/apple/callback
# Naver OAuth
REACT_APP_NAVER_CLIENT_ID=your_naver_client_id
REACT_APP_NAVER_REDIRECT_URI=http://localhost:3000/auth/naver/callback
# Kakao OAuth
REACT_APP_KAKAO_CLIENT_ID=your_kakao_client_id
REACT_APP_KAKAO_REDIRECT_URI=http://localhost:3000/auth/kakao/callback
# LINE OAuth
REACT_APP_LINE_CLIENT_ID=your_line_client_id
REACT_APP_LINE_REDIRECT_URI=http://localhost:3000/auth/line/callback
src/
├── components/ # UI 컴포넌트
│ ├── Login.tsx # 로그인 컴포넌트
│ └── Logout.tsx # 로그아웃 컴포넌트
├── hooks/ # 커스텀 Hook
│ └── useLanguage.ts # 언어 관리 Hook
├── types/ # TypeScript 타입 정의
│ ├── language.ts # 언어 타입
│ └── svg.d.ts # SVG 모듈 타입
├── utilities/ # 유틸리티 함수
│ ├── common.ts # 공통 유틸리티
│ ├── google.ts # Google OAuth 유틸리티
│ ├── apple.ts # Apple OAuth 유틸리티
│ ├── naver.ts # Naver OAuth 유틸리티
│ ├── kakao.ts # Kakao OAuth 유틸리티
│ └── line.ts # LINE OAuth 유틸리티
├── assets/ # 정적 자산
│ ├── icons/ # 아이콘 파일
│ └── animations/ # 애니메이션 파일
└── index.ts # 메인 진입점
이 프로젝트는 tsup을 사용하여 빌드됩니다:
npm run build
빌드 옵션:
npm install
환경 변수 설정:
.env 파일에 필요한 OAuth 설정 추가
개발 서버 실행:
npm start
문제: OAuth 인증 후 리다이렉트가 실패합니다.
해결책:
문제: 브라우저에서 CORS 오류가 발생합니다.
해결책:
문제: JWT 토큰 검증이 실패합니다.
해결책:
문제: 언어 설정이 새로고침 후 초기화됩니다.
해결책:
MIT License
Copyright (c) 2024 AhnLab Blockchain Company
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)ABC WaaS Prebuilt UI SDK로 빠르고 안전한 소셜 로그인을 구현해보세요! 🚀
FAQs
ABC WaaS Prebuilt UI SDK for React/Next.js
The npm package abc-waas-prebuiltui-sdk receives a total of 1,306 weekly downloads. As such, abc-waas-prebuiltui-sdk popularity was classified as popular.
We found that abc-waas-prebuiltui-sdk demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.
Application Security
/Research
/Security News
Socket detected multiple compromised CrowdStrike npm packages, continuing the "Shai-Hulud" supply chain attack that has now impacted nearly 500 packages.
Research
/Security News
Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers