├── .gitignore
├── LICENSE
├── README.md
├── config.xml
├── dist
    └── android-release-signed.apk
└── www
    ├── bower.json
    ├── icon.png
    ├── index.html
    └── manifest.json


/.gitignore:
--------------------------------------------------------------------------------
1 | www/bower_components/
2 | platforms/
3 | plugins/
4 | 
5 | #MacOSX
6 | .DS_store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Andrew Dodson
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Hello.js and Cordova (Phonegap) Demo
 2 | 
 3 | This is a demo implementation of [HelloJS](https://github.com/MrSwitch/hello.js/) within a Cordova app.
 4 | 
 5 | [Hello.js](https://github.com/MrSwitch/hello.js) is a clientside javascript library to interface with thirdparty API's.
 6 | 
 7 | 
 8 | ## Demo App
 9 | 
10 | [Android demo release .apk file](dist/android-release-signed.apk)
11 | 
12 |  
13 | ## Setup Demo
14 | 
15 | It is assumed you are familiar with [cordova development](https://cordova.apache.org/).
16 | 
17 | Here is your instructions:
18 | 
19 | 	git clone git@github.com:MrSwitch/hellojs-phonegap-demo.git
20 | 	cd ./hellojs-phonegap-demo
21 | 	cordova plugin add cordova-plugin-inappbrowser
22 | 	cordova plugin add cordova-plugin-whitelist
23 | 
24 | 	cd www
25 | 	bower install
26 | 
27 | 
28 | Next, simply add a platform and run e.g.
29 | 
30 | 	cordova platform add ios
31 | 	cordova run ios
32 | 
33 | # FAQ's
34 | 
35 | * What's the difference with a typical browser?
36 | 
37 | HelloJS in Cordova works slight differently because apps run off the local filesystem, not a registered web domain. When registering a `redirect_uri` with an OAuth2 provider we can't simply register a anonymous path like ~~`file://local_assets/redirect.html`~~ - pertaining to the origin of a cordova app. However we can register a legitimate domain, like `https://adodson.com/hello.js/redirect.html` and put that in its stead. On a browser this would not work, because the same-origin rule prevents a file:// path and a http:// path from talking to oneanother (amongst other things).
38 | However we're talking about the special world of in-app-browsers - not a typical browser environment. The cordova plugin InAppBrowser provides an interface in which HelloJS can launch the device's browser and provide an API to monitor and augment that web window. So HelloJS running in the Cordova app triggers the user signin flow, and listens for the right URI (aka value of `redirect_uri`) and extracts the query parameters, tokens, state, etc...
39 | 
40 | * Does the Redirect page need to include HelloJS script
41 | 
42 | No, unlike the browser environment its not neccesary for the Redirect page to contain an instance of the HelloJS library. In fact it doesn't actually need to return content at all. However there is a delay between loading the page and notifying the inappbrowser of the page load, a desolate white screen will appear to the user if nothing else. So think about pointing to a simple splash screen.
43 | 
44 | * What to whitelist
45 | 
46 | Cordova has some other quirks like requiring the HTTP requests to be whitelisted first. I've whitelist'ed the lot in config.xml file.
47 | 
48 | 	<access origin="*" />
49 | 	<allow-intent href="http://*/*" />
50 | 	<allow-intent href="https://*/*" />
51 | 
52 | ## Bugs
53 | 
54 | If you encounter any bugs specifically with HelloJS, please create a ticket at the [Hello.js repo](https://github.com/MrSwitch/hello.js/)
55 | 


--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8'?>
 2 | <widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 3 |     <name>HelloCordova</name>
 4 |     <description>
 5 |         A sample Apache Cordova application that responds to the deviceready event.
 6 |     </description>
 7 |     <author email="dev@cordova.apache.org" href="http://cordova.io">
 8 |         Apache Cordova Team
 9 |     </author>
10 |     <content src="index.html" />
11 |     <icon src="www/icon.png" width="64" height="64" />
12 |     <plugin name="cordova-plugin-whitelist" spec="1" />
13 |     <access origin="*" />
14 |     <allow-intent href="http://*/*" />
15 |     <allow-intent href="https://*/*" />
16 | </widget>
17 | 


--------------------------------------------------------------------------------
/dist/android-release-signed.apk:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrSwitch/hellojs-phonegap-demo/0f8ffc2f8321e139698363311d8d853ace6c1765/dist/android-release-signed.apk


--------------------------------------------------------------------------------
/www/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hellojs-phonegap",
 3 |   "version": "0.0.0",
 4 |   "authors": [
 5 |     "Andrew Dodson <andrew.j.dodson@gmail.com>"
 6 |   ],
 7 |   "description": "Build of Hello.js in PhoneGap",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/MrSwitch/hellojs-phonegap-demo/",
10 |   "private": true,
11 |   "ignore": [
12 |     "**/.*",
13 |     "node_modules",
14 |     "test",
15 |     "tests"
16 |   ],
17 |   "dependencies": {
18 |     "hello": ">=1",
19 |     "adorn": "*"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/www/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MrSwitch/hellojs-phonegap-demo/0f8ffc2f8321e139698363311d8d853ace6c1765/www/icon.png


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8" />
 5 |         <meta name="format-detection" content="telephone=no" />
 6 |         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
 7 |         <link rel="stylesheet" type="text/css" href="./bower_components/adorn/adorn.css" />
 8 |         <meta name="manifest" content="./manifest.json" />
 9 |         <script type="text/javascript" src="cordova.js"></script>
10 |         <script type="text/javascript" src="bower_components/adorn/adorn.js" async></script>
11 |         <title>Hello JS</title>
12 | 
13 |     </head>
14 |     <body>
15 | 
16 |         <h1>Demo: <a href="https://adodson.com/hello.js/">Hello.js</a> in Cordova App</h1>
17 |         <button onclick="login('google')">Google</button>
18 |         <button onclick="login('facebook')">Facebook</button>
19 |         <button onclick="login('windows')">Windows</button>
20 |         <button onclick="login('twitter')">Twitter</button>
21 |         <button onclick="login('instagram')">Instagram</button>
22 | 
23 | <pre>
24 | Demo HelloJS with PhoneGap
25 | Signin above to view basic account details here
26 | </pre>
27 | 
28 |         <!--
29 |          Include the HelloJS library and modules you need
30 |         -->
31 |         <script type="text/javascript" src="bower_components/hello/dist/hello.all.js"></script>
32 |         <script>
33 | 
34 |             // Initate the library
35 |             hello.init({
36 |                 google : '656984324806-sr0q9vq78tlna4hvhlmcgp2bs2ut8uj8.apps.googleusercontent.com',
37 |                 facebook : '160981280706879',
38 |                 windows : '00000000400D8578',
39 |                 twitter: 'eQuyZuECKWPiv3D7E4qdg',
40 |                 instagram: 'e47d210f864c4b1ca94225ddab97205a'
41 |             }, {
42 |                 //
43 |                 // Define the OAuth2 return URL
44 |                 // This can be anything you like, as long as its the callback associated with the your provider-app client id.
45 |                 // It could even be localhost, e.g. http://localhost/somepath as phonegap is not run from a domain so SameOrigin breaks, instead we take advantage of being able to read the popups URL in PhoneGap
46 |                 redirect_uri : 'https://adodson.com/hello.js/redirect.html'
47 |             });
48 | 
49 |             function login(network) {
50 |                 var hi = hello(network);
51 | 
52 |                 hi.login()
53 |                 .then(function(r) {
54 |                     log(r);
55 |                     return hi.api('me');
56 |                 })
57 |                 .then(log, log);
58 |             }
59 | 
60 |             function log(r){
61 |                 var s = document.createTextNode(JSON.stringify(r, null, "\t"));
62 |                 var pre = document.getElementsByTagName('pre')[0];
63 |                 pre.insertBefore(s, pre.firstChild);
64 |             }
65 |         </script>
66 | 
67 | 
68 |     </body>
69 | </html>
70 | 


--------------------------------------------------------------------------------
/www/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name" : "Andrew Dodson's web portfolio",
 3 | 	"icons" : {
 4 | 		"64" : "./icon.png"
 5 | 	},
 6 | 	"root": "./",
 7 | 	"favicon" : "./icon.png",
 8 | 	"description" : "Andrew Dodson's portfolio",
 9 | 	"github" : "MrSwitch/hellojs-phonegap-demo",
10 | 	"author" : "Andrew Dodson, https://adodson.com"
11 | }


--------------------------------------------------------------------------------