Mô tả

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam hỗ trợ đăng nhập nhanh vào hệ thống website wordpress cms của bạn mà khách hàng không phải đăng ký thông qua API các nền tảng phố biến và có dữ liệu khách hàng đã được xác thực. Đây chính là tiện ích hữu ích dành cho bạn!

Giao diện đăng nhập khi cài plugin đăng nhập bằng Facebook, Google, Zalo
Giao diện đăng nhập wordpress khi cài plugin đăng nhập bằng Facebook, Google, Zalo

Một ưu điểm khác của việc sử dụng dịch vụ xác thực thông qua mạng xã hội để đăng nhập trên trang web của là khi người dùng đã kết nối với trang web của một trong những nền tảng xã hội hoặc mạng được hỗ trợ và người dùng truy cập trang web của chúng tôi và cho biết bạn muốn đăng nhập bằng tài khoản của mình. Ở lần đầu tiên đăng nhập người dùng cần cho phép ứng dụng truy cập thông tin cơ bản như Tên, email, username…

Tạm giải thích như sau: Browser chính là Client, khi Client gửi request đăng nhập lên server có chứa username/email và password thì server sẽ tạo ra một jwt và trả về cho Client. Kể từ đó khi Client muốn truy cập vào tài nguyên nào cần phải xác thực thì trong request đó cần đính kèm header Authorization chính là cái token đã được trả về từ trước đó. Server nhận request check xem token hợp lệ thì thực hiện yêu cầu của request và trả lại kết quả cho Client. Vâng ở trên chính là flow authen dành cho trường hợp truyền thống sử dụng username/email + password để đăng nhập.

Đầu tiên ứng dụng cần xác thực với bên thứ 3 (Facebook, Zalo, Google) bằng tài khoản của dịch vụ đó và lấy đc access_token. Gửi access_token đó lên server, server gửi request lấy thông tin user dùng access_token của bên thứ 3 đó. Trong thông tin mà API bên thứ 3 trả về sẽ chứa userIdSocial, từ userIdSocial này ta check xem đã có trong hệ thống của mình chưa nếu userIdSocial chưa có thì mình sẽ tạo 1 user mới lấy những thông tin từ bên thứ 3 về để điền vào ví dụ như là name, email, ….

Giao diện đăng nhập tùy từng giao diện khi cài plugin đăng nhập bằng Facebook, Google, Zalo
Giao diện đăng nhập popup tùy từng giao diện khi cài plugin đăng nhập bằng Facebook, Google, Zalo

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam hỗ trợ cấu hình đăng nhập cho website wordpress cms đang có giá tốt.

Nếu bạn cần hỗ trợ cấu hình từ xa qua hệ thống Ultraview hoặc Anydesk, Teamviewer 3 tài khoản Facebook, Google, Zalo vui lòng trả phí dịch vụ. Hoặc xem bài viết hướng dẫn dưới đây:

  • Tạo ứng dụng đăng nhập Zalo (đang cập nhật) : https://developers.zalo.me/
  • Tạo ứng dụng đăng nhập Google (đang cập nhật): https://console.cloud.google.com/apis/credentials
  • Tạo ứng dụng đăng nhập Facebook (đang cập nhật): https://developers.facebook.com/

Hướng dẫn tích hợp chức năng đăng nhập bằng Zalo không dùng plugin

Nếu bạn không muốn dùng plugin đăng nhập Zalo cho wordpress bạn có thể làm theo hướng dẫn sau để tích hợp thủ công vào wordpress. Sau đây mình 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.

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}

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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:

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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:

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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é.

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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é.

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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:

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

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:

Plugin đăng nhập Google, Facebook, Zalo phổ thông tại Việt Nam

3. Tại sao nên cho người dùng đă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.

Tham khảo: https://wpshare247.com/huong-dan-dang-nhap-vao-website-wordpress-bang-tai-khoan-zalo

Bạn có thấy hữu ích không? Hãy cho chúng tôi +1 nhé

Đăng ký nhận bản tin từ Website TXL

Tìm kiếm tức thì các thông tin tại website: tranxuanloc.com

Mẹo tìm kiếm: "Từ khóa cần tìm kiếm" site:tranxuanloc.com để tìm được kết quả chính xác trên công cụ tìm kiếm của google

Trần Xuân Lộc Blog cung cấp dịch vụ

TOP ĐỐI TÁC CUNG CẤP DỊCH VỤ DU LỊCH TRỰC TUYẾN HÀNG ĐẦU

(Đặt phòng, đặt tour, đặt xe, đặt vé máy bay...Nhấn vào link logo để đặt dịch vụ với nhiều ưu đãi hấp dẫn)

Cảnh báo: Hiện nay có rất nhiều đơn vị SỬ DỤNG LẠI các THÔNG TIN NỘI DUNG ĐÀO TẠO của KHÓA HỌC SALE OTA TỪ OTAVN mà không đảm bảo chất lượng và hỗ trợ về sau. Các bạn muốn đăng ký học SALE OTA uy tín hãy liên hệ trực tiếp với OTA Việt Nam. OTAVN có xây dựng các hình thức đào tạo trực tiếp offline cho doanh nghiệp, đào tạo 1-1 từ xa và tự học online. Chúng tôi có 2 tên miền là: otavietnam.com và tranxuanloc.com (founder) có chia sẻ và đăng tải các thông tin liên quan về OTA/ Sale OTA/ Digital Marketing/ Thiết kế website... Với khách hàng/ đối tác đã sử dụng dịch vụ của OTAVN sẽ được HỖ TRỢ MIỄN PHÍ các vấn đề phát sinh, tư vấn giải đáp sau khi đã hoàn thành khóa học hoặc sau khi đã sử dụng dịch vụ trọn đời. Hotline:0934552325 (iMessage/ Zalo/ Whatsapp) - Email: [email protected]