OAuth 2.0 cho Ứng dụng web phía máy khách

Thư viện ứng dụng JS

Thư viện ứng dụng JavaScript đơn giản hoá nhiều khía cạnh của quy trình cấp phép:

1. Phương thức này tạo URL chuyển hướng cho máy chủ uỷ quyền của Google và cung cấp một phương thức để chuyển người dùng đến URL đó.
2. Công cụ này xử lý việc chuyển hướng từ máy chủ đó trở lại ứng dụng của bạn.
3. Mã này xác thực mã truy cập mà máy chủ uỷ quyền trả về.
4. Mã này lưu trữ mã truy cập mà máy chủ uỷ quyền gửi đến ứng dụng của bạn và truy xuất mã đó khi ứng dụng thực hiện các lệnh gọi API được uỷ quyền sau đó.

Đoạn mã dưới đây là phần trích dẫn từ ví dụ đầy đủ được hiển thị ở phần sau của tài liệu này. Mã này sẽ khởi chạy đối tượng gapi.client mà ứng dụng của bạn sẽ sử dụng sau này để gọi API. Khi đối tượng đó được tạo, đối tượng gapi.auth2 được ứng dụng của bạn sử dụng để kiểm tra và giám sát trạng thái uỷ quyền của người dùng cũng được khởi động.

Lệnh gọi đến gapi.client.init chỉ định các trường sau:

• Giá trị apiKey và clientId chỉ định thông tin đăng nhập uỷ quyền của ứng dụng. Như đã thảo luận trong phần tạo thông tin đăng nhập ủy quyền, bạn có thể lấy các giá trị này trong API Console. Xin lưu ý rằng clientId là bắt buộc nếu ứng dụng của bạn đưa ra các yêu cầu API được uỷ quyền. Các ứng dụng chỉ tạo yêu cầu trái phép chỉ có thể chỉ định khoá API.

• Trường scope chỉ định một danh sách được phân tách bằng dấu cách gồm các phạm vi truy cập tương ứng với tài nguyên mà ứng dụng có thể truy cập thay mặt người dùng. Các giá trị này thông báo cho màn hình xin phép mà Google hiển thị cho người dùng.

  Ứng dụng nên yêu cầu quyền truy cập vào phạm vi uỷ quyền trong ngữ cảnh bất cứ khi nào có thể. Bằng cách yêu cầu quyền truy cập vào dữ liệu người dùng trong ngữ cảnh, thông qua chế độ uỷ quyền gia tăng, bạn có thể giúp người dùng dễ dàng hiểu được lý do ứng dụng của bạn cần quyền truy cập.

• Trường discoveryDocs xác định danh sách các tài liệu Khám phá API mà ứng dụng sử dụng. Tài liệu Khám phá mô tả nền tảng của một API, bao gồm cả giản đồ tài nguyên của API đó, và thư viện ứng dụng JavaScript sử dụng thông tin đó để tạo các phương thức mà ứng dụng có thể sử dụng. Trong ví dụ này, mã truy xuất tài liệu khám phá cho phiên bản 3 của API Google Drive.

Sau khi lệnh gọi gapi.client.init hoàn tất, mã sẽ đặt biến GoogleAuth để xác định đối tượng Xác thực của Google. Cuối cùng, mã này sẽ thiết lập một trình nghe gọi hàm khi trạng thái đăng nhập của người dùng thay đổi. (Hàm đó không được xác định trong đoạn trích.)

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

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

Điểm cuối OAuth 2.0

Nếu đang truy cập trực tiếp vào các điểm cuối OAuth 2.0, bạn có thể chuyển sang bước tiếp theo.

Thư viện ứng dụng JS

Gọi phương thức GoogleAuth.signIn() để chuyển hướng người dùng đến máy chủ uỷ quyền của Google.

GoogleAuth.signIn();

Trong thực tế, ứng dụng của bạn có thể đặt một giá trị Boolean để xác định xem có gọi phương thức signIn() hay không trước khi cố thực hiện lệnh gọi API.

Đoạn mã dưới đây minh hoạ cách bạn sẽ bắt đầu quy trình uỷ quyền người dùng. Hãy lưu ý những điểm sau về đoạn mã:

• Đối tượng GoogleAuth được tham chiếu trong mã giống với biến toàn cục được xác định trong đoạn mã ở bước 1.

• Hàm updateSigninStatus là một trình nghe theo dõi các thay đổi đối với trạng thái uỷ quyền của người dùng. Vai trò của nó là trình nghe cũng được xác định trong đoạn mã ở bước 1:

  GoogleAuth.isSignedIn.listen(updateSigninStatus);

• Đoạn mã xác định hai biến toàn cục bổ sung:

  • isAuthorized là biến Boolean cho biết người dùng đã đăng nhập hay chưa. Bạn có thể đặt giá trị này khi ứng dụng tải và cập nhật nếu người dùng đăng nhập hoặc đăng xuất khỏi ứng dụng.

    Trong đoạn mã này, hàm sendAuthorizedApiRequest sẽ kiểm tra giá trị của biến để xác định xem ứng dụng có nên thử một yêu cầu API yêu cầu cấp quyền hay nhắc người dùng uỷ quyền cho ứng dụng hay không.

  • currentApiRequest là một đối tượng lưu trữ thông tin chi tiết về yêu cầu API gần nhất mà người dùng đã thử. Giá trị của đối tượng được đặt khi ứng dụng gọi hàm sendAuthorizedApiRequest.

    Nếu người dùng đã uỷ quyền cho ứng dụng, thì yêu cầu sẽ được thực thi ngay. Nếu không, hàm này sẽ chuyển hướng người dùng đến trang đăng nhập. Sau khi người dùng đăng nhập, hàm updateSignInStatus gọi sendAuthorizedApiRequest, truyền cùng một yêu cầu đã cố gắng thực hiện trước khi quy trình uỷ quyền bắt đầu.

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

Điểm cuối OAuth 2.0

Tạo một URL để yêu cầu quyền truy cập từ điểm cuối OAuth 2.0 của Google tại https://accounts.google.com/o/oauth2/v2/auth. Bạn có thể truy cập điểm cuối này qua HTTPS; các đường kết nối HTTP đơn giản sẽ bị từ chối.

Máy chủ uỷ quyền của Google hỗ trợ các tham số chuỗi truy vấn sau đây đối với các ứng dụng máy chủ web:

Mẫu chuyển hướng đến máy chủ uỷ quyền của Google

Dưới đây là URL mẫu cùng với dấu ngắt dòng và khoảng trắng để dễ đọc.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

Sau khi bạn tạo URL yêu cầu, hãy chuyển hướng người dùng đến URL yêu cầu.

Mã mẫu JavaScript

Đoạn mã JavaScript sau đây cho biết cách bắt đầu quy trình uỷ quyền trong JavaScript mà không cần sử dụng Thư viện ứng dụng API của Google cho JavaScript. Vì điểm cuối OAuth 2.0 này không hỗ trợ tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS), nên đoạn mã này sẽ tạo một biểu mẫu để mở yêu cầu đến điểm cuối đó.

