به Google Identity Services مهاجرت کنید

جریان ضمنی

در زمانی که کاربر حضور دارد، یک نشانه دسترسی برای استفاده در مرورگر دریافت کنید.

مثال‌های جریان ضمنی، برنامه‌های وب را قبل و بعد از انتقال به سرویس‌های هویت نشان می‌دهند.

جریان کد مجوز

یک کد مجوز به ازای هر کاربر صادر شده توسط Google به پلتفرم باطن شما تحویل داده می‌شود، جایی که با یک نشانه دسترسی و رمز بازخوانی مبادله می‌شود.

نمونه‌های جریان کد مجوز، برنامه‌های وب را قبل و بعد از انتقال به سرویس‌های هویت نشان می‌دهد.

جریان ضمنی

با حذف مدیریت پروفایل کاربر از جریان مجوز، احراز هویت و مجوز کاربر را جدا کنید.

این ارجاعات سرویس گیرنده جاوا اسکریپت Google Sign-In را حذف کنید :

روش ها

• GoogleUser.getBasicProfile()
• GoogleUser.getId()

جریان کد مجوز

Identity Services اعتبارنامه های درون مرورگر را به شناسه شناسه و توکن دسترسی جدا می کند. این تغییر برای اعتبارنامه‌هایی که از طریق تماس مستقیم با نقاط پایانی Google OAuth 2.0 از پلتفرم باطن شما یا از طریق کتابخانه‌هایی که روی یک سرور امن در پلتفرم شما اجرا می‌شوند، مانند Google APIs Node.js Client اعمال نمی‌شود.

جریان ضمنی

یک شی TokenClientConfig اضافه کنید و initTokenClient() را برای پیکربندی برنامه وب خود، به دنبال مثال در مقداردهی اولیه یک کلاینت توکن، فراخوانی کنید.

به جای ارجاعات سرویس گیرنده جاوا اسکریپت Google Sign-In Google Identity Services :

اشیاء:

• gapi.auth2.AuthorizeConfig با TokenClientConfig

روش ها:

• gapi.auth2.init() با google.accounts.oauth2.initTokenClient()

پارامترها:

• gapi.auth2.AuthorizeConfig.login_hint با TokenClientConfig.login_hint .
• gapi.auth2.GoogleUser.getHostedDomain() با TokenClientConfig.hd .

جریان کد مجوز

یک شی CodeClientConfig اضافه کنید و initCodeClient() را برای پیکربندی برنامه وب خود، به دنبال مثال در مقداردهی اولیه یک Code Client، فراخوانی کنید.

هنگام تغییر از جریان کد ضمنی به مجوز:

ارجاعات سرویس گیرنده جاوا اسکریپت Google Sign-In را حذف کنید

اشیاء:

• gapi.auth2.AuthorizeConfig

روش ها:

• gapi.auth2.init()

پارامترها:

• gapi.auth2.AuthorizeConfig.login_hint
• gapi.auth2.GoogleUser.getHostedDomain()

جریان ضمنی

در زمانی که کاربر وارد سیستم شده است و یک جلسه فعال با Google دارد، نشانه های دسترسی ممکن است در مرورگر دریافت و استفاده شوند. برای حالت ضمنی، یک اشاره کاربر برای درخواست یک نشانه دسترسی لازم است، حتی اگر درخواست قبلی وجود داشته باشد.

جایگزینی مراجع جاوا اسکریپت ورود به سیستم Google : با خدمات هویت گوگل :

روش ها:

• gapi.auth2.authorize() با TokenClient.requestAccessToken()
• GoogleUser.reloadAuthResponse() با TokenClient.requestAccessToken()

یک پیوند یا دکمه برای فراخوانی requestAccessToken() اضافه کنید تا جریان UX پاپ آپ را برای درخواست یک نشانه دسترسی شروع کنید، یا زمانی که توکن موجود منقضی شود، یک توکن جدید به دست آورید.

پایگاه کد خود را به روز کنید :

• جریان توکن OAuth 2.0 را با requestAccessToken() فعال کنید.
• از مجوز افزایشی با استفاده از requestAccessToken و OverridableTokenClientConfig پشتیبانی کنید تا یک درخواست برای دامنه های مختلف را به چندین درخواست کوچکتر جدا کنید.
• زمانی که توکن موجود منقضی شد، یا باطل شد، یک توکن جدید درخواست کنید.

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

هنگامی که یک نشانه دسترسی منقضی می شود، ماژول gapi.auth2 به طور خودکار یک نشانه دسترسی جدید و معتبر برای برنامه وب شما دریافت می کند. برای بهبود امنیت کاربر، این فرآیند به‌روزرسانی خودکار رمز توسط کتابخانه خدمات هویت Google پشتیبانی نمی‌شود. برنامه وب شما باید به روز شود تا رمز دسترسی منقضی شده را شناسایی کند و یک نشانه جدید درخواست کند. برای اطلاعات بیشتر به بخش مدیریت توکن در زیر مراجعه کنید.

جریان کد مجوز

برای درخواست کد مجوز از Google ، پیوند یا دکمه ای برای فراخوانی requestCode() اضافه کنید. برای مثال، به Trigger OAuth 2.0 Code Flow مراجعه کنید.

برای اطلاعات بیشتر در مورد نحوه پاسخگویی به یک نشانه دسترسی منقضی یا لغو شده، به بخش مدیریت توکن در زیر مراجعه کنید.

جریان ضمنی

به جای ارجاعات سرویس گیرنده جاوا اسکریپت Google Sign-In Google Identity Services :

اشیاء:

• gapi.auth2.AuthorizeResponse با TokenClient.TokenResponse
• gapi.auth2.AuthResponse با TokenClient.TokenResponse

روش ها:

• GoogleUser.hasGrantedScopes() با google.accounts.oauth2.hasGrantedAllScopes()
• GoogleUser.getGrantedScopes() با google.accounts.oauth2.hasGrantedAllScopes()

حذف مراجع سرویس گیرنده جاوا اسکریپت Google Sign-In :

روش ها:

• GoogleUser.getAuthResponse()

برنامه وب خود را با hasGrantedAllScopes() و hasGrantedAnyScope() با دنبال کردن این مثال مجوزهای گرانول به روز کنید .

جریان کد مجوز

با پیروی از دستورالعمل‌های مربوط به مدیریت کد اعتبار، یک نقطه پایانی کد مجوز را به پلتفرم پشتیبان خود به‌روزرسانی یا اضافه کنید .

پلتفرم خود را به‌روزرسانی کنید تا مراحل شرح داده شده در راهنمای استفاده از مدل کد را دنبال کنید تا درخواست را تأیید کنید و یک نشانه دسترسی و رمز بازخوانی دریافت کنید.

پلت فرم خود را برای فعال یا غیرفعال کردن انتخابی ویژگی‌ها و عملکردها بر اساس حوزه‌های فردی که کاربر تأیید کرده است، با پیروی از دستورالعمل‌های مجوز افزایشی و بررسی دامنه‌های دسترسی اعطا شده توسط کاربر، به‌روزرسانی کنید .

کتابخانه مشتری GAPI

نمونه ای از Google API Client Library برای جاوا اسکریپت که در مرورگر با استفاده از یک گفتگوی بازشو برای رضایت کاربر اجرا می شود.

ماژول gapi.auth2 به طور خودکار توسط gapi.client.init() بارگیری و استفاده می شود و بنابراین مخفی می شود.

<!DOCTYPE html>
  <html>
    <head>
      <script src="https://apis.google.com/js/api.js"></script>
      <script>
        function start() {
          gapi.client.init({
            'apiKey': 'YOUR_API_KEY',
            'clientId': 'YOUR_CLIENT_ID',
            'scope': 'https://www.googleapis.com/auth/cloud-translation',
            'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
          }).then(function() {
            // Execute an API request which is returned as a Promise.
            // The method name language.translations.list comes from the API discovery.
            return gapi.client.language.translations.list({
              q: 'hello world',
              source: 'en',
              target: 'de',
            });
          }).then(function(response) {
            console.log(response.result.data.translations[0].translatedText);
          }, function(reason) {
            console.log('Error: ' + reason.result.error.message);
          });
        };

        // Load the JavaScript client library and invoke start afterwards.
        gapi.load('client', start);
      </script>
    </head>
    <body>
      <div id="results"></div>
    </body>
  </html>

کتابخانه مشتری JS

OAuth 2.0 برای برنامه های کاربردی وب سمت کلاینت که در مرورگر با استفاده از یک گفتگوی بازشو برای رضایت کاربر اجرا می شوند.

ماژول gapi.auth2 به صورت دستی بارگیری می شود.

<!DOCTYPE html>
<html><head></head><body>
<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body></html>

نقاط پایانی OAuth 2.0

OAuth 2.0 برای برنامه های کاربردی وب سمت سرویس گیرنده که در مرورگر با استفاده از تغییر مسیرها به Google برای رضایت کاربر اجرا می شوند.

