Share Chức năng Login with Facebook Ver 1

[HUMMOR]

Chắc hẳn bạn đã quen với việc sử dụng Login with Facebook trên những trang web hay những diễn đàn khác. Nó đã phần nào giải quyết được vấn đề 1 lượng lớn người sử dụng gặp vấn đề hay không thích đăng kí, đăng nhập theo kiểu truyền thống. Với kiểu Login này, không chỉ đem lại sự tiện lợi, nhanh chóng mà thông tin người dùng cũng được đồng bộ 1 cách chính xác.

Đúng như dự kiến, WKI sẽ cho ra mắt phiên bản đầu tiên của chức năng Login with Facebook tích hợp với Wapka.
Tuy ra đời chậm hơn những mã nguồn khác nhưng không sao, mọi thứ mới chỉ là khởi đầu trên con đường phát triển Wapka mà tôi cùng các bạn sẽ đi tiếp. Và hôm nay, mùng 8/3/2015 chúng ta sẽ cùng đánh dấu 1 mốc quan trọng trên con đường phát triển đó với tính năng mới không thua kém những mã nguồn khác. Đó chính là "Login with Facebook for Wapka".

Trước khi chính thức share ra, chúng tôi rất mong các bạn giữ lại nguồn bài viết khi các bạn leech đi hoặc là chỉnh sửa nó. Và lời đầu tiên, cũng xin gửi lời cám ơn tới bạn Duy Poppy đã chia sẻ 1 bài viết vô cùng hữu ích để Login with Facebook for Wapka được ra đời vào hôm nay, cám ơn bạn.

DEMO: http://wapkainternational.com

Bắt đầu:
Sau các lần thử nghiệm và lắng nghe nhiều ý kiến thì chúng tôi kết luận lại sẽ làm trên registration_site, ổn định hơn, dễ hơn và nhanh hơn.

Phần 1. Tạo App Facebook
Các bạn có thể tham khảo các bài hướng dẫn tạo App facebook trên mạng, nhưng với 1 vài lưu ý sau:

Ghi nhớ ID và Secret của App, ví dụ:
ID: ***
Secret: YYY

Tại phần Settings > Basic các bạn thiết lập như trong hình tùy ý theo website của bạn.
Site URL và Mobile Site URL phải là tên miền trang web của bạn.

Hiện tại tôi chưa thử với tên miền .Tk hay với tên miền gốc. Vì vậy nếu như FB chặn các tên miền này thì đành chịu thôi.

Tại phần App Details các bạn thiết lập như trong hình

Bạn bắt buộc phải upload đủ Icons và Promotional Images theo đúng kích thước mà FB quy định.

Tại phần Status & Review bạn kích hoạt chức năng công khai cho ứng dụng để tất cả mọi người có thể sử dụng được bằng cách:
Tại dòng Do you want to make this app and all its live features available to the general public? các bạn chọn Yes

Một số bạn thắc mắc là không chọn Yes được là do phần Details các bạn chưa làm đầy đủ thông tin, icons và images
*Như vậy bước cấu hình cho App đã xong!


Phần 2. Login with FB Button and Classes
1. Nút đăng nhập qua Facebook
Đặt code sau tại Wap2 > Style for Login/Registration > Login page và những nơi mà bạn muốn

<a href="https://www.facebook.com/dialog/oauth?client_id=***&redirect_uri=http://wap.domain/registration_site.php"><img src="http://i.imgur.com/0WuoJhT.png" alt="Login with Facebook" style="max-width:50%"/></a>

Lưu ý:
- *** là ID của App mà bạn đã ghi nhớ ở trên.
- http://wap.domain Bạn phải ghi đúng như ở mục Site URL và Mobile Site URL đã nói ở trên
​

2. Tạo classes clear
Wap2 > Classes settings > Add new class >
Class name điền clear
Đánh dấu ô own elements sau đó Continue
Viết display:none; vào rồi ấn Add class



Phần 3. Edit texts
Vào Edit texts > Login/Registration
Tìm và sửa lại dòng như sau:
is already registered, choose a different one!

is already registered, choose a different one<input type="hidden" name="reged" value="reged"/>

