I’ve been using AngularJS a lot lately in some of my projects at work. It’s been a great tool to use to help me solve challenging problems the nicest and cleanest way possible.
I ran into needing some users to log into a variety of different social platforms. Since I was using Rails, I chose to use omniauth for facebook and twitter. It became even more challenging because they needed to login to these platforms with THEIR social application ID’s, not ours.
- Need to have admin window where user clicks login button for facebook or twitter and logs in with their Facebook application (think Coke, Pepsi, etc)
- User then sees pop up window where OAuth login process happens
- After OAuth login complete, pop up window goes away and they resume their actions
Solving dynamic twitter/facebook log ins for Social Platforms
I started by having this config in Rails for my omniauth initializer:
1 2 3 4 5 6 7 8 9 10 11 12
Simple and clean. In those AccountAuth methods, I take the
env variable (essential the request) and pick off my variables there from an OAuth URL (http://my.dashboard.dev/auth/facebook?appid=123456789).
Solving the User pop up
I had a dashboard with a ton of user actions, as well as two well placed social log in buttons. View template like so:
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 32 33 34
Now on my SettingsCtrl, I had to respond to the authNetwork clicks in the template above to show my pop up window for the network specified, handle its settings, then update this controller. We get that link by setting a global variable on the
window that opened by doing
window.$windowScope = $scope.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
Solving popup talking to AngularJS controller
Once the OAuth pop up that is being opened via
window.open is completed, it will come back to our server (http://my.dashboard.dev/session/create) in which I will render a view through Rails that will display a simple ‘this window is closing’ message. It will also pass in some information from the Rails controller and pass back its completed information back to our calling AngularJS controller. (Thats a lot of controllers, folks)
1 2 3 4 5 6 7
That’s pretty much it. That is how I handled my popups reporting back to its calling AngularJS controller through OAuth on Rails. Hope this helps others out there trying to solve problems like these.