WooCommerce에서 전화번호 로그인을 활성화하는 2가지 쉬운 방법

전화번호 로그인은 사용자 경험을 향상시키고 로그인 및 등록 프로세스를 용이하게 하기 위해 설계된 편리한 기능입니다. 따라서 많은 WooCommerce 사용자는 이 기능을 온라인 상점에 구현하기를 원합니다.

당신이 그 사람들 중 하나라면, 당신은 올바른 웹 페이지에 도착했습니다. 이 기사에서는 두 가지 방법으로 사용자가 WooCommerce 전화번호로 로그인하고 등록하는 방법을 설명합니다.

스토어에서 WooCommerce 전화번호 로그인을 활성화해야 하는 이유는 무엇입니까?

전화 등록 및 로그인은 고객 휴대폰 번호에 크게 의존하는 WooCommerce 매장에 매우 유용합니다. 예를 들어, 음식 배달, 택시 등.

이러한 특정 틈새 외에도 다음은 모든 비즈니스에 도움이 되는 몇 가지 이점입니다.

• 구매자는 WooCommerce 스토어에서 전화번호로 직접 로그인하고 등록할 수 있습니다.
• 온라인 상점에서 고객 등록 스팸을 방지합니다.
• 구매자는 사용자 이름과 비밀번호를 기억하지 않고도 로그인할 수도 있습니다.
• OTP SMS로 고객의 전화번호를 인증할 수 있습니다.
• 확인된 모든 고객은 정품이므로 가짜 주문을 방지합니다.
• 고객은 인터넷에 액세스할 수 없는 경우에도 모바일 장치를 통해 신속하게 알림을 받을 수 있습니다.
• 고객의 전화번호를 통해 프로모션 및 제안을 통해 고객에게 빠르게 다가갈 수 있습니다.

이러한 이점을 통해 비즈니스 전략을 쉽게 강화하고 결국에는 소비를 늘릴 수 있습니다. 가장 간단하고 구체적인 방법으로 고객과 소통하는 데 필요한 모든 것을 갖추고 있습니다.

#1: 플러그인으로 WooCommerce 스토어에서 전화번호 로그인 활성화

이를 도와줄 수 있는 여러 플러그인이 있습니다. 예를 들어:

• 휴대폰 번호로 회원가입 및 로그인
• 숫자: 워드프레스 휴대전화 번호 OTP 가입 및 로그인 양식
• WooCommerce를 위한 휴대폰 번호로 로그인

그러나 이 튜토리얼에서는 가장 인기 있는 무료 플러그인인 "전화번호로 로그인" 플러그인을 사용합니다.

WooCommerce 스토어 에서 " 전화 번호로 로그인 " 플러그인 활성화 설치

가장 먼저 해야 할 일은 WooCommerce 스토어에서 " 전화번호로 로그인 " 플러그인을 설치하고 활성화하는 것입니다. 다음은 지침입니다.

1. 먼저 WordPress 대시보드에서 Plugins > Add New 페이지로 이동합니다.

2. 오른쪽 상단의 검색창에 "전화번호로 로그인"을 입력합니다.
3. 플러그인이 목록에서 가장 먼저 나타나야 합니다. 제목 옆에 표시되는 지금 설치 버튼을 클릭합니다.
4. 그 후 플러그인이 다운로드됩니다. 완료되면 지금 설치 버튼이 활성화 버튼으로 변경됩니다. 클릭하세요.

새 로그인/등록 페이지 만들기

다음 단계는 플러그인의 단축 코드를 새 로그인/등록 페이지에 삽입하는 것입니다.

1. WordPress 대시보드에서 페이지 > 새로 추가 로 이동합니다.

2. 새 페이지의 제목을 선택하십시오(예: " 로그인/등록 페이지 ").

3. 그 안에 [idehweb_lwp] 단축 코드를 넣으십시오.
4. 페이지를 게시 합니다.

Firebase로 매월 10,000개의 무료 OTP SMS 받기

신규 사용자가 WooCommerce 스토어에 계정을 등록하면 인증 코드가 휴대전화 번호로 전송됩니다. 따라서 플러그인이 제대로 작동하려면 SMS 게이트웨이를 제공해야 합니다.

