Sign in with Google is standard practice across the web. In this video, I go through how to implement it in Ionic Vue - Repo link available in the video description.
Don’t forget to like, comment, share or subscribe.
Click here to signup for Ionic Vue Newsletter
1 post - 1 participant
We are developing an application that uses Ionic (Angular) and Capacitor together with cordova-plugin-purchase to offer subscriptions (monthly and yearly). Purchases work perfectly on Android. However, on iOS, while the first purchase works fine, after that purchase expires (via cancelling the subscription, since it is actually automatically renewing) and the user purchases any product again (now on valid status since it expired already), calling the order() function does not do anything. The product status remains valid, no logs are written in the JavaScript console, nor Xcode. No errors, too. We have verified that our verification servers are returning correct responses. However, when we uninstall the app and install it from Xcode again, purchases start working again, and calling the order() function does show the purchase dialog again, and things work as expected. Until the subscription expires and they try to purchase again.
However, if the product is not yet expired, and the user tries to change subscription by subscribing to another subscription type, calling the order() function works as expected. It is only when a subscription expires, and then it starts to not work until the application is deleted/uninstalled and then installed again.
We implement the purchase using pretty standard code–we tried as minimal as possible to make it simple.
Initialization:
this.store.validator = 'https://xxxxxxx/api/app/purchased';
this.store.register([
{
type: this.store.PAID_SUBSCRIPTION,
id: this.YEARLY_SUBSCRIPTION
},
{
type: this.store.PAID_SUBSCRIPTION,
id: this.MONTHLY_SUBSCRIPTION
}
]);
this.subscriptions.add(
this.status.userData.subscribe(ud => {
this.user = ud;
this.store.applicationUsername = ud.id.toString(10);
})
);
this.store.when(this.YEARLY_SUBSCRIPTION)
.cancelled(this.purchaseCancelled)
.updated(this.purchaseYearlyUpdated)
.approved(this.purchaseApproved)
.verified(this.purchaseVerified)
.owned(this.purchaseOwned);
this.store.when(this.MONTHLY_SUBSCRIPTION)
.cancelled(this.purchaseCancelled)
.updated(this.purchaseMonthlyUpdated)
.approved(this.purchaseApproved)
.verified(this.purchaseVerified)
.owned(this.purchaseOwned);
this.store.error(this.handleError);
this.store.autoFinishTransactions = true;
this.store.refresh();
Other functions:
purchaseCancelled = (p: IAPProduct) => {
console.log(`${ p.id } cancelled`);
}
purchaseYearlyUpdated = (p: IAPProduct) => {
console.log(`${ p.id } updated`);
this.yearlyProduct = p;
this.changeDetectorRef.detectChanges();
}
purchaseMonthlyUpdated = (p: IAPProduct) => {
console.log(`${ p.id } updated`);
this.monthlyProduct = p;
this.changeDetectorRef.detectChanges();
}
purchaseApproved = (p: IAPProduct) => {
console.log(`${ p.id } approved`);
p.verify();
}
purchaseVerified = (p: IAPProduct) => {
console.log(`${ p.id } verified`);
p.finish();
}
purchaseOwned = (p: IAPProduct) => {
console.log(`${ p.id } owned`);
}
handleError = (error) => {
console.log('Error event:', error);
}
purchase(id: string) {
this.store.order(id);
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
this.store.off(this.purchaseCancelled);
this.store.off(this.purchaseYearlyUpdated);
this.store.off(this.purchaseMonthlyUpdated);
this.store.off(this.purchaseApproved);
this.store.off(this.purchaseVerified);
this.store.off(this.purchaseOwned);
this.store.off(this.handleError);
}
store.order(...)
approvedto valid)valid.I can’t see anything wrong with the code, and since it’s working perfectly fine on Android, we’re guessing that it might be something wrong with the phone or maybe the cordova-plugin-purchase plugin.
I would really appreciate any suggestions, ideas, opinions, anything. Thank you very much in advance. I’m getting quite desperate.
1 post - 1 participant
Hello everyone!
Im trying to track the location of my phone in the background… To do that, Im trying to use @mauron85/cordova-plugin-background-geolocation and @ionic-native/backgroun-geolocation packages.
Here is my App.tsx file:
const App: React.FC = () => {
const config: BackgroundGeolocationConfig = {
desiredAccuracy: 10,
stationaryRadius: 20,
distanceFilter: 30,
debug: true, // enable this hear sounds for background-geolocation life-cycle.
stopOnTerminate: false, // enable this to clear background location settings when the app terminates
};
BackgroundGeolocation.configure(config).then(() => {
BackgroundGeolocation.on(BackgroundGeolocationEvents.location).subscribe(
(location: BackgroundGeolocationResponse) => {
console.log(location);
}
);
});
BackgroundGeolocation.start();
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/login" component={Login} exact={true} />
<Route path="/home" component={Home} exact={true} />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
};
When running my application using capacitor + xcode, the app is crashing and showing this error:
Thread 1: EXC_BAD_ACCESS in CDVBackgroundGeolocation.m
Does anyone know how to solve this?
Thanks everyone!
1 post - 1 participant
Hi, I am trying to display an image from my backend to my ionic 5 app.
The request works in postman, my server returns a readablestream (using mongodb) with image/jpeg as header. But for my ionic app I am able to display it in ionic serve but when I try on real device its not displayed (it display the default icon’ broken image’ + image name). Here is the code I use in my dashboard.ts
getUserAvatar(){
this.userService.getUserAvatar().subscribe(
(res: any) => {
if (res.error ) {
}
else {
console.log(res)
this.createImageFromBlob(res);
}
})
}
createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.userAvatar = reader.result;
console.log(this.userAvatar)
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
my html : <div (click)="chooseAvatar()" class="bmjContainer inlineBlock"><a><ion-img [src]="userAvatar" alt="bitmojiLink" class="bmjLogo"></ion-img></a></div>
and my userService.ts :
getUserAvatar() : Observable<Blob>{
return this.http.get(`${baseUrl}/chatApp/getUserAvatar`,{responseType: "blob"});
}
any idea why its not correctly displayed only on real android device ? 
7 posts - 3 participants
Hello Guys,
I am a bit confused…working on PWA application and so far I have a very good experience about Ionic.
Camera, Gelocation, etc. are working perfect on both OS with PWA.
Is the PWA / WebPush / Push Notification works also in IOS ?
Does anybody have an experience with that?
Before I start implementing, the second answero from StackOverflow seems very detailed:
But it seems that the implemenation is quite tricky…
Thanks,Csaba
2 posts - 2 participants
It’s my first project with Ionic 5. My Problem. I get sometimes this Error:
Sometimes i get "webpackJsonp is not defined"
And i’m not sure why. I just programmed some jQuery-Stuff, it worked, but now i get this strange error. Somebody know a solution?
ionic --version: 5.4.16
1 post - 1 participant
Hi all,
I need to init user language into my ionic 5 app but I read that globalization plugin has been deprecated.
I tried to replace it using this code:
if (window.Intl && typeof window.Intl === 'object') {
console.debug('Globalization API available');
let l = navigator.language;
console.debug("Current Language is " + l);
} else {
console.warn('Globalization API NOT available');
}
II tested it in the browser but it doesn’t work. It always gives me “EN”.
Is it correct?
Thanks
1 post - 1 participant
Hi, I’m trying to use Vue refs with the new composition API.
However, it seems to only work when the ref="" is set directly into an ionic component.
For example I have the following (minimized) template:
<ion-content ref="content">
<div ref="canvas"></div>
</ion-content>
Then during setup():
const canvas = ref();
const content = ref();
onMounted(() => {
console.log(content.value);
console.log(canvas.value);
});
return {
canvas,
content
};
And the results show actual data from the ‘content’ element, but undefined for my ‘canvas’ div element:
Is there anything I’m missing? Any input greatly appreciated.
1 post - 1 participant
Hi
I am trying ion-searchbar inside a modal and I get:
TypeError: this.searchbar.setFocus is not a function
<ion-searchbar
cancelButtonText="Cancel"
#searchbar
placeholder="Region, District or Area"
>
</ion-searchbar>
@ViewChild('searchbar') searchbar: IonSearchbar;
ionViewDidEnter() {
setTimeout(() => {
this.searchbar.setFocus()
},400);
};
Any idea?
2 posts - 1 participant
https://www.proboosting.net/rainbow-six-siege-rank-boosting boost
1 post - 1 participant
(topic withdrawn by author, will be automatically deleted in 24 hours unless flagged)
1 post - 1 participant
Hello,
I’m new to using Capacitor and I’m wondering if there is a way to configure the background color of the status bar (the area containing the time and battery/wifi icons around the notches) on iOS so that when scrolling in my application, the time doesn’t “overlap” with other content (screenshot of that below). Is it possible to just make this area black or something similar?
I’m using the following viewport settings:
width=device-width, initial-scale=1, user-scalable=no, viewport-fit=auto
I was looking at using StatusBarStyle from capacitor/status-bar, but it looks like that’s deprecated:
I’m using Vue/NuxtJS, if it matters
1 post - 1 participant
Hi,
What is the difference between firebase instance id and registration token? I understand we need to use “registration token” to identify the devices to which we need to send the push notification. what is the significance of instance id?
1 post - 1 participant
I worked in 2 other ionic4 projects and this error never happened to me.
I’m trying to get a category details by id, so I copied a code from another project that works properly, but when I tried to display the category’s name it says
“Uncaught (in promise): TypeError: Cannot read property ‘name’ of undefined
TypeError: Cannot read property ‘name’ of undefined”
My service :
fetchCategory(id: any): Observable<Category> {
return this.http.get<Category>(`${this.base_url+"category/"}${id}`);
}
My category page:
getSubCategoryDetail(id:number) {
return this.repVertAPI.fetchCategory(id).subscribe(
data => {
this.category = (JSON.stringify(data)) ;
console.log("Category"+(JSON.stringify(data)));
} )
}
my html :
<ion-card *ngIf="category">
<ion-card-header>
<ion-card-title>{{category.name}}</ion-card-title>
<ion-card-subtitle>Image ici</ion-card-subtitle>
</ion-card-header>
</ion-card>
I’m getting this json in my console :
Category[{"id":31,"name":"Administration","description":null,"image":"769739d0f745544438f250575b6f2455.jpeg","slug":"administration"}]
I’m stuck here …
1 post - 1 participant
Hello guys. I’m starting a project that will be very reliant on social interactions. Having already published a few Ionic apps, and always struggled with all that’s social login, sharing etc… I was wondering what do you think about it nowadays?
My app will need as much as possible social logins, sharing, and friends import.
So, do you think an hybrid Ionic app is still a good fit for something like this?
Also, I always worked with Cordova. I was thinking about giving Capacitor a go, but I’m not sure it has sufficient plugins support.
Thanks ahead!
1 post - 1 participant
I have a main tabs view started from the Tabs Starter template.
Inside one of those tab views I have an ion-items list.
When clicking on an item, I want to go to a tab child route passing an ID (eg. /tab/page/:id).
That all works, BUT, I don’t have automatic page transitions and my ion-back-button does not work, so I guess something is going wrong in the routing.
The docs are still Angular heavy so I’m not sure if I’m using the Vue routing correctly with Ionic.
The default Vue router options such as :to are missing and an ion-item only has href (which I cannot use as this reloads te browser) and the button attribute.
I also see a lot of router-link usage, but in Ionic 5 that does not seem to be a part of ion-item anymore.
After going through the forums, I found a solution by using @click="router.push('/tab/page/${id}'): on my ion-item.
That correctly goes to the detail page, but as mentioned above, I don’t seem to be getting all the benefits from the router stack in Ionic.
Could somebody please give a basic example of the tabs starter template with a child route and a back button?
1 post - 1 participant
I have been trying to figure out the best way to set a series of ion-checkbox's using an array that is fed into my app through an API.
Right now, my app receives some data that looks like this:
{
"data": {
"tags": [
55, 46, 193, 1002
]
}
}
I am then using a series of ion-checkbox's to display whether or not that tag is selected for a certain item, like this:
<ion-item lines="full">
<ion-label position="fixed" class="ion-text-wrap">Blue</ion-label>
<ion-checkbox slot="end" [(ngModel)]="item.tags"></ion-checkbox>
</ion-item>
I am having some confusion around how I can set the model for item.tags to be associated back to the array of data I am receiving from the data feed.
Is there a value field in the ion-checkbox I can set that would then allow the checkbox to appeared to be check with the data.tags array has the matching value?
3 posts - 1 participant
Hello,
I have two larger native apps, with similar content, for iOS and Android OS (around 50 Screens -Activities/ViewControllers). I want two convert these to one code base using capacitor, creating a hybrid web app in the long run.
In case incrementally replacing the screens one by one, “How would that technically work?”. I can’t seem to find a fitting documentation here on this side (capacitorjs.com) or I just did not understood the “buzzwords” correctly.
Any hint is appreciated,
Max
1 post - 1 participant
Toast is great. However, in my little quiz application, when the user enters the answer, I want a small round status icon (either a check-mark or an ‘x’, say), that starts near the submit button, and then slowly floats to the top, then disappears.
Right now my right-or-wrong toast appears on the top of the screen. It’s very nice but not very “app-like”, like in a game app.
Any suggestions on how to implement this? I’m happy to study any code examples that might give me some clues even if it’s not exactly the same thing. Thanks!
Edit: I know I can build this from scratch with Ionic Animations (and I’m ready to try), but hoping for references to other “animated user interface components” similar to this. I haven’t found much so far.
2 posts - 1 participant
Hello all, actually I posted this entry into another community, yet not received any replies. Therefore, I wanna share it here to request your opinions.
"Hello all, I’m a newbie in this community, and honestly registered here to ask an important question before starting my journey through building app. I’m a civil engineer and looking for a framework allowing me to build a hybrid app related to my specialized area. I have very very limited knowledge in programming languages, can be said that no 
I read several articles comparing different frameworks in terms of building HybridApp, but not sure that which one is the suitable for my case.
Let me also barely touch on the purpose of the app that I’m planning to create.
Users can fill the form that is created automatically, type of form is completely up to selections done by users.
This form may have some procedures which are forced users applying them during filling process. For example; you need to fill one of the cell in the form after 5 minutes passed. Similar example is shared in the following picture.
I am kindly requesting your supports on deciding which framework I need to use for building an hybrid app outlines, and principles of which are mentioned above."
Best
Anil
2 posts - 2 participants
