ادغام Google Sign-In در برنامه وب شما

Google Sign-In چرخه عمر توکن و جریان OAuth 2.0 را مدیریت می کند و ادغام شما با APIهای Google را ساده می کند. کاربر همیشه این گزینه را دارد که در هر زمانی دسترسی به یک برنامه را لغو کند .

این سند نحوه تکمیل یک ادغام اولیه ورود به سیستم Google را شرح می دهد.

اعتبارنامه مجوز ایجاد کنید

هر برنامه‌ای که از OAuth 2.0 برای دسترسی به APIهای Google استفاده می‌کند، باید دارای اعتبارنامه مجوز باشد که برنامه را در سرور OAuth 2.0 Google شناسایی کند. مراحل زیر نحوه ایجاد اعتبار برای پروژه خود را توضیح می دهد. سپس برنامه های شما می توانند از اعتبارنامه ها برای دسترسی به API هایی که برای آن پروژه فعال کرده اید استفاده کنند.

  1. Go to the Credentials page.
  2. روی ایجاد اعتبار > شناسه مشتری OAuth کلیک کنید.
  3. نوع برنامه کاربردی وب را انتخاب کنید.
  4. کلاینت OAuth 2.0 خود را نام ببرید و روی ایجاد کلیک کنید

پس از تکمیل پیکربندی، شناسه مشتری ایجاد شده را یادداشت کنید. برای تکمیل مراحل بعدی به شناسه مشتری نیاز دارید. (یک رمز مشتری نیز ایجاد می شود، اما شما فقط برای عملیات سمت سرور به آن نیاز دارید.)

کتابخانه پلتفرم Google را بارگیری کنید

شما باید کتابخانه پلتفرم Google را در صفحات وب خود که Google Sign-In را یکپارچه می کنند، قرار دهید.

<script src="https://apis.google.com/js/platform.js" async defer></script>

شناسه مشتری برنامه خود را مشخص کنید

شناسه مشتری را که برای برنامه خود در کنسول توسعه دهندگان Google با عنصر متا google-signin-client_id ایجاد کرده اید، مشخص کنید.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

یک دکمه ورود به سیستم Google اضافه کنید

ساده ترین راه برای افزودن دکمه ورود به سیستم گوگل به سایت خود استفاده از دکمه ورود به سیستم است که به صورت خودکار ارائه می شود. تنها با چند خط کد، می‌توانید دکمه‌ای اضافه کنید که به‌طور خودکار خودش را به گونه‌ای پیکربندی می‌کند که متن، آرم و رنگ‌های مناسب برای وضعیت ورود کاربر و محدوده‌های درخواستی شما را داشته باشد.

برای ایجاد یک دکمه ورود به سیستم Google که از تنظیمات پیش‌فرض استفاده می‌کند، یک عنصر div با کلاس g-signin2 به صفحه ورود به سیستم خود اضافه کنید:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

دریافت اطلاعات پروفایل

پس از اینکه با استفاده از دامنه های پیش فرض کاربر با Google وارد سیستم شدید، می توانید به شناسه Google، نام، URL نمایه و آدرس ایمیل کاربر دسترسی داشته باشید.

برای بازیابی اطلاعات پروفایل یک کاربر، از متد getBasicProfile() استفاده کنید.

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.
}

یک کاربر را از سیستم خارج کنید

می‌توانید با افزودن دکمه خروج یا پیوند به سایت خود، کاربران را قادر به خروج از برنامه خود بدون خروج از Google کنید. برای ایجاد پیوند خروج، تابعی را که متد GoogleAuth.signOut() را فراخوانی می‌کند به رویداد onclick پیوند متصل کنید.

<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>