Mobile Authentication in Ionic with OAuth Through External APIs: Fitbit Pt 2 (Client)

In this post I talk about how to hook up the server to the client side so a user can open your app on their phone and log in through their Fitbit account. If you haven’t read the post on setting up server for mobile OAuth, I recommend you start with that first.

Client-Side (Requirements: angular.js and ionic)

Step 1: Create the Login Service 

First, you will want to create the login service, in which you inject localStorageService, which you would need to install from here and then require in your index.html. Once you’ve done that, this is what your service should look like:

Screen Shot 2014-06-15 at 8.47.54 PM

 The url is what the server url you have that redirects a user to be logged in.  Line 9 will open an in-app browser with no toolbar or url displayed. Line 10 adds a listener called ‘loadstart’ which is called every time a new url is being loaded in the in-app browser. When this in-app browser opens, the view should look something like this:

Screen Shot 2014-06-15 at 8.53.23 PM

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Once the user logs in, he/she is redirected, as per the server. The url will change, as per the server. The rest of the code basically listens for the url that will eventually have the oauth_token that we want, as well as the user id. This particular code also listens for the JSON web token. Once you receive the token/information you want, via the URL from the server, you use localStorageService, which is basically a caching service, to store the tokens locally.

Step 2: Authenticate the User

We then want to have a controller that checks for the locally stored tokens, and if they’re there, we can direct the user to the authenticated view (line 7), and if not, we let the scope know that the user is not authenticated (line 11). All line 6 is doing is retrieving the user information from the database, using the userId to make that query.Screen Shot 2014-06-15 at 8.59.05 PM

On line 14, we have the function for logging out, which simply clears the localStorageService of all saved information, and essentially resets the ‘session.’ Line 16 basically refreshes the page, which would be unauthenticated, and line 11 would be true, and the user would be redirected to the login page, where they will be given access to something to click that will run line 21.

Step 3: Putting It All Together

Finally, we just need to hook up the views and the controllers.

Screen Shot 2014-06-15 at 9.02.49 PM

Line 4 is where we can insert our views for the app, and no user can see them unless they are authenticated. If there is no user saved to local storage, then lines 7 to 18 would show, which would be your splash screen with a button allowing the user to log in, such as our app shows below:

Screen Shot 2014-06-15 at 9.07.07 PM

 

 

 

 

 

 

 

 

 

And there you have it! Shameless plug: If you have a Fitbit and want to make fitness more fun, check out my app in the Google Play Store!

Leave a Reply

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