Hướng dẫn đăng nhập vào Website WordPress bằng tài khoản Zalo

Bài viết này sẽ hướng dẫn các bạn, cách sử dụng code PHP để tích hợp chức năng Đăng Nhập vào Website đang xây dựng thông qua 1 tài khoản ZALO.

Zalo Login cho WordPress – WPSHARE247

Bạn có thể tải plugin ở trên nếu không muốn tốn thời gian.

Phiên bản: User Access Token V4

1. Login vào Website bằng tài khoản Zalo là gì?

Tài khoản người dùng hay còn gọi là User rất quan trọng đối với các trang Web bán hàng, Website TMĐT. Việc đăng nhập đăng ký vào Website dễ dàng tránh mất quá nhiều thời gian của khách. Đối với các mã nguồn Code PHP, WordPress, Laravel hay bất cứ CMS nào cũng cần có chức năng Login vào Website.

Bạn cần phân biệt rõ ràng, Tài khoản Website khác với tài khoản đăng nhập thông qua API mà Zalo cung cấp. Đối với tài khoản Website, chúng ta cần xác thực tài khoản qua Email hoặc Số điện thoại để biết tài khoản đó là ảo hay không. Tuy nhiên với tài khoản đăng nhập bằng Zalo chúng ta đã bỏ qua bước này.

2. Cách tích hợp chức năng đăng nhập bằng Zalo

2.1 Tạo Ứng Dụng Zalo

Để tích hợp được chức năng này, trước tiên bạn cần tạo 1 Ứng Dụng Zalo for Developer.

Xem hướng dẫn Cách tạo ứng dụng Zalo for Developers dành cho nhà phát triển Website

2.2 Tích hợp

Tạo nút Đăng nhập bằng Zalo, tạm thời gọi là (*1)

Copy đoạn HTML sau bỏ vào bất cứ template nào trong WordPress mà bạn muốn.

<!-- Copy đoạn HTML sau và thay đổi các tham số theo hướng dẫn-->

<a href="https://oauth.zaloapp.com/v4/permission?app_id={ZALO_APP_ID}&redirect_uri={CALLBACK_URL}&state=1">Đăng nhập bằng ZALO</a>

Cách lấy {ZALO_APP_ID}

Cách khai báo {CALLBACK_URL}

CALLBACK_URL là đường dẫn ứng dụng Zalo trả về sau khi Login thành công

Callback bạn đã khai báo trong ứng dụng tại:

Khai báo Template WordPress cho trang Zalo Callback. Vào thư mục theme để tạo template như sau:

Nội dung file template vừa tạo như sau, tôi đặt tên là: page-zalo-callback.php (*t123)

<?php
/* Template Name: Zalo Callback */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) :
                //Xử lý data Zalo trả về tại đây
                

            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
do_action( 'storefront_sidebar' );
get_footer();

Chú ý: Không cần phải sử dụng toàn bộ thẻ html như đoạn code trên. Bạn chỉ cần chú ý 2 chỗ là:

• /* Template Name: Zalo Callback */
• //Xử lý data Zalo trả về tại đây

Tiếp theo bạn vào Website WordPress tạo cho tôi 1 trang như sau:

Lúc này nút Đăng nhập bằng Zalo (*1) sẽ thay đổi như sau tôi đặt tên là code (*2)

<?php 
$ZALO_APP_ID = '1979310376845954534';
$CALLBACK_URL = 'https://plugin.wpshare247.com/zalo-callback';
?>
<a href="https://oauth.zaloapp.com/v4/permission?app_id=<?php echo $ZALO_APP_ID;?>&redirect_uri=<?php echo $CALLBACK_URL;?>&state=100">Đăng nhập bằng ZALO</a>

Hãy copy đoạn code (*2) vào chỗ xuất hiện nút Đăng nhập bằng Zalo trong website của bạn.

Trong ví dụ này tôi tạm thời đặt trong template header.php, còn bạn có thể đặt vị trí khác nhé.

Lúc này nút Đăng nhập xuất hiện không đẹp lắm, tạm thời bạn đừng chú ý đến css của nó nhé.

Lúc này click vào Đăng nhập bằng ZALO sẽ chuyển qua giao diện của Zalo như sau:

Sau khi click Cho Phép, đăng nhập thành công, Zalo sẽ trả về Callback Url đã khai báo trước đó, nghĩa là template: page-zalo-callback.php (*t123) đã khai báo bên trên. Lúc này thêm đoạn code xử lý lại như sau:

