Tutorials Archives - Ionic and Django Tutorial

How to validate a phone number by sending an SMS code using Ionic,Django and SmsApi ?

Christophe Surbier — Mon, 22 Feb 2021 13:25:17 +0000

In this tutorial, we will learn how to enter an international phone number within a Ionic application, and how to validate this phone number by sending an SMS code using a Django backend and SMSAPI services.

Please notice, you should have read previous tutorials to know how to create and manage API services with Ionic (like checking the network, displaying loading alert, passing data to pages) or how to manage API with Django and Rest framework.

You can find source code on my Github

How to enter an international phone number using ionic ?

First we will create a new Ionic/Capacitor project called PhoneValidation

ionic start PhoneValidation blank --capacitor --project-id=phonevalidation --package-id=com.idevotion.phonevalidation

Next we will install and use an external library to deal with international phone number (no need to re-invent the wheel).

npm install --force ion-intl-tel-input ionic-selectable flag-icon-css google-libphonenumber --save

To use this library we need to import it. So we will modify the home.module.ts file to import the library and also to use Reactive Forms with Angular.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { IonIntlTelInputModule } from 'ion-intl-tel-input';

 @NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    IonIntlTelInputModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Then we will modify the home.page.html to use the library within a reactive form


  
    
      Phone Validation
    
  



  
    
      Tel Input
      
      
    
    
      Validate

and the home.page.ts file to declare our form and select some preferred countries.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  formValue = {phoneNumber: '', test: ''};
  form: FormGroup;
  preferredCountries = ["fr","gb","us"]
  constructor() { }

  ngOnInit() {
    this.form = new FormGroup({
      phoneNumber: new FormControl({
        value: this.formValue.phoneNumber
      })
    });
  }

  get phoneNumber() { return this.form.get('phoneNumber'); }

  onSubmit() {
    console.log(this.phoneNumber.value);
  }

}

To display country flag into the modal list of countries, we need to import a specific css file. To do so, we need to edit our global.scss file and add the line

@import "node_modules/flag-icon-css/sass/flag-icon.scss";

Ok so now we can enter a phone number and when clicking on the validate button, the onSubmit function will be called and will display the phone number information

{internationalNumber: "+34 695 96 XX XX", nationalNumber: "695 96 XX XX", isoCode: "es", dialCode: "+34"}

At this point we need to send the phone number information to our Django backend, which will send an SMS with a code that the user will need to enter on a new page to validate his phone number.

Let’s see first how we can send an sms using Django and a sms provider like www.smsapi.com or whatever sms provider you will choose.

How to send an sms code using Django and SMSAPI ?

As we learned in previous tutorials how to create and manage a backend using Django (and deploying it using Clever cloud), we will just focus on how to send the Sms code.

To use SMSAPI with Django, we need to edit our requirements.txt file and add the library

smsapi-client==2.4.2

Then we will create a new endpoint in our API by adding in our urls.py file

 url(r'^sendSmsCode/$',
        sendSmsCode,
        name='sendSmsCode'),

And then we will write the view sendSmsCode which will generate a code, send it by sms and return a JSON response to our Ionic application with the code generated:

def generateSmsCode():
    # select a random sample without replacement
    codeSms = ''.join(random.choice(string.digits) for _ in range(4))
    return codeSms

@api_view(['GET'])
def sendSmsCode(request):
    from phonevalidation.settings import SMSAPI_API_KEY
    client = SmsApiComClient(access_token=SMSAPI_API_KEY)
    phone = request.GET.get('phone', None)
    code = generateSmsCode()
    message="SMS code:"+code
    try:
      client.sms.send(to=phone, message=message)
      smsSent = SMSSent()
      smsSent.phoneNumber = phone
      smsSent.codeEnvoye = code
      smsSent.save()
      json = {"status":"OK","code": code}
    except Exception as e:
        print(e)
        json = {"status": "KO"}

    return JsonResponse(json)

Of course you need to create and set a valid SMSAPI_API_KEY to use smsapi.com service.

How to check and validate an SMS code using Ionic ?

Now on our submit method, we can:

. check if network is available

. call our new API and passed the phone number that the user entered.

. check our JSON response status. If it’s ok we can go to a new page/url : sms/code otherwise we should display an error to the end user.

 onSubmit() {
    console.log(this.phoneNumber.value);
    if (this.apiService.networkConnected){
      let formatedNumber = this.phoneNumber.value.internationalNumber
      this.apiService.sendSmsCode(formatedNumber).subscribe((results)=>{
        if (results){
          let statuts = results["status"]
          if (statuts=="OK"){
            let code = results["code"]
            this.navData.setDataWithoutId({
                  "phoneNumber": formatedNumber,
                  "smscode": code
                })
                this.router.navigate(['/sms-code']).catch(err => console.error(err));
          }
          else{
            //Display error
          }

        }
        else{
          //Display error
        }
      })
    }    
  }

Now we need to create the page that will ask the sms code received and will verify it with the code sent by our backend.

First let’s add our new page

ionic g page SmsCode

Now let’s edit our sms-code.page.html


  
 
   
 
 Code
  



  
    
      Validation code
      Please enter the code send to 
        
Phone: {{phoneNumber}}

and the sms.code.page.scss tohave our digit input design

ion-list {
    &[form] {
        ion-item {
            &.item {
                --border-width: 1px;
                --border-radius: 5px;
                --min-height: 60px;
                --ion-border-color: rgba(0, 0, 0, 0.10);

                ion-select {
                    --padding-start: 0;
                    width: 100%;
                    //font-size: 1.8rem;
                    max-width: unset;
                }

                &+.item {
                    margin-top: 16px;
                }
            }

        }

        ion-row {
            &[lrm] {
                margin-left: -8px;
                margin-right: -8px;
            }

            ion-col {
                padding: 8px;
                padding-top: 16px;
            }
        }
    }

 &[formCodeValidate] {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 310px;
    margin-left: auto;
    margin-right: auto;

    ion-item {
        &.item {
            --border-width: 1px;
            --border-radius: 5px;
            --min-height: 60px;
            max-width: 55px;
            text-align: center;
            font-size: 18px;
        }

    }
    }
}

and the sms-code.page.ts to verify if the code entered by the user is matching the code sent by our backend

import { ChangeDetectorRef, Component, NgZone, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Platform, ToastController } from '@ionic/angular';
import { NavDataServiceService } from '../services/nav-data-service.service';

@Component({
  selector: 'app-sms-code',
  templateUrl: './sms-code.page.html',
  styleUrls: ['./sms-code.page.scss'],
})
export class SmsCodePage implements OnInit {

  phoneNumber= ''
  verificationId="1245";
  code = Array();
  started=false;
  verificationInProgress=false;
  @ViewChild('codesInpunt0') codesInpunt0;
  @ViewChild('codesInpunt1') codesInpunt1;
  @ViewChild('codesInpunt2') codesInpunt2;
  @ViewChild('codesInpunt3') codesInpunt3;

  constructor(
    public router: Router,
    public navData:NavDataServiceService,
    public platform : Platform,
    public toastCtrl: ToastController) {
      this.started=false;
  }

  ngOnInit() {

      let data = this.navData.getDataWithoutId()
      this.phoneNumber = data['phoneNumber'];
      this.verificationId = data['smscode'];
      console.log("route special "+this.phoneNumber+" verif code "+this.verificationId)

  }

  ionViewDidEnter() {
    this.codesInpunt0.setFocus();
  } 

  changeFocus(inputToFocus) {
    switch (inputToFocus) {
      case 1:
        this.codesInpunt1.setFocus();
        break;

      case 2:
        this.codesInpunt2.setFocus();
        break;

      case 3:
        this.codesInpunt3.setFocus();
        break;
       case 4:
        let enteredCode = this.code[0]+this.code[1] + this.code[2] + this.code[3]   ;
        this.resetCode()
        if (this.verificationInProgress==false){
          this.verificationInProgress=true;
          this.activate(enteredCode)
        }
       break;

    }

  }

  activate(enteredCode) {
    if (enteredCode){
      console.log("Compare code sms "+enteredCode+" avec "+this.verificationId)
      if (enteredCode.length == 4) {
        console.log(enteredCode);
        console.log("veificationCode is" + this.verificationId);
        if (enteredCode==this.verificationId){
          //Good job
        }
        else{

          this.presentToastError()
        }
      }
      else{
        this.presentToastError()
      }
    }
    else{
      this.presentToastAgain()
    }
  }

  resetCode(){
      this.code[0]="";
      this.code[1]="";
      this.code[2]="";
      this.code[3]="";

  }

  async presentToastAgain(){
    let toast = await this.toastCtrl.create({
      message: "Please enter code again",
      duration: 2000,
      position: 'bottom'
    });

    toast.present();
    this.verificationInProgress=false;
    this.resetCode()
    this.codesInpunt0.setFocus();
  }

  async presentToastError() {
    this.verificationInProgress=false;
    this.codesInpunt0.setFocus();
    let toast = await this.toastCtrl.create({
      message: "Code invalid",
      duration: 2000,
      position: 'bottom'
    });
   toast.present();
  }

}

The post How to validate a phone number by sending an SMS code using Ionic,Django and SmsApi ? appeared first on Ionic and Django Tutorial.

How to scan QR Code and Barcode with Ionic & Capacitor ?

Christophe Surbier — Fri, 27 Nov 2020 14:17:38 +0000

In this tutorial we will learn how to scan a QR code or a barcode with Ionic / Capacitor and then use the Open Food Fact API to display information about the scanned product.

You can find the source code of this tutorial here

Creating our Ionic / Capacitor project

To create our application we need to type in a terminal, the following command

ionic start qrcodescanner blank --capacitor --project-id=qrcodescanner --package-id=com.idevotion.qrcodescanner

This will generate our Ionic project, then we can go in the created directory and launch our first build to verify everything is ok

ionic build

Install Barcode Scanner library and Capacitor Http library

Now we need to install the Barcode Scanner library to use it with Ionic and Capacitor, and we will use the Capacitor HTTP plugin to do our request to the Open Food Fact API, so we need to install it as well.

npm install phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
npm install @capacitor-community/http

To use the barcodescanner plugin, we need to edit our app.module.ts file and import it

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    BarcodeScanner,
   
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Using the Barcodescanner library with Ionic 5

To use both libraries , we need to edit the default generated home.page.ts file and import it as well

import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import '@capacitor-community/http';
import { Plugins } from '@capacitor/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  productInformation=null
  barCode:any;
  constructor(public barcodeScanner : BarcodeScanner) {}

}

Let’s edit the home.page.html file to add a button that will launch the barcode scanner.


  
    
      Barcode Scanner tutorial
    
  



  
    
    
      Scan a QRCode or Barcode to get the product information

      Scan code
    
  

  
    
      
        {{barCode}}
      
    
    
      
        {{productInformation.product.product_name}}

The page will look like this

If a code is detected it will be displayed in a row with all information related to the scan

 
      
        {{barCode}}

