Http\/Controllers\/AuthController.php<\/code> by the following command:<\/p>\n\n\n\nphp artisan make:controller AuthController<\/pre>\n\n\n\nAnd put below code:<\/p>\n\n\n\n
<?php
namespace App\\Http\\Controllers;
use Illuminate\\Http\\Request;
use Illuminate\\Support\\Facades\\Auth;
use Carbon\\Carbon;
use App\\User;
use DB;
use Validator;
class AuthController extends Controller
{
private $successStatus = ['api_status' =>1 ,'code' => 200,];
private $wrongHTTP = ['response'=>['api_status'=>0,'code'=>400,
'message'=>'Your HTTP method is not correct']];
public function signup(Request $request)
{
if($request->isMethod('post'))
{$validator = Validator::make($request->all(), [
'name' => 'required',
'email' => 'required|email',
'password' => 'required',
]);
if ($validator->fails()) {
return response()->json(['response'=>[
'code'=>400,
'api_status'=>0,
'message'=>'Data is not in the
proper format',]]);
}
$email = $request->email;
$eid =DB::table('users')->where('email' , $email)->exists();
if($eid == true)
{
return response()->json(['response'=>[
'api_status' => 0 ,
'code' => 400,
'message'=> 'This email already exist'
]],400);
}
else
{
$input = $request->all();
$input['password'] = bcrypt($input['password']);
$user = User::create($input);
$token = $user->createToken('Personal Access Token')-> accessToken;
$name = $user->name;
$email = $user->email;
return response()->json(['response' => [
'api_status'=>1,
'code'=>201,
'message' => 'Successfully registered',
]
],201);
}
}
return response()->json($this -> wrongHTTP, 400);
}
} <\/pre>\n\n\n\nStep 2: Create Route<\/h5>\n\n\n\n
Open api.php<\/code> from routes folder , and replace the code of route with the following<\/p>\n\n\n\nRoute::group([
'prefix' => 'auth',
], function () {
Route::any('signup', 'AuthController@signup');
}); <\/pre>\n\n\n\nStep 3: Run API<\/strong><\/a><\/h5>\n\n\n\nNow we are ready to run our API so run below command to quick run:<\/p>\n\n\n\n
php artisan serve<\/pre>\n\n\n\nyou will get an url something like this http:\/\/localhost:8000<\/code> or http:\/\/127.0.0.1:8000<\/code><\/p>\n\n\n\nStep 4: Test API<\/h5>\n\n\n\n
To test the API, use a tool called Postman, you may have different IP and port number and after the port number, you should use this \/api\/auth\/signup<\/code> <\/p>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/step-control.png\")
<\/a><\/figure><\/div>\n\n\n\nNOTE:<\/strong> If you want to Interact with this api from the frontend (i.e. vuejs), then you need to follow the below steps<\/p>\n\n\n\nStep 5: Set the URL<\/h5>\n\n\n\n- From 2nd step you will get an URL which looks something like this
http:\/\/localhost:8000<\/code> or http:\/\/127.0.0.1:8000<\/code> <\/li>- Create a webServices folder at location
resources\/js\/<\/code><\/li>- Create a file named
index.js<\/code><\/li>- Then you have to place this
http:\/\/127.0.0.1:8000<\/code> url in resources\/js\/webServices\/index.js<\/code> rest of the parameters will remain same.import axios from 'axios';\n\nlet webService = axios.create({\n baseURL: 'http:\/\/127.0.0.1:8000\/api\/auth'\n});\n\nexport default webService;\n<\/pre><\/li><\/ol>\n\n\n\n5. For signup <\/code>with laravel-passport, Go to location resources->js->views->session->SignUpOne.vue <\/code>and add the sign up with laravel passport as shown in screenshot: <\/p>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/signupone.png\")
<\/a>SignUpOne.vue<\/figcaption><\/figure><\/div>\n\n\n\n6. For login<\/code> with laravel-passport, Go to location resources->js->views->session->LoginOne.vue<\/code> and add the login with laravel passport button as mentioned in screenshot.<\/p>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/loginone.png\")
<\/a>LoginOne.vue<\/figcaption><\/figure><\/div>\n\n\n\n 7. Call the signupWithLaravel<\/code> method as you have defined on the button click in the SignUpOne.vue<\/code> file and write following lines of code .<\/p>\n\n\n\n signupWithLaravel() {
let userDetail = {
name: this.name,
email: this.email,
password: this.password
};
this.$store.dispatch(\"signupUserWithLaravelPassport\", {
userDetail
});
},
signInWithFacebook() {
this.$store.dispatch(\"signinUserWithFacebook\", {
router: this.$router
});
...<\/pre>\n\n\n\n 8. Call the signInwithLaravelPassport<\/code> method as you have defined on the button click in the LoginOne.vue<\/code> file and write following lines of code .LoginOne.vue<\/p>\n\n\n\nsignInWithLaravelPassport(){
const user = {
email: this.email,
password: this.password
};
this.$store.dispatch(\"signInWithLaravelPassport\", {
user
});
},
signInWithFacebook() {
this.$store.dispatch(\"signinUserWithFacebook\");
},
...<\/pre>\n\n\n\n 9. Next, Go to location resources->js->store->modules->auth->index.js<\/code> and add the following lines of code under action<\/code> .<\/p>\n\n\n\n\/\/ actions
const actions = {
signupUserWithLaravelPassport(context, payload){
webServices.post('\/signup', JSON.stringify(payload.userDetail),{ headers: {'Content-Type':'application\/json'}})
.then(response => {
if(response.data.response.api_status){
context.commit('signUpUser');
Nprogress.done();
setTimeout(() => {
context.commit('signUpUserSuccess', payload);
}, 500);
}else{
context.commit('signUpUserFailure', response.data.response);
}
})
.catch(error => {
console.log(error);
console.log(\"Failed\");
})
},
signInWithLaravelPassport(context, payload){
const { user } = payload;
context.commit('loginUser');
webServices.post('\/login', JSON.stringify(user), { headers: {'Content-Type':'application\/json'}})
.then(response => {
if(response.data.response.api_status){
Nprogress.done();
setTimeout(() => {
context.commit('loginUserSuccess', user);
}, 500);
}else{
context.commit('loginUserFailure', response.data.response);
}
})
.catch(error => {
console.log(error);
console.log(\"Failed\");
})
},
...
}<\/pre>\n\n\n\n10. Then import the following line in the resources\/js\/store\/modules\/auth\/index.jsimport webServices from 'WebServices<\/code> As described in screenshot:<\/p>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/index.png\")
<\/a>index.js<\/figcaption><\/figure><\/div>\n\n\n\n11.Then open the webpack.mix.js file from your root directory and add the following line under mix.webpackConfig<\/code> as shown in screenshot<\/p>\n\n\n\n'WebServices': path.resolve(__dirname, 'resources\/js\/webServices\/'),<\/pre>\n\n\n\n![\"\"](\"https:\/\/docs.theironnetwork.org\/vuely\/wp-content\/uploads\/sites\/2\/2019\/09\/webpackmix.png\")
<\/a>webpack.mix.js<\/figcaption><\/figure><\/div>\n\n\n\nAfter doing above steps, run command npm run dev<\/code> to compile the all the project files and then run php artisan serve<\/code> command to run the project.<\/p>\n\n\n\nNote<\/strong>: To test the login or signup functionality, first you need to start mysql to interact with database from your local server. For E.g xampp.<\/p>\n