<?php
/* Template Name: Zalo Callback */

get_header(); ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) :
                //Xử lý data Zalo trả về tại đây
                if(isset($_GET["code"])){
                    $ZALO_APP_ID = '1979310376845954534';
                    $ZALO_APP_SECRET = 'Z6MUTu4yXTZsT2XexlQL9N'; // bạn cần thay đổi bằng Khóa bí mật của ứng dụng của bạn
                    
                    $data = http_build_query( array(
                                "app_id" => $ZALO_APP_ID,
                                "code" => $_GET["code"],
                                "grant_type" => "authorization_code"
                        ) );
                    $curl = curl_init();
                    curl_setopt_array($curl, array(
                        CURLOPT_URL => 'https://oauth.zaloapp.com/v4/access_token',
                        CURLOPT_CUSTOMREQUEST => "POST",
                        CURLOPT_HTTPHEADER => array(
                                "Content-Type: application/x-www-form-urlencoded",
                                "secret_key: " . $ZALO_APP_SECRET
                            ),
                        CURLOPT_RETURNTRANSFER => true,
                        CURLOPT_MAXREDIRS => 10,
                        CURLOPT_TIMEOUT => 30,
                        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
                        CURLOPT_POSTFIELDS => $data,
                        CURLOPT_SSL_VERIFYPEER => true,
                        CURLOPT_FAILONERROR => true,
                    ) );
                    $response = curl_exec($curl);
                    curl_close($curl);
                    $auth = json_decode( $response, true );
                    
                    $token = $auth['access_token'];
                    $refresh_token = $auth['refresh_token'];
                    $expires_in = $auth['expires_in'];
                    if($token){
                        $profile = file_get_contents('https://graph.zalo.me/v2.0/me?access_token='.$token.'&fields=id,birthday,name,gender,picture,email');
                        $arr_profile = json_decode( $profile, true );
                        
                        if($arr_profile){
                            $id = $arr_profile['id'];
                            $name = $arr_profile['name'];
                        
                            $user_obj = get_user_by('login', $id);
                            if($user_obj->ID){
                                $wp_user_id = $user_obj->ID;
                            }else{
                                $user_pass =  wp_generate_password( 8, true, true );
                                $user_login = $id;
                                $user_email = $user_login.'@zalo.me';
                                $display_name = $name;
                                $role = 'subscriber';
                                $show_admin_bar_front = "false";
                                
                                $userdata = compact( 'user_login', 'user_email', 'user_pass', 'display_name', 'show_admin_bar_front', 'role' );
                                $wp_user_id = wp_insert_user( $userdata );
                                
                                if ( is_wp_error( $wp_user_id ) ) {
                                    $err = 1;
                                    echo 'Có lỗi xảy ra Zalo 503';
                                }
                            }
                            
                            //auto login
                            wp_set_current_user($wp_user_id);
                            wp_set_auth_cookie($wp_user_id);
                            wp_redirect( '/' );
                        }else{
                            echo 'Có lỗi xảy ra Zalo 502';
                        }
                    }else{
                        echo 'Có lỗi xảy ra Zalo 501';
                    }
                }

            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php
do_action( 'storefront_sidebar' );
get_footer();

Trong đoạn code trên, bạn chú ý cần thay đổi thông số: $ZALO_APP_SECRET, cách lấy Khóa bí mật của ứng dụng như sau:

3. Tại sao phải đăng nhập vào Web bằng tài khoản Zalo?

Website bạn mới thành lập, độ tin cậy chưa cao, khách hàng ngại đăng ký hoặc vì một lý do nào đó. Vì vậy hãy tận dụng số lượng thành viên khổng lồ từ ZALO để đăng nhập vào Website chúng ta.

Tích hợp dễ dàng so với đăng nhập bằng Facebook và Google (Gmail) nhờ tài liệu tiếng Việt.

API nâng cấp thường xuyên, hiện tại bài viết này đang dùng chứng thực tài khoản ZALO 4.0, cộng thêm tài liệu hướng dẫn dễ hiểu, rõ ràng.

Phương pháp đăng nhập an toàn, nhanh chóng và bảo mật.

Trong quá trình thực hiện tích hợp, nếu gặp khó khăn gì hãy thao gia vào nhóm Zalo bên góc phải bên dưới để được hỗ trợ nhé.