Once a code is detected, we will call Open Food fact API to get information about the scan product. Open Food Fact is an organisation referencing food products, so to get information you will need to scan something related to food. The product name will be displayed on another row

 
      
        {{productInformation.product.product_name}}

Ok now we can go back to the home.page.ts file and implement the openBarCodeScanner() method

openBarCodeScanner(){
    this.barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.barCode = barcodeData
      //   Barcode data {"cancelled":0,"text":"8413384010008","format":"EAN_13"}
    }).catch(err => {
      console.log('Error', err);
    });
  }

At this stage, if you try to scan something on a real device, you should see the Barcode scanner view and then obtain the result in barcodeData variable.

Using Capacitor HTTP plugin to call Open Food Fact API

Now if we have a result meaning a scanned bar code, we can make our call to the Open Food Fact API, to check if we have information about the product. Let’s modify our code to do so:

  openBarCodeScanner(){
    this.barcodeScanner.scan().then(barcodeData => {
      console.log('Barcode data', barcodeData);
      this.barCode = barcodeData
      //   Barcode data {"cancelled":0,"text":"8413384010008","format":"EAN_13"}

      if (barcodeData) {
        let scanCode = barcodeData["text"];
        if (scanCode) {
          this.getProductWithBarCode(scanCode) 
        }
      }
      else{
        console.log("=== No data scanned !")
      }
    }).catch(err => {
      console.log('Error', err);
    });
  }

If we have barcodeData, we can get the scan code like this

let scanCode = barcodeData["text"];

and then call the API

 if (scanCode) {
          this.getProductWithBarCode(scanCode) 
 }

Let’s implement this getProductWithBarCode method

  async getProductWithBarCode(barcode){
    const { Http } = Plugins;
    let urlToCall = "https://fr.openfoodfacts.org/api/v0/produit/"+barcode+".json"
    let ret = await Http.request({
      method: 'GET',
      url: urlToCall,
      headers: {
        'content-type': 'application/json',
      }
    });
    console.log(ret.data)
    if (ret.data){
      this.productInformation = ret.data
      console.log("==Product ",this.productInformation.product)
    }
  }

Nothing really complicated. We use the Capacitor HTTP plugin to make a GET request and passing the scanned bar code.

If we have a result, we can set the product information and displays it in our page.

The Open Food Fact API returns a JSON with all information collected about the product so it can be a very long json. It’s up to you to extract the information you are interested in and display it or not.

Deploying on a device

To deploy on iOS:

ionic build --prod
npx cap sync ios
npx cap open ios

Xcode will open and you can run it on your iPhone.

To deploy on Android:

ionic build --prod
npx cap sync android
npx cap open android

As always with Capacitor plugin, one more step is required with Android. You need to register the HTTP plugin

import com.getcapacitor.plugin.http.Http;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(Http.class);
    }});
  }
}

The post How to scan QR Code and Barcode with Ionic & Capacitor ? appeared first on Ionic and Django Tutorial.

How to secure Ionic application and Django API with JWT authentication ?

Christophe Surbier — Fri, 06 Nov 2020 12:49:12 +0000

Want to learn how to secure a Ionic application using JWT authentication on backend with Django ? This tutorial is for you ! We will see how to protect our API on backend but also how to automatically refresh expired tokens in our Ionic application to avoid logged out users.

The source code repository is here

Add JWT authentication to Django API

JWT (Json Web Token) is an authentication system based on secured token. To obtain a token, the user needs to provide his credentials. Once the user is logged in, each subsequent request will include the JWT, allowing the user to access routes, services, and resources that are permitted with that token.

Django Simple JWT is a simple package to manage JWT authentication with Django.

Django DJOSER is another package with more features and which include Django Simple JWT. So we will use this package.

I’m assuming that you already know Django and have an existing project. To add Django DJOSER and required packages to our Django project, we add them to our requirements.txt file

djoser
djangorestframework_simplejwt
djangorestframework==3.11.0

Then we can reference them in our INSTALLED_APP dictionnary

INSTALLED_APPS = [
      ... 
    'rest_framework',
    'djoser',
   ....
]

and declare in our urls.py of our main django project the DJOSER endpoints

urlpatterns = [
    ...
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    ...
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Ok now with all that in place, we can use Django DJOSER to get our JWT token. Available endpoints can be found in the documentation but we will focus on the:

/jwt/create/ (JSON Web Token Authentication)
- Use to authenticate and obtain a JWT TOKEN
/jwt/refresh/ (JSON Web Token Authentication)
- Use to refresh an expired JWT Token
/jwt/verify/ (JSON Web Token Authentication)
- Use to verify if a JWT Token is still valid

Usually JWT Tokens expires very quickly (5 minutes). It’s possible to modify this expiration value in the settings

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),

But it’s not recommended to increase this value a lot. This is why a /verify endpoint is provided: to check if the token has expired or not. When a token expires, we can obtain a new one using the refresh token that was provided at the same time than the JWT token. This is the purpose of the /create endpoint. Let’s have a closer look. Imagine we have an existing user and we want to authenticate to obtain a JWT token. We can call the endpoint with a POST requests containing our user credentials:

curl -X POST \
  https://app-4d83da5d-f938-46bf-8359-4d0c2fb1f9e7.cleverapps.io/auth/jwt/create/ \
  -H 'Content-Type: application/json' \
  -d '{"email": "myuser@gmail.com", "password": "mypassword"}'

If credentials are correct, we will get a response with our tokens:

{
    "refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYwNDY1MzQyOSwianRpIjoiMGQyMTFjOWYwMzc5NDUwN2JiZTgzNTIxYjE3OTllNjMiLCJ1c2VyX2lkIjoiNWQ3MWY5N2QtNGU1Mi00NzQxLWEzZmItMzk5N2EyYTkyMWJjIn0.hXGIr_baGgMhjpFDlP0Aryf5LTWG6riHVX6B93RqYC0",
    "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjA0NjUzMTI5LCJqdGkiOiIxNmFjYjUxOWZjY2Y0ZWFmOWI2MjMwOWQzNmNjMmI3YyIsInVzZXJfaWQiOiI1ZDcxZjk3ZC00ZTUyLTQ3NDEtYTNmYi0zOTk3YTJhOTIxYmMifQ.Y50lo6KKlEY8v2uW5myKqaITWs_1pizIMlyx26kaHgU"
}

The response contains the access token (our JWT token) and the refresh token to use when the access token expires.

If credentials are not correct, the endpoint will return an HTTP 401 response (unauthorised).

If we wait 5 minutes and check the access token validity we should obtain an HTTP 401 unauthorised response meaning the token is not valid anymore.

curl -X POST \
  https://app-4d83da5d-f938-46bf-8359-4d0c2fb1f9e7.cleverapps.io/auth/jwt/verify/ \
  -H 'Content-Type: application/json' \
  -d '{"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjA0NjUzMTI5LCJqdGkiOiIxNmFjYjUxOWZjY2Y0ZWFmOWI2MjMwOWQzNmNjMmI3YyIsInVzZXJfaWQiOiI1ZDcxZjk3ZC00ZTUyLTQ3NDEtYTNmYi0zOTk3YTJhOTIxYmMifQ.Y50lo6KKlEY8v2uW5myKqaITWs_1pizIMlyx26kaHgU"}'

At this point we can use the /refresh endpoint and send the refresh token to get a new access token:

curl -X POST \
  https://app-4d83da5d-f938-46bf-8359-4d0c2fb1f9e7.cleverapps.io/auth/jwt/refresh/ \
  -H 'Content-Type: application/json' \
  -d '{"refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYwNDY1MzQyOSwianRpIjoiMGQyMTFjOWYwMzc5NDUwN2JiZTgzNTIxYjE3OTllNjMiLCJ1c2VyX2lkIjoiNWQ3MWY5N2QtNGU1Mi00NzQxLWEzZmItMzk5N2EyYTkyMWJjIn0.hXGIr_baGgMhjpFDlP0Aryf5LTWG6riHVX6B93RqYC0"}'

{
    "access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjA0NjUzMTc1LCJqdGkiOiI1Y2VmODc2OTFlODc0MzhkYjQ3OTI3ZmRkN2M3M2Y4NCIsInVzZXJfaWQiOiI1ZDcxZjk3ZC00ZTUyLTQ3NDEtYTNmYi0zOTk3YTJhOTIxYmMifQ.KHIDvKPwqCU0nPAHxbHv9ElISG1nvjH4VH7EBdiV_Ig", 
}

Ok the response contains the new access token to use. The refresh token has also a lifetime that can be configured

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=1),

The value is a little bit more bigger (one day) but what happens after one day ? At this moment, the /refresh endpoint will return an HTTP 401 unauthorised response meaning there is no other solution to logout the user to ask him it’s credentials and then to begin a new cycle again by calling /create endpoint.

Ok but what the f…k here ? Don’t forget we want to add authentication in our Ionic application. We are not going to logout users every day. The user experience will be terrible… One solution could be to increase the refresh token validity such as one year:

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=365),

Meaning that every year our mobile application users would have to login again. Why not.

Another solution is to modify the configuration to obtain an access and refresh token on /refresh endpoint. with the ROTATE_REFRESH_TOKENS option

SIMPLE_JWT = {
    'ACCESS_TOKEN_LIFETIME': timedelta(minutes=5),
    'REFRESH_TOKEN_LIFETIME': timedelta(days=180),
    'ROTATE_REFRESH_TOKENS': True,
    'BLACKLIST_AFTER_ROTATION': True,

With that in place we can always obtain a new access . We just need to save/replace both values (access and refresh tokens) and use it. Of course if a user don’t connect to the mobile application during 6 months (our refresh token lifetime), the refresh token will be expired and then we will have no other solution to logout user to ask him again it’s credentials.

Secure our Ionic application with JWT

Now that we have seen how to manage and obtain a JWT token from our django backend, let’s learn how to implement and use it within our ionic application.

I will assume that you already have a Ionic project ready to use with login and register pages. If not you can generate a new one with

ionic start secureionic blank --capacitor --project-id=secureionic --package-id=com.idevotion.secureionic

To shorten this tutorial, i will focus on main features but you will find the full source code on my github repository as usual.

First step, we need to create a user and then we need to obtain a JWT token for the created user. Django Djoser exposes the /users/ endpoint with a POST query to let us create users. Of course this endpoint can be called without authentication because at this stage we don’t have one.

 let params = {
        "email": email,
        "password": password,
        "first_name": firstName,
        "last_name": lastName
      }
 this.createAccount(params)

The email, password, firstName and lastName are parameters coming from our register form page.

Then we can send a request to create the account and once done to obtain the JWT credentials by login the user:

createAccount(params) {
    if (this.apiService.networkConnected) {
      // Account creation
      this.apiService.registerUser(params).subscribe((resultat) => {
        let status = resultat["status"];
        if (status=="OK") {
          let data = resultat["data"]
          this.userManager.setUser(data)
            // create a token
              // Check email
              let paramsToLogin = {
                "email": params.email,
                "password": params.password,
              }
              this.authentificationService.login(paramsToLogin).then((resultat) => {
                this.apiService.stopLoading();
                if (resultat) {
                   //Authentified
                   this.router.navigateByUrl("/home")
                }
                else {
                  this.apiService.showError(this.translateService.instant("A technical error occured. Account creation impossible"))
                }
              })
        }
        else {
          this.apiService.stopLoading();
          let error = resultat["error"]
          if (error.status==400){
            this.apiService.showError(this.translateService.instant("An account already exists with this email. Please login !"))
          }
          else{
            this.apiService.showError(this.translateService.instant("A technical error occured. Account creation impossible"))
          }
         
        }
      })
    }
    else {
      this.apiService.showNoNetwork()
    }
  }

The registerUser method is doing a POST query to the endpoint /auth/users and then return the results

 registerUser(params){
        const options = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            })
        };
        this.getUserUrl  =  this.virtualHostName + "auth/users/"
        return new Observable(observer=>{
            this.http.post(this.getUserUrl, params, options).subscribe(
                (val) => {
                    observer.next({"status":"OK","data":val})
                    observer.complete()
                 },
                 response => {
                     console.log("POST call in error", response);
                     observer.next({"status":"KO","error":response})
                     observer.complete()
                 },
               
                () => {
                   
                });
        })
    }

