AngularJS Popup Window Social Authentication Directive

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.
7130e77e8d59eb08ec97a2cec136e587

When the user logs in with Facebook and they see this:
eebbfee0e755c06cfad9fa01d6d75354

Then, the user has options to select what they give to us.
fd433427cb27294a8cad6a5c760502ff

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).
16870e90a397e79c237a91fa06ec6372
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.

If login was successful, we redirect to the home route. This will load in our user data from the back-end.
aac81aa3e2cd1253046db88d7418295f

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.

4459dce650a40c39e7bbdcb9c6ed674f

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

5 thoughts on “AngularJS Popup Window Social Authentication Directive

Leave a Reply

Your email address will not be published. Required fields are marked *