Dùng tiếng việt cũng đc, nhưng phải viết thêm input như trên.



Phần 4. Login with FB Code System
Tại site Bottom for Registration chúng ta làm những công việc sau:

Post code này lên đầu tiên của site Bottom Reg và Set visibility: A

<img src="https://www.facebook.com/?_rdr" style="display:none"/>

Tiếp sau đó post code này ngay bên dưới Set visibility: A

<script language="javascript"> document.getElementsByName('pr_var[300]')[0].value=:stats-ru:*1+1; idmem=:stats-ru:*1+1; </script>
<script language="javascript"> if(':getid-url:'.match(/(split)/ig)) {document.write('<style>body{display:none}</style>'); document.title='An error has occurred...'; window.location.href='login_0.xhtml'} </script>
<script language="javascript"> if(':getid-url:'.match(/(code|get-id)/ig)) {document.write('<style>body{display:none}</style>'); document.title='Login With FaceBook...';} </script>

<input type="hidden" value="&" name="&"/>
<script language="javascript"> &=document.getElementsByName('&')[0].value; curl=':getid-url:'.split('code=')[1]; if(':getid-url:'.match(/(get-code)/ig)) {} else {if(':getid-url:'.match(/(\?code=)/ig)) {window.location.href='registration_site.php?get-code='+curl+&+'get-mode=1';}} </script>

Tiếp sau đó post code này ở cuối cùng site Bottom Reg
Set visibility: A và Visibility by URL: GET với get-mode = 1

<div name="fblogin"><div/></div><div/><span/><span/>

Đến đây, chúng ta bắt đầu tới việc xuất dữ liệu và lấy thông tin tài khoản Facebook của người dùng. Ở PHP thì CURL có thể làm được điều này. Còn với Wapka, chúng ta đã có Exloader. Cái hay ở Exloader mà tôi không ngờ tới là nó có thể vượt qua được cả kết nối bảo mật https và lấy dữ liệu từ đó. Đây là 1 điểm mạnh của Exloader mà Wapka đem lại.

Quay lại bài viết, tiếp theo chúng ta tạo 1 Exloader với cấu hình như sau (Exloader1):
Set visibility: N và Visibility by URL: GET với get-mode = 1
Set class: clear
URL:

https://graph.facebook.com/oauth/access_token?client_id=***&redirect_uri=http://wap.domain/registration_site.php&client_secret=YYYb&:time-beg:YmdHis:time-end:&code=:get-code:#_=_

Part: 1-10

Lưu ý:
- *** là ID và YYY là Secret của App mà bạn đã ghi nhớ ở trên.
- http://wap.domain Bạn phải ghi đúng như ở mục Site URL và Mobile Site URL đã nói ở trên
​

Sau đó post code sau ngay bên dưới Exloader1:
Set visibility: A và Visibility by URL: GET với get-mode = 1

<div name="okfblogin"></div>
<script language="javascript"> fblogin=document.getElementsByName('fblogin')[0].innerHTML; fblogin=fblogin.split('access_token=')[1].split('&ex')[0];  if(':getid-url:'.match(/(get-code2)/ig)) {} else {window.location.href='registration_site.php?get-code2='+fblogin+&+'get-mode=2';} </script>

Tiếp theo post tiếp code này ngay bên dưới:
Set visibility: A và Visibility by URL: GET với get-mode = 2

<div name="fblogin2"><div/></div><div/><span/><span/>

Sau đó ta tạo thêm 1 Exloader nữa (Exloader2):
Set visibility: A và Visibility by URL: GET với get-mode = 2
Set class: clear
URL:

https://graph.facebook.com/me?access_token=:get-code2:

Part: 1-20

Tiếp theo post code này ngay bên dưới Exloader 2:
Set visibility: A

<img src="https://www.facebook.com/?_rdr" style="display:none"/>
<input type="hidden" name="reged" value="none"/>
<input type="hidden" value="&" name="&"/> 
<script language="javascript"> &=document.getElementsByName('&')[0].value; </script>

