App’s Security Terminologies

Basic terminologies when dealing with OAuth security in the context of app (web application, api, mobile application, etc).

Authentication
The process of proving you are who you say you are.

Authorization
The act of granting an authenticated party permission to do something. It specifies what data you’re allowed to access and what you can do with that data.

Identity
Refer to users who request access to resources. Users have to proof their identity is who they said they are, usually through authentication process.

Flow (aka. grant type)
Methods through which applications can gain Access Tokens and by which you grant limited access to your resources to another entity without exposing credentials.

Token
A piece of data contain information about users and apps. Common types of tokens:

1. Id token

A token used to identify user.

2. Access token

A token used to access some kind of resources, ie: api.

3. Refresh token

A token used to refresh access token.

Hash
Function that can be used to map data of arbitrary size to fixed-size values. The values returned by a hash function are called hash values, hash codes, digests, or simply hashes.

Encrypt
Convert (information or data) into a cipher or code, especially to prevent unauthorized access. Common methods of encryption:

1. Asymmetric

A form of encryption where keys come in pairs. Public keys which may be disseminated widely, and private keys which are known only to the owner. Public keys are used to encrypt and private keys are used to decrypt.

2. Symmetric

A form of encryption which only use one key (as opposed to pair of keys in Asymmetric). The key is used to encrypt and decrypt.

Decrypt
Make a coded or unclear message able to be understood.

Public private key
See asymmetric encryption above.

Federation
The linking a users’ electronic identity and attributes, stored across multiple distinct identity management systems.

References:
Microsoft
Auth0
Wikipedia

Ionic 3 Change App Icon and Splash Screen

The easiest way to change App Icon and Splash screen in Ionic is to let Ionic handle creation of different versions of icon and splash sizes.

When an app first created, there are 2 files in resources folder, icon.png and splash.png.

Replace these 2 files with your desired icon and splash files.

• File name must be the same
• Size of icon.png must be minimum 1024×1024 and splash.png must be minimum 2732×2732

Once icon.png and splash.png files have been replaced. Follow this steps:

1. You must have FREE Ionic account. This is because the icon and splash generation/transformation is using Ionic server.
2. On your project folder, run following command: ionic login
3. Then enter your email and password.
4. On project folder, run (replace ios with android if you building Android app): ionic cordova resources ios
5. Ionic will transform your icon and splash files into different versions that your target platform requires.
6. In the process, config.xml, will also be updated.

Change iOS App Id in Ionic

To change iOS App Id in Xcode:

1. In Project Navigator, click on project name.
2. Then click on General.
3. Under Identity, change the Bundle Identifier.

To do the same in Ionic iOS project, follow this step:

1. In the root folder, find config.xml.
2. At the beginning of the content, find widget element.
3. Change widget‘s attribute id.

 

Ionic ion-nav RootPage’s ionViewDidLoad() Does Not Fire

Ionic navigation provide [root] attribute to set the root page.

MyApp component:

<ion-nav [root]="rootPage"></ion-nav>

export class MyApp {
rootPage: any = StartPage; // This set StartPage as the root page of our app

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

And the StartPage

export class StartPage {
  constructor(private navCtrl: NavController,
              private modalController: ModalController) {
  }

  ionViewDidLoad() {
    console.log('StartPage ionViewDidLoad'); // This does not fire!
  }
}

All works well, except our ionViewDidLoad() in StartPage does not fire!

This is because when we set rootPage properties or present a page with ModalController, class’s constructor and ionViewDidLoad() do not get executed.

It seems like a bug in Ionic framework. For the record this was tested with IOS Simulator on:

• Ionic Framework 3.8.0
• Ionic CLI 3.2.0
• Cordova CLI 7.1.0
• NPM 3.10.10
• Node 6.10.3
• ios-deploy 1.9.2

The Workaround

Insert new page in between MyApp and StartPage, we will call it TransitionPage. Then explicitly set StartPage as the root of NavController.

Continue the code above. This is how modified MyApp look like:

<ion-nav [root]="rootPage"></ion-nav>

export class MyApp {
  rootPage: any = TransitionPage; // Our new transition page

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

This is our new TransitionPage:

export class TransitionPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.navCtrl.setRoot(StartPage); // Manually set StartPage as the root
  }
}

The StartPage does not change, however its ionViewDidLoad() hook now fire as expected.

 

Ionic 3 IOS App Missing Image

Specifying image on Ionic 3 IOS App is as simple as using html element <img>. This usually works pretty well when testing on web browser.

However, when testing Ionic 3 IOS App on Mac’s Simulator (Emulator), it show missing image instead:

Simply change relative path of src attribute to absolute path.

Relative path:

<img src="../assets/image/picture.jpg" />

Absolute path:

<img src="/../assets/image/picture.jpg" />

This is caused by how Ionic structured compiled code in build folder. Take a look at here: