| 25 |
- |
1 |
<!doctype html>
|
|
|
2 |
<html lang="en" class="no-js">
|
|
|
3 |
<head>
|
|
|
4 |
<meta charset="utf-8">
|
|
|
5 |
<title>User Login System with Social Account Files Structure by CodexWorld</title>
|
|
|
6 |
<style>
|
|
|
7 |
html, body {
|
|
|
8 |
font-family: "Lato",sans-serif;
|
|
|
9 |
background: #F5F5F5;
|
|
|
10 |
font-size: 11pt;
|
|
|
11 |
height: 100%;
|
|
|
12 |
color: #444;
|
|
|
13 |
-webkit-font-smoothing: antialiased;
|
|
|
14 |
}
|
|
|
15 |
.main-content {
|
|
|
16 |
width: auto;
|
|
|
17 |
padding: 0 0 40px;
|
|
|
18 |
}
|
|
|
19 |
h1 {
|
|
|
20 |
font-size: 20pt;
|
|
|
21 |
margin-bottom: 8px;
|
|
|
22 |
}
|
|
|
23 |
p {
|
|
|
24 |
font-size: 1em;
|
|
|
25 |
line-height: 1.5em;
|
|
|
26 |
margin: 5px 0;
|
|
|
27 |
}
|
|
|
28 |
a {
|
|
|
29 |
color: #3daccc;
|
|
|
30 |
cursor: pointer;
|
|
|
31 |
text-decoration: none;
|
|
|
32 |
}
|
|
|
33 |
ol li {
|
|
|
34 |
margin-bottom: 5px;
|
|
|
35 |
}
|
|
|
36 |
.license-content {
|
|
|
37 |
width: 980px;
|
|
|
38 |
margin: auto;
|
|
|
39 |
position: relative;
|
|
|
40 |
}
|
|
|
41 |
.pro-head {
|
|
|
42 |
padding: 40px 0;
|
|
|
43 |
}
|
|
|
44 |
.thumb {
|
|
|
45 |
float: left;
|
|
|
46 |
margin-right: 10px;
|
|
|
47 |
border-radius: 6px;
|
|
|
48 |
}
|
|
|
49 |
.container {
|
|
|
50 |
margin-bottom: 20px;
|
|
|
51 |
padding: 30px;
|
|
|
52 |
background: #fff;
|
|
|
53 |
clear: left;
|
|
|
54 |
}
|
|
|
55 |
.container h2 {
|
|
|
56 |
font-size: 22pt;
|
|
|
57 |
color: #2e2e2e;
|
|
|
58 |
text-align: center;
|
|
|
59 |
margin: 20px 0;
|
|
|
60 |
}
|
|
|
61 |
ul.summary {
|
|
|
62 |
list-style: none;
|
|
|
63 |
padding: 0;
|
|
|
64 |
line-height: 1.2em;
|
|
|
65 |
margin-top: 30px;
|
|
|
66 |
margin-bottom: 20px;
|
|
|
67 |
font-size: 1.1em;
|
|
|
68 |
color: #515151;
|
|
|
69 |
}
|
|
|
70 |
ul.summary li {
|
|
|
71 |
padding-left: 40px;
|
|
|
72 |
margin-bottom: 7px;
|
|
|
73 |
position: relative;
|
|
|
74 |
}
|
|
|
75 |
ul.summary li:before {
|
|
|
76 |
content: "■";
|
|
|
77 |
font-family: Arial;
|
|
|
78 |
color: #1497cc;
|
|
|
79 |
font-size: 12pt;
|
|
|
80 |
position: absolute;
|
|
|
81 |
left: 10px;
|
|
|
82 |
}
|
|
|
83 |
.license-content ol {
|
|
|
84 |
padding-left: 20px;
|
|
|
85 |
counter-reset: item;
|
|
|
86 |
list-style: none;
|
|
|
87 |
}
|
|
|
88 |
.license-content ol {
|
|
|
89 |
padding-left: 0;
|
|
|
90 |
line-height: 1.4em;
|
|
|
91 |
font-size: 10pt;
|
|
|
92 |
margin-left: 0;
|
|
|
93 |
}
|
|
|
94 |
.license-content ol p {
|
|
|
95 |
margin: 0;
|
|
|
96 |
display: inline;
|
|
|
97 |
font-size: 10pt;
|
|
|
98 |
}
|
|
|
99 |
.terms > ol ol {
|
|
|
100 |
padding-left: 20px;
|
|
|
101 |
}
|
|
|
102 |
|
|
|
103 |
.terms {
|
|
|
104 |
padding-bottom: 0;
|
|
|
105 |
}
|
|
|
106 |
.terms h2 {
|
|
|
107 |
margin-bottom: 40px;
|
|
|
108 |
}
|
|
|
109 |
.terms>ol {
|
|
|
110 |
padding: 0;
|
|
|
111 |
list-style: none;
|
|
|
112 |
}
|
|
|
113 |
|
|
|
114 |
.terms>ol>li:nth-child(2n+1) {
|
|
|
115 |
background: #f9f9f9;
|
|
|
116 |
}
|
|
|
117 |
.terms>ol>li {
|
|
|
118 |
padding: 30px;
|
|
|
119 |
border-top: 1px solid #dedede;
|
|
|
120 |
margin: 0 -30px;
|
|
|
121 |
}
|
|
|
122 |
.terms ol li:before {
|
|
|
123 |
content: counters(item, ".") ". ";
|
|
|
124 |
counter-increment: item;
|
|
|
125 |
}
|
|
|
126 |
.terms ol li ul li:before {
|
|
|
127 |
content: "";
|
|
|
128 |
counter-increment: none;
|
|
|
129 |
list-style: circle;
|
|
|
130 |
}
|
|
|
131 |
</style>
|
|
|
132 |
</head>
|
|
|
133 |
<body>
|
|
|
134 |
<div class="main-content">
|
|
|
135 |
<div class="license-content">
|
|
|
136 |
<div class="pro-head">
|
|
|
137 |
<h1><a href="http://www.codexworld.com/scripts/php-social-login-system/">PHP User Login System with Social Account</a></h1>
|
|
|
138 |
<p class="summary">UserSocialLoginSystem is a readymade user login system that allows integrating user registration and login system with social account (Facebook, Google, and Twitter) in PHP web application within minutes.</p>
|
|
|
139 |
</div>
|
|
|
140 |
<div class="container">
|
|
|
141 |
<h2>Files Structure</h2>
|
|
|
142 |
<pre style="background:#f9f9f9;color:#080808">php_login_system<span style="color:#794938">/</span>
|
| 30 |
- |
143 |
├── index.php
|
| 25 |
- |
144 |
├── registration.php
|
|
|
145 |
├── account.php
|
| 26 |
- |
146 |
├── editAccount.php
|
|
|
147 |
├── resetPassword.php
|
| 25 |
- |
148 |
├── forgotPassword.php
|
|
|
149 |
├── resetPassword.php
|
|
|
150 |
├── userAccount.php
|
|
|
151 |
├── includes<span style="color:#794938">/</span>
|
|
|
152 |
│ ├── PHPMailer<span style="color:#794938">/</span>
|
|
|
153 |
│ ├── social_oauth_lib<span style="color:#794938">/</span>
|
|
|
154 |
│ ├── config.php
|
|
|
155 |
│ ├── socialLogin.php
|
|
|
156 |
│ ├── User.class.php
|
|
|
157 |
│ ├── validateUser.php
|
|
|
158 |
│ └── email_functions.php
|
|
|
159 |
├── elements<span style="color:#794938">/</span>
|
|
|
160 |
│ ├── head.php
|
|
|
161 |
│ ├── header.php
|
|
|
162 |
│ ├── nav_menu.php
|
|
|
163 |
│ └── footer.php
|
|
|
164 |
├── assets<span style="color:#794938">/</span>
|
|
|
165 |
│ ├── css<span style="color:#794938">/</span>
|
|
|
166 |
│ ├── js<span style="color:#794938">/</span>
|
|
|
167 |
│ └── images<span style="color:#794938">/</span>
|
|
|
168 |
└── uploads<span style="color:#794938">/</span>
|
|
|
169 |
└── profile_picture<span style="color:#794938">/</span>
|
|
|
170 |
</pre>
|
|
|
171 |
</div>
|
|
|
172 |
<div class="container terms">
|
|
|
173 |
<h2>Files Details & Functionality</h2>
|
|
|
174 |
<ol>
|
| 30 |
- |
175 |
<li><p><strong>index.php</strong></p>
|
|
|
176 |
<p>Initially index.php file is loaded with login form and registration page link.</p>
|
| 25 |
- |
177 |
</li>
|
|
|
178 |
<li><p><strong>registration.php</strong></p>
|
|
|
179 |
<p>This file contains registration form HTML and the form is submitted to the userAccount.php file with a signup request.</p>
|
|
|
180 |
</li>
|
|
|
181 |
<li><p><strong>account.php</strong></p>
|
|
|
182 |
<p>After login, the user ID is available in session and the respective user details are shown using the User class. Also, a logout link will appear if the user already logged in.</p>
|
|
|
183 |
</li>
|
| 26 |
- |
184 |
<li><p><strong>editAccount.php</strong></p>
|
| 25 |
- |
185 |
<p>This file is used to update the user profile information. On form submit, the update request is submitted to the userAccount.php file.</p>
|
|
|
186 |
</li>
|
| 26 |
- |
187 |
<li><p><strong>changePassword.php</strong></p>
|
| 25 |
- |
188 |
<p>This file is used to update the login password. On form submit, the password update request is submitted to the userAccount.php file.</p>
|
|
|
189 |
</li>
|
|
|
190 |
<li><p><strong>forgotPassword.php</strong></p>
|
|
|
191 |
<p>This file is loaded when user forgot their account password. On form submit, the reset password request is submitted to the userAccount.php file.</p>
|
|
|
192 |
</li>
|
|
|
193 |
<li><p><strong>resetPassword.php</strong></p>
|
|
|
194 |
<p>This file is used to reset the new password. On form submit, the new password update request is submitted to the userAccount.php file.</p>
|
|
|
195 |
</li>
|
|
|
196 |
<li><p><strong>userAccount.php</strong></p>
|
| 30 |
- |
197 |
<p>This file controls the registration, login, logout, forgot & reset password, email verification, profile update and password update request. These requests are comes from index.php, registration.php, profile.php, changePassword.php, forgotPassword.php, and resetPassword.php. The User Class is used to get, insert, and update user details to the users table. Also, PHP Sessions are used to hold the login status of the user.</p>
|
| 25 |
- |
198 |
</li>
|
|
|
199 |
<li><p><strong>includes/</p></strong>
|
|
|
200 |
<p>All the helper files which are used by the main files are stored here.</p>
|
|
|
201 |
<ol>
|
|
|
202 |
<li><p><strong>includes/PHPMailer/</p></strong>
|
|
|
203 |
<p>PHPMailer library is used to send the email via SMTP server from the script.</p>
|
|
|
204 |
</li>
|
|
|
205 |
<li><p><strong>includes/social_oauth_lib/</p></strong>
|
|
|
206 |
<p>The social login (Facebook, Google, and Twitter) related OAuth libraries are included in this directory.</p>
|
|
|
207 |
</li>
|
|
|
208 |
<li><p><strong>includes/config.php</p></strong>
|
|
|
209 |
<p>Site, database, email, and other useful settings are defined here.</p>
|
|
|
210 |
</li>
|
|
|
211 |
<li><p><strong>includes/socialLogin.php</p></strong>
|
|
|
212 |
<p>This file controls the authentication process for Facebook, Google, and Twitter login.</p>
|
|
|
213 |
</li>
|
|
|
214 |
<li><p><strong>includes/User.class.php</p></strong>
|
|
|
215 |
<p>User Class handles all the database related works, it contains 4 methods, __construct(), getRows(), insert() and update(). __construct() function is used to connect the database, getRows() function is used to fetch the user data from the database, insert() function inserts the user details to the database, and update() function updates the user details to the database. In this file, you need to change $dbHost, $dbUsername, $dbPassword, $dbName variables value with your MySQL database credentials.</p>
|
|
|
216 |
</li>
|
|
|
217 |
<li><p><strong>includes/validateUser.php</p></strong>
|
|
|
218 |
<p>This file verifies the user's login status and controls the page redirection.</p>
|
|
|
219 |
</li>
|
|
|
220 |
<li><p><strong>includes/email_functions.php</p></strong>
|
|
|
221 |
<p>This file contains the email helper functions. These functions are used to send email for account activation and reset the password.</p>
|
|
|
222 |
</li>
|
|
|
223 |
</ol>
|
|
|
224 |
</li>
|
|
|
225 |
<li><p><strong>elements/</p></strong>
|
|
|
226 |
<ol>
|
|
|
227 |
<li><p><strong>elements/head.php</p></strong>
|
|
|
228 |
<p>Holds the HTML for the head section of the web page.</p>
|
|
|
229 |
</li>
|
|
|
230 |
<li><p><strong>elements/header.php</p></strong>
|
|
|
231 |
<p>Holds the HTML for the header section of the web page.</p>
|
|
|
232 |
</li>
|
|
|
233 |
<li><p><strong>elements/nav_menu.php</p></strong>
|
|
|
234 |
<p>Holds the HTML for the navigation menu section of the web page.</p>
|
|
|
235 |
</li>
|
|
|
236 |
<li><p><strong>elements/footer.php</p></strong>
|
|
|
237 |
<p>Holds the HTML for the footer section of the web page.</p>
|
|
|
238 |
</li>
|
|
|
239 |
</ol>
|
|
|
240 |
</li>
|
|
|
241 |
<li><p><strong>assets/<p></strong>
|
|
|
242 |
<ol>
|
|
|
243 |
<li><p><strong>assets/css/</p></strong>
|
|
|
244 |
<p>The stylesheet files are placed in this directory.</p>
|
|
|
245 |
</li>
|
|
|
246 |
<li><p><strong>assets/js/</p></strong>
|
|
|
247 |
<p>The jQuery files are placed in this directory.</p>
|
|
|
248 |
</li>
|
|
|
249 |
<li><p><strong>assets/images/</p></strong>
|
|
|
250 |
<p>All the image files are placed in this directory.</p>
|
|
|
251 |
</li>
|
|
|
252 |
</ol>
|
|
|
253 |
</li>
|
|
|
254 |
<li><p><strong>uploads/<p></strong>
|
|
|
255 |
<ol>
|
|
|
256 |
<li><p><strong>uploads/profile_picture/</p></strong>
|
|
|
257 |
<p>User's profile picture are stored in this directory.</p>
|
|
|
258 |
</li>
|
|
|
259 |
</ol>
|
|
|
260 |
</li>
|
|
|
261 |
</ol>
|
|
|
262 |
</div>
|
|
|
263 |
</div>
|
|
|
264 |
</div>
|
|
|
265 |
</body>
|
| 26 |
- |
266 |
</html>
|