I decided to explore flutter by building a mobile app because I really like the learn by doing method.

If you’re not familiar with flutter, it is a cross Mobile development framework to build rich UI mobile applications for Android and iOS. At the moment it is an alfa release and It is open source. If you need an introduction with more details, I wrote a post about it here.

In this article we will build a simple app with Instagram authentication. For this application, we will use the Model View Presenter pattern.

Let’s build our UI.

The Login screen

The UI is built with a column of 3 elements: 2 Text Widgets and a Row Widget of 2 elements (an Image Widget and a Text Widget). For more details on building layout, you can read this.

The business logic

What happen if the user click on the Login Button ? The presenter class will take care of the login operation.

insta is a class which handles Instagram authtentication as documented in the API documentation here using OAuth.

Let’s take a look at the Instagram class.

This class is inspired by the post of Kevin Segaud about Facebook authentication.

We have 3 components: getToken function, the _server function and the Token classs.

The getToken function follows the 3 step of the oauth authentication standard:

1. Direct the user to the autorization page where he can log in with its credentials.

2. The user approves the autorization request and we get the authorization code on the redirect url.

3. Exchange the authorization code with the access Token.

To direct the user to the autorization page, we use the Flutter Web View Plugin.

The _server function create a server waiting on the redirect uri. When a client send a request with the parameter “code” the server takes that parameter and return it.

The Token class is just a plain dart object to contains the informations received in the access token.

You can find the whole project on github.

This is it: The Instagram Authentication is now real!

Hope you enjoyed this article and until then my friend, may the {code} be with you!


If you want to try Flutter, I invite you to learn more here on the official website.

I also invite you to the flutter community:

Resourses

flutter.io

https://www.instagram.com/developer


Originally published at developer-journey.com on February 23, 2018.

HackerNoon.com

how hackers start their afternoons.

Wilfried Mbouenda Mbogne

Written by

Senior Android Engineer, public speaker. Born in Africa, living in Europe. Work hard, play hard, rest hard www.developer-journey.com #HipHopLover,#TvShow addict

HackerNoon.com

how hackers start their afternoons.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade