Firebase and AS3

Episode 2 : Login with OAuth 2.0

Hi there. I hope you are well.

In this episode, we will see how to identify a user with OAuth 2.0 and AS3.

First, you’ll need OAuth 2.0 AS3 library. You can get it here.

To use OAuth 2.0 AS3 library, you’ll need two others libraries:

  • as3corelib
  • as3-commons

Links to download and licenses are provided on the GitHub page of the OAuth 2.0 AS3 library page.

Create your project

Create your project with your preferred IDE (personnally, for this project, I use Flash Builder 4.7).

For this tutorial, I choose Starling / Feathers and I will build a mobile project.

Right now (August 2016), there is a buzz around Pokémon Go game. So… We will build an application that geolocalize pokémons on a map.

I hear you complain: Why Pokémon Go !! I would answer simply: Because it’s like that! 😀

Let’s go!

Link the mentioned library (SWC or source code) to your project. I assume that you know how to do that. This is really a basic operation.

Create the buttons and the StageWebView

On your home screen, create 2 buttons: Google Login Button and Facebook Login Button.

Most important thing, you have to create a StageWebView. It will serve to show login forms from Google and Facebook.

With Starling and Feathers, you create buttons very simply with this few lines of code:

For the StageWebView, this is done with:

Make sure you create your StageWebView outside a function to be sure you can access it from anywhere. 😀

Now… the magic… Let’s create buttons click handlers.

Create the buttons click handlers

We have our buttons and our StageWebView… So, it’s time to code some event triggerers.

Do you remember? In the Episode 1, we saw how to create your Firebase project and your Google OAuth 2.0 and Facebook OAuth 2.0 applications. So this is the right time to use the IDs and Secrets you generate in the previous step. 😀

In OAuth 2.0 login and token request, we use a scope variable (that can be a multiple scopes string). For the need of this tutorial, we just ask for basic information, but you can do more than that. Just take a look at the scopes allowed by the systems you are using.

Google Scopes

Facebook Scopes

 

 

Get the Access Token

Now that we do a valid OAuth 2.0 login request, it’s time to get our token. Right?

You do it with this few lines of code:

OK… if everything is ok, you got a token and the StageWebView was closed. Or, if something was wrong, you got an error message that help you to debug quickly your application.

Get the user profile

It’s now time to get the user profile we get from Google or Facebook (remember, this is the “scope” that we request).

As you can see, we are asking to provider servers some information about our logged in user. Be careful and remember this simple thing:

More you ask for information, less your users will trust you !

And… Write the user profile in Firebase Database

Now that you got a valid token and the user profile, it’s time to write it to your Firebase Database.

This is done with very few lines of code:

Maybe you want a little bit more information about how it works…

OK. First, we are creating the object that we push in Firebase database. This is the profile of the user that logged in. We have some different fields as we use Google or Facebook (or another OAuth 2.0 compliant system provider).

Then we create the JWT (JSON Web Token) that will be used to secure our communication with Firebase Servers.

We create a payload and sign it with the simple (very simple) class that I’ve created to allow this. And with all this elements, we send a REST query to Firebase servers.

Firebase and AS3 : Login
Firebase and AS3 : Login

What next? Let’s play a little bit more…

With this episode, you are able to :

  • Login with OAuth 2.0
  • Get your user profile
  • Write it to your Firebase Database

So… What next? We will play a little bit more with this and try to geolocalize a phone, choose a Pokémon name in a list and write this information in our Firebase Database in order to put a marker on a map.

I hope everything is clear. Do not hesitate to re-read this episode to let things be clearer.

If you’re ready, rendez-vous in the Episode 3.

PAY ATTENTION !! In fact, this is a very bad practice to incorporate your Firebase Secret Key in an application that can be easily decompiled (and SWF can be reversed). This exercise is just meant to show that use of the REST service firebase is possible from AS3. Acquire JWT from Firebase server (or your own server) remains the best option and can be easily achieved through a simple HTML page using the Web SDK Firebase and a WebView.