Client Side Twitter Login with Angular 1.x and OAuth.io
Authentication using the OAuth.io service on the client side
First off thank you to Preetish Panda for his tutorial on oauth.io. You can find that tutorial here.
SOURCE CODE for this tutorial.
DEMO of async twitter authentication
Create a static bare-bones angular app. There is an angular.js starter app here.
If you’re using git and want to push this to your own repo add it as a remote:
We are going to use twitter to handle our authentication. That means “Log in with twitter”. In order to do that we need to register an application with the good folks at twitter.
Go here: https://apps.twitter.com/app/new
For the record you also need to have a mobile phone associated with your twitter profile before you can create an application. Go to settings/mobile to add one. https://oauth.io/auth is our Callback URL. For the website URL I am using my custome domain hosted by Github Pages. It is free with your github account and is a good tool and way to showcase your work.
OAuth is an open protocol for authorization across applications. OAuth.io is a company that makes using the OAuth protocol mad simple. The two are different. We can make 2000 API calls per month for free using oauth.io. If we make 20,000 API calls per month using oauth.io it costs $20.
To use oauth.io to handle authentication create an account with them: https://oauth.io/signup
On the dashboard click “Integrated APIs” and add the twitter app’s credentials. The first one is “Consumer Key (API Key)” and the next field is “Consumer Secret (API Secret)” which both come from the “Keys and Access Tokens” panel on your twitter app registration page.
Save changes and you should be able to successfully “Try Auth”.
We’re going to use the oath.js library. Download it from their github repo and then link to the script:
After we initialize our main angular app in
js/app.js add a constant with your oauth.io Public Key.
We’re also gunna define routes using ui-router:
Then we’ll define the template. It is a simple navbar with sign in, hello message and log out buttons. We show them conditionally based on a
$rootScope value we’ll get to in a second. ng-if hides or shows based on if
$scope.currentUser is true or false.
Next we’ll setup MainCtrl:
All of the work will really be happening in our oauth service.
getUserData function I get the logged in user’s information via .me() otherwise their info is only the token. We update the $rootScope and then have to run the digest cycle again with $apply() to let angular know about the changes.
This is not perfect. The client could change the value of
$rootScope and nothing would really be hidden. This does not really secure our app but it does get data from twitter for us. oauth.io has hundreds of services that we could get information from. Log in to the dashboard, click “Integrated APIs” then “Add APIs” and type any provider you can think of. If we wanted to associate our own data with a user’s account we would need our own database and server, or we could use firebase
Here is the completed DEMO.
Add your github url (
<username>.github.io) to “Domains & URLs whitelist” on the oauth.io dashboard homepage and you can have a live site also.
final SOURCE CODE. Give it a star!