Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

18 April 2019

Implement reCaptcha V3 in ASP.NET

What is reCaptcha ?


reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a turing test to tell human and bots apart. It is easy for humans to solve, but hard for “bots” and other malicious software to figure out. By adding reCAPTCHA to a site, you can block automated software while helping your welcome users to enter with ease.

But in reCAPTCHAv3 there is just no button to click on, google just "watches" the client and determines whether there is a human controlling the mouse etc. on the other side.

reCAPTCHA v3 will never interrupt your users, so you can run it whenever you like without affecting conversion. reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.



Here I am showing you how to integrate reCAPTCHAv3 in asp.net Application .



From frontend (.aspx page) you need to send ajax request to pass the token to backend server . Using "recaptcha.execute" U can get the response , and pass the token using ajax request .Please check the code block .

<script src="https://www.google.com/recaptcha/api.js?render=recaptchaSiteKey"></script>
<script>
 grecaptcha.ready(function() {
 grecaptcha.execute('recaptchaSiteKey', {action: 'homepage'}).then(function(token) {

            $.ajax({
                //pass the toket to Webmethod using Ajax
            });
          });
     });
</script>

Reference link: https://developers.google.com/recaptcha/docs/verify https://developers.google.com/recaptcha/docs/display#js_api

Now in the aspx.cs you need to write a "[WebMethod]" to receive the token from Ajax request .
[WebMethod]
    public static void CaptchaVerify(string token)
    {
            var responseString = RecaptchaVerify(token);
            ResponseToken response = new ResponseToken();
            response = Newtonsoft.Json.JsonConvert.DeserializeObject(responseString.Result);

    }
 
To get the response from google recapcha api u need to use async call using httpClient . you also need to create a class which will contain same properties like the response string . After getting the "responseString" u need to convert the response to ResponseToken object by using Newtonsoft.Json. response = Newtonsoft.Json.JsonConvert.DeserializeObject(responseString.Result);


private string apiAddress = "https://www.google.com/recaptcha/api/siteverify";

private string recaptchaSecret = googleRecaptchaSecret;

        public async Task RecaptchaVerify(string recaptchaToken)
        {
            string url = $"{apiAddress}?secret={recaptchaSecret}&response={recaptchaToken}";
            using (var httpClient = new HttpClient())
            {
                try
                {

                    string responseString=  httpClient.GetStringAsync(url).Result;
                    return responseString;

                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message);
                }
            }
        }


        public class ResponseToken
        {

            public DateTime challenge_ts { get; set; }
            public float score { get; set; }
            public List ErrorCodes { get; set; }
            public bool Success { get; set; }
            public string hostname { get; set; }
        }
  

14 June 2015

Integrating SVG and the Canvas Element in HTML




One option is to embed both the SVG and the canvas element directly into the HTML page, and then access the canvas element from script within SVG:

<!DOCTYPE html>
<head>
<title>Canvas and SVG</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="myCanvas" width="400px" height="100px" >
<p>canvas item alternative content</p>
</canvas>
<svg id="svgelem" height="400" >
<title>SVG Circle</title>
<script type="text/javascript" >
window. onload = function () {
document. getElementById("myCanvas" ). getContext('2d' );
context. fillStyle = 'rgba(0,200,0,0.7)' ;
context. fillRect(0, 0, 100, 100);
};
</script>
<circle id="redcircle" cx="100" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>


Or you can embed the canvas element as a foreign object directly in the SVG:


<!DOCTYPE html>
<html>
<head>
<title>Accessing Inline SVG</title>
<meta charset="utf-8" >
</head>
<body>
<svg id="svgelem" height="400" width="600" >
<script type="text/javascript" >
window. onload = function () {
var context2 = document. getElementById("thisCanvas" ). getContext('2d' );
context2. fillStyle = "#ff0000" ;
context2. fillRect(0, 0, 200, 200);
};
</script>
<foreignObject width="300" height="150" >
<canvas width="300" height="150" id="thisCanvas" >
alternate content for browsers that do not support Canvas
</canvas>
</foreignObject>
<circle id="redcircle" cx="300" cy="100" r="100" fill="red" stroke="#000" />
</svg>
</body>
</html>



When the SVG element is embedded into the current web page, you can access HTML elements from within the SVG. However, you can also embed elements directly in SVG, using the SVG foreignObject element. This element allows us to embed XHTML, MathML, RDF, or any other XML-based syntax.

In both solutions, I was able to use getElementById(). However, if I want to manipulate the elements using other methods, such as getElementsByTagName(), I have to be care‐ful about which version of the method I use. For instance, I can use getElementsByTag Name() for the outer canvas element, but I would need to use the namespace version of the method, getElementsByTagNameNS, if the contained object is XML, such as RDF/ XML. Because the embedded object in the solution is HTML5, a namespace wasn’t necessary.

