یک دکمه ورود با گوگل به سایت خود اضافه کنید تا کاربران بتوانند در برنامه وب شما ثبت نام یا ورود کنند. از HTML یا جاوا اسکریپت برای رندر کردن دکمه و از ویژگیها برای سفارشیسازی شکل، اندازه، متن و قالب دکمه استفاده کنید.
پس از اینکه کاربر یک حساب گوگل انتخاب کرد و رضایت خود را اعلام کرد، گوگل نمایه کاربر را با استفاده از یک JSON Web Token (JWT) به اشتراک میگذارد. برای مرور کلی مراحل مربوط به ورود به سیستم و تجربه کاربری، به «نحوه عملکرد آن» مراجعه کنید. «دکمه شخصیسازیشده را درک کنید» شرایط و حالتهای مختلفی را که بر نحوه نمایش دکمه به کاربران تأثیر میگذارند، بررسی میکند.
پیشنیازها
برای پیکربندی صفحه رضایت OAuth، دریافت شناسه کلاینت و بارگذاری کتابخانه کلاینت، مراحل شرح داده شده در بخش تنظیمات را دنبال کنید.
رندر دکمه
برای نمایش دکمه ورود با گوگل، میتوانید HTML یا جاوا اسکریپت را برای رندر کردن دکمه در صفحه ورود خود انتخاب کنید:
اچتیامال
دکمه ورود را با استفاده از HTML رندر کنید و JWT را به نقطه پایانی ورود به سیستم عامل خود برگردانید.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<body>
</html>
یک عنصر با کلاس g_id_signin به عنوان دکمه ورود با گوگل رندر میشود. این دکمه توسط پارامترهای ارائه شده در ویژگیهای داده سفارشیسازی میشود.
برای نمایش دکمه ورود با گوگل و گوگل وان، روی یک صفحه ضربه بزنید و data-auto_prompt="false" را حذف کنید. این کار برای کاهش مشکلات و بهبود نرخ ورود به سیستم توصیه میشود.
برای لیست کامل ویژگیهای داده، به صفحه مرجع g_id_signin مراجعه کنید.
جاوا اسکریپت
دکمه ورود را با استفاده از جاوا اسکریپت رندر کنید و JWT را به کنترلکننده فراخوانی جاوا اسکریپت مرورگر برگردانید.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID"
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" } // customization attributes
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</body>
</html>
عنصری که به عنوان اولین پارامتر برای renderButton مشخص شده است، به عنوان یک دکمه ورود با گوگل نمایش داده میشود. در این مثال buttonDiv برای رندر کردن دکمه در صفحه استفاده میشود. دکمه با استفاده از ویژگیهای مشخص شده در پارامتر دوم renderButton سفارشیسازی میشود.
برای به حداقل رساندن مشکل کاربر google.accounts.id.prompt() فراخوانی میشود تا One Tap را به عنوان جایگزین دوم برای استفاده از دکمه ثبت نام یا ورود نمایش دهد.
کتابخانه GIS سند HTML را برای عناصری که ویژگی ID آنها روی g_id_onload تنظیم شده است یا ویژگیهای کلاس حاوی g_id_signin تجزیه میکند. اگر عنصر منطبقی پیدا شود، دکمه با استفاده از HTML رندر میشود، صرف نظر از اینکه آیا دکمه را با جاوا اسکریپت نیز رندر کردهاید یا خیر. برای جلوگیری از نمایش مجدد دکمه، احتمالاً با پارامترهای متناقض، عناصر HTML منطبق با این نامها را در صفحات HTML خود قرار ندهید.
زبان دکمه
زبان دکمه به طور خودکار توسط زبان پیشفرض مرورگر یا ترجیح کاربر جلسه گوگل تعیین میشود. همچنین میتوانید با اضافه کردن پارامتر hl و کد زبان به دستورالعمل src هنگام بارگذاری کتابخانه و با اضافه کردن پارامتر اختیاری data-locale یا locale data-locale در HTML یا locale در جاوا اسکریپت، زبان را به صورت دستی انتخاب کنید.
اچتیامال
قطعه کد زیر نحوه نمایش زبان دکمه به زبان فرانسوی را با اضافه کردن پارامتر hl به URL کتابخانه کلاینت و با تنظیم ویژگی data-locale به زبان فرانسوی نشان میدهد:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>
جاوا اسکریپت
قطعه کد زیر نحوه نمایش زبان دکمه به زبان فرانسوی را با اضافه کردن پارامتر hl به URL کتابخانه کلاینت و فراخوانی متد google.accounts.id.renderButton با پارامتر locale تنظیم شده روی فرانسوی نشان میدهد:
<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ locale: "fr" }
);
</script>
رسیدگی به اعتبارنامهها
پس از دریافت رضایت کاربر، گوگل یک اعتبارنامه JSON Web Token (JWT) که به عنوان ID Token شناخته میشود را یا به مرورگر کاربر یا مستقیماً به نقطه ورود به سیستم میزبانی شده توسط پلتفرم شما برمیگرداند.
اینکه JWT را کجا دریافت کنید، بستگی به این دارد که آیا دکمه را با استفاده از HTML یا جاوا اسکریپت رندر میکنید و آیا از حالت UX پاپآپ یا ریدایرکت استفاده میکنید یا خیر.
حالت پاپآپ
استفاده از حالت تجربه کاربری popup جریان تجربه کاربری ورود به سیستم را در یک پنجره پاپآپ اجرا میکند. این حالت عموماً تجربه کاربری کممزاحمتتری برای کاربران است و حالت پیشفرض تجربه کاربری محسوب میشود.
هنگام رندر کردن دکمه با استفاده از:
اچتیامال
شما میتوانید هر یک از موارد زیر را تنظیم کنید:
-
data-callbackبرای برگرداندن JWT به کنترلکنندهی callback شما، یا -
data-login_uriبرای اینکه گوگل JWT را مستقیماً با استفاده از درخواست POST به نقطه پایانی ورود شما ارسال کند.
اگر هر دو مقدار تنظیم شده باشند، data-callback بر data-login_uri اولویت دارد. تنظیم هر دو مقدار میتواند هنگام استفاده از یک کنترلکنندهی callback برای اشکالزدایی مفید باشد.
جاوا اسکریپت
شما باید یک callback مشخص کنید، حالت popup هنگام رندر کردن دکمه در جاوا اسکریپت از ریدایرکتها پشتیبانی نمیکند. در صورت تنظیم، login_uri نادیده گرفته میشود.
برای اطلاعات بیشتر در مورد رمزگشایی JWT در کنترلکنندهی فراخوانی جاوااسکریپت خود ، به بخش «مدیریت پاسخ اعتبارنامهی بازگشتی» مراجعه کنید.
حالت تغییر مسیر
استفاده از حالت redirect UX، جریان UX ورود به سیستم را با استفاده از ریدایرکت کامل صفحه مرورگر کاربر انجام میدهد و گوگل JWT را مستقیماً با استفاده از یک درخواست POST به نقطه ورود شما برمیگرداند. این روش عموماً برای کاربران تجربهای مزاحمتر است، اما امنترین روش ورود به سیستم محسوب میشود.
هنگام رندر کردن دکمه با استفاده از:
- HTML به صورت اختیاری
data-login_uriرا روی URI نقطه پایانی ورود شما تنظیم میکند. - جاوا اسکریپت به صورت اختیاری
login_uriرا روی URI نقطه پایانی ورود شما تنظیم میکند.
اگر مقداری ارائه ندهید، گوگل JWT را به URI صفحه فعلی برمیگرداند.
آدرس اینترنتی (URI) نقطه پایانی ورود شما
هنگام تنظیم data-login_uri یا login_uri از HTTPS و یک URL مطلق استفاده کنید. برای مثال، https://example.com/path .
HTTP فقط هنگام استفاده از localhost در حین توسعه مجاز است: http://localhost/path .
برای شرح کامل الزامات و قوانین اعتبارسنجی گوگل، به «استفاده از ریشههای امن جاوا اسکریپت و تغییر مسیر URIها» مراجعه کنید.