ورود با حساب گیت هاب (Github) در PHP و جاوا اسکریپت

ورود با حساب گیت هاب – خیلی از توسعه دهندگان یا افرادی که در زمینه توسعه نرم افزار فعال هستند با github گیت هاب آشنا هستند .
این خیلی مفید است که علاوه بر امکان ساخت حساب کاربری امکان ساخت حساب با ورود گیت هاب وجود داشته باشد .
این پروژه شامل 3 فایل است :
1- index.php : در صورتی که ورود با گیت هاب موفق آمیز بود نام کاربری آن را نمایش می دهد
2- login.php : دکمه ای به نام ورود با گیت هاب را دارا است که دایرکت می شود به صفحه ورود github
3- github-access.php : پس از لاگین گیت هاب به این صفحه دایرکت می شود با query string به نام code که یکبار مصرف است و راهی برای دریافت access token که بتوانیم به اطلاعات کاربر در گیت هاب دسترسی پیدا کنیم و session بسازیم .
گیت هاب
ثبت OAuth App در گیت هاب
ابتدا وارد حساب کاربری گیت هاب خود شده و مراحل زیر را دنبال کنید :

روی علامت + کلیک و در منوی باز شده settings را انتخاب نمایید .

در صفحه باز شده گزینه Developer Settings را انتخاب نمایید .

گزینه OAuth Apps و سپس Register a new application .

بخش آخر یعنی Authorization callback URL را به درستی پر کرده چرا که بعد از ورود موفق کاربر با query string به نام code به آن صفحه منتقل می شود .
در پایان برای ثبت برنامه روی Register application کلیک کنید .

اکنون به داده های برای احراز هویت مثل Client ID و Client Secret دسترسی دارید ، همچنین می توانید برای برنامه تان لوگو آپلود کنید و کلی تنظیمات دیگر تعریف کنید .
قبل از اجرای برنامه کتابخانه GuzzleHttp را نصب کنید .
composer require guzzlehttp/guzzle
فایل index.php
در صورتی که session ساخت شده بود نام کاربری نمایش داده می شود غیر اینصورت دایرکت می شود به صفحه login.php
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RapidCode.IR</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
</style>
</head>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<h1><?php
if (!empty($_COOKIE['auth'])) {
$username = (json_decode(urldecode($_COOKIE['auth']), true))['user'];
echo "خوش آمدی {$username}";
}else{
header("Location: http://{$_SERVER['SERVER_NAME']}/login.php");
}
?></h1>
</body>
</html>
فایل login.php
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>لاگین با گیت هاب</title>
<style>
body {
text-align: center;
overflow-x: hidden;
}
#introduce {
color: white;
text-decoration: none;
font-weight: bold;
display: block;
width: 100%;
padding: 5px 10px;
background-color: #4CAF50;
text-align: center;
font-size: 25px;
margin-bottom: 45px;
}
#login-with-github{
background: linear-gradient(to right top , gray , lightblue);
color: white;
border-radius: 4px;
border-bottom: 4px solid #0fadbd;
text-decoration: none;
padding: 10px 35px;
font-weight: bold;
display: inline-block;
transition: all 0.3s;
}
#login-with-github:hover{
border-bottom-color: transparent;
transform: translateY(4px);
}
</style>
</head>
<body>
<a id="introduce" target="_blank" href="https://rapidcode.ir">رپید کد - کتابخانه مجازی برنامه نویسان</a>
<a onclick="githubSignin()" id="login-with-github" href="#">ورود با گیت هاب</a>
<script>
function githubSignin(){
const signinUrl = "https://github.com/login/oauth/authorize?client_id=e52ed161a5e5126a75db&allow_signup=false&scope=user:email";
location.assign(signinUrl);
}
</script>
</body>
</html>
فایل github-access.php برای اعتبار سنجی token کاربر
خط 18 و 19 : حتما client secret , client id را وارد کنید .
<?php
############################
############################
############################
############################
####### RapidCode.iR #######
############################
############################
############################
############################
require_once "vendor/autoload.php";
use GuzzleHttp\Client;
header("Content-Type: application/json");
define("GITHUB_CLIENT_ID", "کلاینت آیدی");
define("GITHUB_CLIENT_SECRET", "کلاینت سکرت");
define("GITHUB_URL_ACCESS_TOKEN", "https://github.com/login/oauth/access_token");
define("GITHUB_URL_API", "https://api.github.com/user");
$response_msg = ["msg" => "invalid token", "status" => 0];
function httpRequest($url, $data, $method = "GET", $header) {
$client = new Client([
'timeout' => 5.0,
'verify' => false,
]);
$response = $client->request($method, $url, [
'headers' => $header,
'form_params' => $data,
]);
$content = (string) $response->getBody();
return json_decode($content, true);
}
$github_code = $_GET['code'] ?? false;
if ($github_code) {
$data = [
"client_id" => GITHUB_CLIENT_ID,
"client_secret" => GITHUB_CLIENT_SECRET,
"code" => $github_code,
];
$content = httpRequest(GITHUB_URL_ACCESS_TOKEN, $data, "POST", array(
"Content-Type" => "application/x-www-form-urlencoded",
"Accept" => "application/json",
));
if (!empty($content['access_token'])) {
$access_token = $content['access_token'];
$content = httpRequest(GITHUB_URL_API, array(), "GET", array(
"Authorization" => "token {$access_token}",
));
if (!empty($content['login']) && !empty($content['node_id'])) {
$response_msg = ["user" => $content['login'], "msg" => "successfully logged in (:", "status" => 1];
setcookie("auth" , json_encode($response_msg));
header("Location: http://{$_SERVER['SERVER_NAME']}");
}
}
}
echo json_encode($response_msg);
?>
دموی پروژه ورود با گیت هاب

ارسال نظر