1. At first we will design the UI. Where we will be adding three buttons for login with SMS, Facebook And Google.
Container(
child: Text('Or Login With'),
),
SizedBox(
height: 10,
),
Container(
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Register()),
);
},
child: Icon(Icons.sms),
),
SizedBox(
width: 20,
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Register()),
);
},
child: Icon(Icons.facebook),
),
SizedBox(
width: 20,
),
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Register()),
);
},
child: Icon(Icons.g_translate),
),
],
),
)2. Next, we will create a screen for login with SMS called smslogin screen.
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: EdgeInsets.only(top: 100, bottom: 0),
),
Image.network(
'https://indiawebdesigns.in/assets/img/forgot.png',
height: 300,
),
Container(
margin: EdgeInsets.only(left: 20, right: 20, top: 0, bottom: 5),
child: Text(
'Login to your Account',
style: TextStyle(fontSize: 25),
)),
Container(
margin: EdgeInsets.only(left: 20, right: 20, top: 5, bottom: 5),
child: TextField(
controller: phoneController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: '10 Digit Mobile Number',
focusColor: Colors.black,
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 50),
// Add left and right margin here
child: ElevatedButton(
onPressed: () {
forgotsms(context);
},
child: Text(
'Reset Password',
style: TextStyle(fontSize: 18, color: Colors.white),
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.deepPurple,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
minimumSize: Size(double.infinity, 40),
padding: EdgeInsets.symmetric(
horizontal: 20), // Add padding here if needed
),
),
),
Container(
margin: EdgeInsets.only(top: 20, bottom: 5),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Login()),
);
},
child: Text('Back to Previous',
style: TextStyle(fontSize: 15))),
),
],
),
),
);3. Now, we will create the function for checking if the number exists in database and if yes then hit the API of SMS
final TextEditingController phoneController = TextEditingController();
Future<void> forgotsms(BuildContext context) async {
String getPhone = phoneController.text;
// Make a POST request to the PHP file endpoint
var url = Uri.parse(
'https://indiawebdesigns.in/corporate-admin/controllers/Flutter/forgotsms.php');
var response = await http.post(url, body: {
'phone': getPhone
});
// Print the response and its body for debugging
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
// Parse the response JSON
var data = jsonDecode(response.body);
if (data != null && data['success'] != null && data['success']) {
// Navigate to the dashboard screen
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Home(),
),
);
} else {
// Show an error message
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Error'),
content: Text('Mobile Number Not Found.'),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('OK'),
),
],
);
},
);
}
}
4. We will then visit a website called mysms.webotapp.com and create an account and link it to our mobile
Once we receive the SMS API Key we will then create the script for sending SMS.
//curl
$curl = curl_init();
$message1 = "Dear $name, your otp for login is $otp. Thank you.";
$message2 = urlencode("$message1");
curl_setopt_array($curl, array(
CURLOPT_URL => "https://mysms.webotapp.com/services/send.php?key=YOUR-API-KEY&number=91$phone&message=$$message2&devices=3%7C0&type=sms&prioritize=0",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
));
$response = curl_exec($curl);
curl_close($curl);
//echo $response;5. Now we will create the API for SMS Login and check if the phone number exists in database.
<?php
// Enable CORS headers
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Content-Type");
ob_start();
require_once('../../database.php');
// Retrieve the username and password from the POST request
$userphone = $_POST['phone'];
// Query the database to check if credentials match
$query = "SELECT * FROM users WHERE user_phone = :phone AND status = 'Active'";
$stmt = $dbconn->prepare($query);
$stmt->bindParam(':phone', $userphone);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if ($user) {
//Add the SMS API CODE HERE
//curl
$phone = $user['user_phone'];
$name = $user['user_name'];
$id = $user['id'];
$curl = curl_init();
$message1 = "Dear $name, your otp for login is $otp. Thank you.";
$message2 = urlencode("$message1");
curl_setopt_array($curl, array(
CURLOPT_URL => "https://mysms.webotapp.com/services/send.php?key=d9786be3e0b77c6dab3e83479e27b1d94ee72235&number=91$phone&message=$message2&devices=3%7C0&type=sms&prioritize=0",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
));
$response = curl_exec($curl);
curl_close($curl);
//echo $response;
// Valid credentials
$response = [
'success' => true,
'message' => 'Succesfully Validated',
'user_phone' => $user['user_phone'],
'user_name' => $user['user_name'],
'id' => $user['id'],
];
} else {
// Invalid credentials
$response = [
'success' => false,
'message' => 'Invalid username or password',
];
}
// Send the response as JSON
header('Content-Type: application/json');
echo json_encode($response);6. In the next step we will have to create a new password and store it in our database
<?php
// Enable CORS headers
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: Content-Type");
ob_start();
require_once('../../database.php');
// Retrieve the username and password from the POST request
$userphone = $_POST['phone'];
// Query the database to check if credentials match
$query = "SELECT * FROM users WHERE user_phone = :phone AND status = 'Active'";
$stmt = $dbconn->prepare($query);
$stmt->bindParam(':phone', $userphone);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
if ($user) {
//Add the SMS API CODE HERE
//curl
$phone = $user['user_phone'];
$name = $user['user_name'];
$id = $user['id'];
//Update OTP
$otp = rand(100000,999999);
$encrypted_password = md5($otp);
$sql_1 = "UPDATE users SET user_password = :value1 WHERE id = :id";
$stmt_1 = $dbconn->prepare($sql_1);
$stmt_1->bindParam(':value1', $encrypted_password);
$stmt_1->bindParam(':id', $id);
$stmt_1->execute();
$curl = curl_init();
$message1 = "Dear $name, your otp for login is $otp. Thank you.";
$message2 = urlencode("$message1");
curl_setopt_array($curl, array(
CURLOPT_URL => "https://mysms.webotapp.com/services/send.php?key=d9786be3e0b77c6dab3e83479e27b1d94ee72235&number=91$phone&message=$message2&devices=3%7C0&type=sms&prioritize=0",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
));
$response = curl_exec($curl);
curl_close($curl);
//echo $response;
// Valid credentials
$response = [
'success' => true,
'message' => 'Succesfully Validated',
'user_phone' => $user['user_phone'],
'user_name' => $user['user_name'],
'id' => $user['id'],
];
} else {
// Invalid credentials
$response = [
'success' => false,
'message' => 'Invalid username or password',
];
}
// Send the response as JSON
header('Content-Type: application/json');
echo json_encode($response);
