Mọi yêu cầu mà ứng dụng của bạn gửi đến API Trang doanh nghiệp phải bao gồm mã thông báo uỷ quyền. Mã uỷ quyền giúp xác định người dùng hoặc ứng dụng cho Google, cho phép Google truy cập vào các API Trang doanh nghiệp. Ứng dụng của bạn phải sử dụng giao thức OAuth 2.0 để ủy quyền các yêu cầu.
Hướng dẫn này giải thích các phương thức mà bạn có thể sử dụng để triển khai OAuth 2.0 trên nền tảng của mình. Nền tảng Google Identity cung cấp chức năng Đăng nhập bằng Google và OAuth được sử dụng xuyên suốt hướng dẫn này.
Để hiểu thêm về cách người dùng Oauth 2.0 cho các ứng dụng máy chủ web, vui lòng tham khảo hướng dẫn tại đây.
Việc triển khai OAuth 2.0 mang lại các lợi ích sau:
- Bảo vệ quyền truy cập vào dữ liệu của chủ doanh nghiệp.
- Thiết lập danh tính của chủ doanh nghiệp khi họ đăng nhập vào Tài khoản Google của mình.
- Thiết lập rằng một nền tảng hoặc ứng dụng của đối tác có thể truy cập và sửa đổi dữ liệu vị trí khi có sự đồng ý rõ ràng của chủ doanh nghiệp. Sau đó, chủ sở hữu có thể thu hồi quyền truy cập này.
- Thiết lập danh tính của nền tảng đối tác.
- Cho phép các nền tảng của đối tác thực hiện các hành động trực tuyến hoặc ngoại tuyến thay mặt cho chủ doanh nghiệp. Dữ liệu này bao gồm phản hồi về các bài đánh giá, tạo bài đăng và cập nhật các món trong thực đơn.
Truy cập API bằng OAuth 2.0
Trước khi bắt đầu, bạn cần định cấu hình dự án trên Google Cloud và bật các API Trang doanh nghiệp. Để biết thêm thông tin, hãy xem tài liệu về Thiết lập cơ bản.
Định cấu hình OAuth và màn hình đồng ý
Hãy làm theo các bước sau để tạo thông tin đăng nhập và màn hình đồng ý:
- Trên trang Thông tin xác thực trong Bảng điều khiển API, hãy nhấp vào Tạo thông tin xác thực rồi chọn "Mã ứng dụng khách OAuth" trong danh sách thả xuống.
- Chọn loại ứng dụng, điền thông tin liên quan rồi nhấp vào Create (Tạo).
- Nhấp vào Lưu.
- Cập nhật các chế độ cài đặt màn hình xin phép bằng OAuth. Từ đó, bạn có thể cập nhật tên và biểu trưng của ứng dụng, cũng như đưa vào một đường liên kết đến điều khoản dịch vụ và chính sách quyền riêng tư của mình.
Hình ảnh sau đây cho thấy các trường tên và biểu trưng của ứng dụng trên màn hình lấy sự đồng ý của OAuth:
Hình ảnh sau đây cho thấy các trường bổ sung xuất hiện trên màn hình xin phép bằng OAuth:
Hình ảnh sau đây là ví dụ về những nội dung mà người dùng có thể thấy trước khi đồng ý:
Các phương thức kết hợp OAuth 2.0
Bạn có thể sử dụng các phương thức sau để triển khai OAuth 2.0:
Nội dung sau đây cung cấp thông tin về các phương thức này để kết hợp OAuth 2.0 vào ứng dụng của bạn.
Phạm vi uỷ quyền
Yêu cầu một trong các phạm vi OAuth sau:
- https://www.googleapis.com/auth/business.manage
- https://www.googleapis.com/auth/plus.business.manage
Phạm vi plus.business.manage không còn được dùng nữa và vẫn có sẵn để duy trì khả năng tương thích ngược cho các phương thức triển khai hiện có.
Thư viện ứng dụng
Các ví dụ theo ngôn ngữ cụ thể trên trang này sử dụng Thư viện ứng dụng API của Google để triển khai việc uỷ quyền OAuth 2.0. Để chạy mã mẫu, trước tiên, bạn phải cài đặt thư viện ứng dụng cho ngôn ngữ của mình.
Thư viện ứng dụng hỗ trợ các ngôn ngữ sau:
Đăng nhập bằng Google
Đăng nhập bằng Google là cách nhanh nhất để tích hợp OAuth vào nền tảng của bạn. Ứng dụng này có trên Android, iOS, Web, và nhiều nền tảng khác.
Đăng nhập bằng Google là một hệ thống xác thực an toàn cho phép người dùng đăng nhập bằng Tài khoản Google của họ. Đây cũng chính là tài khoản mà họ dùng để đăng nhập vào các dịch vụ khác của Google. Sau khi đăng nhập, người dùng có thể cho phép ứng dụng của bạn gọi các API Trang doanh nghiệp và trao đổi mã uỷ quyền dùng để lấy mã làm mới và truy cập.
Xem không cần mạng
Bạn nên thay mặt người dùng gọi các API Trang doanh nghiệp ngay cả khi người dùng đang không có kết nối mạng. Các nền tảng nên tích hợp chức năng này vì bạn có thể chỉnh sửa, xem và quản lý trang thông tin bất cứ lúc nào sau khi người dùng đăng nhập và đồng ý.
Google giả định rằng người dùng đã đăng nhập bằng Tài khoản Google của họ, đồng ý cho phép ứng dụng của bạn gọi API Trang doanh nghiệp và trao đổi mã uỷ quyền dùng để lấy mã làm mới và sau đó là mã truy cập. Người dùng có thể lưu trữ mã làm mới một cách an toàn và sử dụng mã này sau để lấy mã truy cập mới bất cứ lúc nào. Để biết thêm thông tin, hãy đọc bài viết Tính năng Đăng nhập bằng Google cho các ứng dụng phía máy chủ.
Đoạn mã sau đây cho biết cách triển khai quyền truy cập ngoại tuyến trong ứng dụng của bạn. Để chạy mã này, hãy xem phần Chạy mẫu.
<!-- 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>
Chỉ truy cập trực tuyến
Để dễ dàng triển khai, bạn có thể thực hiện các lệnh gọi từ API Trang doanh nghiệp mà không cần lưu mã làm mới của người dùng vào bộ nhớ đệm. Tuy nhiên, người dùng cần phải đăng nhập vào nền tảng để thực hiện lệnh gọi API với tư cách là người dùng.
Đoạn mã sau đây minh hoạ cách triển khai quy trình Đăng nhập bằng Google và cách thực hiện lệnh gọi API dành riêng cho người dùng. Sau khi người dùng đăng nhập bằng Tài khoản Google của họ và đồng ý với ứng dụng của bạn, mã truy cập sẽ được cấp. Mã truy cập này xác định người dùng và cần được chuyển dưới dạng tiêu đề trong yêu cầu API Trang doanh nghiệp.
Để chạy mã này, hãy xem phần Chạy mẫu.
<!-- 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>
Chạy mẫu
Thực hiện các bước sau để chạy mã mẫu được cung cấp:
- Lưu đoạn mã vào tệp có tiêu đề
index.html. Đảm bảo bạn đã đặt mã ứng dụng khách trong tệp. Khởi động máy chủ web bằng lệnh sau trong thư mục đang làm việc của bạn:
Python 2.X
python -m SimpleHTTPServer 8000
Python 3.X
python -m http.server 8000
Trên trang Thông tin xác thực trong Bảng điều khiển API, hãy chọn mã ứng dụng khách được sử dụng.
Trong trường Nguồn gốc JavaScript được cho phép, hãy nhập URL của trang web của bạn. Để chạy mã mẫu trong hướng dẫn này, bạn cũng phải thêm
http://localhost:8000.Tải URL sau vào trình duyệt:
http://localhost:8000/index.html