Google의 Firebase를 사용할 수 있습니다. 매월 10,000개의 OTP SMS를 무료로 제공합니다. 방법은 다음과 같습니다.

1. Google 계정을 사용하여 Firebase 콘솔에 로그인합니다.
2. 프로젝트 만들기 버튼을 클릭합니다.

3. 이제 새 프로젝트의 이름을 입력하고 Firebase의 이용 약관에 동의한 다음 프로젝트 만들기 버튼을 클릭해야 합니다.
4. 프로젝트가 성공적으로 생성되면 왼쪽 사이드바에서 빌드 > 인증 페이지로 이동합니다.

5. 시작하기 버튼을 클릭합니다.
6. 전화 를 공급자로 선택하십시오.

7. 이 옵션을 활성화하려면 오른쪽 상단 모서리에 있는 토글을 전환하세요. 그런 다음 저장 버튼을 클릭합니다.

8. 승인된 도메인 섹션까지 아래로 스크롤합니다. 도메인 추가 버튼을 클릭하고 WooCommerce 스토어의 도메인 이름을 입력합니다. 그런 다음 추가 버튼을 클릭합니다.

9. 이제 템플릿 탭으로 이동합니다.

10. 템플릿 언어 텍스트 옆에 있는 연필 아이콘을 클릭합니다. 그런 다음 SMS 확인에 사용할 언어를 선택합니다.

11. 프로젝트 개요 텍스트 옆에 있는 톱니바퀴 아이콘을 클릭하고 프로젝트 설정 을 선택합니다.

12. 내 앱 섹션까지 아래로 스크롤합니다. 그런 다음 웹 아이콘을 클릭합니다.

13. 새 앱의 닉네임을 입력합니다. 그런 다음 앱 등록 버튼을 클릭합니다.

14. <script> 태그 사용 옵션을 선택하고 제공된 스크립트를 복사합니다.

15. 이제 WooCommerce 스토어의 WordPress 대시보드로 이동합니다. 그런 다음 "로그인 설정" 페이지를 방문하십시오.

16. 스크립트를 Firebase 구성 텍스트 상자에 붙여넣습니다.
17. Firebase 창으로 돌아가서 스크립트에 제공된 API 키를 복사합니다.

18. WordPress 창으로 돌아가서 API 키를 Firebase API 텍스트 상자에 붙여넣습니다.

19. 마지막으로 페이지 하단으로 스크롤하여 변경 사항 저장 버튼을 클릭합니다.

또한 여기에서 앱을 구성할 수 있습니다. 설정을 확인하여 조정해야 할 다른 항목이 있는지 확인해야 합니다.

#2: 프로그래밍 방식으로 WooCommerce 스토어에서 전화번호 로그인 활성화

이 튜토리얼에서는 WooCommerce 스토어의 로그인 양식에 전화번호 옵션을 하나 더 추가합니다. 이것은 이전 튜토리얼에서와 같이 사용자를 확인하기 위해 OTP SMS를 보내지 않는다는 점에 유의하십시오.

사용자는 더 편리한 것을 선택할 수 있습니다. 아마존 로그인 양식에서 본 적이 있을 것입니다. 사용자가 이메일 또는 전화번호로 로그인할 수 있습니다.

현재 활성화된 테마의 "functions.php" 파일에 사용자 정의 PHP 코드를 추가해야 합니다. 방법을 모르는 경우 아래 지침을 따르십시오.

1. WordPress 대시보드에서 모양 > 테마 파일 편집기 페이지로 이동합니다.

2. 오른쪽 상단에서 사용 중인 테마를 선택합니다.
3. 오른쪽 사이드바에서 "functions.php" 파일에 액세스합니다.

전화번호 항목 추가

WordPress eCommerce 사이트에서 WooCommerce 전화번호 로그인을 활성화하려면 "wp_usermeta" 테이블에 사용자 전화번호를 저장해야 합니다.

이는 사용자 등록 시 수행할 수 있습니다. 아래 코드를 사용하여 이 목표를 달성할 수 있습니다.

 <?php $user_id = 1; // pass user id $phone_number = 9999999999; add_user_meta( $user_id, 'user_phone', $phone_number);

