Xây dựng chức năng đăng nhập thông qua Zalo cho WordPress

Xây dựng chức năng đăng nhập thông qua Zalo cho WordPress

Việc xây dựng chức năng đăng nhập website sử dụng các mã xã hội ngày nay đã rất phổ biến với sự phát triển mạnh mẽ của các mạng xã hội trên thế giới: Facebook, Google, Twitter, LinkedIn,…

Tại Việt Nam, mạng xã hội Zalo cũng rất phát triển và bạn cũng có thể xây dựng chức năng đăng nhập Zalo cho website của mình.

Trong bài viết này, tôi sẽ hướng dẫn bạn cách xây dựng chức năng đăng nhập Zalo cho website WordPress.

 

Để xây dựng được chức năng này, đầu tiên bạn cần phải có 1 tài khoản Zalo (Việc này khá dễ)

Tạo ứng dụng Zalo

Bạn truy cập đường link sau để tạo ứng dụng: https://developers.zalo.me

Click vào ảnh đại diện => “Thêm ứng dụng mới”

Nhập tên ứng dụng muốn tạo => Bấm “Tạo ID ứng dụng”

Sau khi tạo ứng dụng xong, bạn cần kích hoạt ứng dụng. Bấm vào nút “Kích hoạt ứng dụng” để kích hoạt.

Thiết lập ứng dụng Zalo

Bạn truy cập phần ‘Sản phẩm’ => ‘Đăng nhập’ để thêm nền tảng

Bấm “Thêm nền tảng” => “Web”

Sau khi chọn nền tảng, bạn cần thiết lập Callback

  • Callback URL: Nhập link chuyển hướng sau khi đăng nhập thành công (Nhanh nhất là để link trang chủ website của bạn). Phần này bắt buộc phải nhập, nếu không chức năng sẽ không sử dụng được
  • Home URL: Link chuyển đi khi bạn mời người khác sử dụng ứng dụng (Có thể bỏ qua)

Cuối cùng, đừng quên bấm “Lưu thay đổi” để lưu lại

Code hàm Insert User vào WordPress

Bạn mở file functions.php trong theme bạn đang sử dụng và chèn vào đoạn code sau:

<?php 
function process_new_user($email, $first_name, $last_name){

    $check_user = email_exists( $email );
    $check_user_name = username_exists($email);

    if($check_user && $check_user > 0 ){
        // is exits
        $id_new_user = $check_user;
    }else{

        if($check_user_name && $check_user_name > 0 ){
            $id_new_user = $check_user_name;
        }else{
            $args = array (
                'user_login'    =>  $email,
                'user_email'    =>  $email,
                'first_name'    =>  $first_name,
                'last_name'     =>  $last_name,
                'nickname'      =>  $first_name." ".$last_name,
            ) ;

            $id = wp_insert_user( $args ) ;

            if(isset($id) && !empty($id)) {
                $id_new_user = $id;
            }else{
                return false;
            }
        }

    }

    if ( is_wp_error($id_new_user) ){
        echo $id_new_user->get_error_message();
    }else{
        wp_set_current_user($id_new_user);
        wp_set_auth_cookie($id_new_user);
        wp_redirect(get_bloginfo('url'));
    }
}
?>

Khai báo hằng số để thiết lập các giá trị mặc định

Chúng ta có 3 giá trị mặc định: APP ID, Secret Key, Callback URL để thực thi việc login vào WordPress.

Trong đó:

  • APP ID và Secret Key bạn lấy trong ứng dụng Zalo các bạn đã tạo ở trên
  • Callback URL: Chúng ta sẽ tự tạo link (Ở đây tôi sử dụng Rest API của WordPress)

Các bạn khai báo hằng số như sau (Bỏ vào đầu file functions.php của theme bạn đang dùng):

<?php 
define('ZALO_APP_ID', 'Key cua ban');
define('ZALO_APP_SECRET', 'Key cua ban');
define('ZALO_APP_CALLBACK_URL',get_bloginfo('url').'/wp-json/login-social/v1/login-zalo-callback');
?>

Viết hàm Render Link đăng nhập Zalo

Bạn cần phải viết hàm Render ra link đăng nhập Zalo để đăng nhập vào nút đăng nhập mà bạn muốn chèn.

Bạn chỉ cần bỏ đoạn code sau vào file functions.php của theme bạn đang dùng

<?php 
function login_zalo_render_func(){
    return 'https://oauth.zaloapp.com/v3/permission?app_id='.ZALO_APP_ID.'&redirect_uri='.ZALO_APP_CALLBACK_URL.'&state=';
}
?>

Nếu muốn gọi link này tại nút đăng nhập bạn muốn chèn, bạn chỉ cần gọi hàm bằng cú pháp sau:

<?php echo login_zalo_render_func(); ?>

Tạo link Callback và hàm thực thi đăng nhập

Trong bài hướng dẫn này, tôi sử dụng hook action “rest_api_init” và hàm register_rest_route() để tạo link.

Bạn chỉ cần đoạn code sau vào file functions.php của theme bạn đang dùng

<?php
add_action( 'rest_api_init', function () {
    register_rest_route( 'login-social/v1','/login-zalo-callback', array(
        'methods' => 'GET',
        'callback' => 'login_zalo_callback_func',
    ) );
});
 ?>

2 tham số đầu tiên của hàm register_rest_route() bạn có thể tự thay đổi theo mong muốn của bạn. (Chỉ có điều nếu bạn thay đổi bạn cần phải sửa lại hằng số đã khai báo)

Tham số thứ 3 tôi có đặt tên hàm callback là login_zalo_callback_func thì bạn cần viết 1 hàm giống y hệt như vậy.

Hàm đó như sau:

<?php
function login_zalo_callback_func(){
   
    if (isset($_GET['code'])){
        $code = $_GET['code'];
        $request_url = 'https://oauth.zaloapp.com/v3/access_token?app_id='.ZALO_APP_ID.'&app_secret='.ZALO_APP_SECRET.'&code='.$code;
        $response_access = file_get_contents($request_url);
        $response_access = json_decode( $response_access, true );
        if (!empty($response_access)){
            $access_token = $response_access['access_token'];
            $profile = file_get_contents('https://graph.zalo.me/v2.0/me?access_token='.$access_token.'&fields=id,birthday,name,gender,picture,email');
            $profile = json_decode( $profile, true );
            $email = $profile['id'].'-zalo@'.$_SERVER['HTTP_HOST'];
            process_new_user($email, $profile['name'] , '');
        }
    }   
}
 ?>

Lưu ý: Do Zalo không lấy được email nên tôi tạo 1 email dạng: UID-zalo@domain.

Ngoài ra, bạn có thể tuỳ biến tạo thêm field cho users để update số điện thoại (Vì Zalo cho lấy số điện thoại)

Kết luận

Trên đây, tôi đã hướng dẫn cách tạo chức năng đăng nhập Zalo cho WordPress bằng cách tự code.

Nếu bạn có thắc mắc nào hoặc cần giải thích vui lòng comment dưới bài viết này.

Chúc các bạn thành công!

[Total: 6   Average: 4.3/5]

THAM GIA NHÓM HỖ TRỢ

 
Lập trình web PHP (hoangan.net)
Nhóm Công khai
Tham gia nhóm
 

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi

17 bình luận trong “Xây dựng chức năng đăng nhập thông qua Zalo cho WordPress

  1. Cám ơn bác nhiều,
    Mình đang dùng theme flatsome, không biết cần chèn
    vào file nào để có thể show được nó ra ở trang đăng ký/đăng nhập vậy bác nhỉ.

          1. Có 1 điểm là sau khi đăng nhập, user sẽ bị chuyển hướng đến cái trang được khai báo trong Callback URL khi tạo zalo app. Chứ không được redirect về cái trang trước đó.
            Bác có cách nào để fix chỗ này không bác ?

          2. Bạn thêm phần redirect vào trong hàm login_zalo_callback_func
            Còn cách xử lý thì bạn dùng $_SESSION để lưu url đã truy cập trước đó. Sau đó trong hàm login_zalo_callback_func redirect về session đã khai báo.
            Chúc bạn thành công!

  2. Em muốn lấy ảnh đại diện người dùng trong zalo thì code thế nào đấy ạ ‘$picture’, trên hàm login_zalo_callback_func như trên. bác chỉ giúp em??

    1. Biến $picture bác lấy ở đâu ra nhỉ? Nếu bác lấy được giá trị biến $picture rồi thì bác cần sửa hàm process_new_user() và truyền tham số vào

      1. Bác code như nào đấy em ạ??? em không chuyên về lập trình ạ. bác có thể giúp em vài dòng đc không?
        Bác xem giúp em viết như này đúng k ạ
        em viết phần function login_zalo_callback_func —> thêm dưới $email –$picture = $profile[‘picture’];
        còn process_new_user() em viết thêm ở dưới ‘nickname’ => $first_name.” “.$last_name,
        ‘picture’ => $picture, đúng k ạ

        1. Mình không hỗ trợ code thêm được bạn nhé. Cái này bạn phải tự tìm hiểu thôi.
          Mình chỉ chia sẻ những cái chủ đạo, còn phát triển thêm bạn phải học thêm.
          Cảm ơn bạn.

  3. Internal Server Error
    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator at postmaster@localhost to inform them of the time this error occurred, and the actions you performed just before this error.

    More information about this error may be available in the server error log.

    Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request.

    Anh ơi cho em hỏi em bị lỗi như vậy làm sao hết anh

    1. Chào bạn,
      Xin lỗi vì mình reply muộn. Cái này thường do nhiều nguyên nhân lắm. Bạn cần phải check logs ở trên server. Thường sẽ là:
      – Do file .htaccess viết sai
      – Do lỗi cú pháp PHP
      – Do phiên bản PHP
      Vì nó rơi vào nhiều trường hợp nên mình không trả lời bạn ngay được.
      Bạn hãy kiểm tra error_logs trên server rồi cho mình biết nhé.
      Cảm ơn bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *