|
1
2
3
4
5
6
7
|
FB.Event.subscribe('auth.login', function(response) { // do something with response login();});function login(){ document.location.href = "<?=$config['baseurl']?>";} |
I tested the code in various server but the problem occurs only in his server. Then I think to solve the problem using php-sdk generated login code.
In the official example you’ll see the code
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<?phpif ($me) { $logoutUrl = $facebook->getLogoutUrl();} else { $loginUrl = $facebook->getLoginUrl();}?><?php if ($me): ?> <a href="<?php echo $logoutUrl; ?>"> </a> <?php else: ?> <div> <a href="<?php echo $loginUrl; ?>"> </a> </div> <?php endif ?> |
But there is a problem, that is if you use the technique then when user will click login he will redirect to the $loginUrl generated by facebook i.e his main browser window’s url will change. But I want, this authentication will happen in javascript popup window as like as javascript sdk based authentication by facebook. And at last I solved it by the following way:
Logic behind popup authentication using php and javascript:
- User first click FBConnect Login Button
- I’ll create a javascript popup window and load the login url there
- When user successfully authenticate there then facebook will redirect him to the ‘next‘ url passed by me. The redirect will still happen in the popup window.
- I’ll also pass a special parameter with ‘next‘ url’s parameter, so when user redirected here I’ll first collect session variable (Facebook sends a session json encoded string) I’ll modify them to a special format and save the value as a cookie.
- Then I’ll close the popup window and browser’s main window will reload.
The procedure is same as my previous article just I modified the index.php
Step 1: Generate login/logout url by php
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
// login or logout url will be needed depending on current user state.if ($fbme) { $logoutUrl = $facebook->getLogoutUrl( array( 'next' => $config['baseurl'], ) );} else { $loginUrl = $facebook->getLoginUrl( array( 'display' => 'popup', 'next' => $config['baseurl'] . '?loginsucc=1', 'cancel_url'=> $config['baseurl'] . '?cancel=1', 'req_perms' => 'email,user_birthday', ) );} |
If you look carefully you’ll see I passed the next parameter for both login and logout url.
|
1
|
$config['baseurl'] . '?loginsucc=1' |
this is mandatory because we will open the login procedure in javascript popup. So after login successfully in the popup window facebook url will redirect to next url, so when I’ll get loginsucc parameter I’ll close the popup window.
And also look
|
1
|
'cancel_url'=> $config['baseurl'] . '?cancel=1', |
If user click cancel then I redirect him to this url. So that I check whether user click cancel or not.
Step 2: Add this code just after step1′s code
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//if user click cancel not login, then i just close the popup window if (isset($_REQUEST['cancel'])){ echo "<script> window.close(); </script>";}//only if valid session found and loginsucc is setif ($fbme && isset($_REQUEST['loginsucc'])){ //after facebook redirects it will send a session parameter as a json value //now decode them, make them array and sort based on keys $sortArray = get_object_vars(json_decode($_GET['session'])); ksort($sortArray); $strCookie = ""; $flag = false; foreach($sortArray as $key=>$item){ if ($flag) $strCookie .= '&'; $strCookie .= $key . '=' . $item; $flag = true; } //now set the cookie so that next time user don't need to click login again // cookie name should be fbs_ + application id setCookie('fbs_' . "{$fbconfig['appid']}", $strCookie); echo "<script> window.close(); window.opener.location.reload(); </script>"; } |
This code checks for $fbme and $_REQUEST[‘loginsucc’] parameter. If it finds ok, then it first collects the value session sent by facebook. It is a json encoded string. Next
|
1
|
$sortArray = get_object_vars(json_decode($_GET['session'])); |
json_decode() php function decodes json encoded string and returns a object, then get_object_vars() converts the object to associative array. Then I sort the array based on keys by ksort() php function. Next I make a string $strCookie based on the keys and values of $sortArray and save the $strCookie as cookie.
Then I will close the popup window and reload the main window.
Step 3: Now add this javascript code
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script type="text/javascript"> <?php if ($loginUrl) { ?> var newwindow; var intId; function login(){ var screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft, screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop, outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth, outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22), width = 500, height = 270, left = parseInt(screenX + ((outerWidth - width) / 2), 10), top = parseInt(screenY + ((outerHeight - height) / 2.5), 10), features = ( 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top ); newwindow=window.open('<?=$loginUrl?>','Login_by_facebook',features); if (window.focus) {newwindow.focus()} return false; } <?php } ?> |
Though this is javascript code but it is rendered by php. So I added a php if logic.Please note that in the second parameter there should be no space “Login_by_facebook” not “Login by facebook”, because, if that contains space IE shows javascript error. But other browser will not complain.
|
1
|
newwindow=window.open('<?=$loginUrl?>','Login_by_facebook',features); |
This is the code that will open the popup window. features is a string that contains some parameters for the outlook of the popup window.
Step 4: Add this html code of the login/logout buttons
|
1
2
3
4
5
6
7
8
9
|
<?php if ($fbme) { ?> <a href="<?=$logoutUrl?>"> </a> <?php } else{ ?> <a href="#" onclick="login();return false;"> </a> <?php } ?> |
That’s it. Check the demo its exactly looking the same as facebook javascript based authentication window.
And this technique also solved my friends problem of redirecting issue.
Download fbmain.php from here and facebook.php from facebook
Full Source Code of index.php
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
<?php include_once "fbmain.php"; // login or logout url will be needed depending on current user state. if ($fbme) { $logoutUrl = $facebook->getLogoutUrl( array( 'next' => $config['baseurl'], ) ); } else { $loginUrl = $facebook->getLoginUrl( array( 'display' => 'popup', 'next' => $config['baseurl'] . '?loginsucc=1', 'cancel_url'=> $config['baseurl'] . '?cancel=1', 'req_perms' => 'email,user_birthday', ) ); } // if user click cancel in the popup window if (isset($_REQUEST['cancel'])){ echo "<script> window.close(); </script>"; } if ($fbme && isset($_REQUEST['loginsucc'])){ //only if valid session found and loginsucc is set //after facebook redirects it will send a session parameter as a json value //now decode them, make them array and sort based on keys $sortArray = get_object_vars(json_decode($_GET['session'])); ksort($sortArray); $strCookie = ""; $flag = false; foreach($sortArray as $key=>$item){ if ($flag) $strCookie .= '&'; $strCookie .= $key . '=' . $item; $flag = true; } //now set the cookie so that next time user don't need to click login again setCookie('fbs_' . "{$fbconfig['appid']}", $strCookie); echo "<script> window.close(); window.opener.location.reload(); </script>"; } //if user is logged in and session is valid. if ($fbme){ //Retriving movies those are user like using graph api try{ $movies = $facebook->api('/me/movies'); } catch(Exception $o){ d($o); } //Calling users.getinfo legacy api call example try{ $param = array( 'method' => 'users.getinfo', 'uids' => $fbme['id'], 'fields' => 'name,current_location,profile_url', 'callback'=> '' ); $userInfo = $facebook->api($param); } catch(Exception $o){ d($o); } //update user's status using graph api if (isset($_POST['tt'])){ try { $statusUpdate = $facebook->api('/me/feed', 'post', array('message'=> $_POST['tt'], 'cb' => '')); } catch (FacebookApiException $e) { d($e); } } //fql query example using legacy method call and passing parameter try{ //get user id $uid = $facebook->getUser(); //or you can use $uid = $fbme['id']; $fql = "select name, hometown_location, sex, pic_square from user where uid=" . $uid; $param = array( 'method' => 'fql.query', 'query' => $fql, 'callback' => '' ); $fqlResult = $facebook->api($param); } catch(Exception $o){ d($o); } }?><!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>Create your own Facebook PopUp Authentication Window using php and javascript | Thinkdiff.net</title> </head><body><style type="text/css"> .box{ margin: 5px; border: 1px solid #60729b; padding: 5px; width: 500px; height: 200px; overflow:auto; background-color: #e6ebf8; }</style> <script type="text/javascript"> <?php if ($loginUrl) { ?> var newwindow; var intId; function login(){ var screenX = typeof window.screenX != 'undefined' ? window.screenX : window.screenLeft, screenY = typeof window.screenY != 'undefined' ? window.screenY : window.screenTop, outerWidth = typeof window.outerWidth != 'undefined' ? window.outerWidth : document.body.clientWidth, outerHeight = typeof window.outerHeight != 'undefined' ? window.outerHeight : (document.body.clientHeight - 22), width = 500, height = 270, left = parseInt(screenX + ((outerWidth - width) / 2), 10), top = parseInt(screenY + ((outerHeight - height) / 2.5), 10), features = ( 'width=' + width + ',height=' + height + ',left=' + left + ',top=' + top ); newwindow=window.open('<?=$loginUrl?>','Login_by_facebook',features); if (window.focus) {newwindow.focus()} return false; } <?php } ?> </script> <h3>Create your own Facebook PopUp Authentication Window using php and javascript | Thinkdiff.net</h3> <?php if (!$fbme) { ?> You've to login using FB Login Button to see api calling result. <?php } ?> <p> <?php if ($fbme) { ?> <a href="<?=$logoutUrl?>"> </a> <?php } else{ ?> <a href="#" onclick="login();return false;"> </a> <?php } ?> </p> <!-- all time check if user session is valid or not --> <?php if ($fbme){ ?> <table border="0" cellspacing="3" cellpadding="3"> <tr> <td> <!-- Data retrived from user profile are shown here --> <div class="box"> <b>User Information using Graph API</b> <?php d($fbme); ?> </div> </td> <td> <div class="box"> <b>User likes these movies | using graph api</b> <?php d($movies); ?> </div> </td> </tr> <tr> <td> <div class="box"> <b>User Information by Calling Legacy API method "users.getinfo"</b> <?php d($userInfo); ?> </div> </td> <td> <div class="box"> <b>FQL Query Example by calling Legacy API method "fql.query"</b> <?php d($fqlResult); ?> </div> </td> </tr> </table> <div class="box"> <form name="" action="<?=$config['baseurl']?>" method="post"> <label for="tt">Status update using Graph API</label> <br /> <textarea id="tt" name="tt" cols="50" rows="5">Write your status here and click 'Update My Status'</textarea> <br /> <input type="submit" value="Update My Status" /> </form> <?php if (isset($statusUpdate)) { ?> <br /> <b style="color: red">Status Updated Successfully! Status id is <?=$statusUpdate['id']?></b> <?php } ?> </div> <?php } ?> </body></html> |
I hope this article will help to a clear view of popup authentication. You can use my techniques to create popup authentication for twitter, linkedin, other mashup service and your own authentication system.
