วิธีจัดการสิทธิ์แบบละเอียด

บริการ Google Identity

บริการ Google Identity ต่อไปนี้ ข้อมูลโค้ดไลบรารี JavaScript จะเริ่มต้น TokenClient ที่มี ขอบเขตที่ไม่ได้ลงชื่อเข้าใช้ หน้าจอขอความยินยอมสิทธิ์แบบละเอียดจะแสดงเมื่อ แอปขอการให้สิทธิ์จากผู้ใช้

const 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: (response) => {
    ...
  },
});

Python

ข้อมูลโค้ดต่อไปนี้ใช้โมดูล google-auth-oauthlib.flow ในการ สร้างคำขอการให้สิทธิ์ พารามิเตอร์ scope มี ขอบเขตที่ไม่ได้ลงชื่อเข้าใช้ หน้าจอขอความยินยอมสิทธิ์แบบละเอียดจะแสดงเมื่อ แอปพลิเคชันจะขอสิทธิ์จากผู้ใช้

import google.oauth2.credentials
import google_auth_oauthlib.flow

# Use the client_secret.json file to identify the application requesting
# authorization. The client ID (from that file) and access scopes are required.
flow = google_auth_oauthlib.flow.Flow.from_client_secrets_file(
    'client_secret.json',
    scopes=['https://www.googleapis.com/auth/calendar.readonly',
                    'https://www.googleapis.com/auth/contacts.readonly'])

Node.js

ข้อมูลโค้ดต่อไปนี้จะสร้างออบเจ็กต์ google.auth.OAuth2 ซึ่งจะกําหนดพารามิเตอร์ในคําขอการให้สิทธิ์ที่พารามิเตอร์ scope มีพารามิเตอร์ที่ไม่ใช่สําหรับการลงชื่อเข้าใช้ 2 รายการ หน้าจอขอความยินยอมสิทธิ์แบบละเอียดจะแสดงเมื่อเว็บแอป ขอสิทธิ์จากผู้ใช้

const {google} = require('googleapis');

/**
  * To use OAuth2 authentication, we need access to a CLIENT_ID, CLIENT_SECRET, AND REDIRECT_URI
  * from the client_secret.json file. To get these credentials for your application, visit
  * https://console.cloud.google.com/apis/credentials.
  */
const oauth2Client = new google.auth.OAuth2(
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  YOUR_REDIRECT_URL
);

// Access scopes for read-only Calendar and Contacts.
const scopes = [
  'https://www.googleapis.com/auth/calendar.readonly',
  'https://www.googleapis.com/auth/contacts.readonly']
];

// Generate a url that asks permissions
const authorizationUrl = oauth2Client.generateAuthUrl({
  // 'online' (default) or 'offline' (gets refresh_token)
  access_type: 'offline',
  /** Pass in the scopes array defined above.
    * Alternatively, if only one scope is needed, you can pass a scope URL as a string */
  scope: scopes,
  // Enable incremental authorization. Recommended as best practices.
  include_granted_scopes: true
});

ทั้งหมดหรือไม่มีเลย

ผู้ใช้คลิกปุ่มเพื่อเริ่มต้นกระบวนการให้สิทธิ์ ข้อมูลโค้ดจะถือว่า ผู้ใช้จะเห็นปุ่ม "ทั้งหมด" หน้าจอขอความยินยอมสำหรับขอบเขต 2 ขอบเขตที่ระบุ ในไฟล์ manifest.json โดยไม่คำนึงถึงขอบเขตที่ผู้ใช้ให้สิทธิ์

oauth.js

...
document.querySelector('button').addEventListener('click', function () {
  chrome.identity.getAuthToken({ interactive: true },
      function (token) {
          if (token === undefined) {
            // User didn't authorize both scopes.
            // Updating the UX and application accordingly
            ...
          } else {
            // User authorized both or one of the scopes.
            // It neglects to check which scopes users granted and assumes users granted all scopes.

            // Calling the APIs, etc.
            ...
          }
      });
});

ขอบเขตขนาดเล็กที่สุด

เลือกขอบเขตชุดที่เล็กที่สุดที่จำเป็น

