I have a web app and I will like to integrate mailchimp such that when a user clicks the signup button on the page, the user's email is added to a mailchimp subscription list but I'm having difficulty in doing so. The problem is, the button on the page is created in a javascript file using extjs. I do not have that much experience in developing web applications . I already downloaded the api for integrating with php. I saw this: " AJAX Mailchimp signup form integration " but it seems to have security issues.
Can anyone help explain how to go about this?
Have the ajax call directed to your server, with the user's email.
From there, use the API (you downloaded) to add the email, and return the outcome of their response to your client.
When you do it behind the scenes (your server to theirs), there is no security risk, as you are not exposing your API key.
Client side code:
Ext.Ajax.request({
url: 'add_mail_to_chimp.php',
params: {
email: theUser_sEmail
},
success: function(response){
var text = response.responseText;
alert ('yay' + text);
}
});
Related
We are a social start-up and are given a great opportunity by one of the biggest banks in our country. Basically they will feature our website in their Mobile App, and users can access our website via their app in an iFrame. We are currently working on integrating a SSO log in flow between their app and our website, so users are logged in immediately when they open our website in their app.
For this, they have created an API that we're able to use. The API requires 2 main things to get the flow working:
send a pageLoaded() event when the DOM is ready, when this event is sent, we get returned a token to fetch the user's personal information with a public event.
send a pageReady() event when the backend logic processing is done (eg account created and user logged in).
They will show a spinner in their app, until the pageReady event is being sent to them.
My website uses PHP and JS (jQuery) as the main technologies. I am having a number of issues on how to implement this correctly.
This is the code I am using as of now, it works in a certain way, but it's very troublesome for the reasons mentioned below the code snippet:
$(document).ready(function(){
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host;
/*** Mobile App JS Code ***/
var receiver = new PostmessageExternalReceiver();
var sender = new PostmessageExternalSender();
receiver.addTokenEventListener(function (api, token, version){
if (api == 'init') {
$.ajax({
type: 'post',
cache: false,
url: baseUrl + '/login/abc/abcLogin',
data: {
'token': token
},
dataType: 'json',
success: function(response){
sender.pageReady();
window.location.replace(response.redirect_url);
}
});
}
});
sender.pageLoaded();
});
These are the problems that i'm not sure how to get around:
Since the sender.pageLoaded(); is in the jQuery document ready, and after performing the AJAX request, we are redirecting again to the same page (the homepage), because after the redirect, the user will be logged in and some extra blocks will show on the homepage. So if we are on the homepage again, the document ready will fire yet another sender.pageLoaded() event, and we are stuck in an infinite redirecting loop.
Right now I am including all 4 API javascript libraries provided by our third party, and my own javascript file including the AJAX request and the pageLoaded() and pageReady(). This is only applicable for users that come to our website via the 3rd party mobile app. For all other visitors in our website this is not applicable and requires extra resources to be loaded in when they're not used. (the ajax request will never be executed for them because a token will not be sent via the mobile app, but still we do not want to send a pageLoaded() for every visitor on our website, even if he is not from the mobile app.
This is a nice-to-have question: since we need to send the pageReady() after our PHP logic (via AJAX request) is done, we cannot do the redirect in PHP, so I return the redirect_url in my AJAX and then do the window.location.replace() method with the redirect URL. In the 3rd party app, this will cause the app to remove the spinner (on the pageReady() event) and show our website, but immediately afterwards we will redirect the user using the window.location.replace() , this causes a refresh of the page, and thus a small annoyance and not so smooth experience for the user. They expect after the spinner is gone that the website is immediately accessible. How would I go around this?
Thanks a lot in advance!
We are using odoo 12 online for enterprises.
We would like to protect our forms using google recaptcha.
How can we implement google recaptcha? If possible a full example how to implement it.
We would prefer recaptcha v3 but if not possible a v2 implementation is fine.
When I try to search online for implementation of google recaptcha there's almost every time a .php file included. Our pages are loaded with QWeb view types and php isn't supported.
Is it possible to implement without php? We could definitely use html and javascript and probably python, is it possible to do with only these? If it's possible we would like to do it with only javascript and html but I'm assuming that's not the case.
Is there any other form protection we could implement using only html and javascript?
Google reCAPTCHA v3 in Python
You need to install reCAPTCHA on the frontend and implement the verification on the backend. At the bottom of the post, I linked the official Google reCAPTCHA documentation.
Frontend Integration
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
...
});
});
</script>
The frontend just needs to:
Load the JavaScript api with your sitekey
Call grecaptcha.execute on an action or when the page loads
Send the token to your backend with the request to verify
Backend Integration
The verification of the token is the same as in reCAPTCHA v2. When the user submits the form on your site, you get the POST parameter g-recaptcha-response. You need to make a POST request to the Google reCAPTCHA service with following parameters. You can take your HTTP request framework of your choice.
URL: https://www.google.com/recaptcha/api/siteverify
POST Parameter Description
secret Required. The shared key between your site and reCAPTCHA.
response Required. The user response token provided by the reCAPTCHA client-side integration on your site.
remoteip Optional. The user's IP address.
Then you get a JSON response from the service and if the request failed, you can handle further actions on the backend.
{
"success": true|false,
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
Sources
Google | reCAPTCHA Installation
Google | reCAPTCHA Verification
Hope this will helps, you can get an idea from odoo forum.
My company is using a Parse backend for user accounts & I need to build out a password reset and other web based pages that will support our mobile apps. I've not done web dev like this in a while, so I'm wondering if anyone knows of a good tutorial?
I've found some that show me how to build out the whole system (users, password reset & email confirmation)...but nothing about hooking that up to Parse.
Any help would be greatly appreciated!
Parse provides an extremely simple solution for password reset out of the box, without the need of any plugin or mail server at all.
Something like:
Parse.User.requestPasswordReset("email#example.com", {
success: function() {
// Password reset request was sent successfully
},
error: function(error) {
// Show the error message somewhere
alert("Error: " + error.code + " " + error.message);
}
});
sends a link to the concerned user.
However, the page that will open will have two important points that I like to over-write:
It opens on the parse.com URL.
It, by defaults, opens the Parse default template.
You can go to your app settings and over-ride the URL as well as default template, so as to suite the needs of your app and so that your users are unaware of the usage of Parse.
I'm a little new to programming and I'm still beginning on working with a lot of the languages.
Currently, I'm working on a project that requires me to create a login page. With a successful login, the page will change to an "Account Info" page; however, this has to be a single page application. My professor specified that the server will have no concept of "page", and that moving from "Login" to "AccountInfo" will not change the page/URL.
How do I go about calling this? We've done introduction into Angular JS, but he's never done a tutorial on single page applications.
My .js for the login looks like this:
Home.LoginClick = function () {
$.ajax({
url: "Home/Login",
data: {
Username: $(".Username").val(),
Password: $(".Password").val(),
},
success: function (result) { alert(result);
if (deserializedData.Message == "Success")
Home.ChangeToAccountInfo();
}
});
}
Single Page application means that the client loads all the HTML in one shot, thus preventing your browser to refresh the page every time you click somewhere or go a different page. You can witness this in action by going into most websites.
It is considered best practices to use services for back end interaction. Therefore you should create a Auth. service managing your login. Create a function login - and logout. and then inject that service in your controller associated with the view thats displays the login form.
You should upon submission of the form call this login function. you can use ng-submit. after submitting the form the function that you injected in your controller will check with you backend to see if the user exist or not and then you can redirect the user toward the page you want.
You should look into the ui router for more details about how to handles your routes.
Is it possible to make a Facebook wall post using the FB.ui but without showing the pop up dialog box to the user ?
No, not with FB.ui. To post directly to the users wall without a dialogue you would have to use FB.api. To do this the user will have to be logged in and have granted your app the publish_stream permission. The code example from the documentation:
var body = 'Reading JS SDK documentation';
FB.api('/me/feed', 'post', { message: body }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
Be aware though that Facebook dislikes direct wall posting, and unless the content you are posting is a direct result of the user's interaction with the flow of your app, you run the risk of being flagged as spam and having your app suspended. From the platform policy (section IV):
.2. You must not pre-fill any of the fields associated with the following products, unless the user manually generated the content earlier in the workflow: Stream stories (user_message parameter for Facebook.streamPublish and FB.Connect.streamPublish, and message parameter for stream.publish), Photos (caption), Videos (description), Notes (title and content), Links (comment), and Jabber/XMPP.
.3. If a user grants you a publishing permission, you must still obtain consent from the user before taking any action on the user's behalf, such as publishing content or creating an event.
From personal experience, Facebook will insist on your app notifying the user in some way before taking any publish action. This won't stop you putting an app live that contravenes their policies, but if their app monitoring team pick up on it they can and will suspend the app until you make the required changes.
Try the graph api? Here's the relevant section:
You can publish to the Facebook graph by issuing HTTP POST requests to the appropriate connection URLs, using an access token. For example, you can post a new wall post on Arjun's wall by issuing a POST request to https://graph.facebook.com/arjun/feed:
curl -F 'access_token=...' \
-F 'message=Hello, Arjun. I like this new API.' \
https://graph.facebook.com/arjun/feed
Obviously, this isn't the JavaScript API, but it does the trick. I don't think it can be done without the popup directly through the JavaScript API.