payment - Ionic 5 In App Browser 无法登录wocommerce

Question

Hi i am new to ionic please help
I have a button to Buy In Product page detail it redirect me to the required link but i have to re login their to purchase. 
**productdetailspage.page.html**

    <ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
  </ion-buttons>
    <ion-title *ngIf="product" [innerHTML]="product.name">
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-grid>
    <ion-row>
        <ion-col size="12">
        <div *ngIf="!product" class="spinnerSection" style="text-align: center;">
            <ion-spinner name="lines"></ion-spinner>
        </div>
      </ion-col>
      <ion-col size-lg="12" size-xs="12">
        <ion-card *ngIf="product">

          <ion-slides *ngIf="product.images[0]" pager="true">
            <ion-slide *ngFor="let image of product.images; index as i">
              <img src="{{ product.images[i].src }}"/>
            </ion-slide>
          </ion-slides>

            <ion-card-header>
              <h1 style="text-align:center;" [innerHTML]="product.name"></h1>
            </ion-card-header>
            <ion-card-content [innerHTML]="product.description">

            </ion-card-content>
            <p style="text-align: center;" *ngIf="product.price">Price: USD ${{ product.price }}</p>
            <ion-button color="primary" expand="block" (click)="iabLinks(product.permalink)">BUY NOW</ion-button>
            </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

//产品详情页面

**productdetails.page.ts**


    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { WoocommerceService } from 'src/app/services/woocommerce.service';
import { CommonfunctionService } from './../../services/commonfunction.service';
import { AuthService } from './../../services/auth.service';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-productdetails',
  templateUrl: './productdetails.page.html',
  styleUrls: ['./productdetails.page.scss'],
})
export class ProductdetailsPage implements OnInit {
      product:any;
      currentUserId: any;
      RazorpayCheckout:any;
  constructor(private activatedRoute: ActivatedRoute,
               private wc: WoocommerceService,
               private iab: InAppBrowser,
               private auth: AuthService,
               private CFS: CommonfunctionService,
               private router: Router
         )
   {
    this.currentUserId = localStorage.getItem('currentUserId');
    }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe((paramMap) => {
      let productId = paramMap.get('productId');
      console.log('Found Product Id:', productId );
      this.wc.getAProducts(productId).subscribe((data) =>{
          this.product = data;
          console.log('product Data ',this.product);
      });
    });
  }
  iabLinks(productUrl){
    let target = '_blank';
    console.log('Permalink received: ', productUrl);
  
    if( this.auth.isUserLoggedIn){
      event.preventDefault();
      let newUrl = `${productUrl}?uid=${this.currentUserId}`;
      this.iab.create(newUrl,target);
      console.log('In App Browser Link Opened: ',newUrl);
    } else {
      event.preventDefault();
      this.CFS.presentToast('You need to login first','bottom',2000);
      this.router.navigateByUrl('/login');
    }

  }



}

**auth.services.ts**

    import { HttpClient,HttpHeaders,HttpHandler } from '@angular/common/http';
import { Injectable } from '@angular/core';
//import { resolve } from 'node:path';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  apiURL: string;
  siteURL: string='https://quickcartindia.com';
  jwtPart = '/wp-json/jwt-auth/v1/token';
  //userPart = '/wp-json/jwt-auth/v1/token/validate'; 
  userpart = '/wp-json/wp/v2/users/';
  woocomPart: String='/wp-json/wc/v3/';
  consumerKey: string = 'ck_98349879_removed';
  consumerSecret: string = 'cs_80843058_removed';

  isUserAutheticated: boolean = false;
  currentSessionUser: any;
  customerData: any;


  constructor(private http: HttpClient) { }
  registerCustomer(email,username,password,role){
    let headers = new HttpHeaders({
        'Content-Type':'application/x-www-form-urlencoded'
       //'Content-Type':'application/json'
    });
    let credentials = `username=${username}&email=${email}&password=${password}&role=${role}`;
    this.apiURL = `${this.siteURL}${this.woocomPart}customers?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
    
    
    return new Promise((resolve)=>{
      this.http.post(this.apiURL,credentials,{headers}).subscribe((successResponse)=>{
        
            resolve(successResponse);
        },
        (errorResponse) =>{
          resolve(errorResponse);
        }
      );
    });
  }

  login(email,password){
    let headers = new HttpHeaders({
       'Content-Type':'application/x-www-form-urlencoded'
        //'Content-Type':'application/json'
    });
    let credentials = `username=${email}&password=${password}`;
    this.apiURL = this.siteURL + this.jwtPart;
    
    
    return new Promise((resolve)=>{
      this.http.post(this.apiURL,credentials,{headers}).subscribe((successResponse)=>{
        resolve(successResponse);
        },
        (errorResponse) =>{
          resolve(errorResponse);
        }
      );
    }); 
  }

  get isUserLoggedIn(){
    this.currentSessionUser = localStorage.getItem('currentUserId');
    if(this.currentSessionUser  ){
          this.isUserAutheticated = true;
    }else{
      this.isUserAutheticated = false;
    }
    return this.isUserAutheticated;
  }

  getCustomerIdByEmail(email){

    this.apiURL = `${this.siteURL}${this.woocomPart}customers?email=${email}&consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      this.customerData=this.http.get(this.apiURL);
      return this.customerData;
  }
}