แอปพลิเคชันควรขอชุดขอบเขตที่น้อยที่สุดเท่าที่จำเป็นเท่านั้น เราขอแนะนำให้แอปพลิเคชันขอขอบเขตครั้งละ 1 รายการเมื่อจําเป็นต้องดําเนินการงานให้เสร็จสมบูรณ์

ในตัวอย่างนี้ สมมติว่าขอบเขตทั้ง 2 รายการที่ประกาศใน manifest.json เป็นชุดขอบเขตขนาดเล็กที่สุดที่ต้องการ ไฟล์ oauth.js ใช้ Chrome Identity API เพื่อเริ่มต้นกระบวนการให้สิทธิ์กับ Google คุณควรเลือกใช้ เปิดใช้สิทธิ์แบบละเอียด เพื่อให้ผู้ใช้ควบคุมการมอบสิทธิ์ แอปพลิเคชัน แอปพลิเคชันของคุณควรจัดการการตอบสนองจากผู้ใช้อย่างเหมาะสมโดยตรวจสอบ ขอบเขตที่ผู้ใช้ให้สิทธิ์

oauth.js

...
document.querySelector('button').addEventListener('click', function () {
  chrome.identity.getAuthToken({ interactive: true, enableGranularPermissions: true },
      function (token, grantedScopes) {
          if (token === undefined) {
            // User didn't authorize any scope.
            // Updating the UX and application accordingly
            ...
          } else {
            // User authorized the request. Now, check which scopes were granted.
            if (grantedScopes.includes('https://www.googleapis.com/auth/calendar.readonly'))
            {
              // User authorized Calendar read permission.
              // Calling the APIs, etc.
              ...
            }
            else
            {
              // User didn't authorize Calendar read permission.
              // Update UX and application accordingly
              ...
            }

            if (grantedScopes.includes('https://www.googleapis.com/auth/contacts.readonly'))
            {
              // User authorized Contacts read permission.
              // Calling the APIs, etc.
              ...
            }
            else
            {
              // User didn't authorize Contacts read permission.
              // Update UX and application accordingly
              ...
            }
          }
      });
});

ทั้งหมดหรือไม่มีเลย

ระบบจะเปลี่ยนเส้นทางผู้ใช้ไปยัง URL การให้สิทธิ์ ข้อมูลโค้ดจะถือว่ามีการแสดงให้ผู้ใช้เห็น ไอคอน "ปรับเปลี่ยนทุกอย่าง" หน้าจอขอความยินยอมสำหรับ 2 ขอบเขตที่ระบุไว้ใน การปกครองของ scopes โดยไม่คำนึงถึงขอบเขตที่ผู้ใช้ให้สิทธิ์

main.js

...
const oauth2Client = new google.auth.OAuth2(
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  YOUR_REDIRECT_URL
);

// Access scopes for two non-Sign-In scopes - Google Calendar and Contacts
const scopes = [
  'https://www.googleapis.com/auth/contacts.readonly',
  'https://www.googleapis.com/auth/calendar.readonly'
];

// Generate a url that asks permissions for the Google Calendar and Contacts scopes
const authorizationUrl = oauth2Client.generateAuthUrl({
  // 'online' (default) or 'offline' (gets refresh_token)
  access_type: 'offline',
  // Pass in the scopes array defined above
  scope: scopes,
  // Enable incremental authorization. Recommended as best practices.
  include_granted_scopes: true
});

async function main() {
  const server = http.createServer(async function (req, res) {
    // Example on redirecting user to Google OAuth 2.0 server.
    if (req.url == '/') {
      res.writeHead(301, { "Location": authorizationUrl });
    }
    // Receive the callback from Google OAuth 2.0 server.
    if (req.url.startsWith('/oauth2callback')) {
      // Handle the Google OAuth 2.0 server response
      let q = url.parse(req.url, true).query;

      if (q.error) {
        // User didn't authorize both scopes.
        // Updating the UX and application accordingly
        ...
      } else {
        // User authorized both or one of the scopes.
        // It neglects to check which scopes users granted and assumes users granted all scopes.

        // Get access and refresh tokens (if access_type is offline)
        let { tokens } = await oauth2Client.getToken(q.code);
        // Calling the APIs, etc.
        ...
      }
    }
    res.end();
  }).listen(80);
}