Once you have the canvas context, use the element like you would from script within HTML: add rectangles, draw paths, create arcs, and so on.

9 June 2015

Setting a Rounded Border Around an Image using CSS





Rounded Border Around an Image is better than a normal image .Using Css3 we can handle the image border and can  add some extra visual effect on it.In this tutorial ,I am going to show u these things .

Set the border value and then use the CSS3 border-radius property along with its browser-specific border-radius properties.


div{
background-image: url(Smoker.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}



The radius is half the distance of a circle’s diameter and is used to set the amount of curvature on the corner. The higher the value for the radius, the more rounded the corner will be.
At the time of this writing, the border-radius property isn’t supported as is; however, the proprietary properties in both Firefox and Safari replicate the effect. The main drawback (other than cross-browser support) is that the names of the border properties are not consistent.

Specifying corners :
Rounded corners are also rendered on individual corners, not just all four corners. To set the rounded effect on only one or a few corners, specify each rounded corner individually in the CSS rule. For example, the following CSS rule defines that all corners be rounded except for the top-right corner:





div#roundbkgd {
background-image: url(smoker.jpg);
width: 375px;
height: 500px;
border: 8px solid #666;
/* top-left corner */
border-top-left-radius: 40px;
-webkit-border-top-left-radius: 40px;
/* bottom-right corner */
border-bottom-right-radius: 40px;
-webkit-border-bottom-right-radius: 40px;
/* bottom-left corner */

border-bottom-left-radius: 40px;
-webkit-border-bottom-left-radius: 40px;



If the image is inline, or placed within the HTML and not as a background image, the rounded borders are shown behind the image instead of clipping the image.



img {
width: 375px;
height: 500px;
border: 8px solid #666;
background: #fff;
display:block;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

[ Opera is scheduled to support border-radius for the next major release after Opera 10. ]

5 June 2015

Accessing SVG from Web Page Script using JavaScript






Scalable Vector Graphics 0r SVG is the new XML-based graphics standard from the W3C that will enable Web documents to be smaller, faster and more interactive.
If the SVG is embedded directly in the web page, access the element and its attributes using the same functionality you would use with any other web page element:
var square = document. getElementById("ssquare" );
squaresetAttribute("width" , "500" );
However, if the SVG is in an external SVG file embedded into the page via an object element, you have to get the document for the external SVG file in order to access the SVG elements. The technique requires object detection because the process differs by browser:
// set element onclick event handler
window. onload=function () {
var object = document. getElementById("object" );
var svgdoc;
try {
svgdoc = objectcontentDocument;
catch(e) {
try {
svgdoc = objectgetSVGDocument();
catch (e) {
alert("SVG in object not supported in your environment" );
}
}
if (! svgdoc) return;
var square = svgdocgetElementById('square' );
square. setAttribute("width" , "500" );
The first option listed in the solution accesses SVG embedded in an HTML file. You can access SVG elements using the same methods you’ve used to access HTML elements. The second option is a little more involved, and depends on retrieving the document object for the SVG document. The first approach tries to access the contentDocument
property on the object. If this fails, the application then tries to access the SVG document using getSVGDocument(). Once you have access to the SVG document object, you can use the same DOM methods you would use with elements native to the web page.
<!DOCTYPE html>
<head>
<title>SVG in Object</title>
<meta charset="utf-8" />
</head>
<body>
<object id="object" data="rect.svg"
style="padding: 20px; width: 600px; height: 600px" >
<p>No SVG support</p>
</object>
<script type="text/javascript" >
var object = document. getElementById("object" );
object. onload=function() {
var svgdoc;
// get access to the SVG document object
try {
svgdoc = objectcontentDocument;
catch(e) {
try {
svgdoc = objectgetSVGDocument();
catch (e) {
alert("SVG in object not supported in your environment" );
}
}
if (! svgdocreturn;
var r = svgdocrootElement;
// get SVG element and modify
var square = svgdoc. getElementById('square' );
square. onclick = function() {
var width = parseFloat(square. getAttribute("width" ));
width-=50;
squaresetAttribute("width" , width);
var color = square. getAttribute("fill" );
if (color == "blue" ) {
squaresetAttribute("fill" , "yellow" );
square. setAttribute("stroke" , "green" );
else {
squaresetAttribute("fill" , "blue" );
squaresetAttribute("stroke" , "red" );
}
}
}
</script>
</body>
In addition to the different approaches to get the SVG document, you also have to handle browser differences in how the onload event handler works. Firefox and Opera fire the onload event handler for the window after all the document contents have loaded, including the SVG in the object element. However, Safari and Chrome, probably because of the shared core, fire the window.onload event handler before the SVG has finished loading.
In the example code, the object is accessed in script after it has loaded; the object.on load event handler is then accessed to get the SVG document and assigned the function to the onclick event handler.