//这是woocommerce服务

woocommerce.service.ts

    import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class WoocommerceService {
 
  apiURL: string = '';
  siteURL: string='https://quickcartindia.com';
  woocomPart: String='/wp-json/wc/v3/';
  consumerKey: string = 'ck_98794387_removed';
  consumerSecret: string = 'cs_73490564_removed';
  allProducts: any;
  allOrders: any;
  allTags: any;
  singleOrder: any;
  customerData: any;
  allCategories: any;
  constructor(private http: HttpClient) { }

      getAllProducts(){
          this.apiURL = `${this.siteURL}${this.woocomPart}products?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}&status=publish&per_page=100`;
          console.log('ALL Product api url:',this.apiURL);
          this.allProducts = this.http.get(this.apiURL);
          return this.allProducts;
      }
      getAllTags(){
        this.apiURL = `${this.siteURL}${this.woocomPart}products/tags?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
        console.log('ALL tags api url:',this.apiURL);
        this.allTags = this.http.get(this.apiURL);
        return this.allTags;
      }
      getProductByTag(tagId){
        this.apiURL = `${this.siteURL}${this.woocomPart}products?tag=${tagId}&consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
        console.log('ALl categories api url: ',this.apiURL);
        this.allCategories = this.http.get(this.apiURL);
        return this.allCategories;
      }
      getAProducts(productId){
        this.apiURL = `${this.siteURL}${this.woocomPart}products/${productId}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}&status=publish&per_page=100`;
        console.log('ALL Product api url:',this.apiURL);
        this.allProducts = this.http.get(this.apiURL);
        return this.allProducts;
    }
    getAllOrdersByCustomer(currentUserId: any) {
      this.apiURL = `${this.siteURL}${this.woocomPart}orders/?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}&customer=${currentUserId}`;
      console.log('ALl orders api url: ',this.apiURL);
      this.allOrders = this.http.get(this.apiURL);
      return this.allOrders;
    }
    getAllCategories(){
      this.apiURL = `${this.siteURL}${this.woocomPart}products/categories?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      console.log('ALl categories api url: ',this.apiURL);
      this.allCategories = this.http.get(this.apiURL);
      return this.allCategories;
    }

    getProductByCategory(catId){
      this.apiURL = `${this.siteURL}${this.woocomPart}products?category=${catId}&consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      console.log('ALl categories api url: ',this.apiURL);
      this.allCategories = this.http.get(this.apiURL);
      return this.allCategories;
    }
    getSingleOrder(orderId){
      this.apiURL = `${this.siteURL}${this.woocomPart}orders/${orderId}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      console.log('ALl orders api url: ',this.apiURL);
      this.singleOrder = this.http.get(this.apiURL);
      return this.singleOrder;
    }

    getCustomerData(customerId){
      this.apiURL = `${this.siteURL}${this.woocomPart}customers/${customerId}?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
      console.log('Customer Data api url: ',this.apiURL);
      this.customerData = this.http.get(this.apiURL);
      return this.customerData;
    }
}

如果需要任何额外的东西，请告诉我。任何形式的帮助和建议将不胜感激，因为我对此很陌生。这只是一个使用 wooocommerce 网站的 rest api 并在选择产品后尝试付款的电子商务应用程序，但我必须在从应用程序重定向后再次登录网站。

标签： paymentinappbrowserionic5