این مثال تماس‌های مستقیم با نقاط پایانی OAuth 2.0 Google را از مرورگر کاربر نشان می‌دهد و از ماژول gapi.auth2 یا کتابخانه جاوا اسکریپت استفاده نمی‌کند.

<!DOCTYPE html>
<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*

    *   Create form to request access token from Google's OAuth 2.0 server.
 */
function oauth2SignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

فقط GIS

این مثال فقط کتابخانه جاوا اسکریپت سرویس هویت گوگل را با استفاده از مدل نشانه و پنجره بازشو برای رضایت کاربر نشان می دهد. این برای نشان دادن حداقل تعداد مراحل مورد نیاز برای پیکربندی یک کلاینت، درخواست و دریافت نشانه دسترسی و فراخوانی یک API Google ارائه شده است.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      var access_token;

      function initClient() {
        client = google.accounts.oauth2.initTokenClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/contacts.readonly',
          callback: (tokenResponse) => {
            access_token = tokenResponse.access_token;
          },
        });
      }
      function getToken() {
        client.requestAccessToken();
      }
      function revokeToken() {
        google.accounts.oauth2.revoke(access_token, () => {console.log('access token revoked')});
      }
      function loadCalendar() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
        xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
        xhr.send();
      }
    </script>
    <h1>Google Identity Services Authorization Token model</h1>
    <button onclick="getToken();">Get access token</button><br><br>
    <button onclick="loadCalendar();">Load Calendar</button><br><br>
    <button onclick="revokeToken();">Revoke token</button>
  </body>
</html>

GAPI همگام‌سازی/انتظار

این مثال نشان می‌دهد که چگونه می‌توان کتابخانه سرویس هویت Google را با استفاده از مدل توکن اضافه کرد، ماژول gapi.auth2 حذف کرد و با استفاده از Google API Client Library برای جاوا اسکریپت، یک API فراخوانی کرد.

Promises، async و await برای اجرای دستور بارگیری کتابخانه و گرفتن و امتحان مجدد خطاهای مجوز استفاده می شود. تماس API فقط پس از در دسترس بودن یک نشانه دسترسی معتبر برقرار می شود.

از کاربران انتظار می رود زمانی که نشانه دسترسی در هنگام بارگیری صفحه برای اولین بار یا بعداً پس از منقضی شدن رمز دسترسی گم شده است، دکمه «نمایش تقویم» را فشار دهند.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <h1>GAPI with GIS async/await</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>

  <script>

    const gapiLoadPromise = new Promise((resolve, reject) => {
      gapiLoadOkay = resolve;
      gapiLoadFail = reject;
    });
    const gisLoadPromise = new Promise((resolve, reject) => {
      gisLoadOkay = resolve;
      gisLoadFail = reject;
    });

    var tokenClient;

    (async () => {
      document.getElementById("showEventsBtn").style.visibility="hidden";
      document.getElementById("revokeBtn").style.visibility="hidden";

      // First, load and initialize the gapi.client
      await gapiLoadPromise;
      await new Promise((resolve, reject) => {
        // NOTE: the 'auth2' module is no longer loaded.
        gapi.load('client', {callback: resolve, onerror: reject});
      });
      await gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
      });

      // Now load the GIS client
      await gisLoadPromise;
      await new Promise((resolve, reject) => {
        try {
          tokenClient = google.accounts.oauth2.initTokenClient({
              client_id: 'YOUR_CLIENT_ID',
              scope: 'https://www.googleapis.com/auth/calendar.readonly',
              prompt: 'consent',
              callback: '',  // defined at request time in await/promise scope.
          });
          resolve();
        } catch (err) {
          reject(err);
        }
      });

      document.getElementById("showEventsBtn").style.visibility="visible";
      document.getElementById("revokeBtn").style.visibility="visible";
    })();

    async function getToken(err) {

      if (err.result.error.code == 401 || (err.result.error.code == 403) &&
          (err.result.error.status == "PERMISSION_DENIED")) {

        // The access token is missing, invalid, or expired, prompt for user consent to obtain one.
        await new Promise((resolve, reject) => {
          try {
            // Settle this promise in the response callback for requestAccessToken()
            tokenClient.callback = (resp) => {
              if (resp.error !== undefined) {
                reject(resp);
              }
              // GIS has automatically updated gapi.client with the newly issued access token.
              console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));
              resolve(resp);
            };
            tokenClient.requestAccessToken();
          } catch (err) {
            console.log(err)
          }
        });
      } else {
        // Errors unrelated to authorization: server errors, exceeding quota, bad requests, and so on.
        throw new Error(err);
      }
    }

    function showEvents() {

      // Try to fetch a list of Calendar events. If a valid access token is needed,
      // prompt to obtain one and then retry the original request.
      gapi.client.calendar.events.list({ 'calendarId': 'primary' })
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => getToken(err))  // for authorization errors obtain an access token
      .then(retry => gapi.client.calendar.events.list({ 'calendarId': 'primary' }))
      .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
      .catch(err  => console.log(err)); // cancelled by user, timeout, etc.
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
      }
    }

  </script>

  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoadOkay()" onerror="gapiLoadFail(event)"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoadOkay()" onerror="gisLoadFail(event)"></script>

</body>
</html>

پاسخ به تماس GAPI

این مثال نشان می‌دهد که چگونه می‌توان کتابخانه سرویس هویت Google را با استفاده از مدل توکن اضافه کرد، ماژول gapi.auth2 حذف کرد و با استفاده از Google API Client Library برای جاوا اسکریپت، یک API فراخوانی کرد.

از متغیرها برای اجرای دستور بارگیری کتابخانه استفاده می شود. تماس‌های GAPI پس از بازگرداندن یک نشانه دسترسی معتبر، از درون پاسخ تماس برقرار می‌شوند.

انتظار می رود که کاربران هنگام بارگیری صفحه برای اولین بار، دکمه نمایش تقویم را فشار دهند و زمانی که می خواهند اطلاعات تقویم خود را بازخوانی کنند، دوباره.

<!DOCTYPE html>
<html>
<head>
  <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoad()"></script>
  <script async defer src="https://accounts.google.com/gsi/client" onload="gisInit()"></script>
</head>
<body>
  <h1>GAPI with GIS callbacks</h1>
  <button id="showEventsBtn" onclick="showEvents();">Show Calendar</button><br><br>
  <button id="revokeBtn" onclick="revokeToken();">Revoke access token</button>
  <script>
    let tokenClient;
    let gapiInited;
    let gisInited;

    document.getElementById("showEventsBtn").style.visibility="hidden";
    document.getElementById("revokeBtn").style.visibility="hidden";

    function checkBeforeStart() {
       if (gapiInited && gisInited){
          // Start only when both gapi and gis are initialized.
          document.getElementById("showEventsBtn").style.visibility="visible";
          document.getElementById("revokeBtn").style.visibility="visible";
       }
    }

    function gapiInit() {
      gapi.client.init({
        // NOTE: OAuth2 'scope' and 'client_id' parameters have moved to initTokenClient().
      })
      .then(function() {  // Load the Calendar API discovery document.
        gapi.client.load('https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest');
        gapiInited = true;
        checkBeforeStart();
      });
    }

    function gapiLoad() {
        gapi.load('client', gapiInit)
    }

    function gisInit() {
     tokenClient = google.accounts.oauth2.initTokenClient({
                client_id: 'YOUR_CLIENT_ID',
                scope: 'https://www.googleapis.com/auth/calendar.readonly',
                callback: '',  // defined at request time
            });
      gisInited = true;
      checkBeforeStart();
    }

    function showEvents() {

      tokenClient.callback = (resp) => {
        if (resp.error !== undefined) {
          throw(resp);
        }
        // GIS has automatically updated gapi.client with the newly issued access token.
        console.log('gapi.client access token: ' + JSON.stringify(gapi.client.getToken()));

        gapi.client.calendar.events.list({ 'calendarId': 'primary' })
        .then(calendarAPIResponse => console.log(JSON.stringify(calendarAPIResponse)))
        .catch(err => console.log(err));

        document.getElementById("showEventsBtn").innerText = "Refresh Calendar";
      }

      // Conditionally ask users to select the Google Account they'd like to use,
      // and explicitly obtain their consent to fetch their Calendar.
      // NOTE: To request an access token a user gesture is necessary.
      if (gapi.client.getToken() === null) {
        // Prompt the user to select a Google Account and asked for consent to share their data
        // when establishing a new session.
        tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
        // Skip display of account chooser and consent dialog for an existing session.
        tokenClient.requestAccessToken({prompt: ''});
      }
    }

    function revokeToken() {
      let cred = gapi.client.getToken();
      if (cred !== null) {
        google.accounts.oauth2.revoke(cred.access_token, () => {console.log('Revoked: ' + cred.access_token)});
        gapi.client.setToken('');
        document.getElementById("showEventsBtn").innerText = "Show Calendar";
      }
    }
  </script>
</body>
</html>

برنامه های وب سمت سرور

ورود به سیستم Google برای برنامه‌های سمت سرور که در پلتفرم باطن اجرا می‌شوند با استفاده از تغییر مسیر به Google برای رضایت کاربر.

<!DOCTYPE html>
<html>
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
    <script>
      function start() {
        gapi.load('auth2', function() {
          auth2 = gapi.auth2.init({
            client_id: 'YOUR_CLIENT_ID',
            api_key: 'YOUR_API_KEY',
            discovery_docs: ['https://www.googleapis.com/discovery/v1/apis/translate/v2/rest'],
            // Scopes to request in addition to 'profile' and 'email'
            scope: 'https://www.googleapis.com/auth/cloud-translation',
          });
        });
      }
      function signInCallback(authResult) {
        if (authResult['code']) {
          console.log("sending AJAX request");
          // Send authorization code obtained from Google to backend platform
          $.ajax({
            type: 'POST',
            url: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
            // Always include an X-Requested-With header to protect against CSRF attacks.
            headers: {
              'X-Requested-With': 'XMLHttpRequest'
            },
            contentType: 'application/octet-stream; charset=utf-8',
            success: function(result) {
              console.log(result);
            },
            processData: false,
            data: authResult['code']
          });
        } else {
          console.log('error: failed to obtain authorization code')
        }
      }
    </script>
  </head>
  <body>
    <button id="signinButton">Sign In With Google</button>
    <script>
      $('#signinButton').click(function() {
        // Obtain an authorization code from Google
        auth2.grantOfflineAccess().then(signInCallback);
      });
    </script>
  </body>
</html>

HTTP/REST با استفاده از تغییر مسیر

استفاده از OAuth 2.0 برای برنامه های کاربردی وب سرور برای ارسال کد مجوز از مرورگر کاربر به پلتفرم باطن شما. رضایت کاربر با هدایت مرورگر کاربر به Google انجام می شود.

/\*
 \* Create form to request access token from Google's OAuth 2.0 server.
 \*/
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);
  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client\_id': 'YOUR_CLIENT_ID',
                'redirect\_uri': 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URL',
                'response\_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include\_granted\_scopes': 'true',
                'state': 'pass-through value'};
  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

GIS Popup UX

این مثال فقط کتابخانه جاوا اسکریپت سرویس هویت Google را با استفاده از مدل کد مجوز یک گفتگوی بازشو برای رضایت کاربر و کنترل کننده پاسخ تماس برای دریافت کد مجوز از Google نشان می دهد. این برای نشان دادن حداقل تعداد مراحل مورد نیاز برای پیکربندی مشتری، کسب رضایت و ارسال کد مجوز به پلتفرم باطن شما ارائه شده است.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly',
          ux_mode: 'popup',
          callback: (response) => {
            var code_receiver_uri = 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI',
            // Send auth code to your backend platform
            const xhr = new XMLHttpRequest();
            xhr.open('POST', code_receiver_uri, true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.onload = function() {
              console.log('Signed in as: ' + xhr.responseText);
            };
            xhr.send('code=' + response.code);
            // After receipt, the code is exchanged for an access token and
            // refresh token, and the platform then updates this web app
            // running in user's browser with the requested calendar info.
          },
        });
      }
      function getAuthCode() {
        // Request authorization code and obtain user consent
        client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>

GIS Redirect UX

مدل کد مجوز از حالت‌های UX بازشو و تغییر مسیر برای ارسال یک کد مجوز برای هر کاربر به نقطه پایانی که توسط پلتفرم شما میزبانی می‌شود، پشتیبانی می‌کند. حالت تغییر مسیر UX در اینجا نشان داده شده است:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
        client = google.accounts.oauth2.initCodeClient({
          client_id: 'YOUR_CLIENT_ID',
          scope: 'https://www.googleapis.com/auth/calendar.readonly \
                  https://www.googleapis.com/auth/photoslibrary.readonly',
          ux_mode: 'redirect',
          redirect_uri: 'YOUR_AUTHORIZATION_CODE_ENDPOINT_URI'
        });
      }
      // Request an access token
      function getAuthCode() {
        // Request authorization code and obtain user consent
        client.requestCode();
      }
    </script>
    <button onclick="getAuthCode();">Load Your Calendar</button>
  </body>
</html>