I am working on Paypal Express Checkout Integration with Ionic App, Paypal Client Side API is opening when I am testing on chrome on button click but not in the .apk on Android Phone. After searching a bit, I came across the InAPP Browser Cordova plugin which opens browser.
How to integrate InApp Browser with the Paypal API is the problem I have been facing as Inappbrowser requires url while Paypal API has it's own script which opens the Page on it's button click.
paypal.Button.render({
env: 'sandbox', // Optional: specify 'sandbox' environment
client: {
sandbox: 'key-secret',
production: 'xxxxxxxxx'
},
payment: function() {
var env = this.props.env;
var client = this.props.client;
return paypal.rest.payment.create(env, client, {
transactions: [
{
amount: { total: '1.00', currency: 'USD' }
}
]
});
},
commit: true, // Optional: show a 'Pay Now' button in the checkout flow
onAuthorize: function(data, actions) {
// Optional: display a confirmation page here
return actions.payment.execute().then(function() {
// Show a success page to the buyer
});
}
}, '#paypal-button');
Inappbrowser code which opens the url is:
$cordovaInAppBrowser.open('url(want to open paypal here)', '_blank', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
Paypal Button "I want it to open the Paypal API in Inappbrowser on this button click"
<div id="paypal-button"></div>
Related
I have a React PWA application on Aws Amplify, everytime there are repository updates, user is constrain to make this actions: 1. open chrome console, 2. Go to Application Tab, 3. Go to Storage 4. Clear Site Data 5. Refresh Application.
I noticed that every update main.js go in 404.
Is there a way for clear cache after new changes?
public/serviceWorker.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('serviceWorker.js').then(function (registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
Partially solved.
Cache issue is solved, alert doesn't appear.
Removed js code from index.html
Moved serviceWorker from public to src
Added follow code to App.js;
import * as serviceWorker from "./serviceWorker";
serviceWorker.register({
onUpdate: registration => {
alert('New version available!');
if (registration && registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
window.location.reload();
}
});
I am trying to create a react google/youtube api project to view all of my youtube videos. I am following this github example repo: https://github.com/paulzmuda/youtube-react-upload
Which I have cloned, installed, and inside gapi-client.js, I added my client_id:
window.gapi.client
.init({
client_id: "1111111111-11111111111111.apps.googleusercontent.com",
fetch_basic_profile: false,
scope: 'profile',
// 'apiKey': 'YOUR_API_KEY',
// 'clientId': 'YOUR_CLIENT_ID',
// 'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
// 'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
})
.then(() => {
GoogleAuth = window.gapi.auth2.getAuthInstance();
GoogleAuth.isSignedIn.listen(dispatch(updateSigninStatus));
dispatch(setSigninStatus());
// document.getElementById('sign-in-or-out-button').addEventListener('click', () => {
// this.handleAuthClick();
// });
// document.getElementById('revoke-access-button').addEventListener('click', () => {
// this.revokeAccess();
// });
});
};
I got my client_id variable from the credentials page of my google cloud project (highlighted)
And I added my localhost url to the project
but when i launch the youtube-react-upload project with npm run start:dev, I get this error in my browser window:
"Not a valid origin for the client: http://localhost:3032 has not been registered for client ID 1111111111-11111111111111.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
I thought I added this localhost var already? Am I missing something?
I have a React + Electron app using Google API to authenticate and get a list of calendar events.
The API script is being loaded on the head of my index.html and initialised on my App.js like so:
// Initializes the API client library and sets up sign-in state listeners.
initClient() {
let gapi = window["gapi"];
let that = this;
gapi.load("client", start);
function start() {
gapi.client
.init({
apiKey: GOOGLE_API_KEY,
clientId: CLIENT_ID,
discoveryDocs: [
"https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"
],
scope: "https://www.googleapis.com/auth/calendar.readonly"
})
.then(() => {
gapi.auth2
.getAuthInstance()
.isSignedIn.listen(that.updateSigninStatus);
that.updateSigninStatus(
gapi.auth2.getAuthInstance().isSignedIn.get()
);
that.setState({
apiLoaded: true
});
});
}
}
It works completely fine on a local environment, where I have a server running, but once I build my Electron app and run the app "natively", I get the following error: gapi.auth2.ExternallyVisibleError: Invalid cookiePolicy
I don't have an advanced understanding of APIs and Servers to figure this out but through research, I found something about the API not working from a "file://" protocol, which is the case on an Electron app.
Thoughts? Ideas?
I'm working in a hybrid app to report potholes in our city.
The user can register to the app in a classic way (fill forms) or via one of the social networks (facebook, gmail, twitter).
The system works through a server on rails and a mobile app as a client(ionic/angular)
On the server side we have solved this, the user can make sign up / sign in to the page in the way that they want.
But with have several problems with the app, the app does nothing when you make click to the button of "sign in via facebook"
this is the style it is organized.
app/
plugins/
InAppBrowser
www/
css/
js/
controllers/
splash.js
map.js
tabs.js
services/
users.js
notifications.js
app.js
utils.js
lib/
angular/
ng-cordova-oauth/
ngCordova/
ionic/
templates/
map.html
splash.html
tabs.html
index.html
The splash.js controller is in charge of making the login function.
angular.module('app')
.controller('SplashCtrl', function($scope, User, $state, $ionicPopup, $auth, $cordovaOauth) {
$scope.session_id = User.session_id;
$scope.facebookLogin = function() {
alert("flag1");
User.fbSignIn().then(function() {
alert("flag2");
User.fbGetData().then(function() {
alert("flag3");
User.fbAuth().then(function() {
alert("flag4");
// Detect if it is a sign in or sign up
if (User.username) {
console.log('Controller reports successfull social login.');
$state.go('tab.map');
} else {
// Open finish signup modal
console.log('Contorller reports this is a new user');
$state.go('finish_signup');
}
}, function() {
alert("flag5");
$ionicPopup.alert({
title: '<b>App</b>',
template: 'Credenciales no válidas, vuelve a intentar.',
okText: 'Aceptar',
okType: 'button-energized'
})
});
}, function() {
alert("flag6");
// alert('Could not get your Facebook data...');
});
}, function() {
alert("flag7");
// alert('Could not sign you into Facebook...');
});
}
})
I put some alert flags through the functions to see where the app get stuck.
I can only see the 'flag1' alert on the phone.Then nothing happens
the controller communicates with the service users.js
I put the code on pastebin because it's too long
users.js service
The client must request an access token to the server and then compare in SplashCtrl if they got the token access the app redirects the user to tabs.html template that would be the main page.
The console server shows nothing. So the request application never communicates to the server. Eventhough the 'CLIENTS' and 'SERVER' variables are already declared in app.js
.constant('SERVER', {
url: 'https://rails-tutorial-denialtorres.c9.io'
})
.constant('CLIENTS', {
facebook: 'fb Api'
});
I can only logging of the server if I put a username and password in a traditional way
preview
I hope you can help me with this guys
regards and thanks!!
you try this ?
http://ngcordova.com/docs/plugins/oauth/
I tested and work very well, easy to implement, and also you can parse the json with token (and use server side if you need)
Remember this work ONLY with real device, not with Ionic Serve.
In case you looking for custom facebook login (javascript), try this code :
facebookStatus = function() {
var dfd = new jQuery.Deferred();
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
dfd.resolve({status: response.status, token: response.authResponse.accessToken});
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook, //but not connected to the app
dfd.resolve({status: response.status, token: false});
} else {
// the user isn't even logged in to Facebook.
FB.login(function(response) {
if (response.status=="connected"){
var token = response.authResponse.accessToken;
dfd.resolve({status: response.status, token: response.authResponse.accessToken});
}
}, {scope:'YOUR SCOPE HERE'});
}
});
return dfd.promise();
};
*Remember if you use this code, to add on index page the standard Facebook App details (something like)
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID',
status : true, // check login status
cookie : false, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
When I install the cordova plugin with add org.apache.cordova.inappbrowser
The id for the plugin is cordova-plugin-inappbrowser and the ngcordova.js library is looking for org.apache.cordova.inappbrowser
Changing those lines on ngcordova.js solves the issue.
I am creating an app using Sencha and I need to integrate the facebook login in it . When i click on the "login in with facebook " button , if the user is not logged in facebook ,it should show a pop-up to enter facebook email-id and password, else if the user has already logged in it should just sign-in with facebook authentication. How do I implement this using sencha touch . Please help . It would be helpful if the code for this functionality is provided.Thanks
First of all, you have to create JavaScript SDK app with facebook (please follow this link). After the app is created you will have APP ID. Then add the following code to app.js
Ext.application({
name: 'FBLogin',
launch: function() {
Ext.create('Ext.container.Viewport', {
items:[
{
xtype: 'panel',
html: '<center><div id="fblogin" class="fb-login-button">Login with Facebook</div></center>'
}
],
listeners:{
render: function(obj, eOpts){
window.fbAsyncInit = Ext.bind(this.onFacebookInit, this);
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
},
onFacebookInit: function(){
console.log('onFacebookInit');
var me = this;
FB.init({
appId : 'YOUR_APP_ID',
status : true,
xfbml : true
});
FB.Event.subscribe('auth.authResponseChange', Ext.bind(me.onFacebookAuthResponseChange, me));
},
onFacebookAuthResponseChange: function(response){
this.down('panel').setVisible(false);
alert("Success fully Logged in");
}
});
}
});
There will be a field called 'SiteURL:' under Website with facebook Login when you create Facebook APP. That should be pointed to your web app URL. (ex: http://example.com)
You could try using Phonegap Facebook Connect Plugin 0.4.0 (stable version)
and Use Phonegap Plugin Build to build package for Android,Iphone ,windows phone,blackbery,etc.
//on Device Ready
FB.init({ appId: "appid", nativeInterface: CDV.FB, useCachedDialogs: false });
// call for native app if there else give a popup for login
FB.login(
function(response) {
if (response.session) {
alert('logged in');
} else {
alert('not logged in');
}
},
{ scope: "email" }
);
Inorder to integrate with sencha which needs to add three script files cdv-plugin-fb-connect.js, phonegap.js and facebook-js-sdk.js in index.html file and add config.xml file to project build for phone gap build for building native app(without using the sencha native packaging).For config.xml file configuration please see this config Help
If any doubt please see github example here
Hope it works