ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > Javascript > 为登录和注册实现JS和PHP Restful API用户身份验证

为登录和注册实现JS和PHP Restful API用户身份验证

Javascript 作者：cenfeng 时间：2019-06-24 11:55:41 0 删除 编辑

今天的帖子解释了如何为React JS应用程序实现登录身份验证系统。 它将向您展示如何使用用户登录并存储用户会话，因此它处理基于令牌的身份验证。 由于我们使用基于令牌的身份验证，因此可以保护是否有任何未经授权的请求，并在需要时通知新登录。 与任何其他身份验证系统相比，这使您的应用程序的身份验证更安全。 每个用户详细信息都将存储在外部数据库中，后端使用基于PHP的API来处理此身份验证。 希望您能够更轻松地将其用作ReactJS项目中的身份验证系统。

数据库设计
要构建用户订阅源系统，您必须创建两个表，例如Users和Feed。 您可以查看我之前的教程，了解如何 创建基于令牌的API系统 。

Users
User 表包含所有用户注册详细信息。

CREATE TABLE  users (
user_id  int   AUTO_INCREMENT   PRIMARY KEY ,
username  varchar (50),
password  varchar (300),
name  varchar (200),
email  varchar (300));


Feed
此表包含用户每日更新

CREATE TABLE  feed (
feed_id  int   PRIMARY KEY   AUTO_INCREMENT ,
feed  text ,
user_id_fk  int
);


下载PHP Restul项目

$git clone  https://github.com/srinivastamada/PHP-Slim-Restful.git


welcome.js
如前一个教程中的解释，只需包含Login和Signup组件链接。

import React , { Component } from 'react' ;
import './Welcome.css' ;

class Welcome extends Component {
render () {
return (
< div className = "row " id = "Body" >
< div className = "medium-12 columns" >
< h2 id = "welcomeText" > Make people fall in love with your ideas </ h2 >
< a href = "/login" className = "button" > Login </ a >
< a href = "/signup" className = "button success" > Signup </ a >
</ div >
</ div >
);
}
}
export default Welcome ;



Step 1 - Login.js 
第1步 - Login.js
设计登录组件，这里只包含登录表单的HTML。 具有超强的属性创建构造函数的 intitiating global  this

import React , { Component } from 'react' ;
import './Login.css' ;
class Login extends Component {
constructor (){
super ();
};
}

render () {
return (
< div className = "row" id = "Body" >
< div className = "medium-5 columns left" >
< h4 > Login </ h4 >
< label > Username </ label >
< input type = "text" name = "username" placeholder = "Username" />
< label > Password </ label >
< input type = "password" name = "password" placeholder = "Password" />
< input type = "submit" className = "button success" value = "Login" />
< a href = "/signup" > Registration </ a >
</ div >
</ div >
);
}
}
export default Login ;


第2步 - Login.js
在构造函数中定义了用于更改输入字段的状态对象。 Login（）函数将与RESTful API进行通信，onChange函数根据用户输入值设置状态值。

import React , { Component } from 'react' ;
import './Login.css' ;
class Login extends Component {

constructor (){
super ();
this . state = {
username : '' ,
password : '' ,
redirectToReferrer : false
};
this . login = this . login . bind ( this );
this . onChange = this . onChange . bind ( this );
}
login () {
//API Action Here
}

onChange (e){
this . setState ({[ e .target.name] : e .target.value});
}

render () {
return (
< div className = "row" id = "Body" >
< div className = "medium-5 columns left" >
< h4 > Login </ h4 >
< label > Username </ label >
< input type = "text" name = "username" onChange = { this . onChange } />
< label > Password </ label >
< input type = "password" name = "password" onChange = { this . onChange } />
< input type = "submit" value = "Login" onClick = { this . login } />
< a href = "/signup" > Registration </ a >
</ div >
</ div >
);
}
}
export default Login ;



PostData.js
在 src / service中 创建一个导出类，用于获取RESTful调用并返回Promise。

export function PostData ( type , userData ) {
let BaseURL = 'https://api.thewallscript.com/restful/' ;
//let BaseURL = 'http://localhost/PHP-Slim-Restful/api/';
return new Promise((resolve, reject) => {
fetch (BaseURL + type, {
method : 'POST' ,
body : JSON . stringify (userData)
})
. then ((response) => response . json ())
. then ((res) => {
resolve (res);
})
. catch ((error) => {
reject (error);
});
});
}



最终Login.js
导入Redirect和PostData组件。 登录功能将状态redirtion值设置为true，一个API成功。 根据state.redirection值，页面将重定向到主页。

import React , { Component } from 'react' ;
import { Redirect } from 'react-router-dom' ;
import { PostData } from '../../services/PostData' ;
import './Login.css' ;
class Login extends Component {
constructor (){
super ();
this . state = {
username : '' ,
password : '' ,
redirectToReferrer : false
};
this . login = this . login . bind ( this );
this . onChange = this . onChange . bind ( this );
}

login () {
if ( this . state . username && this . state . password ){
PostData ( 'login' , this . state ). then ((result) => {
let responseJson = result;
if ( responseJson . userData ){
sessionStorage . setItem ( 'userData' , JSON . stringify (responseJson));
this . setState ({redirectToReferrer : true });
}
});
}
}

onChange (e){
this . setState ({[ e .target.name] : e .target.value});
}
render () {

if ( this . state . redirectToReferrer || sessionStorage . getItem ( 'userData' )){
return ( < Redirect to = { '/home' } /> )
}

return (
< div className = "row" id = "Body" >
< div className = "medium-5 columns left" >
< h4 > Login </ h4 >
< label > Username </ label >
< input type = "text" name = "username" onChange = { this . onChange } />
< label > Password </ label >
< input type = "password" name = "password" onChange = { this . onChange } />
< input type = "submit" value = "Login" onClick = { this . login } />
< a href = "/signup" > Registration </ a >
</ div >
</ div >
);
}
}
export default Login ;


PHP
此代码包含带有PDO MySQL连接的login ang sigup函数，它适用于Slim框架。 从GitHub下载这个项目。

<?php
require   'config.php' ;
require   'Slim/Slim.php' ;

\ Slim \Slim :: registerAutoloader ();
$app   =   new  \Slim\ Slim ();

$app -> post ( '/login' , 'login' );  /* User login */
$app -> post ( '/signup' , 'signup' );  /* User Signup */
$app -> post ( '/feed' , 'feed' );  /* User Feeds */
$app -> post ( '/feedUpdate' , 'feedUpdate' );  /* User Feeds */
$app -> post ( '/feedDelete' , 'feedDelete' );  /* User Feeds */
//$app->post('/userDetails','userDetails'); /* User Details */

$app -> run ();

/************************* USER LOGIN *************************************/
/* ### User login ### */
function   login () {
    $request   =  \ Slim \Slim :: getInstance () -> request ();
    $data   =   json_decode ( $request -> getBody ());
    try  {
       $db   =   getDB ();
       $userData   = '' ;
       $sql   =   " SELECT  user_id, name, email, username  FROM  users  WHERE (username = :username  or  email = :username)  and  password = :password  " ;
      $stmt   =   $db -> prepare ( $sql );
      $stmt -> bindParam ( "username" ,  $data -> username ,  PDO :: PARAM_STR );
      $password = hash ( 'sha256' , $data -> password );
      $stmt -> bindParam ( "password" ,  $password ,  PDO :: PARAM_STR );
      $stmt -> execute ();
      $mainCount = $stmt -> rowCount ();
      $userData   =   $stmt -> fetch ( PDO :: FETCH_OBJ );
if ( ! empty ( $userData ))
{
     $user_id = $userData -> user_id ;
     $userData -> token   =   apiToken ( $user_id );
}
    $db   =   null ;
if ( $userData ){
   $userData   =   json_encode ( $userData );
   echo   '{"userData": '   . $userData   .   '}' ;
}  else  {
   echo   '{"error":{"text":"Bad request wrong username and password"}}' ;
}

}
catch ( PDOException   $e ) {
echo   '{"error":{"text":' .   $e -> getMessage ()  . '}}' ;
}
}


/* ### User registration ### */
function   signup () {
   $request   =  \ Slim \Slim :: getInstance () -> request ();   
   $data   =   json_decode ( $request -> getBody ());
   $email = $data -> email ;
   $name = $data -> name ;
   $username = $data -> username ;
   $password = $data -> password ;
   try  {
       $username_check   =   preg_match ( '~^[A-Za-z0-9_]{3,20}$~i' ,  $username );
       $email_check   =   preg_match ( '~^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.([a-zA-Z]{2,4})$~i' ,  $email );
      $password_check   =   preg_match ( '~^[A-Za-z0-9!@#$%^&*()_]{6,20}$~i' ,  $password );
     
    if  ( strlen ( trim ( $username )) >   &&   strlen ( trim ( $password )) >   && strlen ( trim ( $email )) >   &&   $email_check >   &&   $username_check >   && $password_check > )
   {
    $db   =   getDB ();
    $userData   =   '' ;
    $sql   =   " SELECT  user_id  FROM  users  WHERE  username = :username  or email = :email " ;
    $stmt   =   $db -> prepare ( $sql );
    $stmt -> bindParam ( "username" ,  $username , PDO :: PARAM_STR );
    $stmt -> bindParam ( "email" ,  $email , PDO :: PARAM_STR );
    $stmt -> execute ();
   $mainCount = $stmt -> rowCount ();
   $created = time ();
   if ( $mainCount == )
  {
    /*Inserting user values*/
     $sql1 = " INSERT INTO users(username,password,email,name) VALUES (:username,:password,:email,:name) " ;
      $stmt1   =   $db -> prepare ( $sql1 );
      $stmt1 -> bindParam ( "username" ,  $username , PDO :: PARAM_STR );
      $password = hash ( 'sha256' , $data -> password );
      $stmt1 -> bindParam ( "password" ,  $password , PDO :: PARAM_STR );
      $stmt1 -> bindParam ( "email" ,  $email , PDO :: PARAM_STR );
      $stmt1 -> bindParam ( "name" ,  $name , PDO :: PARAM_STR );
      $stmt1 -> execute ();
      $userData = internalUserDetails ( $email );
        }
      $db   =   null ;

if ( $userData ){
      $userData   =   json_encode ( $userData );
        echo   '{"userData": '   . $userData   .   '}' ;
}  else  {
        echo   '{"error":{"text":"Enter valid data"}}' ;
}

}
else {
        echo   '{"error":{"text":"Enter valid data"}}' ;
}
}
catch ( PDOException   $e ) {
        echo   '{"error":{"text":' .   $e -> getMessage ()  . '}}' ;
}
}
?>

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69933200/viewspace-2648506/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： JavaScript ES6值得掌握的五大功能
下一篇： 如何快速去除抖音视频水印
请登录后发表评论 登录
全部评论
cenfeng

注册时间：2019-06-18

  • 博文量
    125
  • 访问量
    129477

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593