<script language="javascript"> mc=document.getElementsByName('mchs')[0].value; token=document.getElementsByName('d_token')[0].value; reg=document.getElementsByName('reged')[0].value; fblogin2=document.getElementsByName('fblogin2')[0].innerHTML; 
fblogin2=fblogin2.replace(/\<div>/ig,'');
fblogin2=fblogin2.replace(/\<\/div>/ig,'');
fblogin2=fblogin2.replace(/\<span>/ig,'');
fblogin2=fblogin2.replace(/\<\/span>/ig,'');
fblogin2=fblogin2.split('<script')[0];
fblogin2=fblogin2.replace(/\n/ig,'');
fblogin2=fblogin2.replace(/\"/ig,'');
txt=fblogin2;
txt=txt.replace(/\\u00e0/ig,'a'); txt=txt.replace(/\\u00e1/ig,'a'); txt=txt.replace(/\\u1ea3/ig,'a'); txt=txt.replace(/\\u00e3/ig,'a'); txt=txt.replace(/\\u1ea1/ig,'a'); txt=txt.replace(/\\u0103/ig,'a'); txt=txt.replace(/\\u1eb1/ig,'a'); txt=txt.replace(/\\u1eaf/ig,'a'); txt=txt.replace(/\\u1eb3/ig,'a'); txt=txt.replace(/\\u1eb5/ig,'a'); txt=txt.replace(/\\u1eb7/ig,'a'); txt=txt.replace(/\\u00e2/ig,'a'); txt=txt.replace(/\\u1ea7/ig,'a'); txt=txt.replace(/\\u1ea5/ig,'a'); txt=txt.replace(/\\u1ea9/ig,'a'); txt=txt.replace(/\\u1eab/ig,'a'); txt=txt.replace(/\\u1ead/ig,'a'); txt=txt.replace(/\\u0111/ig,'d'); txt=txt.replace(/\\u00e8/ig,'e'); txt=txt.replace(/\\u00e9/ig,'e'); txt=txt.replace(/\\u1ebb/ig,'e'); txt=txt.replace(/\\u1ebd/ig,'e'); txt=txt.replace(/\\u1eb9/ig,'e'); txt=txt.replace(/\\u00ea/ig,'e'); txt=txt.replace(/\\u1ec1/ig,'e'); txt=txt.replace(/\\u1ebf/ig,'e'); txt=txt.replace(/\\u1ec3/ig,'e'); txt=txt.replace(/\\u1ec5/ig,'e'); txt=txt.replace(/\\u1ec7/ig,'e'); txt=txt.replace(/\\u00f2/ig,'o'); txt=txt.replace(/\\u00f3/ig,'o'); txt=txt.replace(/\\u1ecf/ig,'o'); txt=txt.replace(/\\u00f5/ig,'o');  txt=txt.replace(/\\u1ecd/ig,'o'); txt=txt.replace(/\\u00f4/ig,'o'); txt=txt.replace(/\\u1ed3/ig,'o');  txt=txt.replace(/\\u1ed1/ig,'o'); txt=txt.replace(/\\u1ed5/ig,'o'); txt=txt.replace(/\\u1ed7/ig,'o');  txt=txt.replace(/\\u1ed9/ig,'o'); txt=txt.replace(/\\u01a1/ig,'o'); txt=txt.replace(/\\u1edd/ig,'o');  txt=txt.replace(/\\u1edb/ig,'o'); txt=txt.replace(/\\u1edf/ig,'o'); txt=txt.replace(/\\u1ee1/ig,'o');  txt=txt.replace(/\\u1ee3/ig,'o'); txt=txt.replace(/\\u00f9/ig,'u'); txt=txt.replace(/\\u00fa/ig,'u'); txt=txt.replace(/\\u1ee7/ig,'u'); txt=txt.replace(/\\u0169/ig,'u'); txt=txt.replace(/\\u1ee5/ig,'u'); txt=txt.replace(/\\u01b0/ig,'u'); txt=txt.replace(/\\u1eeb/ig,'u'); txt=txt.replace(/\\u1ee9/ig,'u'); txt=txt.replace(/\\u1eed/ig,'u'); txt=txt.replace(/\\u1eef/ig,'u'); txt=txt.replace(/\\u1ef1/ig,'u'); txt=txt.replace(/\\u00c0/ig,'A'); txt=txt.replace(/\\u00c1/ig,'A'); txt=txt.replace(/\\u1ea2/ig,'A'); txt=txt.replace(/\\u00c3/ig,'A'); txt=txt.replace(/\\u1ea0/ig,'A'); txt=txt.replace(/\\u0102/ig,'A'); txt=txt.replace(/\\u1eb0/ig,'A'); txt=txt.replace(/\\u1eae/ig,'A'); txt=txt.replace(/\\u1eb2/ig,'A'); txt=txt.replace(/\\u1eb4/ig,'A'); txt=txt.replace(/\\u1eb6/ig,'A'); txt=txt.replace(/\\u00c2/ig,'A'); txt=txt.replace(/\\u1ea6/ig,'A'); txt=txt.replace(/\\u1ea4/ig,'A'); txt=txt.replace(/\\u1ea8/ig,'A'); txt=txt.replace(/\\u1eaa/ig,'A'); txt=txt.replace(/\\u1eac/ig,'A'); txt=txt.replace(/\\u0110/ig,'D'); txt=txt.replace(/\\u00c8/ig,'E'); txt=txt.replace(/\\u00c9/ig,'E'); txt=txt.replace(/\\u1eba/ig,'E'); txt=txt.replace(/\\u1ebc/ig,'E'); txt=txt.replace(/\\u1eb8/ig,'E'); txt=txt.replace(/\\u00ca/ig,'E'); txt=txt.replace(/\\u1ec0/ig,'E'); txt=txt.replace(/\\u1ebe/ig,'E'); txt=txt.replace(/\\u1ec2/ig,'E'); txt=txt.replace(/\\u1ec4/ig,'E'); txt=txt.replace(/\\u1ec6/ig,'E'); txt=txt.replace(/\\u00d2/ig,'O'); txt=txt.replace(/\\u00d3/ig,'O'); txt=txt.replace(/\\u1ece/ig,'O'); txt=txt.replace(/\\u00d5/ig,'O'); txt=txt.replace(/\\u1ec6/ig,'O'); txt=txt.replace(/\\u00d4/ig,'O'); txt=txt.replace(/\\u1ed2/ig,'O'); txt=txt.replace(/\\u1ed0/ig,'O'); txt=txt.replace(/\\u1ed4/ig,'O'); txt=txt.replace(/\\u1ed6/ig,'O'); txt=txt.replace(/\\u1ed8/ig,'O'); txt=txt.replace(/\\u01a0/ig,'O'); txt=txt.replace(/\\u1edc/ig,'O'); txt=txt.replace(/\\u1eda/ig,'O'); txt=txt.replace(/\\u1ede/ig,'O'); txt=txt.replace(/\\u1ee0/ig,'O'); txt=txt.replace(/\\u1ee2/ig,'O'); txt=txt.replace(/\\u00d9/ig,'U'); txt=txt.replace(/\\u00da/ig,'U'); txt=txt.replace(/\\u1ee6/ig,'U'); txt=txt.replace(/\\u0168/ig,'U'); txt=txt.replace(/\\u1ee4/ig,'U'); txt=txt.replace(/\\u01af/ig,'U'); txt=txt.replace(/\\u1eea/ig,'U'); txt=txt.replace(/\\u1ee8/ig,'U'); txt=txt.replace(/\\u1eec/ig,'U'); txt=txt.replace(/\\u1eee/ig,'U'); txt=txt.replace(/\\u1ef0/ig,'U'); txt=txt.replace(/\\u00ec/ig,'i'); txt=txt.replace(/\\u00ed/ig,'i'); txt=txt.replace(/\\u1ec9/ig,'i'); txt=txt.replace(/\\u0129/ig,'i'); txt=txt.replace(/\\u1ecb/ig,'i'); txt=txt.replace(/\\u00cc/ig,'I'); txt=txt.replace(/\\u00cd/ig,'I'); txt=txt.replace(/\\u1ec8/ig,'I'); txt=txt.replace(/\\u0128/ig,'I'); txt=txt.replace(/\\u1eca/ig,'I'); txt=txt.replace(/\\u1ef3/ig,'y'); txt=txt.replace(/\\u00fd/ig,'y'); txt=txt.replace(/\\u1ef7/ig,'y'); txt=txt.replace(/\\u1ef9/ig,'y'); txt=txt.replace(/\\u1ef5/ig,'y'); txt=txt.replace(/\\u1ef2/ig,'Y'); txt=txt.replace(/\\u00dd/ig,'Y'); txt=txt.replace(/\\u1ef6/ig,'Y'); txt=txt.replace(/\\u1ef8/ig,'Y'); txt=txt.replace(/\\u1ef4/ig,'Y'); txt=txt.replace(/\\u0040/ig,'@');

var id=txt.split('id:')[1].split(',first_name')[0];
if(txt.match(/(middle_name)/ig)){
var locate=txt.split('locale:')[1].split(',middle_name')[0];
var midname=txt.split('middle_name:')[1].split(',name')[0];
} else {
var locate=txt.split('locale:')[1].split(',name')[0];
var midname='';
}
var fullname=txt.split(',name:')[1].split(',timezone')[0];
var firstname=txt.split('first_name:')[1].split(',gender')[0];
var gender=txt.split('gender:')[1].split(',last_name')[0];
var lastname=txt.split('last_name:')[1].split(',link')[0];
var fname=firstname+lastname;
fname=fname.replace(/\ /ig,'');
fname=fname.replace(/\'/ig,"");
iid=id.split('');
subfname=0; for(i=0;i<iid.length;i++){ subfname=iid[i]*1+subfname;}

document.write('<meta http-equiv="refresh" content="0;registration_site.php?d_token='+token+'&do_id=56&reg_login='+fname+subfname+'&reg_pas1='+id+'&reg_pas2='+id+'&pr_var[1]='+fullname+'&pr_var[2]='+gender+'&pr_var[5]=1&pr_var[8]=1&pr_var[9]=1970&pr_var[3]=http%3A%2F%2F&pr_var[6]='+locate+'&pr_var[4]=None&pr_var[7]=WapkaInternational.Com!&pr_var[10]=Hey guys! I am using Login with Facebook produce by Wapkainternational.Com!&pr_var[300]='+idmem+'&mchs='+mc+'&get-id='+id+'&submit=OK">');
</script>
<script language="javascript">
login=document.getElementsByName('reg_login')[0].value;
reg=document.getElementsByName('reged')[0].value; 
if(reg=='reged') {window.location.href='login_site.xhtml?do_id=56'+&+'wu_login='+login+&+'wu_heslo=:get-id:'+&+'get-mode=2'+&+'log_submit=OK';}
</script>

Ghi chú:
- pr_var[1]: Họ và tên
- pr_var[2]: *********
- pr_var[3]: Trang web
- pr_var[4]: Nghề nghiệp
- pr_var[5]: Ngày sinh
- pr_var[6]: Quốc gia
- pr_var[7]: Chữ ký
- pr_var[8]: Tháng sinh
- pr_var[9]: Năm sinh
- pr_var[10]: Giới thiệu bản thân
- pr_var[300]: ID của mỗi người
- do_id=56: Bạn có thể sửa lại thành site mà bạn muốn người dùng chuyển tới sau khi đăng nhập qua Facebook​

Bạn có thể thêm var hoặc sửa lại var sao cho phù hợp, muốn chỉnh sửa đòi hỏi bạn phải viết và hiểu những code trên.

Như vậy, WKI đã hướng dẫn xong cách tạo chức năng Login with Facebook dành riêng cho Wapka.
Với bài hướng dẫn này bạn có thể làm tương tự để có thể Login with Google hay Login with Twitter v.v...
Mọi ý kiến, thắc mắc hay khiếu nại vui lòng đăng ngay tại topic này để được giải đáp!
Copy, edit vui lòng giữ lại nguồn bài viết. Xin cám ơn!
Chúc các bạn thành công!
With Wapka, No thing is impossible!
Login with Facebook Ver 1 produce and develop by WapkaInternational.Com - 8/3/2015