Реализация OAuth для использования с Business Profile API

Каждый запрос, который ваше приложение отправляет к API бизнес-профиля, должен включать токен авторизации. Токен авторизации идентифицирует пользователя или приложение для Google, что обеспечивает доступ к API профиля компании. Ваше приложение должно использовать протокол OAuth 2.0 для авторизации запросов.

В этом руководстве объясняются различные методы, которые вы можете использовать для реализации OAuth 2.0 на вашей платформе. Платформа Google Identity Platform предоставляет функции входа в Google и OAuth, которые используются в этом руководстве.

Чтобы лучше понять, как использовать Oauth 2.0 для приложений веб-сервера, обратитесь к руководству здесь .

Реализация OAuth 2.0 обеспечивает следующие преимущества:

  • Защищает доступ к данным владельца бизнеса.
  • Устанавливает личность владельца компании при входе в свой аккаунт Google.
  • Устанавливает, что партнерская платформа или приложение могут получать доступ к данным о местоположении и изменять их с явного согласия владельца бизнеса. Позже владелец может отозвать этот доступ.
  • Устанавливает идентичность партнерской платформы.
  • Позволяет партнерским платформам выполнять онлайн- или офлайн-действия от имени владельца бизнеса. Сюда входят ответы на отзывы, создание публикаций и обновления пунктов меню.

Доступ через API с OAuth 2.0

Прежде чем начать, вам необходимо настроить проект Google Cloud и включить API профиля компании. Дополнительную информацию см. в документации по базовой настройке .

Выполните следующие действия, чтобы создать учетные данные и экран согласия:

  1. На странице «Учетные данные» в консоли API нажмите «Создать учетные данные » и выберите «Идентификатор клиента OAuth» из раскрывающегося списка.
  2. Выберите тип заявки, заполните соответствующую информацию и нажмите «Создать» .
  3. Нажмите Сохранить .
  4. Обновите настройки экрана согласия OAuth . Отсюда вы можете обновить название и логотип приложения, а также добавить ссылку на ваши условия обслуживания и политику конфиденциальности.

На следующем изображении показаны поля имени приложения и логотипа на экране согласия OAuth:

На следующем изображении показаны дополнительные поля, которые появляются на экране согласия OAuth:

На следующем изображении показан пример того, что может увидеть пользователь перед тем, как дать согласие:

Методы внедрения OAuth 2.0

Для реализации OAuth 2.0 можно использовать следующие методы:

В следующем содержимом представлена ​​информация об этих методах внедрения OAuth 2.0 в ваше приложение.

Области авторизации

Требуется одна из следующих областей OAuth:

  • https://www.googleapis.com/auth/business.manage
  • https://www.googleapis.com/auth/plus.business.manage

Область plus.business.manage устарела и доступна для обеспечения обратной совместимости с существующими реализациями.

Клиентские библиотеки

В примерах на этой странице для конкретных языков используются клиентские библиотеки Google API для реализации авторизации OAuth 2.0. Чтобы запустить примеры кода, сначала необходимо установить клиентскую библиотеку для вашего языка.

Клиентские библиотеки доступны для следующих языков:

Вход в Google

Вход в Google — это самый быстрый способ интегрировать OAuth в вашу платформу. Он доступен для Android, iOS, Интернета и других платформ.

Google Sign-In — это безопасная система аутентификации, которая позволяет пользователям входить в систему с помощью своей учетной записи Google, которая является той же учетной записью, которую они используют для входа в другие службы Google. После того как пользователь войдет в систему, он может дать согласие вашему приложению на вызов API бизнес-профиля и обмен кодом авторизации, который используется для получения токенов обновления и доступа.

Оффлайн доступ

Возможно, вам захочется вызвать API-интерфейсы бизнес-профиля от имени пользователя, даже если он находится в автономном режиме. Платформам рекомендуется включать эту функцию, поскольку вы можете редактировать, просматривать и управлять списками в любое время после того, как пользователь вошел в систему и дал согласие.

