I have a location-based angular application which has been converted to universal application. Everything is working fine but there is a scenario for which I am looking for a workaround.
In my application customer has to select the location (latitude & longitude) and once selected that get stored in localStorage (not supported in SSR). Now in Universal APP I want to retain the location which user selected in cookie (it is supported in Nodejs and Angular) so when he comes next time it pick it from there.
If there is any other suggestion, I would be thankful.
Can anybody help me with this.
You can use cookies to save user data that must be accessible server side.
You can either interact directly with the cookies by injecting the Response and Request tokens in your components/services, but there aer 3rd party libs that make working with cookies easier, such as ngx-cookie-service
constructor( private cookieService: CookieService ) {
this.cookieService.set( 'Test', 'Hello World' );
this.cookieValue = this.cookieService.get('Test');
}
Related
I've cloned https://github.com/ananay/passport-apple-example and replaced the config with this:
clientID: "com.myname.web",
teamID: "myteamid",
callbackURL: "https://myurldev.com/auth/apple/redirect",
keyID: "mykeyid",
privateKeyLocation: path.join(__dirname, "../apple-key.p8")
I've also added SSL certificate on my machine and starting the server with https, all works fine & is recognized by my browser. I'm also starting the app on port 443 and proxying using my hosts file myurl.dev.com -> 127.0.0.1.
I have the same auth setup for facebook, google & microsoft and everything works fine.
I have:
Created a new APP identifier and enabled Sign in with Apple for it, named it: com.myname.dev
Created a new SERVICE identifier and enabled Sign in with apple, called it: com.myname.web
Added "https://myurldev.com/auth/apple/redirect" to the "Reply URLS" on the service identifier com.myname.web
Set my app identifier com.myname.dev as the main app identifier my service to be grouped with.
Created a private key and enabled sign in with apple, interface confirmed the presence of grouped ID com.myname.web bundled with com.myname.dev for which the key was created.
I have confirmed using console.log that the private key is indeed at the path being passed as parameter.
converted the .p8 file to base64 & then back to UTF-8 in an attempt to use the string for privateKeyString
successfully implemented Apple Oauth several times in the past using passport-apple
This time around, for some reason, auth simply doesn't work.
If I set the clientID as the APP identifier, not the service, I'm getting
invalid_request
Invalid web redirect url.
instead of invalid_client
Any advice on debugging this is highly appreciated. Thank you.
EDIT #1:
I have dug a bit deeper into the passport-apple package to figure out if anything goes against apple's docs around token generation, but the flow never reaches that part, indicating things go wrong on the actual configuration in Apple's console & what I'm trying to use for my project.
EDIT #2
2 of the app Ids I have created always throw "wrong redirect uri" because they're not service IDs so I can't configure redirect_uri, this will change if to "required" if I pass undefined as a redirect_uri.
One of the app ids throws only invalid client_id instead, regardless if I pass undefined or good value for redirect_uri.
EDIT #3
Went full vanilla through the OAuth code flow process and just created a url & redirected the user it, failing with this method is consistent with what is happening when using the passport-apple module.
const url = new URL("https://appleid.apple.com/auth/authorize");
url.searchParams.append("state", "fdbd287b1f");
url.searchParams.append("response_type", "code");
url.searchParams.append("scope", "name email");
url.searchParams.append("response_mode", "form_post");
url.searchParams.append(
"redirect_uri",
"https://raiseitupdev.com/auth/apple/redirect",
);
url.searchParams.append("client_id", "com.myname.web");
return res.redirect(url.toString());
[Creator of the library here.]
Did it stop working in development too? I feel this is a configuration error because the actual thing is working live on my website:
https://passport-apple.ananay.dev
Please follow up on this Github issue. Thanks!
https://github.com/ananay/passport-apple/issues/23
OpenUI5 version: 1.86
Browser/version (+device/version): Chrome Dev
Upon the authentication I validate the user session:
if (isUserSessionValid) {
const oRouter = UIComponent.getRouterFor(this);
oRouter.navTo("overview");
} else {
this.getOwnerComponent().openAuthDialog();
}
If isUserSessionValid is true, then I forward an user to the internal page, otherwise I show the login dialog.
The problem is, however, that an user can change the value of isUserSessionValid in DevTools and then getting forwarded to the UI5 app internal page. Of course, due to a lack of a valid session, no piece of the business data will be displayed, just an empty UI5 app template, but I would like to prevent even such screen.
If it would be a classical webapp, I would just send an appropriate server response with a redirect to the login page (e.g. res.redirect(403, "/login");). But, if I understand it correctly, since I'm sending am asynchronous request, a plain res.redirect won't work out and I'm required to implement a redirection logic on the UI5-client, which can be manipulated and bypassed by user.
How to prevent a manipulation of a view navigation in UI5 and ensure that unauthorized user can't get any piece of the UI5-app code?
The answer from SAP:
If you want to prevent an unauthorized user from accessing the client-side code (e.g. view/controller) you need to enforce
authorization on the server also for those static files. When bundling
the application code you also need to ensure that those files are
separate from the "public" files. One approach would be to have 2
separate components, one for the public page/auth dialog and one for
the actual application.
I am building a flutter app which involves online payment from users of app.
I am planning to use Paytm payment gateway. I was planning to achieve this using WebView. I understand that for this I need to set up a server to generate checksum.
Now what I want to understand is how do I set up the server?
According to this article: https://medium.com/#iqan/flutter-payments-using-paytm-7c48539dfdee
I have to clone this github project: https://github.com/iqans/paytm-checksum-api-nodejs
Where do I upload this node.js project? Can this be uploaded to Firebase?
Or does it have to be uploaded on website hosting platform like hostgator?
Please explain this a bit, I don't now much about servers, I have just started using flutter.
For your convenience, it is more easy for you to implement the payment gateway using webview.
Host the files provided by the payment SDK on your server to calculate the checksum.
Then you can initiate the transaction from your mobile app and calculate the checksum by calling your server side scripts. Then pass those values to the payment SDK.
I think more than webview use of paytm sdk is best option for you because when you start transection its take a data from paytm app which is install in customers mobile.
There is a one plugin available for doing this called paytmkaro you use this but it's only work with production keys.
Before starting upload the server side code on server which is available on their documentation which is available here please don't make any changes on server side code it's used to generate a txn token on paytm server.
Change the minimum sdk version to 19
and just copy paste this code
` try {
PaytmResponse paymentResponse = await _paytmKaro.startTransaction(
url: serverside code url e.g. https://arcane-temple-61754.herokuapp.com/intiateTansection.php,
mid: your Production merchant id,
mkey: your merchant key,
customerId:customer id (must be unique for every customer),
amount: transection amount,
orderId: Order Id (Order id must be unique Everytime for every order),
);
if(paymentResponse.status=="TXN_SUCCESS"){
Navigator.push(context, MaterialPageRoute(builder: (context)=>txnSuccessful(paytmResponse: paymentResponse,)));
}
else if(paymentResponse.status=="TXN_FAILURE"){
Navigator.push(context, MaterialPageRoute(builder: (context)=>txnFailed(paytmResponse: paymentResponse,)));
}
}
catch(e){
print(e);
key.currentState.showSnackBar(SnackBar(content: Text(e.toString()))); // platformVersion = 'Failed to get platform version.'
}`
and you are done.
I am trying to implement a secure payment option with react-paypal-express-checkout...
but I saw that user can easily change the amount with chrome dev tools ... shouldn't I make the API request to paypal from my server and validate the amount with my DB? I didn't saw any option to do that with paypal...
here is my code:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import 'react-credit-cards/es/styles-compiled.css'
import './checkout.css';
import PaypalExpressBtn from 'react-paypal-express-checkout';
class CheckOut extends Component {
constructor(props) {
super(props);
this.state = {
amount: 40
}
}
render() {
const client = {
sandbox: 'XXXX',
production: 'Your-Production-Client-ID',
}
return (
<PaypalExpressBtn client={client} currency={'USD'} total={this.state.amount} />
);
}
}
export default connect(CheckOut);
Paypal allows both types of uses, from the client and from the server. I guess it's possible for the client to modify the request on their end to pay less. But, in the end, whatever your business is, you'll get an order and a payment. Just check if the payment is different than it should be and don't fulfil the order, make a refund.
If you want to save the trouble, then use the server option that makes the payment through your server.
In any case, like with any other payment method, I would recommend you take the time to implement it yourself following the great and well documented API provided by Paypal. They have a lot of examples and use cases, with code for the browser and the server.
Never trust values coming from the client side. You should absolutely validate the amount on the server-side.
As #jorbuedo said, you can create a server integration so the values are never exposed client side. Send a session ID or Order Number or something to your server, retrieve the order from your DB, and perform a redirect to PayPal to process the transaction server-side.
Alternatively, you can keep the client-side stuff you have, but then validate the transaction after it's been complete. You could use Instant Payment Notifications or the newer Webhooks to do this.
You could pass a custom variable into the paymentOptions property of <PaypalExpressButton ...>, and then use this value to validate the correct amount has been paid in IPN.
For example:
<PaypalExpressButton
client={client}
currency="USD"
total={this.state.amount}
paymentOptions={{
custom: this.props.sessionId
}}
/>
Then, as part of IPN, you can pull the Session ID out the DB, check the expected payment amount (which you'll need to store, or calculate based on the items/prices saved against the session ID) is the same as the payment amount Paypal provides (mc_gross for example). A full list of variables you get as part of IPN is available here.
There are no fees for using IPN. If you didn't want to build out this flow, then you'd have to manually validate every order that's made to ensure the amount is correct. If you're running something small, this might be an acceptable compromise.
Edit: Don't just send the expected amount as the Custom variable, and compare that to the mc_gross value, as this can also be changed using F12 or a browser extension. The value needs to be something opaque that you can translate server-side into something meaningful.
#jorbuedo and #Dave Salomon give great answers about Security and you should take them in to consideration.
However, If you really don't want to user to change your Component state and props, You can disable React Devtools with this hack.
if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.emit = function() {};
}
Basically it mocks some methods of react-devtools and Devtool cannot find your component tree anyway.
This answer is only for disabling user to edit your components. This is not best solution for security)
One more issue I am facing my site is created in yii2 and CSRF is enabled but when I copy full form including csrf token and create new html file outside server and submit form from outside of server it accepting my form.
What is the expected result?
it should give permission issue
What do you get instead?
it successfully accepting form not sure either I am missing any configuration or what
Yii version 2.0.6
PHP version 5.5.38
Operating system CentOS release 6.9 (Final)
CSRF protection is based on the fact, that third party website should not know CSRF token of your user. If you expose CSRF token, then the whole protection will not work. This is by design.
If you want to block requests from untrusted domains, you should probably use CORS.
That's happening because, as you said, you are using CRSF. If you want to accept data from another domain, you'll need to disable CRSF at least for that particular request. Either this way:
class MyController extends Controller
{
public $enableCsrfValidation = false;
or this way:
class MyController extends Controller
{
public function beforeAction($action)
{
if (in_array($action->id, ['incoming'])) {
$this->enableCsrfValidation = false;
}
return parent::beforeAction($action);
}
From the cookbook: https://yii2-cookbook.readthedocs.io/csrf/
And also, from the official docs: https://www.yiiframework.com/doc/api/2.0/yii-web-controller#$enableCsrfValidation-detail