Skip to content

Commit 0b953be

Browse files
agentphantomagentphantom
committed
Initial Commit
1 parent 7cefd3c commit 0b953be

File tree

15 files changed

+1612
-0
lines changed

15 files changed

+1612
-0
lines changed

‎README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Firebase in ActionScript
2+
3+
Firebase is a back end platform that offers several services to aid in the development of software, especially the ones that rely on server side infraestructure.
4+
5+
Some of its services can be accesed by using RESTful techniques. This repository contains detailed guides and examples explaining how to use those services in your `Adobe AIR ` projects.
6+
7+
You won't need an `ANE` for these guides, all of them work only using `StageWebView`, `URLRequest` and `URLLoader`.
8+
9+
## Firebase Auth
10+
*Main guide: [Firebase Auth](./auth)*
11+
12+
This service allows you to securely authenticate users into your app. It uses Google Identity Toolkit to provide this service. Some of its key features are:
13+
14+
* Leverages the use of OAuth, saving time and effort.
15+
* Authenticate with `Facebook`, `Google`, `Twitter`, `Email`, `Anonymous` and more.
16+
* Generates a `tokenId` that can be used for Firebase Storage and Firebase Database.
17+
18+
## Firebase Database
19+
*Main guide: [Firebase Database](./database)*
20+
21+
This service allows you to save and retrieve text based data. Some of its key features are:
22+
23+
* Securely save and retrieve data using rules and Firebase Auth.
24+
* Listen to changes in realtime, useful for chat based apps.
25+
* Data is generated in JSON, making it lightweight and fast to load.
26+
* Easy to model and understand data structures.
27+
* Filter, organize and query the data.
28+
29+
## Firebase Storage
30+
*Main guide: [Firebase Storage](./storage)*
31+
32+
This service allows you to upload and maintain all kind of files, including images, sounds, videos. It uses Google Cloud Messaging to provide this service. Some of its key features are:
33+
34+
* Securely save and retrieve files using rules and Firebase Auth.
35+
* Load end edit metadata from files.
36+
37+
## Getting Started
38+
39+
This guide assumes you want to use the 3 services in the same application, you will be able to use them with a free account.
40+
41+
Before you start coding you need to follow these steps to prepare your application for Firebase:
42+
43+
1. Create or open a project in the [Firebase Console](https://firebase.google.com)
44+
2. You will be presented with 3 options for adding your app to `iOS`, `Android` or `Web`.
45+
3. Click `Web`, a popup will appear with information about your project. Copy down your `apiKey` and `authDomain`.
46+
47+
From the `authDomain` we only need the id of the project, an example of an id is: `my-app-12345`.
48+
49+
You can read the guides in any order but it is recommended to start with the [Firebase Auth guide](./auth).
50+
51+
## Donations
52+
53+
Feel free to support the development of free guides and examples. Your donations are greatly appreciated.
54+
55+
[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=MQPLL355ZAKXW)

‎auth/README.md

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
# Firebase Auth
2+
3+
Before using the `Auth` service you need to configure the providers you want to use.
4+
5+
Each provider requires a different setup process. Individual guides are provided explaining how to achieve this.
6+
7+
## Google
8+
9+
This provider doesn't require special configuration since it is automatically configured when you create your Firebase project.
10+
11+
Follow these steps to enable it:
12+
13+
1. Open the [Firebase console](https://firebase.google.com) and select your project.
14+
2. Click the `Auth` option in the left side menu.
15+
3. Click the `SIGN-IN METHOD` button in the top menu and then select `Google` from the providers list.
16+
4. Click the `Enable` toggle button and set it to `on` and then press the `Save` button.
17+
18+
The Google provider has been successfully enabled.
19+
20+
## Facebook and Twitter
21+
22+
* Click [here](./facebook) to read the Facebook setup process.
23+
* Click [here](./twitter) to read the Twitter setup process.
24+
25+
## Email with Password and Anonymous
26+
*Main article: [Email & Password Auth](./email)*
27+
28+
Firebase Auth can also work without using a Federated provider. Email and Anonymous auth have been separated into their own guide.
29+
30+
## Implementation (Federated Login)
31+
32+
Once you have configured one or more Federated providers you will be able to use them in your project.
33+
34+
Open or create a new project.
35+
36+
Open the file where you want to implement the Sign-In feature.
37+
38+
Add the following constants and variables:
39+
40+
```actionscript
41+
private static const FIREBASE_API_KEY:String = "YOUR-FIREBASE-APIKEY";
42+
private static const FIREBASE_CREATE_AUTH_URL:String = "https://www.googleapis.com/identitytoolkit/v3/relyingparty/createAuthUri?key="+FIREBASE_API_KEY;
43+
private static const FIREBASE_VERIFY_ASSERTION_URL:String = "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyAssertion?key="+FIREBASE_API_KEY;
44+
private static const FIREBASE_REDIRECT_URL:String = "https://<YOUR-PROJECT-ID>.firebaseapp.com/__/auth/handler";
45+
private var webView:StageWebView;
46+
private var sessionId:String;
47+
private var requestUri:String;
48+
```
49+
50+
Firebase uses Google Identity Toolkit for its Auth backend. Add one or more buttons and assign them an `EventListener` to them when they get pressed.
51+
52+
I recommend to use the following function if you are using several providers and call it with the provider of your choice:
53+
54+
```actionscript
55+
56+
private function facebookButtonHandler():void
57+
{
58+
//The startAuth function only requires one parameter, a String with the domain corresponding to the provider you want to authenticate
59+
startAuth("facebook.com"); //Use this for Facebook
60+
startAuth("google.com"); //Use this for Google
61+
startAuth("twitter.com"); //Use this for Twitter
62+
}
63+
64+
private function startAuth(provider:String):void
65+
{
66+
var header:URLRequestHeader = new URLRequestHeader("Content-Type", "application/json");
67+
68+
var myObject:Object = new Object();
69+
myObject.continueUri = FIREBASE_REDIRECT_URL;
70+
myObject.providerId = provider;
71+
72+
var request:URLRequest = new URLRequest(FIREBASE_CREATE_AUTH_URL);
73+
request.method = URLRequestMethod.POST;
74+
request.data = JSON.stringify(myObject);
75+
request.requestHeaders.push(header);
76+
77+
var loader:URLLoader = new URLLoader();
78+
loader.addEventListener(flash.events.Event.COMPLETE, authURLCreated);
79+
loader.addEventListener(flash.events.IOErrorEvent.IO_ERROR, errorHandler);
80+
loader.load(request);
81+
}
82+
83+
//We also create an errorHandler since Firebase actually gives useful error codes and messages
84+
private function errorHandler(event:flash.events.IOErrorEvent):void
85+
{
86+
trace(event.currentTarget.data);
87+
}
88+
```
89+
90+
This function connects to the Google Identity Toolkit, it requires two parameters:
91+
92+
* `providerId` which is the domain of the prefered auth provider.
93+
* `continueUri` which is the same URI used for configuring the providers.
94+
95+
Now we create the `authURLCreated` function where we will read the response:
96+
97+
```actionscript
98+
private function authURLCreated(event:flash.events.Event):void
99+
{
100+
var rawData:Object = JSON.parse(event.currentTarget.data);
101+
102+
//We store the sessionId value from the response for later use
103+
sessionId = rawData.sessionId;
104+
105+
webView = new StageWebView();
106+
webView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, changeLocation);
107+
webView.stage = this.stage;
108+
webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
109+
110+
//We load the URL from the response, it will automatically contain the client id, scopes and the redirect URL
111+
webView.loadURL(rawData.authUri);
112+
}
113+
```
114+
115+
We created and instantiated our `StageWebView` which will load an URL that has been dynamically created by Google Identity Toolkit.
116+
117+
We also saved the `sessionId` value since it will be used for a later step.
118+
119+
Now we add the `changeLocation` handler.
120+
121+
```actionscript
122+
private function changeLocation(event:LocationChangeEvent):void
123+
{
124+
var location:String = webView.location;
125+
126+
if(location.indexOf("/__/auth/handler?code=") != -1 || location.indexOf("/__/auth/handler?state=") != -1 || location.indexOf("/__/auth/handler#state=") != -1){
127+
128+
//We are looking for a code parameter in the URL, once we have it we dispose the webview and prepare the last URLRequest
129+
webView.removeEventListener(LocationChangeEvent.LOCATION_CHANGE, changeLocation);
130+
webView.dispose();
131+
132+
requestUri = location;
133+
getAccountInfo();
134+
}
135+
}
136+
```
137+
138+
Here is where things start getting hard since there's no official documentation. This is what is supossed to happen:
139+
140+
1. Once a successful authentication has been made, the StageWebView will change its URL to a 'success' page.
141+
2. This success page contains a `code`, but thankfully we won't need to parse the code, only check if it exists.
142+
3. After further testing I noticed that the success URL varies its form depending on the provider that was used.
143+
144+
* Facebook success URL code part looks like `?code=`
145+
* Twitter success URL code part looks like `?state=`
146+
* Google success URL code part looks like `#state=`
147+
148+
In the previous snippet I added the conditional to detect if the code exists in any of the 3 providers previously mentioned.
149+
150+
4. Once we have an URL that contains the `code` we save it to a String and then call our next function `getAccountInfo()`
151+
152+
```actionscript
153+
private function getAccountInfo():void
154+
{
155+
var header:URLRequestHeader = new URLRequestHeader("Content-Type", "application/json");
156+
157+
var myObject:Object = new Object();
158+
myObject.requestUri = requestUri;
159+
myObject.sessionId = sessionId;
160+
161+
var request:URLRequest = new URLRequest(FIREBASE_VERIFY_ASSERTION_URL);
162+
request.method = URLRequestMethod.POST;
163+
request.data = JSON.stringify(myObject);
164+
request.requestHeaders.push(header);
165+
166+
var loader:URLLoader = new URLLoader();
167+
loader.addEventListener(flash.events.Event.COMPLETE, registerComplete);
168+
loader.addEventListener(flash.events.IOErrorEvent.IO_ERROR, errorHandler);
169+
loader.load(request);
170+
}
171+
```
172+
173+
We created another `URLRequest` with 2 parameters:
174+
175+
* `requestUri` is the URI that contains the `code`, this code will be parsed by the Google Identity Toolkit servers and then used to connect to their respective OAuth servers to retrieve the logged in user profile information.
176+
* `sessionId` is from the very start when we requested the `authUri`.
177+
178+
Now we add the `registerComplete` function that will contain the logged in user information.
179+
180+
```actionscript
181+
private function registerComplete(event:flash.events.Event):void
182+
{
183+
trace(event.currentTarget.data);
184+
var rawData:Object = JSON.parse(event.currentTarget.data);
185+
}
186+
```
187+
188+
If everything was successful you will receive a JSON file with detailed information about the logged in user. You will be able to see the user on your [Firebase console](https://firebase.gogole.com) in the Auth section.
189+
190+
This information is formatted the same for all providers, the most important values are:
191+
192+
Name | Description
193+
---|---
194+
`localId`| A unique id assigned for the logged in user for your specific Firebase project. This is very useful when working with Firebase Database and Firebase Storage.
195+
`idToken`| An Auth token used to access protected data and files from Firebase Database and Firebase Storage. For more information go to the Firebase Database and Firebase Storage guides.
196+
`displayName`| The logged in user full name (Google and Facebook) or they handler in Twitter.
197+
`photoUrl`| The logged in user avatar.
198+
`email`| The logged in user email address.
199+
200+
Note that not all providers return the same information, for example Twitter doesn't return an Email Address.
201+
202+
Once you have the profile information you might want to save it on an Object that can be globally accessed, you will need it when performing Auth requests.

0 commit comments

Comments
 (0)