Google предполагает, что пользователь уже вошел в свою учетную запись Google, предоставил вашему приложению согласие на вызов API-интерфейсов профиля компании и обменялся кодом авторизации, который затем используется для получения токена обновления, а затем и токена доступа. Пользователь может безопасно сохранить токен обновления и использовать его позже для получения нового токена доступа в любое время. Дополнительную информацию см. в статье Вход в Google для серверных приложений .

В следующем фрагменте кода показано, как реализовать автономный доступ в вашем приложении. Чтобы запустить этот код, см. раздел «Выполнение примера» .

<!-- The top of file index.html -->
<html itemscope itemtype="http://schema.org/Article">
<head>
  <!-- BEGIN Pre-requisites -->
  <script src="https://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>
  <!-- END Pre-requisites -->
<!-- Continuing the <head> section -->
  <script>
    function start() {
      gapi.load('auth2', function() {
        auth2 = gapi.auth2.init({
          client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
          // Scopes to request in addition to 'profile' and 'email'
          scope: 'https://www.googleapis.com/auth/business.manage',
          immediate: true
        });
      });
    }
  </script>
</head>
<body>
  <!-- Add where you want your sign-in button to render -->
<!-- Use an image that follows the branding guidelines in a real app, more info here:
 https://developers.google.com/identity/branding-guidelines
-->
<h1>Business Profile Offline Access Demo</h1>

<p> This demo demonstrates the use of Google Identity Services and OAuth to gain authorization to call the Business Profile APIs on behalf of the user, even when the user is offline.

When a refresh token is acquired, store this token securely on your database. You will then be able to use this token to refresh the OAuth credentials and make offline API calls on behalf of the user. 

The user may revoke access at any time from the <a href='https://myaccount.google.com/permissions'>Account Settings</a> page.
</p>

<button id="signinButton">Sign in with Google</button><br>
<input id="authorizationCode" type="text" placeholder="Authorization Code" style="width: 60%"><button id="accessTokenButton" disabled>Retrieve Access/Refresh Token</button><br>
 <input id="refreshToken" type="text" placeholder="Refresh Token, never expires unless revoked" style="width: 60%"><button id="refreshSubmit">Refresh Access Token</button><br>
 <input id="accessToken" type="text" placeholder="Access Token" style="width: 60%"><button id="gmbAccounts">Get Business Profile Accounts</button><br>
 <p>API Responses:</p>
<script>
    //Will be populated after sign in.
    var authCode;
  $('#signinButton').click(function() {
    // signInCallback
    auth2.grantOfflineAccess().then(signInCallback);
  });

  $('#accessTokenButton').click(function() {
    // signInCallback defined in step 6.
    retrieveAccessTokenAndRefreshToken(authCode);
  });

  $('#refreshSubmit').click(function() {
    // signInCallback defined in step 6.
    retrieveAccessTokenFromRefreshToken($('#refreshToken').val());
  });

   $('#gmbAccounts').click(function() {
    // signInCallback defined in step 6.
    retrieveGoogleMyBusinessAccounts($('#accessToken').val());
  });




function signInCallback(authResult) {
    //the 'code' field from the response, used to retrieve access token and bearer token
  if (authResult['code']) {
    // Hide the sign-in button now that the user is authorized, for example:
    $('#signinButton').attr('style', 'display: none');
    authCode = authResult['code'];

    $("#accessTokenButton").attr( "disabled", false );

    //Pretty print response
    var e = document.createElement("pre")
    e.innerHTML = JSON.stringify(authResult, undefined, 2);
    document.body.appendChild(e);

    //autofill authorization code input
    $('#authorizationCode').val(authResult['code'])

    
  } else {
    // There was an error.
  }
}

