민프
[React][TypeScript] Geetest recaptcha를 적용해보자 본문
1. 먼저 공식홈페이지에서 Free Trial을 클릭해서 회원가입을 해준다.
Geetest CAPTCHA: Protect website, APIs and mobile apps from bots
With 7-layer dynamic protection, GeeTest Bot Management Solutions accurately mitigate online frauds without bothering real users.
www.geetest.com
2. Create application을 클릭하여서 내 프로젝트에 사용할 부분을 만들어준다.
만들어주면 ID 값과 Key값이 나오는데 이 부분을 실제 코드에 넣어줄 것 이다.
3. 개발자 문서에서 React부분을 확인한다.
https://docs.geetest.com/BehaviorVerification/deploy/client/web
Web — geetest
Web Overview This part provides the detailed description of all the configuration and APIs for deploying the CAPTCHA service to the web. Requirements Item Compatibility IE9+, Chrome, Firefox, Safari, Opera, mainstream mobile browsers, and embedded Webview
docs.geetest.com
https://github.com/geetestweb/gt4-public-client-demo/tree/react
GitHub - geetestweb/gt4-public-client-demo: 公有验证码4.0demo
公有验证码4.0demo. Contribute to geetestweb/gt4-public-client-demo development by creating an account on GitHub.
github.com
위 사진에서와 같이 React를 지원하는 것을 확인할 수 있고, 깃허브에 가서 코드를 보면 TypeScrpit로 되어있는 것을 확인할 수 있다.
4. 해당 프로젝트를 Git Clone (브랜치 : react)해준다.
5. 해당 프로젝트를 기준으로 나의 프로젝트에 코드들과 npm을 적용해준다. (개발자 문서 참고)
https://docs.geetest.com/BehaviorVerification/apirefer/api/web
Server — geetest
Web Configuration parameters The configuration parameter here refers to the config object (key-value structure) passed in during initialization verification, that is, the optional parameter configuration of the first parameter passed in when calling the in
docs.geetest.com
코드와 npm들을 적용 후 개발자 문서를 보면서 custom을 해보면 아래와 같이 잘 적용 된 것을 확인할 수 있다.
'[React]' 카테고리의 다른 글
| [React][TypeScript] Zendesk -1 챗봇 적용해보기 (0) | 2023.02.07 |
|---|---|
| [React][TypeScript] 'IntrinsicAttributes & IntrinsicClassAttributes 에러 해결방법 (0) | 2023.02.04 |
| [React][reCAPTCHA] Google reCAPTCHA 테스트 Key (0) | 2023.01.31 |
| [React][TypeScript] React Query- 3 ReactQueryDevTools (0) | 2023.01.28 |
| [React][TypeScript] React Query-2 적용 전 / 후 비교 (0) | 2023.01.28 |
