윅스 (Wix) 코딩 강의 고급 (Advanced) - 캡챠 인증 만들기 (reCAPTCHA) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 캡챠 인증 만들기 (reCAPTCHA) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 고급 (Advanced) - 캡챠 인증 만들기 (reCAPTCHA) - 상호작용 (Interactions)

강의 내용 요약

다음의 예제는 Wix 윅스 무료 홈페이지 만들기의 자바스크립트 (Javascript) 코딩 기능을 활용할 수 있는 Corvid by Wix (윅스 코딩 - 콜비드) 를 활용하여 만듭니다.

 

웹사이트 내에 스팸이나 로봇이 아님을 인증하는 캡챠 시스템을 만들 수 있습니다.

 

예제 보러가기 (View Example)

Home | Captcha Example-View

 

예제 에디터 확인하기 (Edit Now)

Log In | Wix

 

 

강의 내용 만드는법

만들고자 하는 윅스 사이트에 다음과 같은 구성 요소들이 필요합니다.

• 데이터베이스 컬렉션
• 텍스트
• 입력란
• 버튼
• 데이터셋

 

코드 (Code)

Home

import { processSubmissionRequest } from 'backend/captchaModule' // Import our form submission backend function

$w.onReady(function () {
	$w('#captcha').onTimeout(() => {
		$w('#signupButton').disable();
	})
	$w('#captcha').onError(error => {
		showError(error);
		$w('#captcha').reset()
		$w('#signupButton').disable();
	});
	$w('#captcha').onVerified(() => {
		$w('#signupButton').enable();
	})
});

export function signupButton_click(event) {
	$w('#submisisonStatusText').hide();
	let submissionRequest = {
		token: $w('#captcha').token,
		form: {
			fullName: $w('#fullNameInput').value,
			email: $w('#emailInput').value,
			businessType: $w('#businessModelInput').value
		}
	}
	processSubmissionRequest(submissionRequest)
		.then((item) => {

			//If everything is in order and the item is submitted, we refresh the applications-counter, show a success message and reset the captcha.
			$w('#signupButton').disable();
			$w('#submisisonStatusText').html = `<span style='color: green; font-size: 1.5em; text-align: 'center''>Beta Application submitted successfully!</span>`;
			$w('#submisisonStatusText').show();
			$w('#betaApplicationsCounter').refresh().then(countAndDisplayBetaApplications)
			$w('#captcha').reset();
		})
		.catch((error) => {
			$w('#captcha').reset();
			showError(error);
		})
}

export function betaApplicationsCounter_ready() {
	countAndDisplayBetaApplications();
}

function countAndDisplayBetaApplications() {
	let numberOfUsers = $w('#betaApplicationsCounter').getTotalCount();
	$w('#numberOfUsers').text = `${numberOfUsers} people have already signed up for early access to our app!`;
}

function showError(error) {
	let errorMessage = ""
	if (error.type === 'authorization error') {
		errorMessage = 'Something went wrong with the CAPTCHA authorization process, please try again'
	}
	if (error.type === 'insertion error') {
		errorMessage = 'Something went wrong with the submission process, please try again'
	}
	$w('#submisisonStatusText').html = `<span style='color: red; font-size: 1.5em; text-align: center'>${errorMessage}</span>`;
	$w('#submisisonStatusText').show();
}

 

captchaModule.jsw

import wixData from 'wix-data';
import wixCaptcha from 'wix-captcha-backend'; // Import the authorize() function from the wix-captcha-backend module

export function processSubmissionRequest(submissionRequest) {
	// Use authorize() to check the captcha token before submitting the form
	let errorResponse = {}
	return wixCaptcha.authorize(submissionRequest.token)
		.then(() => {
			return wixData.insert('BetaApplications', submissionRequest.form)
				.catch(error => {
					errorResponse.status = 'error'
					errorResponse.type = 'insertion error'
					errorResponse.message = `Error: database collection insertion failed: ${error}`
					throw errorResponse
				})
		})
		.catch(error => {
			if (error.type === 'insertion error') {
				throw error
			}
			errorResponse.status = 'error'
			errorResponse.type = 'authorization error'
			errorResponse.message = `Error: reCAPTCHA authorization failed: ${error}`
			throw errorResponse
		})
}

 

API

$w.Text API

$w.Button API

$w.Captcha API

 

 

Corvid by Wix (윅스 코딩 - 콜비드) 개발자 모드/도구 활성화하는 방법

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

윅스 (Wix) 코딩 - 개발자 도구를 활성화하기 (Wix Code: How to Enable Developer Tools)

 

 

연관된 토픽)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

윅스 (Wix) 코딩 강의 초급 (Beginner) - 레이아웃 변경하기 (Change Layout) - 상호작용 (Interactions)

 

윅스 홈페이지 만들기 101

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

윅스 (Wix) 홈페이지 만들기 101 - E-Book - Index

 

출처 :

콜비드 - 윅스 코딩 (Corvid - Wix coding)

reCAPTCHA | Corvid by Wix Examples | Wix.com