//WARNING: THIS FUNCTION IS DISPLAYED FOR DEMONSTRATION PURPOSES ONLY. YOUR CLIENT_SECRET SHOULD NEVER BE EXPOSED ON THE CLIENT SIDE!!!!
function retrieveAccessTokenAndRefreshToken(code) {
      $.post('https://www.googleapis.com/oauth2/v4/token',
      { //the headers passed in the request
        'code' : code,
        'client_id' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        'client_secret' : 'YOUR_CLIENT_SECRET',
        'redirect_uri' : 'http://localhost:8000',
        'grant_type' : 'authorization_code'
      },
      function(returnedData) {
        console.log(returnedData);
        //pretty print JSON response
        var e = document.createElement("pre")
        e.innerHTML = JSON.stringify(returnedData, undefined, 2);
        document.body.appendChild(e);
        $('#refreshToken').val(returnedData['refresh_token'])
      });
}

//WARNING: THIS FUNCTION IS DISPLAYED FOR DEMONSTRATION PURPOSES ONLY. YOUR CLIENT_SECRET SHOULD NEVER BE EXPOSED ON THE CLIENT SIDE!!!!
function retrieveAccessTokenFromRefreshToken(refreshToken) {
    $.post('https://www.googleapis.com/oauth2/v4/token', 
        { // the headers passed in the request
        'refresh_token' : refreshToken,
        'client_id' : 'YOUR_CLIENT_ID.apps.googleusercontent.com',
        'client_secret' : 'YOUR_CLIENT_SECRET',
        'redirect_uri' : 'http://localhost:8000',
        'grant_type' : 'refresh_token'
      },
      function(returnedData) {
        var e = document.createElement("pre")
        e.innerHTML = JSON.stringify(returnedData, undefined, 2);
        document.body.appendChild(e);
        $('#accessToken').val(returnedData['access_token'])
      });
}

function retrieveGoogleMyBusinessAccounts(accessToken) {
    $.ajax({
        type: 'GET',
        url: 'https://mybusinessaccountmanagement.googleapis.com/v1/accounts',
        headers: {
            'Authorization' : 'Bearer ' + accessToken
        },
        success: function(returnedData) {
            var e = document.createElement("pre")
            e.innerHTML = JSON.stringify(returnedData, undefined, 2);
            document.body.appendChild(e);
        }
    });
}
</script>
</body>
</html>

Только онлайн-доступ

Для простоты реализации вызовы из API бизнес-профиля могут выполняться без кэширования токенов обновления пользователя. Однако пользователю необходимо войти в систему, чтобы платформа могла выполнять вызовы API в качестве пользователя.

В следующем фрагменте кода демонстрируется реализация процесса входа в Google и выполнение вызова API для конкретного пользователя. После того как пользователь войдет в свою учетную запись Google и предоставит согласие на ваше приложение, ему будет предоставлен токен доступа. Этот токен доступа идентифицирует пользователя и должен быть передан в качестве заголовка в запросе API профиля компании.

Чтобы запустить этот код, см. раздел «Выполнение примера» .

<!-- The top of file index.html -->
<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/business.manage">
    <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>
      var gmb_api_version = 'https://mybusinessaccountmanagement.googleapis.com/v1';
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log('Full Name: ' + profile.getName());
        console.log("Email: " + profile.getEmail());
        var access_token = googleUser.getAuthResponse().access_token;

        //Using the sign in data to make a Business Profile APIs call
        var req = gmb_api_version + '/accounts';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', req);
        xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);

        //Displaying the API response
        xhr.onload = function () {
          document.body.appendChild(document.createTextNode(xhr.responseText));
        }
        xhr.send();
      }
    </script>
  </body>
</html>

Запустите образец

Выполните следующие шаги, чтобы запустить предоставленный пример кода:

  1. Сохраните фрагмент кода в файл под названием index.html . Убедитесь, что в файле указан идентификатор клиента.
  2. Запустите веб-сервер с помощью следующей команды из рабочего каталога:

    Питон 2.X

    python -m SimpleHTTPServer 8000

    Питон 3.X

    python -m http.server 8000
  3. На странице «Учетные данные» в консоли API выберите используемый идентификатор клиента.

  4. В поле «Авторизованный источник JavaScript» введите URL-адрес своего веб-сайта. Чтобы запустить пример кода из этого руководства, вам также необходимо добавить http://localhost:8000 .

  5. Загрузите следующий URL-адрес в свой браузер:

    http://localhost:8000/index.html