값과 함께 "user_phone" 메타_키가 있으면 전화번호로 사용자의 자격 증명을 확인할 수 있습니다.

로그인 양식 만들기

이제 사용자가 로그인 정보를 입력할 수 있는 간단한 로그인 양식을 만들어 보겠습니다. 다음 요소가 있습니다.

• 사용자 이름/이메일/전화를 입력하는 텍스트 필드
• 비밀번호를 입력하는 텍스트 필드
• CSRF 공격을 피하기 위한 nonce(숨겨진 필드)
• 제출 버튼

 <?php $return = log_the_user_in(); if( is_wp_error( $return ) ) { echo $return->get_error_message(); } ?> <form method="post"> <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p> <p><input type="password" name="user_password" placeholder="Password" required /></p> <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" /> <input type="submit" name="btn_login" value="Submit" /> </form>

위의 스크립트에서 HTML 코드를 추가했으며 "log_the_user_in()" 메서드라고도 합니다. 이것은 사용자의 자격 증명을 확인하는 역할을 합니다.

서버 측에서 일부 오류가 발생하면 "get_error_message()" 메서드를 통해 사용자에게 알립니다.

다음 단계에서는 "log_the_user_in()" 메서드를 정의하고 오류를 반환해야 합니다.

WooCommerce에서 전화번호로 로그인

사용자가 자격 증명을 입력하고 제출 버튼을 클릭하면 자격 증명을 가져와 데이터베이스에 대해 확인합니다.

모든 것이 일치하면 로그인하여 홈페이지로 리디렉션합니다. 잘못된 로그인의 경우 "WP_Error" 클래스를 사용하여 오류가 기록됩니다. 필요에 따라 코드를 변경하여 다른 페이지로 변경할 수 있습니다.

"init" 후크에서 "log_the_user_in()" 메서드를 정의합니다. 이 후크는 WordPress가 로드를 완료한 후 헤더가 전송되기 전에 실행됩니다. 이것은 POST 메서드를 사용하여 양식을 처리하는 데 이상적입니다.

아래는 코드입니다:

 add_action( 'init', 'log_the_user_in' ); function log_the_user_in() { if ( ! isset( $_POST['btn_login'] ) ) return; if ( ! wp_verify_nonce( $_POST['login_nonce'], 'login_nonce' ) ) { return new WP_Error('invalid_data', 'Invalid data.'); } if ( empty( $_POST['user_login'] ) || empty( $_POST['user_password'] ) ) { return new WP_Error('empty', 'Both fields are required.'); } if ( is_email( $_POST['user_login'] ) ) { // check user by email $user = get_user_by( 'email', $_POST['user_login'] ); } elseif ( is_numeric( $_POST['user_login'] ) ) { // check user by phone number global $wpdb; $tbl_usermeta = $wpdb->prefix.'usermeta'; $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login'] ) ); $user = get_user_by( 'ID', $user_id ); } else { // check user by username $user = get_user_by( 'login', $_POST['user_login'] ); } if ( ! $user ) { return new WP_Error('wrong_credentials', 'Invalid credentials.'); } // check the user's login with their password. if ( ! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID ) ) { return new WP_Error('wrong_credentials', 'Invalid password.'); } wp_clear_auth_cookie(); wp_set_current_user($user->ID); wp_set_auth_cookie($user->ID); wp_redirect(get_bloginfo('url')); exit; }

여기서는 특정 유형의 오용, 악성 코드 및 CSRF 공격으로부터 양식을 보호하기 위해 먼저 nonce를 확인했습니다.

다음으로 "is_email()" 또는 "is_numeric()" 메서드를 기반으로 WordPress는 유효한 이메일 또는 전화 번호를 확인합니다. 입력한 값이 이메일이나 전화번호가 아닌 경우 사용자 이름을 확인합니다.

마지막 단어

이것이 WooCommerce 스토어에 전화번호 로그인을 추가하는 것입니다. 귀하의 프로젝트에 도움이 되었기를 바랍니다.

이 기사가 도움이 되었다면 아래 댓글 섹션에서 자유롭게 생각과 제안을 공유해 주세요.