I'm building a website with a form with reCAPTCHA check. As required from Google documentation, I've created a key for the target domain. Then, I've created a form containing reCAPTCHA section
HTML form
<form method="post" action="index.php">
<div class="g-recaptcha" data-sitekey="PUBLIC_KEY"></div>
<input type="submit" name="submit" />
</form>
PHP response check
When form is submitted, reCAPTCHA response is verified (in this example, it's simply printed).
$recaptcha = filter_input(INPUT_POST, 'g-recaptcha-response', FILTER_SANITIZE_STRING);
$googleurl = "https://www.google.com/recaptcha/api/siteverify";
$privatekey = "PRIVATE_KEY";
$remoteip = $_SERVER['REMOTE_ADDR'];
$curl = new Curl($googleurl."?secret=".$privatekey."&response=".$recaptcha."&remoteip=".$remoteip);
$response = json_decode($curl->exec(), true);
print_r($response);
die();
Curl is a class that simply builds a curl request and return result.
The problem
The snippet works fine online and I've checked $response values both with success and error cases. But during development, I must use it on localhost too. As stated in this post, all keys should work locally. But when I run the code, nothing is shown.
Though this question is older I post the answer because many people may run into the same problem. I think that this may be related to the general authentification problem with running reCaptcha on localhost which can be solved using secure token
I posted the solution here for reference
UPDATE - the working code:
For secure token generation I'm using slushie's php implementation
The PHP part:
<?PHP
use ReCaptchaSecureToken\ReCaptchaToken as ReCaptchaToken;
require_once("libs/ReCaptchaToken.php");
//Generate recaptcha token
$config = [ 'site_key' => 'place-your-site-key-here',
'site_secret' => 'place-your-secret-key-here'
];
$recaptcha_token = new ReCaptchaToken($config);
$recaptcha_session_id = uniqid('recaptcha');
$recaptcha_secure_token = $recaptcha_token->secureToken($recaptcha_session_id);
?>
The HTML:
<html>
<head>
...
<script src='//www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form>
...
<div class="g-recaptcha" data-sitekey="place-your-site-key-here" data-stoken="<?PHP echo $recaptcha_secure_token; ?>"></div>
</form>
</body>
</html>
Related
I just switched my site over to SSL and all of my social sharing button counts have reset to zero, which is expected, but apparently it's possible to tell those buttons to use the old http urls in order to bring back the old counts.
I just can't figure out how to do it for my setup, which is AddThis for the buttons and Php/Html for the code (Joomla actually, but that may be irrelevant).
The AddThis code is simple:
<div class="addthis_sharing_toolbox" data-url="THE URL"></div>
So my best guess is that I need to take the current URL, change it from https to http, and plug it into the above 'data-url'.
But looking at other threads here, there seems to be a lot of controversy about how to securely and correctly get the current URL, so that's where I'm getting stuck.
(And then on top of that, I'll need to make this switch only for past articles, not new ones, but that's another story.)
Any ideas?
Thanks very much,
Phil
The share counts are based off of the exact URL and unfortunately, the APIs for each of the sharing services (Facebook, Pinterest, etc.) treat the protocols as distinct URLs.
The only thing you could do prevent losing the share counts from existing URLs would be to set override the shared URL to be the old HTTP URL.
Then, you'd need to setup a 301 redirect on your site to redirect the visitor from the old URL to the new HTTPS URL after a visitor clicks the old URL from a shared link on Facebook (or any other service).
It looks like you already found the instructions for changing the URL that's shared (http://www.addthis.com/academy/setting-the-url-title-to-share/), so you would just set the data-url attribute to be the old (HTTP) URL.
Took me all day, but I finally figured this out! This gave me a lot of the answer, but I still had trouble tweaking it for AddThis.
Here's the code (the first line applies the fix only to articles published before Aug 1, 2016, because I don't need to make the change for newer articles):
<?php if (strtotime($this->item->publish_up) < 1470009600) : ?>
<script type="text/javascript">
function buttons(){
var kCanonical = document.querySelector("link[rel='canonical']").href;
window.kCompositeSlug = kCanonical.replace('https://','http://');
return;
}
buttons();
var addthis_share = { url: ''+kCompositeSlug+'' };
</script>
<?php endif; ?>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ID-GOES-HERE" async="async"></script>
Here is my code that worked on a client's Joomla / K2 site, this is part of my item template override:
<?php if (strtotime($this->item->publish_up) < 1503201600) : ?>
<!-- Non SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE' data-link='http://www.yoursite.com<?php echo $this->item->link; ?>'></div>
<?php else: ?>
<!-- Regular SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE'></div>
<?php endif; ?>
Details / analysis of solution here:
https://www.covingtoncreations.com/blog/solution-for-lost-share-count-after-moving-to-ssl-https
Does it work on a Joomla website which uses Sharethis not AddThis ?
Currently I have the following code in the
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<meta property="fb:app_id" content="XXXXXXXXXXXX"/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXXXXXXXXX=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
this is a page built on example
<html>
<head>
<title>Demo: Getting an email address using the Google+ Sign-in button</title>
<style type="text/css">
html, body { margin: 0; padding: 0; }
.hide { display: none;}
.show { display: block;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<!--<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>-->
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
<script type="text/javascript">
/*
* Triggered when the user accepts the sign in, cancels, or closes the
* authorization dialog.
*/
function loginFinishedCallback(authResult) {
if (authResult) {
console.log('authResult : ',authResult);
if (authResult['error'] == undefined){
gapi.auth.setToken(authResult); // Store the returned token.
toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
getEmail(); // Trigger request to get the email address.
} else {
console.log('An error occurred');
}
} else {
console.log('Empty authResult'); // Something went wrong
}
}
/*
* Initiates the request to the userinfo endpoint to get the user's email
* address. This function relies on the gapi.auth.setToken containing a valid
* OAuth access token.
*
* When the request completes, the getEmailCallback is triggered and passed
* the result of the request.
*/
function getEmail(){
// Load the oauth2 libraries to enable the userinfo methods.
gapi.client.load('oauth2', 'v2', function() {
var request = gapi.client.oauth2.userinfo.get();
request.execute(getEmailCallback);
});
}
function getEmailCallback(obj){
var el = document.getElementById('email');
var email = '';
console.log("OBJ = ",obj)
if (obj['email']) {
email = 'Email: ' + obj['email'];
}
//console.log(obj); // Uncomment to inspect the full object.
el.innerHTML = email;
toggleElement('email');
}
function toggleElement(id) {
var el = document.getElementById(id);
if (el.getAttribute('class') == 'hide') {
el.setAttribute('class', 'show');
} else {
el.setAttribute('class', 'hide');
}
}
</script>
</head>
<body>
<div id="signin-button" class="show">
<div class="g-signin" data-callback="loginFinishedCallback"
data-approvalprompt="auto"
data-clientId="751931329576.apps.googleusercontent.com"
data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
data-height="short"
data-cookiepolicy="http://semicon-equip.com"
>
</div>
<!-- In most cases, you don't want to use approvalprompt=force. Specified
here to facilitate the demo.-->
</div>
<div id="email" class="hide"></div>
</body>
</html>
Question 1: It always fails with "Uncaught TypeError: Cannot read property 'load' of undefined",
until I use
<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
instead of the example code:
<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
What's the difference between plusone.js and client:plusone.js ?
Question 2: Why the code run twice per page loads ?
Qestion 3: the user was logged out after he just signed in, how to fix ?
error demo page for the above (all the errors are in the background console).
This is not really an answer to the question, but a step by step procedure to reproduce it.
Below the simple html page I'm using to test (similar to the example from Ray C Lin).
I've made it as simple as possible to avoid interactions with other part of the code :
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<input type="button" id="signOut" value="Sign out"></button>
<span id="signinButton">
<span class="g-signin"
data-accesstype="offline"
data-callback="signinCallback"
data-clientid="YOUR_CLIENT_ID_HERE"
data-cookiepolicy="single_host_origin"
data-scope="email"
</span>
</span>
<script type="text/javascript">
$('#signOut').on('click', function() {
gapi.auth.signOut();
});
function signinCallback(authResult) {
console.log("signinCallback: ", authResult);
}
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
You will have to update data-clientid with your own google client id, and display this page from an authorized javascript origin.
Please note that this might not work from localhost, as Ian suggested in a comment to this post https://plus.google.com/102746521318753162868/posts/Z5Gkro9YXVs
First, sign in using your Google account : you will see a successful callback in the console.
If you click on Sign out, you will see a callback with 'user_signed_out' in the console.
So far so good.
Sign-in again, and wait 1 hour, until the token expires (this is awful to test, as I don't know how to reduced the token lifetime).
After one hour, click on the sign out button : no callback is called.
Click on the sign-in button again :
you get a successfull callback with an authorization code and access token
immediately after, you get a 'user_signed_out' callback.
Once a session has expired, there is no way to return to a "normal" situation, you always get this second callback with 'user_signed_out'.
Actually, there is one way to return to a "normal" situation: revoke the access to the app from the google dashboard.
This is not really an issue for me as I'm using Google+ only to sign-in the user to my app using the one time authorization code, and I'm not using the access token from the client.
But this prevent automatic login from working, as the user is immediately considered as "signed out" from a google perspective.
Q1: client:plusone.js is just telling the loader to automatically load the "client" module. It's basically automatically doing gapi.load("client"), except it is already packaged up for you in one download. You could do it the other way around as well, plusone:client.js!
Q2: Not sure, it may be some JS quirk. In general, try and make your code able to handle multiple callbacks, you may get another if the state changes (e.g. the user logs out of their google account).
Q3: I don't see that on the test page - I am signed OK, and still signed in on refresh! Check you're not blocking third party cookies in your browser or similar?
I am trying to get my apps script webapp to execute as "user accessing the webapp", but its bigquery should run as me, the developer. (If I run the webapp as me, everything works...) I looked at the documentation at https://developers.google.com/bigquery/docs/authorization. There is no apps script example, so I tried to get the javascript example working.
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function auth() {
gapi.auth.authorize(config, function() {
gapi.client.load('bigquery', 'v2');
$('#client_initiated').html('BigQuery client authorized');
$('#auth_button').fadeOut();
$('#dataset_button').fadeIn();
});
}
// User Submitted Variables
var projectNumber = 'XXXXXXXXXX';
var clientId = 'XXXXXXXXXX.apps.googleusercontent.com';
var config = {
'client_id': clientId,
'scope': 'https://www.googleapis.com/auth/bigquery'
};
function listDatasets() {
var request = gapi.client.bigquery.datasets.list({
'projectId':projectNumber
});
request.execute(function(response) {
$('#result_box').html(JSON.stringify(response.result.datasets, null));
});
}
</script>
</head>
<body>
<button id="auth_button" onclick="auth();">Authorize</button>
<div id="client_initiated"></div>
<button id="dataset_button" style="display:none;" onclick="listDatasets();">Show datasets</button>
<div id="result_box"></div>
</body>
</html>
I generated a client id as a browser app with https://script.google.com as the server address. With the code above, I get this error: Cannot read property 'authorize_m___' of undefined.
My question is twofold: 1) Would an apps script webapp authenticate in the same way as the javascript app authenticates? I.e. can I use that code as a guide for my apps script?
And 2) any suggestions about how to debug the javascript sample code? Note that I ran this code as an apps script webapp.... That is probably an error....
The answer... or workaround answer is given here: How to pass parameters from one Google-Apps-Script to another and execute?
I can use two stage authentication in place of direct authentication: the user logs in as him/herself, I get the user's name to find their files, then switch to a webapp that uses BigQuery and execs as me, the developer.
A good workaround for advanced services authentication under apps scripts....
I'm really new on Angular JS development and I'm trying to implement the following authentication module : https://github.com/witoldsz/angular-http-auth (more info at http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application), to my project .
THE MODULE
The module has been thought to allow the following scenario :
user asks for: something.com/secured/formXyz,
server sends a login form,
user logs in, fills a long and complicated form, but they are doing it so long that theirs session expires,
user submits a form, but since the session is not valid anymore, login screen appears,
once user logs in, server can process the submitted form, **no need to re-enter everything again**.
The solution to do such a thing is :
server side behavior :
for every /resources/* call, if user is not authorized, response a 401 status. Otherwise, when user is authorized or when not a /resources/* request, send what client asked for.
client side behavior :
capture 401 response,
save the request parameters, so in the future we can reconstruct original request,
create and return new object representing server’s future answer (instead of returning the original failed response),
broadcast that login is required, so application can react, in particular login form can appear,
listen to login successful events, so we can gather all the saved request parameters, resend them again and trigger all the ‘future’ objects (returned previously).
MY PROJECT
My project is a basic one, which uses the $route service. When I try to add the directive which catch the events :
scripts/directives/login-directive.js
angular.module('myApp', ['http-auth-interceptor','content-mocks'])
/**
* This directive will find itself inside HTML as a class,
* It is responsible for showing/hiding login form.
*/
.directive('authDirective', function() {
return {
restrict: 'C',
link: function(scope, elem, attrs) {
var login = elem.find('#login');
var main = elem.find('#main');
login.hide();
main.show();
scope.$on('event:auth-loginRequired', function() {
login.show();
main.hide();
});
scope.$on('event:auth-loginConfirmed', function() {
main.show();
login.hide();
});
}
}
});
to my index.html :
<body ng-app='myApp' class='auth-directive'>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/json3/lib/json3.min.js"></script>
<![endif]-->
<div id="login" name="login">
<p>login</p>
</div>
<div id="main" name="main">
<p>main</p>
<div class="container" ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/angular-cookies/angular-cookies.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>
<script src="components/angular-http-auth/angular-mocks-1.0.1.js" type="text/javascript"></script>
<script src="components/angular-http-auth/http-auth-interceptor.js" type="text/javascript"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/directives/login-directive.js"></script>
<script src="scripts/mocks/content-mocks.js" type="text/javascript"></script>
</body>
The directive ngView doesn't work anymore. Nothing appears on console log. Is there any incompatibility between the two directives ?
By the look of your login-directive files it seems that you are (improperly) reinitialising you Angular app by passing the dependencies array as a second parameter to your angular.module call:
angular.module('myApp', ['http-auth-interceptor','content-mocks'])
Dependencies should be defines only once, when app is initialised (probably in app.js), and when you want to reference your application in another file you should call the angular.module without the second parameter:
angular.module('myApp')
.directive('authDirective', function() { ...
I've created an Web API controller in my MVC project. Whenever I try to POST to this controller, it try's to initiate a File download, and I am not sure why. It happens if I navigate to the API controller via URL or if it's done via a Form post.
It's a very simple scenario where an File is to be uploaded via a post.
Here is the controller code. Any ideas?
public class UploadController : ApiController
{
public async Task<List<string>> Post()
{
// Verify that this is an HTML Form file upload request
if (!Request.Content.IsMimeMultipartContent("form-data"))
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
// Create a stream provider for setting up output streams that saves the output under c:\tmp\uploads
// If you want full control over how the stream is saved then derive from MultipartFormDataStreamProvider
// and override what you need.
MultipartFormDataStreamProvider streamProvider = new MultipartFormDataStreamProvider("c:\\tmp\\");
var task = await Request.Content.ReadAsMultipartAsync(streamProvider);
return new List<string>();
}
Here is the client code:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Multiple File Upload Sample</title>
</head>
<body>
<form action="http://localhost:8080/api/upload" enctype="multipart/form-data" method="POST">
What is your name?
<input name="submitter" size="40" type="text"><br>
What files are you uploading?
<input name="data" type=file multiple>
<br>
<input type="submit" />
</form>
</body>
</html>
I suspect that you are using Internet Explorer to test this example, aren't you? But this browser always prompts for download when the server sends JSON (yeah IE sucks like hell, we all know that, please use a real web browser when you are doing web development). Your controller action returns JSON that IE is incapable of displaying inline and it asks you to save it on the client. I don't know what else did you expect? Your controller action returns an empty array as JSON. You have an HTML form to upload a file and the result of this file upload is an empty JSON array that IE doesn't know how to handle.
If you use an HTML client form you probably wanna return HTML from this API controller action, right?