added oauth

This commit is contained in:
Morgan McMillian 2017-06-06 16:42:08 -07:00
parent a24bf1fcda
commit d395504629
14 changed files with 166 additions and 12 deletions

3
.gitignore vendored
View file

@ -32,3 +32,6 @@ $RECYCLE.BIN/
.DS_Store .DS_Store
Thumbs.db Thumbs.db
UserInterfaceState.xcuserstate UserInterfaceState.xcuserstate
# other bits
pnut-oauth.ts

View file

@ -24,7 +24,7 @@ limitations under the License.
* Install Node.js (https://nodejs.org) * Install Node.js (https://nodejs.org)
* Install the latest Ionic and Cordova tools * Install the latest Ionic and Cordova tools
``` ```bash
npm install -g ionic cordova npm install -g ionic cordova
``` ```
@ -47,7 +47,7 @@ limitations under the License.
## Other build dependencies ## Other build dependencies
Install required node modules Install required node modules
``` ```bash
cd Goober cd Goober
npm install npm install
``` ```
@ -56,12 +56,12 @@ npm install
## Build and run ## Build and run
#### Browser #### Browser
``` ```bash
ionic serve --lab ionic serve --lab
``` ```
#### Android #### Android
``` ```bash
ionic cordova platform add android # if not yet added ionic cordova platform add android # if not yet added
ionic cordova build android ionic cordova build android
ionic cordova run android ionic cordova run android

View file

@ -1,5 +1,5 @@
<?xml version='1.0' encoding='utf-8'?> <?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <widget id="com.monkeystew.goober-m" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Goober</name> <name>Goober</name>
<description>Goober, a mobile app for pnut.io</description> <description>Goober, a mobile app for pnut.io</description>
<author email="gilag@monkeystew.com" href="https://monkeystew.org">Morgan McMillian</author> <author email="gilag@monkeystew.com" href="https://monkeystew.org">Morgan McMillian</author>
@ -82,6 +82,7 @@
<engine name="windows" spec="^5.0.0" /> <engine name="windows" spec="^5.0.0" />
<plugin name="cordova-plugin-console" spec="^1.0.5" /> <plugin name="cordova-plugin-console" spec="^1.0.5" />
<plugin name="cordova-plugin-device" spec="^1.1.4" /> <plugin name="cordova-plugin-device" spec="^1.1.4" />
<plugin name="cordova-plugin-inappbrowser" spec="^1.7.1" />
<plugin name="cordova-plugin-splashscreen" spec="^4.0.3" /> <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.2.2" /> <plugin name="cordova-plugin-statusbar" spec="^2.2.2" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.1" /> <plugin name="cordova-plugin-whitelist" spec="^1.3.1" />

View file

@ -28,6 +28,7 @@
"cordova-blackberry10": "^3.8.0", "cordova-blackberry10": "^3.8.0",
"cordova-plugin-console": "^1.0.5", "cordova-plugin-console": "^1.0.5",
"cordova-plugin-device": "^1.1.4", "cordova-plugin-device": "^1.1.4",
"cordova-plugin-inappbrowser": "^1.7.1",
"cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-splashscreen": "^4.0.3",
"cordova-plugin-statusbar": "^2.2.2", "cordova-plugin-statusbar": "^2.2.2",
"cordova-plugin-whitelist": "^1.3.1", "cordova-plugin-whitelist": "^1.3.1",
@ -35,6 +36,8 @@
"ionic-angular": "3.3.0", "ionic-angular": "3.3.0",
"ionic-plugin-keyboard": "^2.2.1", "ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0", "ionicons": "3.0.0",
"ng2-cordova-oauth": "0.0.8",
"pnut-butter": "^0.8.0",
"rxjs": "5.1.1", "rxjs": "5.1.1",
"sw-toolbox": "3.6.0", "sw-toolbox": "3.6.0",
"zone.js": "0.8.11" "zone.js": "0.8.11"
@ -53,7 +56,8 @@
"cordova-plugin-splashscreen": {}, "cordova-plugin-splashscreen": {},
"cordova-plugin-statusbar": {}, "cordova-plugin-statusbar": {},
"cordova-plugin-whitelist": {}, "cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {} "ionic-plugin-keyboard": {},
"cordova-plugin-inappbrowser": {}
}, },
"platforms": [ "platforms": [
"android", "android",

View file

@ -2,9 +2,12 @@ import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular'; import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar'; import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen'; import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';
import { HomePage } from '../pages/home/home'; import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list'; import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import * as pnut from 'pnut-butter';
@Component({ @Component({
templateUrl: 'app.html' templateUrl: 'app.html'
@ -12,22 +15,32 @@ import { ListPage } from '../pages/list/list';
export class MyApp { export class MyApp {
@ViewChild(Nav) nav: Nav; @ViewChild(Nav) nav: Nav;
rootPage: any = HomePage; rootPage: any = LoginPage;
pages: Array<{title: string, component: any}>; pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private storage: Storage) {
this.initializeApp(); this.initializeApp();
// used for an example of ngFor and navigation // used for an example of ngFor and navigation
this.pages = [ this.pages = [
{ title: 'Home', component: HomePage }, { title: 'Home', component: HomePage },
{ title: 'List', component: ListPage } { title: 'List', component: ListPage },
]; ];
} }
initializeApp() { initializeApp() {
console.log('--- initializeApp ---');
this.storage.get('token').then((val) => {
if (val.length > 1) {
pnut.token = val;
this.nav.setRoot(HomePage);
}
}).catch(err => {
console.log('ERROR: ' + err);
});
this.platform.ready().then(() => { this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available. // Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need. // Here you can do any higher level native things you might need.
@ -41,4 +54,5 @@ export class MyApp {
// we wouldn't want the back button to show in this scenario // we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component); this.nav.setRoot(page.component);
} }
} }

View file

@ -5,25 +5,30 @@ import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component'; import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home'; import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list'; import { ListPage } from '../pages/list/list';
import { LoginPage } from '../pages/login/login';
import { StatusBar } from '@ionic-native/status-bar'; import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen'; import { SplashScreen } from '@ionic-native/splash-screen';
import { IonicStorageModule } from '@ionic/storage';
@NgModule({ @NgModule({
declarations: [ declarations: [
MyApp, MyApp,
HomePage, HomePage,
ListPage ListPage,
LoginPage
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
IonicModule.forRoot(MyApp), IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
], ],
bootstrap: [IonicApp], bootstrap: [IonicApp],
entryComponents: [ entryComponents: [
MyApp, MyApp,
HomePage, HomePage,
ListPage ListPage,
LoginPage
], ],
providers: [ providers: [
StatusBar, StatusBar,

View file

@ -15,4 +15,5 @@
</p> </p>
<button ion-button secondary menuToggle>Toggle Menu</button> <button ion-button secondary menuToggle>Toggle Menu</button>
<button ion-button secondary (click)="fetchGlobal()">Test</button>
</ion-content> </ion-content>

View file

@ -1,5 +1,8 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NavController } from 'ionic-angular'; import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import * as pnut from 'pnut-butter';
@Component({ @Component({
selector: 'page-home', selector: 'page-home',
@ -7,8 +10,26 @@ import { NavController } from 'ionic-angular';
}) })
export class HomePage { export class HomePage {
constructor(public navCtrl: NavController) { constructor(public navCtrl: NavController, private storage: Storage) {
console.log('*** Created HomePage ***');
this.fetchMe();
}
fetchGlobal() {
console.log('.... going to fetch global maybe ....');
pnut.global().then(res => {
console.log(res);
}).catch(err => {
console.log(err);
});
}
fetchMe() {
pnut.user('me').then(res => {
console.log('RESULT: ' + JSON.stringify(res));
}).catch( err => {
console.log('ERROR: ' + JSON.stringify(err));
});
} }
} }

View file

@ -1,6 +1,8 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular'; import { NavController, NavParams } from 'ionic-angular';
import * as pnut from 'pnut-butter';
@Component({ @Component({
selector: 'page-list', selector: 'page-list',
templateUrl: 'list.html' templateUrl: 'list.html'
@ -11,6 +13,12 @@ export class ListPage {
items: Array<{title: string, note: string, icon: string}>; items: Array<{title: string, note: string, icon: string}>;
constructor(public navCtrl: NavController, public navParams: NavParams) { constructor(public navCtrl: NavController, public navParams: NavParams) {
console.log('*** created ListPage ***');
pnut.user('me').then(res => {
console.log('RESULT: ' + JSON.stringify(res));
}).catch( err => {
console.log('ERROR: ' + JSON.stringify(err));
});
// If we navigated to this page, we will have an item available as a nav param // If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get('item'); this.selectedItem = navParams.get('item');

View file

@ -0,0 +1,22 @@
<!--
Generated template for the LoginPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Login to pnut.io</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>Goober</p>
<p>A mobile client for pnut.io</p>
<button ion-button block (click)="login()">Log In</button>
</ion-content>

View file

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
@NgModule({
declarations: [
LoginPage,
],
imports: [
IonicPageModule.forChild(LoginPage),
],
exports: [
LoginPage
]
})
export class LoginPageModule {}

View file

@ -0,0 +1,3 @@
page-login {
}

45
src/pages/login/login.ts Normal file
View file

@ -0,0 +1,45 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { HomePage } from '../home/home';
import { OauthCordova } from 'ng2-cordova-oauth/platform/cordova';
import { OauthBrowser } from 'ng2-cordova-oauth/platform/browser';
import { PnutAuth } from '../../providers/pnut-oauth';
import * as pnut from 'pnut-butter';
/**
* Generated class for the LoginPage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
private oauth: OauthCordova = new OauthCordova();
private oauthb: OauthBrowser = new OauthBrowser();
private pnutProvider: PnutAuth = new PnutAuth({
appScope: ['basic','stream','write_post']
});
constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
}
login() {
this.oauthb.logInVia(this.pnutProvider).then(success => {
// console.log('RESULT: ' + JSON.stringify(success));
this.storage.set('token', success['access_token']);
pnut.token = success['access_token'];
this.navCtrl.setRoot(HomePage);
}, error=> {
console.log('ERROR: ' + error);
});
}
}

View file

@ -0,0 +1,11 @@
import { OAuthProvider } from 'ng2-cordova-oauth/provider';
export class PnutAuth extends OAuthProvider {
protected authUrl: string = 'https://pnut.io/oauth/authenticate';
protected defaults: Object = {
responseType: 'token',
clientId: '' // Insert your client ID and rename this file to pnut-oauth.ts
};
}