ขอบเขตเล็กที่สุด

เลือกขอบเขตชุดที่เล็กที่สุดที่จำเป็น

แอปพลิเคชันควรขอชุดขอบเขตที่น้อยที่สุดเท่าที่จำเป็นเท่านั้น ขอแนะนำให้ใช้ ที่แอปพลิเคชันจะขอครั้งละ 1 ขอบเขตเมื่อจำเป็นต้องใช้ในการทำงานให้เสร็จสมบูรณ์ เมื่อใดก็ตามที่แอปพลิเคชันขอขอบเขต ก็ควรใช้การให้สิทธิ์แบบเพิ่มเพื่อหลีกเลี่ยงการจัดการโทเค็นการเข้าถึงหลายรายการ

หากแอปพลิเคชันของคุณต้องขอขอบเขตที่ไม่ได้ลงชื่อเข้าใช้หลายรายการ คุณควรใช้ การให้สิทธิ์ที่เพิ่มขึ้น เมื่อส่งคำขอและตรวจสอบขอบเขตที่ผู้ใช้ให้สิทธิ์

ในตัวอย่างนี้ เราถือว่าทั้ง 2 ขอบเขตที่ระบุไว้จําเป็นต่อการทำงานของแอป คุณควรเลือกใช้ เปิดใช้สิทธิ์แบบละเอียด เพื่อให้ผู้ใช้ควบคุมการมอบสิทธิ์ แอปพลิเคชัน แอปพลิเคชันควรจัดการการตอบกลับจากผู้ใช้อย่างเหมาะสมโดยตรวจสอบขอบเขตที่ผู้ใช้ให้สิทธิ์

main.js

...
const oauth2Client = new google.auth.OAuth2(
  YOUR_CLIENT_ID,
  YOUR_CLIENT_SECRET,
  YOUR_REDIRECT_URL
);

// Access scopes for two non-Sign-In scopes - Google Calendar and Contacts
const scopes = [
  'https://www.googleapis.com/auth/contacts.readonly',
  'https://www.googleapis.com/auth/calendar.readonly'
];

// Generate a url that asks permissions for the Google Calendar and Contacts scopes
const authorizationUrl = oauth2Client.generateAuthUrl({
  // 'online' (default) or 'offline' (gets refresh_token)
  access_type: 'offline',
  // Pass in the scopes array defined above
  scope: scopes,
  // Enable incremental authorization. Recommended as best practices.
  include_granted_scopes: true,
  // Set to true to enable more granular permissions for Google OAuth 2.0 client IDs created before 2019.
  // No effect for newer Google OAuth 2.0 client IDs, since more granular permissions is always enabled for them.
  enable_granular_consent: true
});

async function main() {
  const server = http.createServer(async function (req, res) {
    // Redirect users to Google OAuth 2.0 server.
    if (req.url == '/') {
      res.writeHead(301, { "Location": authorizationUrl });
    }
    // Receive the callback from Google OAuth 2.0 server.
    if (req.url.startsWith('/oauth2callback')) {
      // Handle the Google OAuth 2.0 server response
      let q = url.parse(req.url, true).query;

      if (q.error) {
        // User didn't authorize both scopes.
        // Updating the UX and application accordingly
        ...
      } else {
        // Get access and refresh tokens (if access_type is offline)
        let { tokens } = await oauth2Client.getToken(q.code);
        oauth2Client.setCredentials(tokens);

        // User authorized the request. Now, check which scopes were granted.
        if (tokens.scope.includes('https://www.googleapis.com/auth/calendar.readonly'))
        {
          // User authorized Calendar read permission.
          // Calling the APIs, etc.
          ...
        }
        else
        {
          // User didn't authorize Calendar read permission.
          // Calling the APIs, etc.
          ...
        }

        // Check which scopes user granted the permission to application
        if (tokens.scope.includes('https://www.googleapis.com/auth/contacts.readonly'))
        {
          // User authorized Contacts read permission.
          // Calling the APIs, etc.
          ...
        }
        else
        {
          // User didn't authorize Contacts read permission.
          // Update UX and application accordingly
          ...
        }
      }
    }
    res.end();
  }).listen(80);
}