IOAuth.IO Integration with Ionic/Angular Hybrid App - javascript

I am having a really difficult time getting the cordova plugin authored by OAuth.io (https://github.com/oauth-io/oauth-phonegap) to work within the an ionic phone build. Everything is setup based off of the desktop version of the JS file they provide, wrapped in an Angular service for ease of unit testing, with another factory handling the actual flow of login/logout etc...
The issue I am running into is that now after switching to the plugin version and removing the referenced JS version, nothing works any longer. I can no longer pull up the facebook login page, nor have the global object 'OAuth' recognized outside of the injected service. The furthest I got in troubleshooting the issue is that the OAuth object is created, at least initially as I can log out the object, but anything after that does not appear to be recognized.
My web (working) version of code example is on plunker here: http://plnkr.co/edit/B4HdkkBKDP3Xv2riQGui?p=preview
Any thoughts on further troubleshooting or if there is another way of accomplishing this goal would be greatly appreciated!

We just published the version 0.2.0 of the OAuth.io Cordova/Phonegap SDK, which fixes the issue with Ionic.
Now you should be able to use the cordova plugin in a ionic app without any trouble, like this:
$ cordova plugin add https://github.com/oauth-io/oauth-phonegap
This version also contains features that were missing from the sdk, like the cache and the unified user info method.
You can get more information about all this on our github page:
https://github.com/oauth-io/oauth-phonegap
Hope this helps :)

Related

How to handle live updates to your mobile app using capacitor?

I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?
Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !
You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.

ApostropheCMS Deployment Issue With Widget

I am a relative beginner to working in Apostrophe. I'd like to start off by saying its a pretty great ecosystem and I've enjoyed the experience so far. However, I've run into an issue thats a bit confusing.
I've been using it to build a site for a client and I've run into a very odd issue. I have installed an instagram widget that I found via npm (https://www.npmjs.com/package/#kwsites/cms-instagram-widgets) and used it on my local host with relatively no issues, it worked and I moved on with my life.
However now I'm trying to deploy the site and the Instagram widget is not showing up in the browser when viewing on the server. Again the widget shows up perfectly fine in the browser when viewing off my local host which would indicate it did not install correctly on the server but after following all of the post install steps on the linked npm package, I am completely unsure of what to try next.
I have confirmed that the #kwsites package folder is in public/modules/ directory
Any help/tips from any of the Apostrophe experts out there would be appreciated.
I am using stagecoach for deployment (again, a great product) and mechanic to manage nginx. I don't know if any of this matters but the widget is making some API calls to Instagram, don't know if they would be affected by either of those tools.
EDIT: Inspection in safari yielded the following from my local host
And the following from my server
It just looks like the widget is not being generated and I cannot find any errors in the console. Note I can add and remove a widget, I just can't get any content to generate on the server (but can on local host).
So as noted in the comments, I believe the issue was due to instagram's legacy api requiring site authorization. However with Facebook pushing the new Instagam Basic Display API, the legacy is going to be killed at the end of this month anyway/apps will stop working. So I found this blog post and found it easily adaptable to an Apostrophe module. It requires signing up for Zapier but a basic account is free and its a really interesting tool. This solved my needs

Change device profile using phonegap / cordova

Iam using PhoneGap/Cordova + Backbone for developing a cross platform mobile application. Using phonegap i can access almost all the functions of the device. Is there somehow possible to access or change the device's profile using PhoneGap or using backbone ? I searched a lot but couldn't find any relevant results..!!
Is there any documentation available on this ?
Any help will be very much appreciated..!!
I didnt get what you means about "device's profile". You talking about accounts?
About Phonegap/Cordova you can do everything that a native app can. But sometimes you need to write a native plugin to interact with device. I already had to do that to do push notifications using a third lib.
You write a native class to do something, register it in plugins, give permissions and then call it with your javascript.
You can find documentation here: http://cordova.apache.org/docs/en/3.4.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide
Add this cordova plugin into your project.
https://github.com/apache/cordova-plugin-device
Put these line of codes into your view page
alert(device.cordova);
alert(device.model);
alert(device.name);
alert(device.platform);
alert(device.uuid);
alert(device.version);

Using ShareKit 2.0 in a HTML5 app

I'm developing a HTML5-based iOS app with PhoneGap. I'm using the latest version of PhoneGap 2.2.0. I want to include a share button, so users can share a message on Facebook and Twitter. I did some research and found my way to ShareKit 2.0. I actually managed to complete the necessary steps described on the wiki. My project is able to build successfully. :)
From here on I'm stuck. I can't find anything how to implement this in my JavaScript (jQuery) project. The old ShareKitPlugin describes a few steps, but it doesn't work. So I guess it changed since 2.0.
Is there another tutorial of some kind I can follow? Or is there another solution to include Facebook and Twitter share buttons? What I like about the ShareKit plugin is that it uses the native FB/Twitter apps installed on your phone (if I am correct assuming this).
Did you follow the steps on the "Adding the Plugin to the Project" section on phonegap plugin page?
If so, after adding the ShareKitPlugin.js import at your html file, like this:
<script src="ShareKitPlugin.js"></script>
you just need to call the share method, like this:
window.plugins.shareKit.share("text that will be shared", "http://google.com");

AngularJS + PhoneGap

I'm hopeful this issue has already been approached. Does PhoneGap work with AngularJS? Are there any limitations to using them together? Benefits/pitfals? Thanks
Yes.
I have made multiple applications with PhoneGap plus AngularJS. There's no magic to it.
PhoneGap just runs your application within the native device browser, so if AngularJS is supported on your target platforms, it should work with PhoneGap.
I'm having trouble getting angularjs working on windows phone 7 with phonegap. The simple stiff works, but as soon as I try to add page route...
[Edit]
Ok. So I have found the problem on windows phone 7/8.
in the function matchUrl(url,obj) in angular.js (1.0.3) there is a regex that fails because Windows Phone use an unusual prefix or namespace or whatever it is called (probably for security purposes).
What happens is angular is expecting a url like 'http://localhost/www/index.html' but in windows phone it will look like: 'x-wmapp0:www/index.html' instead.
I tried fixing the regex, but even so I get an error later on from XHR.
I've found that the brian t ford article (which everyone references) doesn't really explain how the config file is picked up (which includes the pointer to the index.html file and several other assets) which marks it out as a little out of date. It would be great to get a good update on it.
I am currently working on a project with Phonegap and AngularJS. I do recommend the following reading. Will help you decide if it's what you want in an hour.
http://briantford.com/blog/angular-phonegap.html
AngularJs will let you have the power and structure of a website but it has a small flaw is that it is a bit slow, I say this from experience and it happens that sometimes the models take a while to cool off.
Likewise, I recommend that you take a look at Yeomen, I am currently working on a generator angularJS phonegap and hope to have it for this weekend.
regards
#gartox
Yes. http://ionicframework.com is a framework that integrated Cordova and AngularJS. It will save you a lot of time trying to get everything set up.
To install the framework:
npm install -g cordova ionic
To create new empty:
ionic start myApp blank
All the options available in phonegap are also available in Ionic. For example, you could type
ionic serve
And your mobile app will open right in the browser, and auto-update whenever new changes are made to the files, just like in Phonegap.
From PhoneGap's blog:
http://phonegap.com/blog/2013/07/31/phonegap-30-faq/
Q: Does PhoneGap play well with angular.js? Or any other framework?
A: It sure does. PhoneGap does not dictate how an app gets authored with HTML, CSS, and JavaScript. We play nice with all frameworks and, of late, many are being authored today with Angular.

Categories