قبل از اینکه بتوانید ورود به Google را در وب سایت خود ایجاد کنید، باید یک شناسه مشتری در گوگل ایجاد کنید، اگر حساب کاربری پیشتر ثبت کرده اید می توانید از حساب کاربری خود جهت لاگین به وب سایت استفاده نمایید.
فریم ورک OAuth 2.0
فریم ورک احزار هویت OAuth 2.0 به عنوان یک بسته‌ی کاربردی جهت محدود کردن دسترسی به سرویس‌های HTTP ایجاد شده است و به ما کمک می کند تا بتوانیم از طریق آن با شناسه یا اکانت گوگل به یک وب سایت لاگین کنیم. در واقع جهت لاگین به وبسایت باید ابتدا نسبت به دریافت کد های client ID و Client Secret از گوگل اقدام کنیم. بعد از دریافت کد ها یک Token جهت احراز هویت به گوگل ارسال می کنیم و از کاربر می خواهیم در حساب کاربری موجود در گوگل لاگین انجام دهد، در صورتی که کاربر با موفقیت به حساب کاربری خود وارد شد گوگل کاربر را به صفحه مورد نظر هدایت می کند.
اگر کاربر در زمان بازگشت به وب سایت دارای Token بود بدین معنا است که کاربر معتبر می باشد و می توان به راحتی از گوگل اطلاعات معتبر کاربر مانند نام، نام خانوادگی، تصویر و ایمیل را دریافت کرد.
کتابخانه بستر گوگل را مشخص کنید
جهت استفاده از بستر گوگل باید از کتابخانه Google Platform استفاده شود
<script src="https://apis.google.com/js/platform.js" async defer></script>
شناسه مشتری برنامه خود را مشخص کنید
سپس باید شناسه کاربری google-signin-client_id موجود در Google Developers Console را در متاتگ مربوطه قرار دهید
<meta name = "google-signin-client_id" content = " YOUR_CLIENT_ID.apps.googleusercontent.com ">
نکته : شما می توانید شناسه مشتری برنامه خود را با روش gapi.auth2.init() مشخص کنید.
دکمه ورود به گوگل را اضافه نمایید
به سادگی می توان دکمه ورود به سایت را در وب سایت قرار داد به صورت پیش فرض گوگل این دکه را در اختیار ما قرار می دهد.
<div class="g-signin2" data-onsuccess="onSignIn"></div>
به طور پیش فرض گوگل از کلاس g-signin2 برای وضعیت ظاهری استفاده می نماید. دکمه ورود به سیستم گوگل به صورت پیش فرض به شکل زیر می باشد:
وقتی کاربر لاگین کرد و به وب سایت بازگشت می توان با استفاده از Token ارسال شده به اطلاعات کاربر دسترسی پیدا کرد و از آن ها استفاده کرد
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
استفاده از کد های بالا در یک صفحه html به صورت زیر می باشد:
<html lang="en">
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token;
console.log("ID Token: " + id_token);
}
</script>
</body>
</html>
خروج کاربر از حساب گوگل
کاربر را به راحتی می توان با استفاده از GoogleAuth.signOut() از حساب کاربری خود خارج کرد.
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
این مطلب چقدر برای شما مفید بود؟ نظرات خود را با ما به اشتراک بگذارید.