How to implement recaptcha in odoo - javascript

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.

Related

Can't correctly obtain OAuth to append to google sheet via Javascript http request

I can't for the life of me append to my google sheet via http request. More specifically I can't seem to get the Oauth formatting right. I don't want/need a uri or prompt for permission as its just me managing my own spreadsheet. First, I was trying with just my api key, but then found out that if you're editing data you need to obtain an access token. That's when I started trying to obtain the token through oauth2 following the TERRIBLE google api documentation. That's where I hit a wall and have just about given up. It's such a simple concept, I just want to add data to my spreadsheet on drive from an online script (housed on scriptr.io), but Google yet again makes things so unneccessarily complicated and don't help matters with their convoluted, misleading, and scattered documentation. Can someone please help me in accomplishing this? Here's where I'm at or what progress I've made thus far.
I've figured out how to correctly format the call to add a row of data to the spreadsheet.
POST https://sheets.googleapis.com/v4/spreadsheets/-/values/Raw%20Data!A1:D1:append?valueInputOption=USER_ENTERED
//Header
Authorization: Bearer {oauth_token}
//Payload
{"range": "Raw Data!A1:D1","majorDimension": "ROWS","values": [["Test", "$15", "2", "3/15/2016"]]}
I know the above works because I've successfully added the data using the OAuth 2.0 Playground. However, when trying it outside of the playground (on a rest client) I keep getting errors trying to obtain the token.
POST https://www.googleapis.com/oauth2/v4/token
scope=https://www.googleapis.com/auth/spreadsheets
client_id=------&
client_secret=-----&
refresh_token=-----&
grant_type=refresh_token&
access_type=offline
I use the client id & client secret from my api console and I use the refresh token I got by authorizing the spreadsheet api in the oauth playground, but the above POST request leads to the following error
Error 400
{
"error": "unsupported_grant_type",
"error_description": "Invalid grant_type: "
}
Can someone please help me figure out how to correctly do this?

AngularJS $http.get does not return expected data from API

I am attempting to create a mobile phone application with a javascript / AngularJS frontend that communicats with a node js / express js backend.
I believe that I have properly enabled cors but am not completely certain that it has been done in the correct manner. None of the frontend files are hosted on a server (not even a local one). The node js server is hosted online as well as a mongo db server that it interacts with.
So far I am able to make POST's to my API that create a new user and reflect this in the database. I also have a login that POST's to an authentication function which returns a JSON Web Token (JWT). From here I should be able to put the JWT in the header of requests with the key "Authorization" to get access to the other parts of the API (eg: GET /currentUser).
Attempting to GET /currentUser when the JWT is in the header with postman returns all of the expected data. When I attempt to perform the same GET from my frontend (with JWT in header), I get the following OPTIONS response via firebug: "Reload the page to get source for: MyHostedApi/api/users"
I'm wondering if this is some kind of cors issue, incorrectly set authorization header, bad formatting of the $http.get, etc. Any help is greatly appreciated! I'd be glad to provide any parts of the source that are relevant.
This is what my GET looks like:
$http.get("MyHostedApi/api/users/currentUser")
.success(function(response) {
$scope.userData = response.data.firstName;
});

Using Mailgun RestFUL's on client-side

I am attempting to build an anonymous customer feedback form which forwards the content to an email address. I've been looking into Mailgun (http://documentation.mailgun.com/api-sending.html), but I am confused where I could put in my API key. I am attempting to make a POST request with jQuery, could someone point me to an example of sending an email?
According to the Authentication section of Mailgun's API Intro, they require Basic Auth, which is accomplished in code by adding the following HTTP header:
Authorization: Basic base64($username:$password)
For Mailgun, they mention using api as the username and your API key as the password.
For more details on how to add the Basic Auth header via jQuery, see this:
How to use Basic Auth with jQuery and AJAX?

Google API Authorisation with JavaScript

Hi I hope someone can help with this because it's driving me crazy right now.
I am trying to replicate this Google API authorisation example https://code.google.com/p/google-api-javascript-client/source/browse/samples/authSample.html on my own web server http://james-gilmore.co.uk/test.html
I have duplicated the code but replaced the clientID and API key with the keys set up in the google api console and I have turned the Google+ api service on in the 'Services' section.
I have the following set up under 'Client ID for web applications'
Redirect URIs: http://james-gilmore.co.uk/oauth2callback
JavaScript origins: http://james-gilmore.co.uk
And I also have the following set up under 'Simple API Access'
Referers: .james-gilmore.co.uk/.
When I run the http://james-gilmore.co.uk/test.html script I can authorise my access but I can see a JS error generated in the console:
'Uncaught TypeError: Cannot read property 'url' of undefined'
Does anyone know what I could be doing incorrectly? I think it may have something to do with the setup of my client ID's and allowed Referers because when I run the following example https://code.google.com/apis/console/?api=plus it works fine
The OAuth authentication appears to be working, but I see an error Access Not Configured being returned from an AJAX call.
Set up your referers as james-gilmore.co.uk/* (with the trailing wildcard, so that it will allow anything starting with your domain name).

Adding a test user in graph api (javascript sdk)

I am trying to add a couple to test users to an app I'm developing using google app engine and the javascript sdk. Following this link:, I tried this code:
FB.api ('/app_id/accounts/test-users', 'post', {installed:'true', permissions:'read_stream'}, function (response) {
alert (response.id);
});
(app_id was changed to the App ID as obtained in http://www.facebook.com/developers/apps.php)
But I get a popup "undefined". What is wrong with this code? I could not find any example for the javascript sdk.
As per the same facebook help page, response is supposed to be:
{
"id": "1231....",
"access_token":"1223134..." ,
"login_url":"https://www.facebook.com/platform/test_account.."
}
BTW, if I log in as myself,
FB.api('/me', function(user) {
welcomeMsg (user);
});
works just fine, so it's not a problem with app activation.
I don't think it's possible to perform this type of task using the Javascript SDK, which is intended to make calls on behalf of a user, not an app. For this type of call, it's necessary to authenticate as the app, and for that you need the app OAuth token and secret, which aren't available via Javascript (nor should they be, for security reasons). So the best solution here is to make this call serverside. To do so, you should follow the "App Login" instructions here to get an app access token, and then pass that token in to the /app_id/accounts/test-users API call (as the "access_token" param)

Categories

Resources