/*
 * 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_REDIRECT_URI',
                '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();
}

Thư viện ứng dụng JS

Thư viện ứng dụng JavaScript xử lý phản hồi từ máy chủ uỷ quyền của Google. Nếu bạn đặt một trình nghe để theo dõi các thay đổi ở trạng thái đăng nhập của người dùng hiện tại, thì hàm đó sẽ được gọi khi người dùng cấp quyền truy cập vào ứng dụng được yêu cầu.

Điểm cuối OAuth 2.0

Máy chủ OAuth 2.0 sẽ gửi phản hồi đến redirect_uri được chỉ định trong yêu cầu mã thông báo truy cập của bạn.

Nếu người dùng chấp thuận yêu cầu, thì phản hồi sẽ chứa mã truy cập. Nếu người dùng không phê duyệt yêu cầu, thì phản hồi sẽ chứa thông báo lỗi. Mã truy cập hoặc thông báo lỗi được trả về trên mảnh băm của URI chuyển hướng, như hiển thị dưới đây:

• Phản hồi của mã truy cập:

  https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

  Ngoài thông số access_token, chuỗi mảnh còn chứa thông số token_type (luôn luôn được đặt thành Bearer) và thông số expires_in (chỉ định thời gian hoạt động của mã thông báo) tính bằng giây. Nếu bạn chỉ định tham số state trong yêu cầu mã truy cập, thì giá trị của tham số đó cũng sẽ được đưa vào phản hồi.

• Phản hồi lỗi:

  https://oauth2.example.com/callback#error=access_denied

Phản hồi của máy chủ OAuth 2.0 mẫu

Bạn có thể kiểm tra quy trình này bằng cách nhấp vào URL mẫu sau đây. URL này yêu cầu quyền truy cập chỉ đọc để xem siêu dữ liệu cho các tệp trong Google Drive của bạn:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

Sau khi hoàn tất quy trình OAuth 2.0, bạn sẽ được chuyển hướng đến http://localhost/oauth2callback. URL đó sẽ gây ra lỗi 404 NOT FOUND trừ khi máy cục bộ của bạn vô tình phân phát một tệp tại địa chỉ đó. Bước tiếp theo sẽ cung cấp thêm thông tin về những thông tin được trả về trong URI khi người dùng được chuyển hướng trở lại ứng dụng của bạn.

Thư viện ứng dụng JS

Sau khi ứng dụng của bạn nhận được mã truy cập, bạn có thể thay mặt người dùng sử dụng thư viện ứng dụng JavaScript để đưa ra yêu cầu API. Thư viện ứng dụng sẽ quản lý mã truy cập cho bạn và bạn không cần phải làm gì đặc biệt để gửi mã đó trong yêu cầu.

Thư viện ứng dụng hỗ trợ hai cách để gọi phương thức API. Nếu bạn đã tải một tài liệu khám phá, API sẽ xác định các hàm dành riêng cho phương thức đó. Bạn cũng có thể sử dụng hàm gapi.client.request để gọi một phương thức API. Hai đoạn mã sau đây minh họa các tùy chọn này cho phương thức about.get của API Drive.

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

Điểm cuối OAuth 2.0

Sau khi ứng dụng của bạn nhận được mã truy cập, bạn có thể sử dụng mã thông báo này để gọi API Google thay mặt cho một tài khoản người dùng nhất định nếu API đó đã cấp(các) phạm vi quyền truy cập mà ứng dụng cần. Để thực hiện việc này, hãy đưa mã truy cập vào một yêu cầu tới API bằng cách thêm giá trị tham số truy vấn access_token hoặc Authorization tiêu đề HTTP Bearer. Khi có thể, bạn nên chọn tiêu đề HTTP vì các chuỗi cụm từ tìm kiếm có xu hướng xuất hiện trong nhật ký máy chủ. Trong hầu hết trường hợp, bạn có thể sử dụng một thư viện ứng dụng để thiết lập lệnh gọi đến các API của Google (ví dụ: khi gọi API Drive Files).

Bạn có thể dùng thử tất cả API của Google và xem phạm vi của các API đó tại OAuth 2.0 Playground.

Ví dụ về HTTP GET

Lệnh gọi đến điểm cuối drive.files (API Drive Files) sử dụng tiêu đề HTTP Authorization: Bearer có thể có dạng như sau. Xin lưu ý rằng bạn cần chỉ định mã truy cập của chính mình:

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Sau đây là lệnh gọi đến cùng một API cho người dùng đã xác thực bằng cách sử dụng tham số chuỗi truy vấn access_token:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

Ví dụ về curl

Bạn có thể kiểm thử các lệnh này bằng ứng dụng dòng lệnh curl. Sau đây là một ví dụ về cách sử dụng tuỳ chọn tiêu đề HTTP (ưu tiên):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

Hoặc, tùy chọn tham số chuỗi truy vấn:

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

Mã mẫu JavaScript

Đoạn mã dưới đây minh hoạ cách sử dụng CORS (Chia sẻ tài nguyên trên nhiều nguồn gốc) để gửi yêu cầu đến API Google. Ví dụ này không sử dụng Thư viện ứng dụng API của Google cho JavaScript. Tuy nhiên, ngay cả khi bạn không sử dụng thư viện ứng dụng, hướng dẫn hỗ trợ CORS trong tài liệu về thư viện đó có thể giúp bạn hiểu rõ hơn về những yêu cầu này.

Trong đoạn mã này, biến access_token đại diện cho mã thông báo bạn đã nhận được để thay mặt người dùng được uỷ quyền đưa ra các yêu cầu API. Ví dụ đầy đủ minh hoạ cách lưu trữ mã thông báo đó trong bộ nhớ cục bộ của trình duyệt và truy xuất mã khi đưa ra yêu cầu API.

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) {
  console.log(xhr.response);
};
xhr.send(null);

Thư viện ứng dụng JS

Bản minh hoạ mã mẫu

Phần này minh họa cách hoạt động của mã mẫu sau đây để minh hoạ cách hoạt động của mã trong một ứng dụng thực tế. Sau khi bạn cho phép ứng dụng, mã này sẽ được liệt kê trong số các ứng dụng kết nối với Tài khoản Google của bạn. Ứng dụng này có tên là OAuth 2.0 Demo cho Google API Docs. Tương tự như vậy, nếu bạn thu hồi quyền truy cập và làm mới trang đó, thì ứng dụng đó sẽ không xuất hiện nữa.

Lưu ý rằng ứng dụng này yêu cầu quyền truy cập vào phạm vi https://www.googleapis.com/auth/drive.metadata.readonly. Quyền truy cập chỉ được yêu cầu để minh hoạ cách bắt đầu quy trình OAuth 2.0 trong một ứng dụng JavaScript. Ứng dụng này không đưa ra yêu cầu API nào.

Mã mẫu JavaScript

Như đã trình bày ở trên, mã mẫu này dành cho một trang (ứng dụng) tải Thư viện ứng dụng API của Google cho JavaScript rồi bắt đầu quy trình OAuth 2.0. Trang sẽ hiển thị một trong hai cách sau:

• Một nút cho phép người dùng đăng nhập vào ứng dụng. Nếu trước đây người dùng chưa cho phép ứng dụng, thì ứng dụng sẽ khởi chạy quy trình OAuth 2.0.
• Hai nút cho phép người dùng đăng xuất khỏi ứng dụng hoặc thu hồi quyền truy cập đã cấp trước đó cho ứng dụng. Nếu đăng xuất khỏi một ứng dụng, bạn sẽ không thu hồi quyền truy cập đã cấp cho ứng dụng. Bạn sẽ cần đăng nhập lại trước khi ứng dụng có thể thay mặt bạn thực hiện các yêu cầu được ủy quyền khác. Tuy nhiên, bạn sẽ không phải cấp lại quyền truy cập vào lần tiếp theo.

Bạn cũng có thể thu hồi quyền truy cập vào ứng dụng thông qua trang Quyền cho Tài khoản Google của mình. Ứng dụng được liệt kê là Bản minh họa OAuth 2.0 cho Google API Tài liệu.

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

Điểm cuối OAuth 2.0

Mã mẫu này minh hoạ cách hoàn tất quy trình OAuth 2.0 trong JavaScript mà không cần sử dụng Thư viện ứng dụng API của Google cho JavaScript. Mã này dành cho một trang HTML hiển thị nút để thử một yêu cầu API. Nếu bạn nhấp vào nút này, mã sẽ kiểm tra xem trang đã lưu trữ mã truy cập API trong bộ nhớ cục bộ của trình duyệt hay chưa. Nếu có, sẽ thực thi yêu cầu API. Nếu không, quá trình này sẽ bắt đầu quy trình OAuth 2.0.

Đối với quy trình OAuth 2.0, trang sẽ làm theo các bước sau:

1. Hướng dẫn này sẽ chuyển người dùng đến máy chủ OAuth 2.0 của Google. Máy chủ này yêu cầu quyền truy cập vào phạm vi https://www.googleapis.com/auth/drive.metadata.readonly.
2. Sau khi cấp (hoặc từ chối) quyền truy cập vào một hoặc nhiều phạm vi yêu cầu, người dùng sẽ được chuyển hướng đến trang gốc để phân tích cú pháp mã truy cập trong chuỗi giá trị nhận dạng mảnh.

3. Trang sử dụng mã truy cập để tạo yêu cầu API mẫu.

   Yêu cầu API gọi phương thức about.get của API Drive để truy xuất thông tin về tài khoản Google Drive của người dùng được uỷ quyền.

4. Nếu yêu cầu được thực thi thành công, phản hồi API sẽ được ghi vào bảng điều khiển gỡ lỗi của trình duyệt.

Bạn có thể thu hồi quyền truy cập vào ứng dụng thông qua trang Quyền cho Tài khoản Google của mình. Ứng dụng đó sẽ được liệt kê là Bản minh hoạ OAuth 2.0 của Google API cho Tài liệu.

Để chạy mã này cục bộ, bạn cần đặt giá trị cho các biến YOUR_CLIENT_ID và YOUR_REDIRECT_URI tương ứng với thông tin uỷ quyền. Bạn nên đặt biến YOUR_REDIRECT_URI thành cùng một URL mà trang đang được phân phát. Giá trị này phải khớp chính xác với một trong các URI chuyển hướng được uỷ quyền cho ứng dụng OAuth 2.0, mà bạn đã định cấu hình trong API Console Credentials page. Nếu giá trị này không khớp với một URI được ủy quyền, bạn sẽ gặp lỗi redirect_uri_mismatch. Dự án của bạn cũng phải bật API thích hợp cho yêu cầu này.

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

Thư viện ứng dụng JS

Để thêm phạm vi vào mã truy cập hiện có, hãy gọi phương thức GoogleUser.grant(options). Đối tượng options xác định các phạm vi bổ sung mà bạn muốn cấp quyền truy cập.

// Space-separated list of additional scope(s) you are requesting access to.
// This code adds read-only access to the user's calendars via the Calendar API.
var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';

// Retrieve the GoogleUser object for the current user.
var GoogleUser = GoogleAuth.currentUser.get();
GoogleUser.grant({'scope': NEW_SCOPES});

Điểm cuối OAuth 2.0

Để thêm phạm vi vào mã thông báo truy cập hiện có, hãy thêm thông số include_granted_scopes vào yêu cầu gửi tới máy chủ OAuth 2.0 của Google.

Đoạn mã sau đây minh hoạ cách thực hiện việc này. Đoạn mã giả định rằng bạn đã lưu trữ các phạm vi mà mã truy cập của bạn hợp lệ trong bộ nhớ cục bộ của trình duyệt. (Mã ví dụ đầy đủ lưu trữ danh sách các phạm vi mà mã truy cập hợp lệ bằng cách đặt thuộc tính oauth2-test-params.scope trong bộ nhớ cục bộ của trình duyệt.)

Đoạn mã so sánh các phạm vi mà mã truy cập hợp lệ với phạm vi bạn muốn sử dụng cho một truy vấn cụ thể. Nếu mã truy cập không bao gồm phạm vi đó, thì quy trình OAuth 2.0 sẽ bắt đầu. Ở đây, hàm oauth2SignIn giống với hàm được cung cấp ở bước 2 (và được cung cấp sau trong ví dụ đầy đủ).

var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
var params = JSON.parse(localStorage.getItem('oauth2-test-params'));

var current_scope_granted = false;
if (params.hasOwnProperty('scope')) {
  var scopes = params['scope'].split(' ');
  for (var s = 0; s < scopes.length; s++) {
    if (SCOPE == scopes[s]) {
      current_scope_granted = true;
    }
  }
}

if (!current_scope_granted) {
  oauth2SignIn(); // This function is defined elsewhere in this document.
} else {
  // Since you already have access, you can proceed with the API request.
}

Thư viện ứng dụng JS

Để thu hồi mã thông báo theo phương thức lập trình, hãy gọi GoogleAuth.disconnect():

GoogleAuth.disconnect();

Điểm cuối OAuth 2.0

Để thu hồi mã thông báo theo phương thức lập trình, ứng dụng sẽ yêu cầu https://oauth2.googleapis.com/revoke và đưa mã thông báo đó vào dưới dạng thông số:

curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
        https://oauth2.googleapis.com/revoke?token={token}

Mã này có thể là mã truy cập hoặc mã làm mới. Nếu mã này là mã truy cập và có mã làm mới tương ứng, thì mã làm mới cũng sẽ bị thu hồi.

Nếu quá trình thu hồi được xử lý thành công, thì mã trạng thái HTTP của phản hồi sẽ là 200. Đối với các điều kiện lỗi, mã trạng thái HTTP 400 sẽ được trả về cùng với một mã lỗi.

Đoạn mã JavaScript sau đây cho biết cách thu hồi một mã thông báo trong JavaScript mà không cần sử dụng Thư viện ứng dụng API của Google cho JavaScript. Vì điểm cuối OAuth 2.0 của Google để thu hồi mã thông báo không hỗ trợ tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) nên mã sẽ tạo một biểu mẫu và gửi biểu mẫu đến điểm cuối thay vì sử dụng phương thức XMLHttpRequest() để đăng yêu cầu.

function revokeAccess(accessToken) {
  // Google's OAuth 2.0 endpoint for revoking access tokens.
  var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';

  // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'post');
  form.setAttribute('action', revokeTokenEndpoint);

  // Add access token to the form so it is set as value of 'token' parameter.
  // This corresponds to the sample curl request, where the URL is:
  //      https://oauth2.googleapis.com/revoke?token={token}
  var tokenField = document.createElement('input');
  tokenField.setAttribute('type', 'hidden');
  tokenField.setAttribute('name', 'token');
  tokenField.setAttribute('value', accessToken);
  form.appendChild(tokenField);

  // Add form to page and submit it to actually revoke the token.
  document.body.appendChild(form);
  form.submit();
}