ادغام ورود به صفحه نمایش به وب سایت خود با Google One Tap API
نسخه ی نمایشی:
معرفی:
ورود به سیستم پاپ آپ روشی کاربرپسند برای ارائه عملکرد ورود به وب سایت شما بدون نیاز به صفحات متعدد یا فرم های پیچیده است. در این آموزش، نحوه ادغام One Tap API Google را برای پیاده سازی ورود به سیستم پاپ آپ در وب سایت خود بررسی خواهیم کرد. ما فرآیند را به مراحل ساده تقسیم می کنیم و به خوانندگان این امکان را می دهیم که به راحتی راه حل را درک کرده و اجرا کنند. علاوه بر این، ما یک قطعه کد اضافه می کنیم تا به طور خودکار پنجره بازشو در وب سایت شما راه اندازی شود.
مرحله 1: یک پروژه Google API را راه اندازی کنید
برای شروع، باید یک پروژه Google API راه اندازی کنید. اگر قبلاً یکی را ندارید، از Google Cloud Console (https://console.cloud.google.com) بازدید کنید و یک پروژه جدید ایجاد کنید. اعتبار لازم (Client ID) را برای پروژه خود دریافت کنید، زیرا در ادامه آموزش از آن استفاده خواهیم کرد.
مرجع. :- https://developers.google.com/identity/gsi/web/guides/migration#popup-mode_1
مرحله 2: صفحه HTML را اصلاح کنید
صفحه HTML خود را در جایی که می خواهید لاگین پاپ آپ را پیاده سازی کنید باز کنید. برای نشان دادن هدف آموزش، عنوان صفحه را تغییر دهید:
<!DOCTYPE html>
<html>
<head>
<title>Integrating Popup Login with Google One Tap API</title>
<!-- Include Google One Tap library -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<!-- Your website content goes here -->
</body>
</html>
مرحله 3: فرم ورود پاپ آپ را ایجاد کنید
دکمه ای را در وب سایت خود اضافه کنید که ورود به سیستم بازشو Google One Tap را فعال می کند:
<!-- Your website content goes here -->
<button type="button" onclick="showGoogleOneTap()">Login with Google</button>
<!-- Continue with the rest of your content -->
مرحله 4: کد جاوا اسکریپت را پیاده سازی کنید
کد جاوا اسکریپت را برای مدیریت ورود به سیستم بازشو Google One Tap اضافه کنید و داده‌های کاربر را به API پشتیبان خود ارسال کنید:
<!-- Your website content goes here -->
<button type="button" onclick="showGoogleOneTap()">Login with Google</button>
<!-- Continue with the rest of your content -->
<!-- Script to trigger Google One Tap popup login -->
<script>
function showGoogleOneTap() {
google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID', // Replace with your Google API Client ID
callback: handleCredentialResponse
});
google.accounts.id.prompt(notification => {
console.log(notification);
}, credential => {
handleCredentialResponse(credential);
});
}
function handleCredentialResponse(response) {
// The rest of the code for handling the login response and sending data to the backend remains the same
}
</script>
مرحله 5: به طور خودکار پاپ آپ را راه اندازی کنید
برای نمایش خودکار پنجره بازشو هنگام بازدید کاربران از وب سایت شما، می توانید اسکریپت زیر را در انتهای صفحه اضافه کنید <script> بخش:
<!-- Your website content goes here -->
<button type="button" onclick="showGoogleOneTap()">Login with Google</button>
<!-- Continue with the rest of your content -->
<!-- Script to trigger Google One Tap popup login -->
<script>
// ... Existing code for showGoogleOneTap() and handleCredentialResponse() ...
// Automatically show the popup when the page loads
window.onload = function() {
showGoogleOneTap();
};
</script>
نتیجه
در این آموزش، ما یاد گرفتیم که چگونه API One Tap Google را برای پیاده سازی ورود popup در وب سایت خود یکپارچه کنیم. با دنبال کردن آموزش گام به گام و افزودن قطعه کد برای راه‌اندازی خودکار پنجره بازشو، بازدیدکنندگان وب‌سایت شما می‌توانند یک فرآیند ورود روان و بدون درز را تجربه کنند. با این پیاده سازی، کاربران می توانند به راحتی با حساب گوگل خود وارد وب سایت شما شوند و تجربه کاربری را افزایش داده و تعامل را افزایش دهند.
با خیال راحت طراحی و عملکرد را برای مطابقت با نیازهای وب سایت خود سفارشی کنید. همیشه امنیت را در اولویت قرار دهید و اقدامات احراز هویت اضافی را برای یک سیستم ورود به سیستم قوی در نظر بگیرید. کد نویسی مبارک!