Ok now that the user has been created, we need to obtain our JWT tokens (access and refresh) and store them. This is the role of the AuthenticationService that we will see soon. But first let’s implement our api login service

  login(params){
        const options = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json'
            })
        };
         this.getLoginUrl =  this.virtualHostName + "auth/jwt/create/"
        return new Observable(observer=>{
            this.http.post(this.getLoginUrl, params, options).subscribe(
                (val) => {
                    observer.next(val)
                    observer.complete()
                 },
                 response => {
                     console.log("POST call in error", response);
                     observer.next()
                     observer.complete()
                 },
                () => {
                   
                });
        })
        
    }

We call our /auth/jwt/create endpoint with our user credentials and if successfull we will get our access and refresh tokens that we need to save. We can use Capacitor storage to do that.

The goal of the Authentication service is to manage these tokens, to save them, to logout our users or to refresh the tokens. Let’s implement it:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, tap, switchMap } from 'rxjs/operators';
import { BehaviorSubject, from, Observable, Subject } from 'rxjs';
 
import { Plugins } from '@capacitor/core';
import { ApiserviceService } from './apiservice.service';
const { Storage } = Plugins;
 
const TOKEN_KEY = 'access';
const REFRESH_TOKEN_KEY = 'refresh';

 
@Injectable({
  providedIn: 'root'
})
export class AuthenticationService {
  // Init with null to filter out the first value in a guard!
  isAuthenticated: BehaviorSubject = new BehaviorSubject(null);
  token = '';
  refresh=''
  constructor(private apiService:ApiserviceService) {
    this.loadToken();
  }
 
  loadToken() {
    this.apiService.getLocalData(TOKEN_KEY).then((value:string)=>{
      if (value){
        console.log('set token: ', value);
        this.token = value["access"];
        this.apiService.getLocalData(REFRESH_TOKEN_KEY).then((value:string)=>{
          this.refresh=value["refresh"]
          this.isAuthenticated.next(true);
        })       
      }
      else{
        console.log("=PAS DE TOKEN PAS LOGGE")
        this.isAuthenticated.next(false);
      }
    })
   
  }

  login(params){
    return new Promise(async resolve => {
    this.apiService.login(params).subscribe((resultat)=>{
       if (resultat) {
          let accessToken = resultat["access"]
          let refreshToken = resultat["refresh"]
          this.apiService.setLocalData("access",{"access":accessToken})
          this.apiService.setLocalData("refresh",{"refresh":refreshToken})
          this.token = accessToken;
          this.refresh=refreshToken
          this.isAuthenticated.next(true);
         
         resolve(true)
        }
      else{
        resolve(false)
      }
      })
    })
  }
 
  logout(): Promise {
    this.isAuthenticated.next(false);
    return new Promise(async resolve => {
       this.apiService.removeLocalData(TOKEN_KEY).then(()=>{
          this.apiService.removeLocalData(REFRESH_TOKEN_KEY).then(()=>{
            resolve()
          }
        )
       });
    })
  }

  refreshToken(){
    return this.apiService.refreshToken(this.refresh)
  }
}

On our login page, the process is simple, we just need to verify that the credentials are correct and then save them. So we can use our same Authentication service.

async login(){
   
      let email = this.credentials.value["email"]
      let password = this.credentials.value["password"]
      
      if (this.apiService.networkConnected){
        this.apiService.showLoading();
            // Check email
            let params = {
              "email":email,
              "password":password,
            }
            this.authentificationService.login(params).then((resultat)=>{
              this.apiService.stopLoading();
              if (resultat) {
                this.router.navigateByUrl('/home', { replaceUrl: true });
              }
              else{
                this.displayWrongLogin()
            }
          })
            
      }
      else {
        this.apiService.showNoNetwork();
      }
    }

Ok now we have seen how to register or login a user and then go to our home page. But we still have lot of work to do.

First of all, when launching the app, we need to verify if the user is already login and them redirect him directly to the home page or if not redirect him to the login or register pages (your choice). To do so, we will modify our routing file and introduce some guards.

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
    canLoad: [AuthGuard] 
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule),
    canLoad: [AutoLoginGuard]
  },
  {
    path: 'register',
    loadChildren: () => import('./pages/register/register.module').then( m => m.RegisterPageModule),
    canLoad: [AutoLoginGuard]
  },
  {
    path: '',
    redirectTo: 'register',
    pathMatch: 'full'
  }
];

The AuthGuard will check that our user is authentified and can access the page. The AutoLoginGuard will check if the user is already identified and if so redirects him to the home page automatically (no need to login or register again). You can learn more here thanks to Simon incredible tutorials.

import { UserManagerProviderService } from './../services/user-manager-provider.service';
import { AuthenticationService } from './../services/authentication.service';
import { Injectable, NgZone } from '@angular/core';
import { CanLoad, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { filter, map, take } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private authService: AuthenticationService,private userManager:UserManagerProviderService,private router: Router) { }
 
  canLoad(): Observable {    
    return this.authService.isAuthenticated.pipe(
      filter(val => val !== null), // Filter out initial Behaviour subject value
      take(1), // Otherwise the Observable doesn't complete!
      map(isAuthenticated => {
        if (isAuthenticated) {  
          this.userManager.getUser().then((user)=>{
            
          })        
          return true;
        } else {          
          this.router.navigateByUrl('/login')
          return false;
        }
      })
    );
  }
}

If we have a token the user is authentified and if not we redirect to the login page. Same behaviour for AutoLoginGuard

import { UserManagerProviderService } from './../services/user-manager-provider.service';
import { Injectable } from '@angular/core';
import { CanLoad, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthenticationService } from '../services/authentication.service';
import { filter, map, take } from 'rxjs/operators';
 
@Injectable({
  providedIn: 'root'
})
export class AutoLoginGuard implements CanLoad {
  constructor(private authService: AuthenticationService, private router: Router,private userManager:UserManagerProviderService) { }
 
  canLoad(): Observable {    
    return this.authService.isAuthenticated.pipe(
      filter(val => val !== null), // Filter out initial Behaviour subject value
      take(1), // Otherwise the Observable doesn't complete!
      map(isAuthenticated => {
        console.log('Found previous token ?, automatic login '+isAuthenticated);
        if (isAuthenticated) {
          //Load user 
          this.userManager.getUser().then((user)=>{
            console.log("Log user",user)
            
             // Directly open inside area       
           this.router.navigateByUrl('/home', { replaceUrl: true });
          })
         
        } else {          
          // Simply allow access to the login
          return true;
        }
      })
    );
  }
}

Ok we have all logic in place except for the most important part !

To see the problem let’s display the information of the logged in user:

import { Component } from '@angular/core';
import { ApiserviceService } from 'src/app/services/apiservice.service';
import { UserManagerProviderService } from 'src/app/services/user-manager-provider.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  infoAboutMe : any;
  title = "Authenticated"
  constructor(public userManager:UserManagerProviderService,
    public apiService:ApiserviceService) {
   

    //Get info 
    this.apiService.getUserMe().subscribe((data)=>{
      if (data["status"]=="OK"){
        this.infoAboutMe = data;
      }
      else{
        this.title ="Unauthenticated"
        this.infoAboutMe=null;
      }
    
    })  
  }
}

and our home.page.html


  
    
      eShop
    
  



  
    
      {{title}}
    
  
  
    Info about me:


    Email: {{infoAboutMe.data.email}}

    ID: {{infoAboutMe.data.id}}

Just after creating or login you should see

Well nice. Now wait 5 minutes, and try to access again

Remember that tokens expire ? Here we are… The backend returns an HTTP 401 response code. Obviously we need to manage this behaviour.

How to refresh expired JWT tokens automatically with Ionic ?

We could modify every request code of our existing api (if any of course) to check the status return code and then make appropriate actions : call the refresh endpoint , obtain a new token and then make the request again. But it’s a lot to manage !

A better way to manage this is to use Angular Http Interceptors to do the job. I found this useful article and adapt it a little bit.

import { UserManagerProviderService } from './user-manager-provider.service';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, filter, switchMap, take } from 'rxjs/operators';
import { AuthenticationService } from './authentication.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  private refreshingInProgress: boolean;
  private accessTokenSubject: BehaviorSubject = new BehaviorSubject(null);

  constructor(private authService: AuthenticationService,
    private userManager: UserManagerProviderService,
    private router: Router) { }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    const accessToken = this.authService.token;
    // console.log("=== Intercept token ")
    // console.log(accessToken)
    return next.handle(this.addAuthorizationHeader(req, accessToken)).pipe(
      catchError(err => {
        // in case of 401 http error
        console.log("==== ERROR 401 url:" + req.url)
        if (req.url.indexOf("/refresh") > 0) {
          //REFRESHTOKEN KO 
          console.log("==== 401 LOGOUT CAR ERROR")
          // otherwise logout and redirect to login page
          return this.logoutAndRedirect(err);
        }
        if (err instanceof HttpErrorResponse && err.status === 401) {
          // get refresh tokens
          const refreshToken = this.authService.refresh;

          // if there are tokens then send refresh token request
          if (refreshToken && accessToken) {
            return this.refreshToken(req, next);
          }

          // otherwise logout and redirect to login page
          return this.logoutAndRedirect(err);
        }

        // in case of 403 http error (refresh token failed)
        if (err instanceof HttpErrorResponse && err.status === 403) {
          // logout and redirect to login page
          return this.logoutAndRedirect(err);
        }
        // if error has status neither 401 nor 403 then just return this error
        return throwError(err);
      })
    );
  }

  private addAuthorizationHeader(request: HttpRequest, token: string): HttpRequest {
    if (token) {
      let bearer = Bearer ${token};
      //console.log("=== Clone request et add header avec token ",bearer)

      return request.clone({ setHeaders: { Authorization: bearer } });
    }

    return request;
  }

  private logoutAndRedirect(err): Observable> {
    console.log("==== LOGOUT CAUSE ERROR")
    this.userManager.logoutUser().then(() => {

    })
    this.router.navigateByUrl('/login');
    return throwError(err);
  }

  private refreshToken(request: HttpRequest, next: HttpHandler): Observable> {
    if (!this.refreshingInProgress) {
      this.refreshingInProgress = true;
      this.accessTokenSubject.next(null);

      return this.authService.refreshToken().pipe(
        switchMap((res) => {
          this.refreshingInProgress = false;
          this.authService.token = res["access"]
          this.authService.refresh = res["refresh"]
          console.log("==== REFRESH SET VALUES")

          this.accessTokenSubject.next(res["access"]);
          // repeat failed request with new token
          return next.handle(this.addAuthorizationHeader(request, res["access"]));
        }), catchError((err, caught) => {
          console.log("=========== ERROR REFRESH TOKEN")
          // return throwError(err);
          return this.logoutAndRedirect(err);
        })
      );
    } else {
      // wait while getting new token
      return this.accessTokenSubject.pipe(
        filter(token => token !== null),
        take(1),
        switchMap(token => {
          // repeat failed request with new token
          return next.handle(this.addAuthorizationHeader(request, token));
        }));
    }
  }
}

The code is quite long but to sum up on HTTP 401 status code detected, it will ask for new tokens, save them and retry the request automatically. It is explained in the article mentionned before.

I just adapt it for one use case : when the refresh token has expired too. In that case, we need to manage it otherwise the code will run in an infinite loop : detect HTTP 401, call refresh endpoint (which is now also returning an HTTP 401 because of expired refresh token), detect HTTp 401, call refresh, …

This is the purpose of these lines

 // in case of 401 http error
        console.log("==== ERROR 401 url:"+req.url)
        if (req.url.indexOf("/refresh")>0){
          //REFRESHTOKEN KO 
          console.log("==== 401 LOGOUT CAR ERROR")
          // otherwise logout and redirect to login page
          return this.logoutAndRedirect(err);
        }

If we get an HTTP 401 and the requested url was /refresh endpoint , we stop the process and log out our user.

To use our token.interceptor service, we just need to declare it in our app.module.ts file

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    }),
    IonicModule.forRoot({
      animated:false
    }),
      NativeHttpModule,
      AppRoutingModule,
    HttpClientModule,
 ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    TranslateConfigService,
    ScreenOrientation,
    HTTP,
     {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true } ,
  ],
  bootstrap: [AppComponent]
})

Ok now eveything should be ok. You could log in, see your information, wait 5 minutes for HTTP 401 and you will see in your browser console log, that a new token will be obtain and you will be still logged in. Then wait more than 10 minutes, both access and refresh token will be expired, and you should be log out from the application (if you set the REFRESH Token expiration to ten minutes in django backend of course).

'REFRESH_TOKEN_LIFETIME': timedelta(minutes=10),

And voila. We learned how to implement and manage JWT tokens with a Ionic application and a Django backend.

The post How to secure Ionic application and Django API with JWT authentication ? appeared first on Ionic and Django Tutorial.

How to use Stripe checkout with Ionic ?

Christophe Surbier — Sat, 24 Oct 2020 17:40:53 +0000

Problem to solve to use Stripe checkout within Ionic application.

Stripe Checkout is a prebuilt, hosted payment page that lets you collect payments quickly. There are a lot of advantages to use Stripe checkout such as: real time credit card validation, easily customisable, quick implementation, mobile ready with Apple pay and Google pay…

To implement Stripe checkout it is really easy, you just need to display a payment button on your page which on click will call an API on your server to create a checkout session and then on API response, redirect to Stripe checkout url to display the payment form. Once the payment is done successfully or not, Stripe will notify you using a success redirect url or a cancel url.

These success url or cancel url requirements are a big problem for a Ionic mobile application, since it is not possible to implement them. We could think to use a specific deeplink, but Stripe checkout requires HTTPS link so it is not an option.

In this tutorial, i will show you how to use Stripe checkout with Ionic 5 and Django and implement the Stripe checkout worklow in a Ionic 5 mobile application.

Get the source code

Proposed solution to use Stripe checkout and make payment with Ionic

Since it is not possible to redirect Stripe success or cancel urls to our ionic mobile application, we need to implement these urls on a server and we will use Django for that. Then our Django backend will need to inform the Ionic application about payment information status. To do that, we will see that there are some solutions.

Ok enough talking. Let’s dive into the code and first let’s create our Ionic 5 application with command:

ionic start stripecheckout blank --capacitor --project-id=stripecheckout --package-id=com.idevotion.stripecheckout

Then we will add Stripe javascript sdk into our generated ionic application

Add Stripe checkout to Ionic page

Let’s edit the index.html file and import Stripe javascript sdk


  
  Ionic App

Now let’s edit the home.page.html file to add a button which will trigger Stripe checkout on click


  
    
      Blank
    
  



  
    
      Blank
    
  

  
     
     Pay with Stripe

In the home.page.ts file we will initialise Stripe with the publishable_key that we can get from our Stripe dashboard :

import { Component, ElementRef, ViewChild } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;

declare var Stripe;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  stripe = Stripe("pk_test_XwRn88Fmqzh3966EVK92hpJY00jGOfGKPt");
  
  @ViewChild('stripeButton',{read:ElementRef}) stripeButton : ElementRef;
   constructor(public loadingController:LoadingController,
    private http: HttpClient) {
   

  }

Then once the view will be initiated, we will grab a reference to our Stripe button and will listen for click event

 ngAfterViewInit(){
    const stripeButton = this.stripeButton.nativeElement;
    stripeButton.addEventListener('click', event => {
      console.log("=== CLICK BUTTON ")
   });
  }

On click we can show a loader and then call our Django API (that we will create soon) to create and obtain a stripe checkout session. Then if everything goes fine we can redirect the user to the Stripe checkout page. Here is the full method:

ngAfterViewInit(){
    const stripeButton = this.stripeButton.nativeElement;
    stripeButton.addEventListener('click', event => {
      console.log("=== ON CLIQUE LE BUTTON ")
      const options = {
        headers: new HttpHeaders({
            'content-type': 'application/json',
        })
    };
    
      this.showLoader()
      // call API
      let params = {
        "currency" : "eur",
        "quantity": 1,
        "price": 1000,
        "productName" : "My product"
      }
      console.log(params)
      this.http.post("https://app-e06ec9e7-b121-44fa-a383-54bbda3f9706.cleverapps.io/create-checkout-session/", params,options)
      .subscribe(async res => {
        console.log(res)
       
         
          let status = res["status"]
          if (status=="OK"){
            let sessionID = res["session"]
            // save session ID  
            await Storage.set({key: "paymentSessionID", value: sessionID});

            //Redirect sur checkout
            this.stripe.redirectToCheckout({ sessionId: sessionID}).then((result) => {
              console.log(result)
            })
          }
          else{
            console.log("===ERROR")
            this.hideLoader()
          }

      }, error => {
           this.hideLoader()
          console.log(error);// Error getting the data
        });
      });
  }

For demo purpose i have hardcoded the payment information (price, quantity, product name).

If the API call is successfull (status equals OK), then we store the received session id using capacitor storage (we will discuss the reason why later) and then we redirect the user to Stripe checkout passing the session id that we get from the API

//Redirect sur checkout
            this.stripe.redirectToCheckout({ sessionId: sessionID}).then((result) => {
              console.log(result)
            })

At this point, the application will go on background and the user will be redirected on his device browser, on which the stripe payment form should appeared.

Now let’s focus on the Django part

Add Stripe checkout to Django project

In our Django project, we will define 3 endpoints to manage Stripe checkout:

url(r'^create-checkout-session/', createCheckoutSession, name='create-checkout-session'),
url(r'^checkout-session-success/', checkoutSessionSuccess, name='checkout-session-success'),
url(r'^checkout-session-failure/', checkoutSessionFailure, name='checkout-session-failure'),

The method createCheckoutSession is the endpoint used previously in the ionic page, to send payment information (price, currency) and to receive the stripe checkout session id. So let’s add a view that will manage this:

@csrf_exempt
@api_view(['POST'])
def createCheckoutSession(request):
    import stripe
    stripe.api_key = settings.STRIPE_API_KEY
    if request.method == 'POST':
        currency = request.data["currency"]
        quantity = request.data["quantity"]
        price = request.data["price"]
        productName = request.data["productName"]
        session = stripe.checkout.Session.create(
            payment_method_types=['card'],
            line_items=[{
                'price_data': {
                    'currency': currency,
                    'product_data': {
                        'name': productName,
                    },
                    'unit_amount': price,
                },
                'quantity': quantity,
            }],
            mode='payment',
            success_url='https://app-e06ec9e7-b121-44fa-a383-54bbda3f9706.cleverapps.io/checkout-session-success/?session_id={CHECKOUT_SESSION_ID}',
            cancel_url='https://app-e06ec9e7-b121-44fa-a383-54bbda3f9706.cleverapps.io/checkout-session-failure/?session_id={CHECKOUT_SESSION_ID}',
        )
        newdict = {'status': 'OK', 'session': session.id}
        return JsonResponse(newdict)
    else:
        return HttpResponse(status=404)

Nothing really complicated. We use Django rest framework to define our endpoint and get the parameters. Then we create a Stripe checkout session with the parameters and our success / cancel urls (the two other endpoints that we defined). Finally if everything goes fine, we send our response with a JSON containing the status and the session identifier. For success and cancel endpoint, we need to create these methods:

def checkoutSessionSuccess(request):
    session_id = request.GET['session_id']
    stripe.api_key = settings.STRIPE_API_KEY
    if session_id:
        try:
            session = stripe.checkout.Session.retrieve(session_id)
            customer = stripe.Customer.retrieve(session.customer)
            payment = Payment()
            payment.sessionId = session.id
            payment.customerId = customer.id
            payment.success=True
            payment.save()
            return render(request,'bo/templates/bo/success.html', {})
        except Exception as e:
            logger.error(e)
            return render(request,'bo/templates/bo/error.html', {})


def checkoutSessionFailure(request):
    session_id = request.GET['session_id']
    stripe.api_key = settings.STRIPE_API_KEY
    if session_id:
        try:
            session = stripe.checkout.Session.retrieve(session_id)
            customer = stripe.Customer.retrieve(session.customer)
            payment = Payment()
            payment.sessionId = session.id
            payment.customerId = customer.id
            payment.success = False
            payment.save()
            return render(request,'bo/templates/bo/error.html', {})
        except Exception as e:
            logger.error(e)
            return render(request,'bo/templates/bo/error.html', {})

On success we can retrieve the session and the customer and save the results in our model call Payment with a success status.

On cancel, we do the same but with a payment.success to False.

On success.html page we can display a message to the user that the payment has been successfull and that he can go back to the application.

Same for error.html but with a payment error message.

How to notify Ionic application about Stripe checkout payment status ?

At this point, the user is still redirected to it’s device browser and outside our Ionic application. On the success and error pages, we display a message asking him to go back to the application. So we can expect that he will do it. If so, when application launching again (remember application was suspended in background), we can check if we have a payment in progress and check the status of this payment by asking our Django backend.

Remember the :

   await Storage.set({key: "paymentSessionID", value: sessionID});

This is how we can know a payment is in progress. So when application resume, we can check the status and determine actions (go to a payment successfull page or a payment error page)

 //Subscribe on resume
    this.platform.resume.subscribe(async () => {
      let paymentInProgress = await Storage.get({key: "paymentSessionID"});
      if (paymentInProgress){
        let sessionId = paymentInProgress.value;
        // Remove key for future launch
        Storage.remove({key: "paymentSessionID"});
        console.log("========== NEED TO CHECK STATUS FOR PAYMENT")
        const options = {
          headers: new HttpHeaders({
              'content-type': 'application/json',
          })
      };
        let params = {
          "sessionId" : sessionId
        }
        console.log(params)
        this.http.post("https://app-e06ec9e7-b121-44fa-a383-54bbda3f9706.cleverapps.io/paymentCheckStatus/", params,options)
        .subscribe(async res => {
            console.log(res)
            let status = res["status"]
            if (status=="OK"){
              this.router.navigateByUrl("/payment-ok")
            }
            else{
              this.router.navigateByUrl("/payment-ko")
            }
        })
      }
    });

It’s important to remove the key paymentSessionID from our capacitor storage once read, to avoid checking at next launch.

In our Django backend, we will add this new url paymentCheckStatus

 url(r"^paymentCheckStatus/",paymentCheckStatus,name="paymentCheckStatus"),

and the corresponding view:

@csrf_exempt
@api_view(['POST'])
def paymentCheckStatus(request):
    if request.method == 'POST':
        status ="KO"
        sessionId = request.data["sessionId"]
        try:
            payment = Payment.objects.get(sessionId=sessionId)
            if payment.success:
                status="OK"
            else:
                status = "KO"
        except Exception as e:
            logger.error(e)
            status = "KO"
        newdict = {'status': status}
        return JsonResponse(newdict)
    else:
        return HttpResponse(status=404)

And voila based on the status our Ionic application can go to a successful payment page or to an error page

Conclusion

We have seen in this tutorial one method to use Stripe checkout within a Ionic application. We have implemented a simple system with a little compromise. Once redirected outside our Ionic application, the user will need to go back manually to the application. If not, the Ionic application will know nothing about the payment.

Another better solution, could have been to implement deeplinks in our ionic application (one for success and one for error payments). Then in our Django views (success or cancel) we could have redirected automatically the user to our app using the deeplinks.

We could also have used push notifications to send a custom message to the application to notify about the payment status.

The post How to use Stripe checkout with Ionic ? appeared first on Ionic and Django Tutorial.

How to automatically display loading spinner using Http Interceptor in Ionic 5 ?

Christophe Surbier — Fri, 02 Oct 2020 08:39:38 +0000

In this tutorial, i will show you how to user angular http interceptor to show a loading spinner alert to the user each time a request is made, without having to start or stop manually the spinner.

The source code repository

Each mobile application needs to warn users when a request is made to a server, to let them know that they should wait a little bit. To manage it, most common use case is to display an alert or a loading spinner before the request, and then stopping the alert once the response has been received. And usually we need to manage this behaviour manually, by starting or stopping the alert or spinner from code.

Angular http interceptor does is allow you to intercept an HttpRequest before it’s sent to the server and after the server responds. So it look the perfect place to automatically start or stop a loading spinner or an alert.

Let’s create our Ionic 5 application with command:

ionic start spinner blank --capacitor --project-id=spinner --package-id=com.idevotion.spinner

Then let’s add a service with methods to display or stop alerts and to get data from an api.

ionic g service ApiService

Edit the api-service.service.ts file to add the following code

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingController, AlertController, Platform } from '@ionic/angular';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ApiServiceService {

  isShowingLoader = false;
  loader: any;

  constructor(public http: HttpClient,
    public loadingController: LoadingController,
    public alertCtrl: AlertController,
    public platform: Platform) {
  }

  getJsonData() {
    let urlToCall = "https://jsonplaceholder.typicode.com/comments/"
    return Observable.create(observer => {
      this.http.get(urlToCall)
        .subscribe(res => {
          observer.next(res);
          observer.complete();
        }, error => {
          observer.next(null);
          observer.complete();
        });
    });
  }

  async showLoader() {
    if (!this.isShowingLoader) {
      this.isShowingLoader = true
      this.loader = await this.loadingController.create({
        message: 'Please wait',
        duration: 4000
      });
      return await this.loader.present();
    }
  }

  async stopLoader() {
    if (this.loader) {
      this.loader.dismiss()
      this.loader = null
      this.isShowingLoader = false
    }
  }
}

The API Service contains a getJsonData() which will call an API and return json data from it.

And two methods showLoader() and stopLoader() to display a Loadingcontroller showing a waiting message. Nothing really complicated here.

Now let’s edit our home.page.html file


  
    
      Loading Spinner
    
  



  
    
      Loading Spinner
    
  

  
    Ready to test?
    Get JSON Data

And in our home.page.ts file we create a method clickButton() to :

show the alert
call the API
stop the alert

So let’s write our home.page.ts

import { ApiServiceService } from './../api-service.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public apiService:ApiServiceService) {
  }

  clickButton(){
    this.apiService.showLoader().then(()=>{
      this.apiService.getJsonData().subscribe((data)=>{
        console.log(data)
        this.apiService.stopLoader()
      })
    })
  }
}

You can now run ionic serve and have a look to the result. When clicking on the button, an alert message should be displayed, then the alert disappeared and data received from the API should be displayed in the console of your browser.

Ok this is the usual method. Now let’s use Angular Http Interceptor to automatically display the alert when a request is initiated and stop the alert once the response is received.

Using angular http interceptor with Ionic 5

We will add the interceptor in our app.module.ts file after the imports and just before the @NgModule

@Injectable()
export class AngularInterceptor implements HttpInterceptor {

  constructor(){
  }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    let defaultTimeout = 10000;
      
      return next.handle(req).pipe(timeout(defaultTimeout),
        retryWhen(err=>{
          let retries = 1;
          return err.pipe(
            delay(500),
            map(error=>{
              if (retries++ ===3){
                throw error
              }
              return error;
            })
          )
        }),catchError(err=>{
          console.log(err)
          return EMPTY
        }), finalize(()=>{
          
        })
      )
    };    
}

The method intercept will be called at the start of every http request which is perfect. This is not the study of your tutorial, but i have added some pipes to the interceptor to add a default timeout of 10 secondes for a request, and if the request failed it will try again 3 times with 500ms between each request. Then after 3 times it will failed.

We will add an observer to our API service that we will use to know when a request starts and when it stops.

 loadingObserver: BehaviorSubject = new BehaviorSubject(false);

Then we will declare a map that will contain request made

loadingRequestMap: Map = new Map();

Now, we will use these two variables in a new method setLoading

 setLoading(loading: boolean, url: string): void {
    if (!url) {
      throw new Error('The request URL must be provided');
    }
    if (loading === true) {
      this.loadingRequestMap.set(url, loading);
      this.loadingObserver.next(true);
    }else if (loading === false && this.loadingRequestMap.has(url)) {
      this.loadingRequestMap.delete(url);
    }
    if (this.loadingRequestMap.size === 0) {
      this.loadingObserver.next(false);
    }
  }

When loading we set the url in our map and we notify our observer that a request has started. And when not loading, we can remove the url and still notify our observers.

With that in place we can use it in our intercept method. Here is the new code

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  constructor(private _loading: ApiServiceService){

  }

  intercept(req: HttpRequest, next: HttpHandler): Observable> {
    let defaultTimeout = 10000;
      this._loading.setLoading(true, req.url);
   
      return next.handle(req).pipe(timeout(defaultTimeout),
        retryWhen(err=>{
          let retries = 1;
          return err.pipe(
            delay(1000),
            map(error=>{
              if (retries++ ===3){
                this._loading.setLoading(false, req.url);
                throw error
              }
              return error;
            })
          )
        }),catchError(err=>{
          console.log(err)
            this._loading.setLoading(false, req.url);
          return EMPTY
        }), finalize(()=>{
            this._loading.setLoading(false, req.url);
        })
      )
    };
}

Ok. Now we just need to subscribe to the loadingObserver variable and show or stop the alert to the user. And because we want this behaviour to be global to our application, we will add the code in our app.component.ts file

export class AppComponent implements OnInit{
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private apiService:ApiServiceService
  ) {
    this.initializeApp();
  }
  ngOnInit() {
    this.listenToLoading();
  }

  listenToLoading(): void {
    this.apiService.loadingObserver
      .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
      .subscribe((loading) => {
        if (loading){
          this.apiService.showLoader()
        }
        else{
          this.apiService.stopLoader()
        }
      });
  }

On the ngOnInit() method we start listening to our variable and then based on loading value we can hide or show an alert to the user.

Finally we can modify our clickButton() method in our home.page.ts file and remove our manual call to start and stop loader.

  clickButton(){
      this.apiService.getJsonData().subscribe((data)=>{
        console.log(data)
      })
  }

If you test again, you still should be able to see the alert message !

Now each time a request will be made in our Ionic application, an alert message will be displayed automatically !

But if for any reasons you don’t want to display this alert message when calling some specific urls, you can do it by improving the intercept method and check if the called url should display an alert or not. Something like this:

 if (req.url.indexOf("checkAPI")<0){
      this._loading.setLoading(true, req.url);
    }

It is up to you !

Display a loading spinner with http interceptor with Ionic 5

Now let’s modify the code to display a loading spinner instead. Let’s modify our home.page.html file


  
    
      Loading Spinner
    
  



  
    
      Loading Spinner
    
  

  
    Ready to test?
    
    Get JSON Data

If the variable loading is true we will display a ion-spinner

Let’s change the code in home.page.ts. Now we will subscribe to our observer variable and set the loading variable with the value of our observer

import { ApiServiceService } from './../api-service.service';
import { Component } from '@angular/core';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  loading=false;
  constructor(public apiService:ApiServiceService) {

    this.apiService.loadingObserver
    .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
    .subscribe((loading) => {
      this.loading = loading
    });
  }

  clickButton(){
      this.apiService.getJsonData().subscribe((data)=>{
        console.log(data)
      })
  }
}

And we can comment the listenToLoading() method in our app.component.ts because we don’t want to display the alert message.

  ngOnInit() {
   // this.listenToLoading();
  }

  listenToLoading(): void {
    this.apiService.loadingObserver
      .pipe(delay(0)) // This prevents a ExpressionChangedAfterItHasBeenCheckedError for subsequent requests
      .subscribe((loading) => {
        if (loading){
          this.apiService.showLoader()
        }
        else{
          this.apiService.stopLoader()
        }
      });
  }

Now you can test again and you will be able to see the bubble spinner showing up.

Voilà. Enjoy and don’t hesitate to improve the code by yourself !

The post How to automatically display loading spinner using Http Interceptor in Ionic 5 ? appeared first on Ionic and Django Tutorial.

How to use paypal on PWA with Ionic 5 ?

Christophe Surbier — Tue, 22 Sep 2020 17:09:48 +0000

In this tutorial, i will show you how to integrate Paypal with Ionic 5, to enable payments on your PWA version.

The source code repository

To integrate paypal in a Ionic 5 application will allow users to make payments using their paypal account or by entering credit card detail information.

Reminder this tutorial is not about using paypal mobile SDK in an iOS or Android Ionic application, but using Paypal javascript SDK on your Ionic PWA version (running on web).

Let’s create our Ionic 5 application with command:

ionic start paypal blank --capacitor --project-id=paypal --package-id=com.ionicanddjangotutorials.paypal

Then we need to edit the index.html file of our ionic application, to load the Paypal javascript sdk

Just replace the YOUR-CLIENT-ID with your sandbox/live environment client id.

Now we will modify our home.page.html file to integrate a Paypal button


  
    Paypal Demo
  



  
    
      Would you like to pay {{price}} ?

Nothing really complicated. We display the amount that the user will pay, then to integrate a Paypal button, the important line is :

The paypal code will be injected automatically from our home.page.ts using the Paypal javascript library.

So let’s write our home.page.ts

import { Component } from '@angular/core';
declare var paypal: any;
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  price;
  priceToPay = 10;
  payPalConfig: any;

  PAYPAL_CLIENT_ID_TEST = "YOURDEVKEY"
  PAYPAL_CLIENT_ID_LIVE = "YOURLIVEKEY"

  PAYPAL_CLIENT_ID = this.PAYPAL_CLIENT_ID_TEST

  constructor() {

    this.price = this.priceToPay + " €"
    let enviroment = ""
    if (this.PAYPAL_CLIENT_ID == this.PAYPAL_CLIENT_ID_TEST) {
      enviroment = "sandbox"
    }
    else {
      enviroment = "live"
    }

    this.payPalConfig = {
      env: enviroment,
      client: {
        sandbox: this.PAYPAL_CLIENT_ID,
      },
      commit: false,
       createOrder: (data, actions)=> {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: this.module.prix,
                    currency: 'EUR' 
                }
            }]
        });
    },
      // Finalize the transaction
      onApprove: (data, actions) => {
        //console.log(data)
        //console.log(actions)
        return actions.order.capture()
          .then((details) => {
            // Show a success message to the buyer
            console.log(details)
            let status = details["status"]
            let id = details["id"]
            if (status == "COMPLETED") {
              this.validPurchase(id)
            }
            else {
              //Status not completed...
            }
            console.log('Transaction completed by ' + details.payer.name.given_name + '!');
          })
          .catch(err => {
            console.log(err);
            // deal with error
          })
      }
      ,
      onError: (err) => {
        // Show an error page here, when an error occurs
        console.log(err)
        // deal with error
      }
    }
  }

  validPurchase(id) {
    // Purchase confirm 
    //Do whatever you want to do
  }

  ionViewDidEnter() {
    paypal.Buttons(this.payPalConfig).render('#paypal-button');
  }


  ngOnInit() {
  }

}

Use paypal javscript sdk with Ionic 5

First we need to declare the paypal sdk

declare var paypal: any;

Then we can configure our paypal api keys

PAYPAL_CLIENT_ID_TEST = "YOURDEVKEY"
PAYPAL_CLIENT_ID_LIVE = "YOURLIVEKEY"

PAYPAL_CLIENT_ID = this.PAYPAL_CLIENT_ID_TEST

And set the paypal environment to use (sandbox or live) based on the key

 let enviroment = ""
    if (this.PAYPAL_CLIENT_ID == this.PAYPAL_CLIENT_ID_TEST) {
      enviroment = "sandbox"
    }
    else {
      enviroment = "live"
    }

Now, we will configure the most important piece of the sdk, a paypal configuration object :

 this.payPalConfig = {
      env: enviroment,
      client: {
        sandbox: this.PAYPAL_CLIENT_ID,
      },
      commit: false,
       createOrder: (data, actions)=> {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: this.module.prix,
                    currency: 'EUR' 
                }
            }]
        });
    },
      // Finalize the transaction
      onApprove: (data, actions) => {
        //console.log(data)
        //console.log(actions)
        return actions.order.capture()
          .then((details) => {
            // Show a success message to the buyer
            console.log(details)
            let status = details["status"]
            let id = details["id"]
            if (status == "COMPLETED") {
              this.validPurchase(id)
            }
            else {
              //Status not completed...
            }
            console.log('Transaction completed by ' + details.payer.name.given_name + '!');
          })
          .catch(err => {
            console.log(err);
            // deal with error
          })
      }
      ,
      onError: (err) => {
        // Show an error page here, when an error occurs
        console.log(err)
        // deal with error
      }
    }

The createOrder method will set the amout and the currency that the user needs to pay

  createOrder: (data, actions)=> {
        return actions.order.create({
            purchase_units: [{
                amount: {
                    value: this.module.prix,
                    currency: 'EUR' 
                }
            }]
        });
    },

The onApprove method will be fired once the payment has been made.

We just need to check the value of status variable to know if the payment has been successfull or not. If status is not COMPLETED or an error occurs, we just need to deal with the error.

 onApprove: (data, actions) => {
        //console.log(data)
        //console.log(actions)
        return actions.order.capture()
          .then((details) => {
            // Show a success message to the buyer
            console.log(details)
            let status = details["status"]
            let id = details["id"]
            if (status == "COMPLETED") {
              this.validPurchase(id)
            }
            else {
              //Status not completed...
            }
            console.log('Transaction completed by ' + details.payer.name.given_name + '!');
          })
          .catch(err => {
            console.log(err);
            // deal with error
          })
      }

We can also configure the style of our paypal button. We just need to pass a style configuration to our paypalConfig dictionnary.

Et voila. We are now able to use paypal to pay on the web in our Ionic 5 application.

The post How to use paypal on PWA with Ionic 5 ? appeared first on Ionic and Django Tutorial.

How to use videogular2 with Ionic 5 ?

Christophe Surbier — Thu, 17 Sep 2020 13:03:10 +0000

In this tutorial, i will show you how to use videogular2 with Ionic 5, for playing videos from local source (assets folder) or external source (from internet).

The source code repository

If you want to embed a video player in your Ionic 5 page working in mobile and desktop, there is no solution other than using an external package. Ionic or Capacitor doesn’t provide a ready component/plugin yet !

Videogular2 is an HTML5 video player for Angular2+, which is working on mobile and browser. It is a perfect candidate to use with Ionic 5.

Installing videogular2 to use with Ionic 5

If you try to install the official npm for videogular2, your Ionic 5 compilation source code will failed, raising some import issues. To avoid these issues, we need to use the ngx-videogular package.

But before that let’s create our Ionic 5 project with command

ionic start videoplayer blank --capacitor --project-id=videoplayer --package-id=com.ionicanddjangotutorials.videoplayer

Then we can go into our new created ionic 5 directory videoplayer and install a Ionic 5 videogular2 compatible plugin with command

npm i --save @videogular/ngx-videogular

Using videogular2 with Ionic 5

Now we need to import the videogular css and library modules into our Ionic 5 project. Let’s start with the css file. We can edit our global.scss file and add the line

@import "~@videogular/ngx-videogular/fonts/videogular.css";

Then we will modify our home.module.ts file to import videogular2 main modules.

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';

Ok the final file should be

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';

import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgOverlayPlayModule } from '@videogular/ngx-videogular/overlay-play';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

In the home.page.ts file script, we will declare an array of our videos. One will come from our ionic assets directory and the other one would be loaded from internet. To display videos, we will modify the home.page.html file and write


  
    Demo VideoPlayer    
    
  


  
    
      
        
      
    
  
  
    
      
        
        
          
         
        
        
          {{item.title}}

First we create a

containing our videogular2 player

The onPlayerReady method will be fired once the player will be ready.

The urlVideo will contains our video url to play. To learn mode about the player and available option, you can consult the documentation.

After that, we display a simple Ionic grid showing available videos with their title and image preview. Each item/video in the grid is clickable and will call the method playVideo(item).

Ok final step, we can modify the home.page.ts file to write our code

import { Component, ViewChild } from '@angular/core';
import { VgApiService, VgMediaDirective } from '@videogular/ngx-videogular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(VgMediaDirective, { static: true }) media: VgMediaDirective;
  api:VgApiService;
  urlVideo:string=""
  items = [
    {
      "title":"External file",
      "url":"http://static.videogular.com/assets/videos/videogular.mp4",
      "imagePreview":"assets/earth.png"
    },
    {
      "title":"Local video file",
      "url":"assets/videogular.mp4",
      "imagePreview":"assets/earth.png"
    },
  ]
  constructor() {}

  playVideo(item){
   
    // Play video
    this.urlVideo=item.url
    if (this.media){
       this.media.vgMedia.src=this.urlVideo
       this.media.subscriptions.canPlay.subscribe((value)=>{
        //this.api.fsAPI.toggleFullscreen()
        this.media.play()
       })
    }
  }

  onPlayerReady(api:VgApiService){
    this.api = api
    this.urlVideo = this.items[0].url
   // this.api.fsAPI.toggleFullscreen()
  }
}

To grab a reference to the media video we can use a ViewChild instruction

@ViewChild(VgMediaDirective, { static: true }) media: VgMediaDirective;

Then in our method playVideo(item) , we can use that reference to change the video url to play.

 this.media.vgMedia.src=this.urlVideo

We also subscribe to the event that the media is ready to play and if ready we play it. If you try to play the video without waiting for that canPlay event it will not work correctly.

 this.media.subscriptions.canPlay.subscribe((value)=>{
        //this.api.fsAPI.toggleFullscreen()
        this.media.play()
       })

In the method onPlayerReady(api:VgApiService) we get a reference to the VgApi service. We can use this service to toggle the video in fullscreen if required

this.api.fsAPI.toggleFullscreen()

Et voila. We are now able to play local or external video files in a Ionic 5 project, on mobile and on web ! Nice job.

The post How to use videogular2 with Ionic 5 ? appeared first on Ionic and Django Tutorial.

How to capture multiple photo with Ionic and Capacitor ?

Christophe Surbier — Fri, 21 Aug 2020 08:29:00 +0000

Recently, i had to develop a ionic application in which users should be able to take multiple photo with their camera. This will be the purpose of this tutorial.

The source code repository

First le’ts generate a new Ionic with capacitor project. Launch a terminal and enter:

ionic start multiplephoto blank --capacitor --project-id=multiplephoto --package-id=com.ionicanddjangotutorials.multiplephoto

Installing and using Media capture plugin with Ionic and Capacitor

To be able to access the mobile camera and implement our multiple photo functionnality, we will use the Media Capture plugin so let’s install it

npm install cordova-plugin-media-capture
npm install @ionic-native/media-capture

Now let’s modify the generated home.page.html file to add a button which will open the Camera preview on click


  
    
      Multiple photo capture
    
  



  
    Ready to start?
    Take photos

and let’s adjust the home.page.scss for a better design

#container {
  display: flex;
  flex-direction: column;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 10%;
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}

Our screen should look like this:

Ok now we can implement the openCamera() method in the home.page.ts file

import { Component } from '@angular/core';
import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

 
  constructor(private mediaCapture: MediaCapture) { 

  }

  openCamera(){
    let options: CaptureImageOptions = { limit: 3 }
    this.mediaCapture.captureImage(options).then((data: MediaFile[]) => {
      console.log(data)
    },
    (err: CaptureError) => {
      console.error(err)
    });
  }

}

and we need to modify the home.module.ts file to declare the MediaCapture provider plugin:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { MediaCapture } from '@ionic-native/media-capture/ngx';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  providers:[MediaCapture],
  declarations: [HomePage]
})
export class HomePageModule {}

Ok lot of code but the most important part is the openCamera() method and more specifically the following instructions:

 let options: CaptureImageOptions = { limit: 3 }

We indicate that the user would be able to take up to 3 photos. If you don’t specify a limit value the default will be only one photo. Once photos taken, we should receive an array with the images information or an error if something bad occured

this.mediaCapture.captureImage(options).then((data: MediaFile[]) => {
      console.log(data)
    },
    (err: CaptureError) => {
      console.error(err)
    });

Testing the photo capture on real device with capacitor

At this stage, we would like to run our app in a real mobile device to have a look of what’s happening and if everything is working fine. With capacitor, it is super easy to do so. First we build our app

ionic build

Then since i will test with an android device, i need to add the android platform to capacitor

npx cap add android
npx cap sync

Now i plug in my android device to usb port and launch the command

ionic capacitor run android --livereload --external

This command will open Android Studio and i just need to hit the run button. The Ionic application will be deployed on my android device with live mode, meaning that if i made a change in the code, the application will update automatically and reload to reflect the changes.

Please notice that your android device must be in debug mode if you want to run applications on it from Android Studio

If you are using an iPhone just do the same with npx cap add ios and ionic capacitor run ios –livereload –external

The application running on my android device, i can click the Take photo button and the camera preview appears and let me take one photo. Then the view briefly disappears and appears again and i can take another photo. Same process happens once more. Finally after my 3 photos capture, the camera preview closes and i can see in the logs:

 http://192.168.1.51:8100/home-home-module.js - Line 200 - Msg: [object Object],[object Object],[object Object]

I have 3 objects in my array list which is a good news since i took 3 photos. For better debugging just change the console.log output to show json data

console.log(JSON.stringify(data))

[
{"name":"1597995590266.jpg",
"localURL":"cdvfile://localhost/sdcard/Pictures/1597995590266.jpg",
"type":"image/jpeg","lastModified":null,"lastModifiedDate":1597995598000,"size":5735308,"start":0,"end":0,
"fullPath":"file:///storage/emulated/0/Pictures/1597995590266.jpg"},{"name":"1597995598705.jpg",
"localURL":"cdvfile://localhost/sdcard/Pictures/1597995598705.jpg",
"type":"image/jpeg","lastModified":null,"lastModifiedDate":1597995603000,"size":5915682,"start":0,"end":0,
"fullPath":"file:///storage/emulated/0/Pictures/1597995598705.jpg"},{"name":"1597995603724.jpg","localURL":"cdvfile://localhost/sdcard/Pictures/1597995603724.jpg","type":"image/jpeg","lastModified":null,"lastModifiedDate":1597995609000,"size":5962056,"start":0,"end":0,"fullPath":"file:///storage/emulated/0/Pictures/1597995603724.jpg"}]

As expected the array contains the information about the 3 photos taken and where the files are stored.

The plugin behaviour/user experience is not so great because user needs to take 3 photos (not 2 or one) to exit the camera mode (or close the camera application).

Now if you want to read the files, i will suggest to use the Capacitor Filesystem plugin and more particulary the readFile methods

Then with the files, you can display them or send them to a server like we learned in this tutorial.

Read and display images taken with the media capture plugin into our Ionic application

Let’s modify our html page to display pictures in a grid:


  
    
      Multiple photo capture
    
  



  
    Ready to start?
    Take photos

Now we modify our code to use the Capacitor filesystem plugin , browse each photo of our array and add them to a the new array pictures which is displayed in our html page

import { Component, NgZone } from '@angular/core';
import { MediaCapture, MediaFile, CaptureError, CaptureImageOptions } from '@ionic-native/media-capture/ngx';
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';
const { Filesystem } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  pictures=[]
  constructor(private mediaCapture: MediaCapture) { 

  }

  openCamera(){
    let options: CaptureImageOptions = { limit: 1 }
    this.mediaCapture.captureImage(options).then(async (data: MediaFile[]) => {
      console.log(JSON.stringify(data))
      for (let photo of data){
        let fullPath = photo.fullPath
        try{
          let photoBinary = await Filesystem.readFile({path:fullPath})
          if (photoBinary.data){
            let fullData = "data:" + photo.type + ";base64," + photoBinary.data
            this.pictures.push(fullData)
          }
        
        }
        catch(error){
          console.log(error)
        }
       
      }
    },
    (err: CaptureError) => {
      console.error(err)
    });
  }

}

Capacitor readFile returns the binary data in a based64 encoded so we will use this value with the type value of the photo (image/jpeg) to be able to display it correctly in our img tag:

let photoBinary = await Filesystem.readFile({path:fullPath})
          if (photoBinary.data){
            let fullData = "data:" + photo.type + ";base64," + photoBinary.data
            this.pictures.push(fullData)
          }

Please notice that with Android 10 a change occurs and we need to add: android:requestLegacyExternalStorage=”true” into our AndroidManifest.xml file otherwise the application will crash

The post How to capture multiple photo with Ionic and Capacitor ? appeared first on Ionic and Django Tutorial.

How to search google places with Ionic ?

Christophe Surbier — Wed, 05 Aug 2020 08:51:46 +0000

In this tutorial, i will show you how to use google places sdk to search places in a ionic application and display results to our users.

The source code repository

Generate a Google places api key and add it to the project

To use the Google places API, you need to have an API Key and you can get one here

For this tutorial, we will create a new ionic application. Launch a terminal and enter:

ionic start googleplaces blank --capacitor --project-id=googleplaces --package-id=com.ionicandjdangotutorials.googleplaces

With the –project-id argument we can specify our application name and with the –package-id argument the bundle identifier of our application.

If you are not familiar with these values you can learn more here.

Now we can add our Google Places API key in the index.html file of our ionic project:

Replace the YOURAPIKEY with the value you obtain from google. This line tells Ionic to load the Google places javascript sdk.

Add Google places search with Ionic

We will modify the home.page.html file to add a search box and add a list of search results.


  
    Search google places
  


  
    
      Destination address
      Please type the address you would like to find
      
    
    {{autocomplete.query}}

      
      
     
        
          
          
          
            {{item.structured_formatting.main_text}}
            {{item.structured_formatting.secondary_text}}
          
        
      
      
        Validate

We store the value entered in the search box in a variable called autocomplete.query

[(ngModel)]="autocomplete.query" [showCancelButton]="false" (ionInput)="updateSearch()"

And each time an input is typed, we call the method updateSearch().

Now let’s move on to the implementation. First we will geolocate the user using Capacitor. To do this edit the home.page.ts and add the method

  geoloc() {
    return new Promise(async resolve => {
      if (this.platform.is('capacitor')) {
        const position = await Geolocation.getCurrentPosition();
        if (position){
          resolve(position);
        }
        else{
        }
        console.log("------  PLATFORM capacitor");
      }
      else {
        // webgeoloc
      
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            position => {
              console.log("============= POSITION  ================");
              console.log(position)
              resolve(position);
            },
            error => {
              resolve(false);
            }
          );
        }
      }
    })
  }

We check if the user is on mobile an use capacitor native geoloc plugin to get the coordinates of his position, otherwise we use the browser geolocation. This method is called when our view is entered

 async ionViewWillEnter() {
    this.items=[]
    this.autocomplete.query=""
    const position = await Geolocation.getCurrentPosition();
     if (position) {
      console.log(position)
       this.currentLat = position.coords.latitude
       this.currentLon = position.coords.longitude
     }
  }

We also initialize an empty items array which will contain the google places results and our autocomplete.query variable that will contains the input of the user.

We also need to initialize the Google places API as soon as our page is initialized

 constructor(
    public platform: Platform) {
    this.initPage()
  }

  initPage() {
    // Create a new session token.
    this.sessionToken = new google.maps.places.AutocompleteSessionToken();
    this.acService = new google.maps.places.AutocompleteService();
    this.items = [];
    this.autocomplete = {
      query: ''
    };
  }

The initPage() method creates a new session token and initialise the AutocompleteService using the google places sdk

Now the most important method is to get places each time our user enters a value

  updateSearch() {
    console.log('modal > updateSearch '+this.autocomplete.query);
    if (this.autocomplete.query == '') {
      this.items = [];
      this.buttonDisabled = true
      return;
    }
    let self = this;
    let config: any;
    if (this.currentLat) {
      let myLatLng = new google.maps.LatLng({lat: this.currentLat, lng: this.currentLon}); 
      config = {
        types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
        input: this.autocomplete.query,
        sessionToken: this.sessionToken,
        language: "EN",
        location: myLatLng,
        radius: 500 * 100 //50Km
        //, 
        //componentRestrictions: { country: 'FR,ES,BE' } 
      }

    }
    else {
      config = {
        types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
        input: this.autocomplete.query,
        sessionToken: this.sessionToken,
        language:"EN"
        //location: {lat: -34, lng: 151},
        //radius: 1000 * 100 //100Km
        //, 
        //componentRestrictions: { country: 'FR,ES,BE' } 
      }

    }

    console.log(config)
    this.acService.getPlacePredictions(config, function (predictions, status) {
      //console.log('modal > getPlacePredictions > status > ', status);
      self.items = [];
      //console.log("predictions "+JSON .stringify(predictions)) 
      if (predictions) {
        predictions.forEach(function (prediction) {
          self.items.push(prediction);
        });
      }
    });

  }

To get places we use the getPlacePredictions method which will return a list of predictions (the places themselves)

 this.acService.getPlacePredictions(config, function (predictions, status) {
      //console.log('modal > getPlacePredictions > status > ', status);
      self.items = [];
      //console.log("predictions "+JSON .stringify(predictions)) 
      if (predictions) {
        predictions.forEach(function (prediction) {
          self.items.push(prediction);
        });
      }
    });

We need to pass to this method a config object

 config = {
        types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
        input: this.autocomplete.query,
        sessionToken: this.sessionToken,
        language: "EN",
        location: myLatLng,
        radius: 500 * 100 //50Km
        //, 
        //componentRestrictions: { country: 'FR,ES,BE' } 
      }

Many parameters can be set such as the type of results that we want, the langage in which results should be, the location of the user, the radius of the search,…

Once our results are displayed on our screen if the user selects a particular value, we can assign it

 validDestination() {
    if (this.selectedItem == undefined) {
      // should display a message to the user
      console.log("Enter a destination")
    }
    else {
      let latitude = this.selectedItem.latitude;
      let longitude = this.selectedItem.longitude;
      console.log("Ok selected item "+JSON.stringify(this.selectedItem))
    }
  }

  chooseItem(item: any) {
    console.log('modal > chooseItem > item > ', item);
    console.log(item)
    this.selectedItem = item;
    this.items = [];
    this.autocomplete.query = item.structured_formatting.main_text + " - " + item.structured_formatting.secondary_text;
    this.buttonDisabled = false;
    if (item.structured_formatting.secondary_text.indexOf(",")>0){
      let lieuSplitted = item.structured_formatting.secondary_text.split(",",1); 
      this.destinationCity  = lieuSplitted[0]
    }
    else{
      this.destinationCity  = item.structured_formatting.main_text
    }
  }

And voila. You can do whatever you want, once the user selects a google places value.

Here is the full home.page.ts code with import and variable declarations and get the full project code here : source code repository

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
const { Geolocation } = Plugins;
import { Plugins } from '@capacitor/core';
declare var google;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
   
  items: any;
  autocomplete: any;
  acService: any;
  placesService: any;
  selectedItem: any;
  buttonDisabled = true;
  sessionToken: any;
  currentLon: any;
  currentLat: any;
  destinationCity : string;
  zipCode : string="";
  constructor(
    public platform: Platform) {
    this.initPage()
  }



  geoloc() {
    return new Promise(async resolve => {
      if (this.platform.is('capacitor')) {
         
        const position = await Geolocation.getCurrentPosition();
        if (position){
          resolve(position);
        }
        else{
           
        }
        
        console.log("------  PLATFORM capacitor");
       
      }
      else {
        // webgeoloc
      
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            position => {
              console.log("============= POSITION  ================");
              console.log(position)
              //Hardcoded 

              resolve(position);
            },
            error => {

              resolve(false);
            }
          );
        }
      }
    })
  }

  goBack() {
   
  }

  dismiss() {
    console.log("Clear search")
    this.items = [];
    this.autocomplete = {
      query: ''
    };
   
  }
 
  initPage() {
    // Create a new session token.
    this.sessionToken = new google.maps.places.AutocompleteSessionToken();
    this.acService = new google.maps.places.AutocompleteService();
    this.items = [];
    this.autocomplete = {
      query: ''
    };
  }

  async ionViewWillEnter() {
    this.items=[]
    this.autocomplete.query=""
    
    const position = await Geolocation.getCurrentPosition();
     
     if (position) {
      console.log(position)
       this.currentLat = position.coords.latitude
       this.currentLon = position.coords.longitude
     }
    
  } 

  ngOnInit() {

  } 
   
  validDestination() {
    if (this.selectedItem == undefined) {
      // should display a message to the user
      console.log("Enter a destination")
    }
    else {
      let latitude = this.selectedItem.latitude;
      let longitude = this.selectedItem.longitude;
      console.log("Ok selected item "+JSON.stringify(this.selectedItem))
    }
  }

  chooseItem(item: any) {
    console.log('modal > chooseItem > item > ', item);
    console.log(item)
    this.selectedItem = item;
    this.items = [];
    this.autocomplete.query = item.structured_formatting.main_text + " - " + item.structured_formatting.secondary_text;
    this.buttonDisabled = false;
    if (item.structured_formatting.secondary_text.indexOf(",")>0){
      let lieuSplitted = item.structured_formatting.secondary_text.split(",",1); 
      this.destinationCity  = lieuSplitted[0]
    }
    else{
      this.destinationCity  = item.structured_formatting.main_text
    }
  }

  updateSearch() {
    console.log('modal > updateSearch '+this.autocomplete.query);
    if (this.autocomplete.query == '') {
      this.items = [];
      this.buttonDisabled = true
      return;
    }
    let self = this;
    let config: any;
    if (this.currentLat) {
      let myLatLng = new google.maps.LatLng({lat: this.currentLat, lng: this.currentLon}); 
      config = {
        types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
        input: this.autocomplete.query,
        sessionToken: this.sessionToken,
        language: "EN",
        location: myLatLng,
        radius: 500 * 100 //50Km
        //, 
        //componentRestrictions: { country: 'FR,ES,BE' } 
      }

    }
    else {
      config = {
        types: ['geocode'], // other types available in the API: 'establishment', 'regions', and 'cities'
        input: this.autocomplete.query,
        sessionToken: this.sessionToken,
        language:"EN"
        //location: {lat: -34, lng: 151},
        //radius: 1000 * 100 //100Km
        //, 
        //componentRestrictions: { country: 'FR,ES,BE' } 
      }

    }

    console.log(config)
    this.acService.getPlacePredictions(config, function (predictions, status) {
      //console.log('modal > getPlacePredictions > status > ', status);
      self.items = [];
      //console.log("predictions "+JSON .stringify(predictions)) 
      if (predictions) {
        predictions.forEach(function (prediction) {
          self.items.push(prediction);
        });
      }
    });

  }
}

The post How to search google places with Ionic ? appeared first on Ionic and Django Tutorial.

How to upload image from Ionic to Django using Django Rest Framework ?

Christophe Surbier — Mon, 27 Jul 2020 15:18:15 +0000

In this tutorial, i will show you how to take an image using Capacitor Camera plugin and upload it to our Django backend from our ionic application.
You will find the repository source code here.

Take or choose an image using Capacitor Camera plugin

Let’s imagine we would allow our user to set or change his profile picture. First we will add a new page

ionic g page UploadPicture

Then as always, i will move the new created page in the pages folder and modiy the app-routing.module.ts to reflect this change

 { path: 'upload-picture', loadChildren: './pages/upload-picture/upload-picture.module#UploadPicturePageModule' }

Ok now we can edit the upload-picture.page.ts file to include the capacitor Camera plugin which will be used to take or select a photo

import { Component, OnInit } from '@angular/core';
import { Plugins, CameraResultType,CameraSource } from '@capacitor/core';
const { Camera } = Plugins;
@Component({
  selector: 'app-upload-picture',
  templateUrl: './upload-picture.page.html',
  styleUrls: ['./upload-picture.page.scss'],
})
export class UploadPicturePage implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

And then implement a method which will ask the user if he wants to choose or take a photo (default behaviour of the capacitor Camera plugin)

async chooseOrTakePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Base64,
      //source: CameraSource.Camera
    }).catch((error)=>{
      console.log(error)
    })
    // variable image should contain our base64 image
  }

You can find all the options available for the Camerag plugin on the Capacitor documentation page

Convert a base64 image into a blob in our Ionic application

The capacitor Camera plugin should return the image in base64 format because we ask for it using the line

resultType: CameraResultType.Base64,

It is better to transform the image into a binary file because sometimes some weird conversion errors can occured between javascript base64 and python base64 format.

To transform a base64 image to a blob we can use this code

  public b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];
 
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      const slice = byteCharacters.slice(offset, offset + sliceSize);
 
      const byteNumbers = new Array(slice.length);
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
 
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
 
    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

So now our method will look like

  async chooseOrTakePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 90,
      allowEditing: false,
      resultType: CameraResultType.Base64,
      //source: CameraSource.Camera
    }).catch((error)=>{
      console.log(error)
    })
    // variable image should contain our base64 image
    if (image){
      // convert base64 image to blob
      let blob = this.b64toBlob(image.base64String)
      
    }
   
  }

Upload image by using a form from our Ionic application to Django

Now that we have our binary image we will use a standard angular form to send data to our Django backend. We will first need to check if network is available and if so, we can send the form

 if (this.apiService.networkConnected){
        //Create a form to send the file
        const formData = new FormData();
        //Generate a fake filename
        let name =Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 10);
        formData.append('file', blob, name+.${image.format});
        formData.append('name', name);
        this.apiService.uploadPhoto(formData).subscribe((value)=>{
          //server return value
        })
      }
      else{
        this.apiService.showNoNetwork()
      }

The form will be composed of the file and a fake name that we randomly generate.

We need to create the uploadPhoto method into our usual django-api service and will use the fetch method to send the form. We also need to define our new api endpoint which will be called uploadphotobinary

 getUploadPhotoUrlBinary= this.virtualHostName + this.apiPrefix + "/uploadphotobinary/"

uploadPhoto(formData) {
 
  var myHeaders = new Headers();
  myHeaders.append("Authorization", "Bearer "+ this.tokenSSO);

  var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: formData
  };
  return Observable.create(observer => {
  fetch(this.getUploadPhotoUrlBinary, requestOptions)
  .then(response => response.json())
  .then(result => {
      
      observer.next(result)
  })
  .catch(error => {console.log('error', error);
      observer.next()});
  })
}

Receive and save an image using Django Rest Framework

To receive and save the image in our Django backend, we first need to declare the model that will be used to save photo. So we can add the following models to our models.py file

class Photo(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4)
    file = models.ImageField(upload_to='dossiers/(%Y_%m)/', null=True, blank=True)
    createdAt = models.DateTimeField(auto_now_add=True)
    updatedAt = models.DateTimeField(auto_now=True)

Now we declare our new endpoint in the urls.py file

 url(r'^uploadphotobinary/$', PhotoUploadView.as_view()),

Then we declare the PhotoUploadView in our views.py file

//Adding some imports
from rest_framework.views import APIView
from rest_framework.parsers import FileUploadParser
from rest_framework.response import Response
from rest_framework import status
class PhotoUploadView(APIView):
    parser_class = (FileUploadParser,)

    def post(self, request, *args, **kwargs):
      print("=== DANS POST METHOD")
      print(request.data)
      file_serializer = PhotoUploadSerializer(data=request.data)

      if file_serializer.is_valid():
          file_serializer.save()
          return Response(file_serializer.data, status=status.HTTP_201_CREATED)
      else:
          print(file_serializer.errors)
          return Response(file_serializer.errors, status=status.HTTP_400_BAD_REQUEST)

and we declare the new PhotoUploadSerializer in our serializers.py file

class PhotoUploadSerializer(ModelSerializer):
    class Meta:
        model = Photo
        fields = '__all__'

The post How to upload image from Ionic to Django using Django Rest Framework ? appeared first on Ionic and Django Tutorial.