5 HIỆN THỰC
5.2 Tích hợp đăng nhập facebook
5.2.1 Tạo một tài khoản facebook 5.2.2 Tạo ứng dụng Facebook
Ban đầu phải tạo một ứng dụng Facebook gốc để có thể lấy các tham số tích hợp được yêu cầu bởi Facebook Connect.
Sau khi đăng nhập vào tài khoản Facebook, mởứng dụng Developer và chọn tùy chọn Setup New Application để tạo ứng dụng mới. Nhập vào tên của ứng dụng và đồng ý với các thỏa thuận của Facebook.
Trang tiếp theo sẽ hiển thị biểu mẫu soạn thảo ứng dụng .
Trang 79 Trường quan trong nhất trong biểu mẫu này là Connect URL, đây là trường để thiết
lập thư mục mà trong đó ứng dụng Facebook Connect cư trú.
Hình 5-2 Tạo ứng dụng facebook - 2
Nhập vào dữ liệu được yêu cầu trong các tab Basic và Connect, copy khóa
API để sử dụng về sau trong code và lưu dữ liệu.
5.2.3 Khởi tạo môi trường
Hai bước đơn giản dùng để truy cập đầy đủ chức năng Facebook Connect trong trang web của mình:
1. Bổ sung thêm thư viện JavaScript vào website: Code:
<script
src="http://static.ak.connect.facebook.com/js/api_lib /v0.4/FeatureLoader.js.php"
type="text/javascript"></script> 2. Gọi hàm khởi tạo FB.init của Facebook. Hàm FB.init sử dụng hai đối số:
API key nhận được khi tạo ứng dụng gốc của Facebook.
Địa chỉ có liên quan của trang HTML (thường mang tên xd_receiver.htm) được sử dụng để trao đổi dữ liệu giữa ứng dụng của bạn và Facebook. Trang này phải nằm bên trong thư mục đã chỉ định với tư cách là Connect URL trên tab Connect của biểu mẫu chỉnh sửa
Trang 80 Nội dung của file xd_receiver.htm được download trực tiếp từ tài liệu
Facebook.
Sau khi môi trường Facebook Connect được khởi tạo, có thể truy vấn trạng thái kết nối của ứng dụng với Facebook.
Connected. Người dùng đã đăng nhập vào Facebook trong session duyệt này (hoặc đã cho phép Facebook lưu trữ trạng thái đăng nhập của họ) và đã xác thực ứng dụng của website để có thể sử dụng tài khoản Facebook của họ.
Not connected. Người dùng chưa đăng nhập vào Facebook hoặc chưa thẩm định ứng dụng của website.
Có thể thực thi các hàm JavaScript bổ sung ngay lập tức sau khi môi trường
được thiết lập. Cho ví dụ, để thích nghi một đoạn văn bản giới thiệu trên trang web của bạn bằng cách pass chúng bên trong tham số thứ ba của hàm FB.init. Cho ví dụ, ứng dụng mẫu trong bài sử dụng đoạn mã dưới đây để gọi hàm fb_login (đây là hàm thay đổi đoạn văn bản được hiển thị trong trang đầu tiên) nếu người dùng đã kết nối ứng dụng mẫu với tài khoản Facebook của họ:
Code: <script>
FB.init("4614058aac0b3b2be7896ce84baf9b44", "xd_recei
ver.htm",
{ ifUserConnected: fb_login }); </script>
5.2.4 Tạo nút Login
Có thể đầu tư thêm thời gian và nỗ lực vào việc tạo kiểu dáng cho nút đăng nhập Facebook Connect, tuy nhiên tốt nhất nên sử dụng nút đăng nhập được cung cấp bởi Facebook. Nút đăng nhập được tạo với tag Facebook Markup Language (FBML) fb:login button được nhúng trong trang website.
Các tag FBML sẽ tự động render vào những thành phần HTML tương đương của chúng bằng thư viện JavaScript của Facebook Connect. Mặc dù vậy, vẫn phải có những dự phòng đặc biệt để bảo đảm rằng tất cả các trình duyệt đều nhận ra không gian tên mở rộng được yêu cầu bởi FBML; bằng không thư viện Facebook Connect sẽ
không thể tìm thấy các tag FBML:
Trang web sử dụng FBML phải tuân thủ theo chuẩn XHTML và sử
dụng XHTML DOCTYPE: Code:
<!DOCTYPE html PUBLIC
Trang 81 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Thành phần HTML phải tuyên bố không gian tên XHTML mặc
định và không gian tên FBML: Code:
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
Sau khi không gian tên fb được định nghĩa, có thể sử dụng nó trong các tag FBML.
Để nhóm nút Facebook Connect trên website, hãy sử dụng đoạn mã dưới đây: Code:
<fb:login-button></fb:login-button>
Bạn có thể tạo kiểu cho nút bằng các thuộc tính size , background, và length.
<fb:login-
button size="large" background="white" length="lon g">
</fb:login-button>
Bên cạnh đó bạn cũng có thể nhóm bộ quản lý sự kiện onlogin, bộ quản lý này sẽ được thực thi sau khi người dùng kết nối ứng dụng với tài khoản Facebook của họ. Giống như chức năng mà bạn đã sử dụng như giá trị ifUserConnected trong hàm gọi FB.init:
Code:
<fb:login-button onlogin='fb_login();'
size="large" background="white" length="long"> </fb:login-button>
Thư viện FBML sẽ thiết lập lớp của tab fb:login-button thành fb_login_ready sau khi người dùng đã đăng nhập, điều này giúp dễ dàng ẩn nút đăng nhập nếu người dùng đã kết nối với Facebook. Tất cả những gì bạn cần là một dòng CSS:
Trang 82 Code:
.fb_login_ready { display: none; }
5.2.5 Sử dụng các thông tin Facebook
Sau khi người dùng kết nối ứng dụng của với Facebook, có thể sử dụng Facebook API
để truy cập vài các tính năng Facebook. Hoạt động dễ dàng nhất lúc này là hiển thị ảnh và tên người dùng, sử dụng tag FBML fb:profile-pic vàfb:name. Để hiển thị ảnh và tên Facebook của người dùng trong khung DIV, bạn có thể sử dụng các tag HTML và FBML dưới đây:
Code:
<div id="userData">
<fb:profile-pic uid='loggedinuser' size='normal'
facebook-logo='true'></fb:profile-pic><br />
<fb:name uid='loggedinuser' useyou='false'></fb:na
me> </div>
Các tag FBML sẽ tựđộng render bởi phần FBML của thư viện Facebook Connect bất cứ khi nào trạng thái đăng nhập của người dùng thay đổi. Chính vì vậy, dữ liệu của người dùng hiển thị trên trang web sẽ luôn phản ánh profile Facebook của họ.
5.2.6 Sử dụng Facebook User ID
Một thông tin khác cũng sẵn sàng có sẵn sau khi đăng nhập là ID của người dùng Facebook. ID của người dùng được lưu trong một cookie của session cho website, chính vì vậy các kịch bản trình chủ có thể sử dụng nó ngay lập tức sau khi người dùng đăng nhập. Các cookie được thiết lập bởi thư viện JavaScript của Facebook sử dụng API key là một tiền tố, để bảo đảm rằng chúng mang tính duy nhất cho mỗi một ứng dụng. Cho ví dụ, sau khi đăng nhập vào ứng dụng ví dụ trong bài, thư viện Facebook thiết lập các cookie được thể hiện trong hình 3. Lưu ý rằng tất cả chúng đều sử dụng các khóa API là tiền tố.
Trang 83
Hình 5-3 Sử dụng Facebook User ID
Cookie APIKEY_user gồm có ID của người dùng Facebook và có thểđược sử dụng trực tiếp bởi các kịch bản trình chủ nhằm nhận diện người dùng. Khi cookie qua được trình duyệt người dùng, giá trị của nó sẽ dễ dàng được thay đổi và đóng vai người dùng khác. Để tránh các tấn công giả mạo như vậy, Facebook đã tạo một hash MD5 cho các tham số cookie và khóa ứng dụng bảo mật (khóa chỉđược chia sẻ bí mật giữa bạn và Facebook) để bạn có thể sử dụng nhằm thẩm định rằng người dùng không can
thiệp vào dữ liệu cookie.
Giá trị của cookie APIKEY_session_key cũng có thểđược sử dụng bởi máy chủ web nhằm tạo các yêu cầu Facebook API trực tiếp; cho ví dụ, việc trích rút họ và tên người dùng. Cách khác, thông tin này có thể lấy được thông qua JavaScript Facebook API, tuy nhiên các thông tin được cung cấp bởi JavaScript có thể không bao giờ mang tín tin cậy hoàn toàn, chính vì vậy bạn không nên sử dụng nó trong các môi trường mà sự riêng tư và bảo mật mang tính sống còn.
5.3 Tích hợp thanh toán bằng Paypal
Bước 1: Tạo tài khoản trên Paypal
Bước 2: Lập trình nhúng code của Paypal cung cấp sẵn vào trang hóa đơn bán hàng cho phép khách hàng thanh toán cho hóa đơn đó bằng Paypal.
5.4 Tích hợp thanh toán bằng ngân lượng
Bước 1: Tạo tài khoản trên NganLuong.vn
Bước 2: Đăng nhập NgânLượng.vn, vào Menu [ Tích hợp thanh toán ] => [ Website bán hàng B2C ] => [ Tích hợp đơn giản ], chọn mẫu nút bạn ưa thích rồi Click "Lấy mã nút nhúng" sau đó Copy đoạn HTML được cung cấp.
Trang 84 Lập trình nhúng nút "Thanh toán" vào trang hóa đơn bán hàng cho phép khách hàng Click
chuột sang NgânLượng.vn để thanh toán cho hóa đơn đó.
6 TỔNG KẾT
6.1 Đánh giá kết quả đạt được
Chúng tôi đã hoàn thành khóa luận văn tốt nghiệp với đề tài “Xây dụng website bán coupon”. Sau khi thực hiện xong đề tài, chúng tôi đã đạt được một số kết quả nhất định:
Nắm được quy trình của một trang web bán coupon.
Nắm vững hơn các kiến thức về công nghệ: DotNet, HTML, JacaScript… Được trau dồi thêm các kiến thức trong hoạt động thương mại điện tử.
Luận văn đã hoàn thành được hầu hết các chức năng của một website bán coupon. Chức năng show sản phẩm của trang web
Thành viên có thể đăng ký, đăng nhập bằng tài khoản trên website hoặc có thể đăng nhập bằng tài khoản facebook.
Tích hợp thanh toán qua Paypal hoặc ngân lượng.
Người quản trị có quyền quản lý thành viên, sản phẩm và có thể xem thống kê các số liệu của trang web.
6.2 Những hạn chế
Giao diện chưa được trực quan, tiện dụng và đẹp cho lắm. Chưa phân quyền cho admin
6.3 Hướng phát triển của đề tài
Do hạn chế về thời gian nên trang web còn những chức năng cần phát triển thêm Chức năng hiển thị sản phẩm theo thành phố.
Tích hợp bản đồ vào phần thông tin chi tiết sản phẩm để hiển thị địa chỉ của nơi bán sản phẩm, dịch vụ.
Trang 85
DANH MỤC TÀI LIỆU THAM KHẢO
[1] Matthew MacDonald “Beginning ASP.NET 4 in C# 2010”.
[2] Matthew MacDonald, Adam Freeman, and Mario Szpuszta “Pro ASP.NET 4 in C# 2010”.
[3] Microsoft ® Visual C#® 2010 Step by Step.
[4] http://vnexpress.net/gl/doi-song/mua-sam/2008/12/3ba09060/
[5] http://help.nganluong.vn/chi-tiet-166/163/4384/Nut-thanh-toan-don-gian.html
[6] http://vnexpress.net/gl/ban-doc-viet/kinh-doanh/2011/03/thanh-cong-cua-groupon-co- the-copy-vao-viet-nam/
[7] http://www.aspvn.net/
[8] Apress Beginning ASP.NET 2.0 in C# 2005 from Novice to Professional [9] ASP.NET Web Developer’s Guide
[10] Lập trình ứng dụng web với ASP.NET- Trung tâm tin học Đại học Khoa Học Tự Nhiên.
[11] Hướng dẫn lập trình ASP.NET 3.5 của Microsoft Viet Nam [12] www.w3schools.com
[13] http://cssyeah.com/co-ban-ve-css.html [14] http://vi.wikipedia.org/wiki