Directory of RSS feeds
Statistics

RSS feeds in the directory: 374

Added today: 0

Added yesterday: 0

Hi-Tech / Other

The phone number verification by SMS

Typical Internet guy ™ 08.06.2020 at 10:33

Vyacheslav Scoble: about creativity, about life and other nonsense, giving advice: how to live on the Internet, how to survive and what to do with all this

Widespread on commercial sites subjects received feedback forms such as "Request a call". Website user a form with fields: name and phone number . Fill in the data, the user waits for the call to the specified phone number. What if the user has specified not the phone?

Or a different situation: the user forgot his password of his account and as an alternative want to obtain a new password to your phone number (provided in your account). Of course, he must know your phone number and have it on hand, as SMS will come only on the attached phone.

Similar situations in the modern Internet realities set if you are a site administrator, dealing with user accounts, You will certainly be a useful function such as number verification (validation) of the mobile phone via SMS.

the Verification by SMS

to Verify the ownership of the phone number the user has: a phone number a one-time code sent in the SMS message with verification code on the website.

Form to confirm your phone via SMS (which we do own) looks like the following:

Form for verification phone for disposable SMS working Principle

the Main purpose of this script is to check the user entered one-time password sent by SMS to the phone number. If the user enters the correct verification code, a phone is considered verified and the administrator of the site can continue running scripts. Schematically, the test phone number is:

the User specifies a name and phone number; After pressing the button "Send code" to the specified phone number by SMS-gateway sends the generated numerical password code confirmation (the password is generated based on the amount of the secret phrase and a phone number consists of 5 digits); the Script expects a user to enter a confirmation code. The script continues to work if the user enters the correct code;

This script is not a "finished product", it only illustrates the mechanism of verification of the phone by SMS and will require You to adapt to the specific needs.

the Use of SMS gateway

First of all, we will need a SMS gateway which will send SMS. Recommend "seozona.sms.ru" (follow the link for registration) - he has a free daily limits that will allow us to save on sending SMS. Balance always keep a positive gateway to your SMS worked as a clock!

After the registration in "my account" in the menu find "Programmers", in this tab you will find Your api_id. You will need it next.

HTML form validation phone

will Create an HTML form to validate user's phone: modal window with input fields and data validation (an approximate form as in the screenshot above). To do this, create the file index.php c content:

verification of the phone using SMS

the Verification by SMS

×

Thank you. Authorization successful

Your name:

phone Number:

confirmation Code:

In this file, pay attention to the last line where you specify the mask for entering phone. For Ukraine: +38 (099) 999-99-99 for Russia: +7 (999) 999-99-99

And create a file with CSS styles called "style.css" (put it next to index.php)

#div1{

display: none;

}

#_out {

color: red;

}

#modal-ok {

display: none;

}

.modal-header h3 {

color: #555;

font-size: 20px;

font-weight: normal;

line-height: 1;

margin: 0;

}

.modal .btn-close {

color: #aaa;

cursor: pointer;

font-size: 50px;

text-decoration: none;

position: absolute;

right: 5px;

top: 0;

}

.modal .btn-close:hover {

color: red;

}

.modal-wrap:before {

content: "";

display: none;

background: rgba(0, 0, 0, .3);

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

z-index: 101;

}

.modal-overlay {

bottom: 0;

display: none;

left: 0;

position: fixed;

right: 0;

top: 0;

z-index: 102;

}

.modal-open:checked ~ .modal-wrap:before,

.modal-open:checked ~ .modal-wrap .modal-overlay {

display: block;

}

.modal-open:checked ~ .modal-wrap .modal-dialog {["newline"]- webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

-o-transform: translate(-50%, 0);

transform: translate(-50%, 0);

top: 20%;

}

.modal-dialog {

background: #fefefe;

border: none;

border-radius: 5px;

position: fixed;

width: 80%;

max-width: 500px;

left: 50%;

top: -100%;

-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);

-webkit-transform: translate(-50%, -500%);

-ms-transform: translate(-50%, -500%);

-o-transform: translate(-50%, -500%);

transform: translate(-50%, -500%);

-webkit-transition: -webkit-transform 0.4 s ease-out;

-moz-transition: -moz-transform 0.4 s ease-out;

-o-transition: -o-transform 0.4 s ease-out;

transition: transform 0.4 s ease-out;

z-index: 103;

}

.modal-body {

padding: 20px;

}

.modal-body p {

margin: 0;

}

.modal-header,

.modal-footer {

padding: 20px 20px;

}

.modal-header {

border-bottom: #eaeaea solid 1px;

}

.modal-header h3 {

font-size: 20px;

margin: 0;

}

.btn {

background: #fff;

border: #555 solid 1px;

border-radius: 3px;

cursor: pointer;

display: inline-block;

font-size: 14px;

padding: 8px 15px;

text-decoration: none;

text-align: center;

min-width: 60px;

position: relative;

color: #2870a0;

}

.btn:hover, .btn:focus {

background: #f2f2f2;

color: #000000;

text-decoration: underline;

}

.btn-primary {

background: #428bca;

border-color: #357ebd;

color: #2870a0;

}

.btn-primary:hover{

background: #66A1D3;

text-decoration: underline;

}

