AngularJS Auth Facebook Login Directive
full code in repo: https://github.com/sdeering/angularjs-auth-facebook-login-directive
Quick example of how you can use JavaScript to open a popup and authenticate a user using Facebook login and return the values back to your Angular app. I have turned the code into an angular directive which is on my github.
I am using:
– AngularJS front-end
– Laravel PHP back-end
– Facebook Auth 2.0 SDK PHP
This is the workflow.
popup window code dual screen [link]
laravel facebook login example [link]
social authentication options [link]
User clicks the login with Facebook button and popup window is loaded.
When the user logs in with Facebook and they see this:
Then, the user has options to select what they give to us.
They click OK and it returns to the callback url (specified in app settings or passed in value).
This is the debug return from back-end (the user does not see this).
We can auto close the popup by checking in intervals for a popup window value, when it changes we grab it and close the popup.
There is a strict cross origin (domain) policy which exists between parent window and child (the popup window). So we need to put the check in a try and catch the error so we can continue to check for completion of the auth. The facebook auth returns a code parameter so when this is present we know it has finished and we can close the child and finish the login.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/** * socialAuth monitoring popup window for completion. */ $scope.checkAuthStatus = function() { //check popup window url try { if ($scope.socialAuthWindow.document.domain === document.domain) { // console.log($scope.socialAuthWindow.document.URL); var code = $scope.getUrlParameters('code', $scope.socialAuthWindow.document.URL, true); //when auth is complete the code param will be present from facebook if (code) { console.log('AUTH COMPLETE.'); $scope.socialAuthWindow.close(); } } } catch(e) { //domain mismatch catch console.log('Checking auth...'); } //on window close if ($scope.socialAuthWindow.closed) { console.log('AUTH WINDOW CLOSED.'); $scope.authEnd(); } else setTimeout($scope.checkAuthStatus, 200); }; |
If login was successful, we redirect to the home route. This will load in our user data from the back-end.
Notes
Erorrs
“You are using a display type of ‘page’ in a small browser window or popup. For a better user experience, show this dialog with our JavaScript SDK without specifying an explicit display type. The SDK will choose the best display type for each environment. Alternatively, use display type ‘popup’ if you have special requirements precluding you from using the SDK. This message is only visible to developers of your application.
I guess we need a bigger popup. However “This message is only visible to developers of your application.” so no need to worry about it.
RT @angularjs4u: AngularJS Popup Window Social Authentication Directive: AngularJS Auth Facebook Login Directive
full cod… https://t.co/…
RT @angularjs4u: AngularJS Popup Window Social Authentication Directive: AngularJS Auth Facebook Login Directive
full cod… https://t.co/…
AngularJS Popup Window Social Authentication Directive https://t.co/yACeIRmOfF
RT @BryanWilhite: AngularJS Popup Window Social Authentication Directive https://t.co/yACeIRmOfF
Great job! to do something similar I will recommend also passport js http://passportjs.org/ , it will do the job not only for facebook, but also twitter, google + , github and many others