.img-circle{background-color:#f2b026;box-sizing:content-box;-webkit-box-sizing:content-box;}

.circlephone{box-sizing:content-box;-webkit-box-sizing:content-box;border: 2px solid #f2b026;width:150px;height:150px;bottom:-25px;right:10px;position:absolute;-webkit-border-radius:100%;-moz-border-radius: 100%;border-radius: 100%;opacity: .5;-webkit-animation: circle-anim 2.4 s infinite ease-in-out !important;-moz-animation: circle-anim 2.4 s infinite ease-in-out !important;-ms-animation: circle-anim 2.4 s infinite ease-in-out !important;-o-animation: circle-anim 2.4 s infinite ease-in-out !important;animation: circle-anim 2.4 s infinite ease-in-out !important;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5 s;}

.circle-fill{box-sizing:content-box;-webkit-box-sizing:content-box;background-color:#f2b026;width:100px;height:100px;bottom:0px;right:35px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: circle-fill-anim 2.3 s infinite ease-in-out;-moz-animation: circle-fill-anim 2.3 s infinite ease-in-out;-ms-animation: circle-fill-anim 2.3 s infinite ease-in-out;-o-animation: circle-fill-anim 2.3 s infinite ease-in-out;animation: circle-fill-anim 2.3 s infinite ease-in-out;-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all 0.5 s;}

.img-circle{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;bottom: 14px;right: 49px;position:absolute;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;opacity: .7;}

.img-circleblock{box-sizing:content-box;-webkit-box-sizing:content-box;width:72px;height:72px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAnCAMAAADTjiM/AAAAkFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+WABnwAAAAL3RSTlMA/F/uDUwjB/esmHJTRjPl39fRzr+6sqeijn0E8cnEtq+FeWtjKh4YFdaciIE5FLd9ggsAAAEESURBVCjPbdPpdoIwEAVgQlgEZEdWrVat2vW+/9u1dJLDMO38/C4nZ2ZCHKqgL/WH86eSHIAOhHotAAW4ghvgN4hWHHbECurO3YVxhSv/vIQJgJb5BdYVctZRx5x3dAQrf/Hdojs+wBPZpkqyibdZkz/L1RzIt9IbqNkT6R35WfpAPkgfTY+h8FSp2Yub8EArGlV4WEH9O0BMXk3Ct2YRqfBbTkEvD4rI9y/CfUVBLHwyq9aZCFxQNeE8z+XdHujVJhiy61EDtcdapWbFDxnZgPzNerYHL/1YlrGq1LoXrfzk2Hq8ci++lvvZ8MBley2Yj2zs+7m0fPhcvyh/7E9tnPzc6Tc7fz7JKsL/WwAAAABJRU5ErkJggg==');background-position: center center;background-repeat:no-repeat;animation-name: tossing;-webkit-animation-name: tossing;animation-duration: 1.5s;-webkit-animation-duration: 1.5s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;}

.img-circle:hover{opacity: 1;}

@keyframes pulse {0% {transform: scale(0.9);opacity: 1;}

50% {transform: scale(1); opacity: 1; }

100% {transform: scale(0.9);opacity: 1;}}

@-webkit-keyframes pulse {0% {-webkit-transform: scale(0.95);opacity: 1;}

50% {-webkit-transform: scale(1);opacity: 1;}

100% {-webkit-transform: scale(0.95);opacity: 1;}}

@keyframes tossing {

0% {transform: rotate(-8deg);}

50% {transform: rotate(8deg);}

100% {transform: rotate(-8deg);}}

@-webkit-keyframes tossing {

0% {-webkit-transform: rotate(-8deg);}

50% {-webkit-transform: rotate(8deg);}

100% {-webkit-transform: rotate(-8deg);}}

@-moz-keyframes circle-anim {

0% {-moz-transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;-moz-opacity: .1;-webkit-opacity: .1;-o-opacity: .1;}

30% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;-moz-opacity: .5;-webkit-opacity: .5;-o-opacity: .5;}

100% {-moz-transform: rotate(0deg) scale(1) skew(1deg);opacity: .6;-moz-opacity: .6;-webkit-opacity: .6;-o-opacity: .1;}}

@-webkit-keyframes circle-anim {

0% {-webkit-transform: rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity: .1;}

30% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);-webkit-opacity: .5;}

100% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);-webkit-opacity: .1;}}

@-o-keyframes circle-anim {

0% {-o-transform: rotate(0deg) kscale(0.5) skew(1deg);-o-opacity: .1;}

30% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);-o-opacity: .5;}

100% {-o-transform: rotate(0deg) scale(1) skew(1deg);-o-opacity: .1;}}

@keyframes circle-anim {

0% {transform: rotate(0deg) scale(0.5) skew(1deg);opacity: .1;}

30% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .5;}

100% {transform: rotate(0deg) scale(1) skew(1deg);

opacity: .1;}}

@-moz-keyframes circle-fill-anim {

0% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}

50% {-moz-transform: rotate(0deg) -moz-scale(1) skew(1deg);opacity: .2;}

100% {-moz-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

@-webkit-keyframes circle-fill-anim {

0% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2; }

50% {-webkit-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2; }

100% {-webkit-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

@-o-keyframes circle-fill-anim {

0% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}

50% {-o-transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}

100% {-o-transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

@keyframes circle-fill-anim {

0% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}

50% {transform: rotate(0deg) scale(1) skew(1deg);opacity: .2;}

100% {transform: rotate(0deg) scale(0.7) skew(1deg);opacity: .2;}}

Obrabotchik podtverzhdeniya nomera telefona po SMS vinesem v otdelniy fayl "act.php". Ego soderzhimoe: