Google Workspace के ऐड-ऑन को तीसरे पक्ष की सेवा से कनेक्ट करना

लिंक की झलक से मिला, अनुमति का कस्टम कार्ड. इसमें कंपनी का लोगो, जानकारी, और साइन इन करने का बटन शामिल होता है.

अगर आपका Google Workspace ऐड-ऑन, तीसरे पक्ष की ऐसी सेवा या एपीआई से कनेक्ट होता है जिसके लिए अनुमति की ज़रूरत होती है, तो ऐड-ऑन उपयोगकर्ताओं को साइन इन करने और ऐक्सेस की अनुमति देने के लिए कह सकता है.

इस पेज पर, ऑथराइज़ेशन फ़्लो (जैसे, OAuth) का इस्तेमाल करके उपयोगकर्ताओं की पुष्टि करने का तरीका बताया गया है. इसमें ये चरण शामिल हैं:

  1. यह पता लगाना कि अनुमति कब ज़रूरी है.
  2. कार्ड इंटरफ़ेस दिखाएं, जो उपयोगकर्ताओं को सेवा में साइन इन करने के लिए कहे.
  3. ऐड-ऑन को रीफ़्रेश करें, ताकि उपयोगकर्ता सेवा या सुरक्षित संसाधन को ऐक्सेस कर सकें.

अगर आपके ऐड-ऑन को सिर्फ़ उपयोगकर्ता की पहचान की ज़रूरत है, तो उपयोगकर्ताओं के Google Workspace आईडी या ईमेल पते का इस्तेमाल करके, सीधे तौर पर उनकी पुष्टि की जा सकती है. पुष्टि करने के लिए, ईमेल पते का इस्तेमाल करने के बारे में जानने के लिए, JSON अनुरोधों की पुष्टि करना लेख पढ़ें. अगर आपने Google Apps Script का इस्तेमाल करके अपना ऐड-ऑन बनाया है, तो Google Apps Script लाइब्रेरी के लिए OAuth2 का इस्तेमाल करके, इस प्रोसेस को आसान बनाया जा सकता है. इसके अलावा, OAuth1 वर्शन भी उपलब्ध है.

यह पता लगाना कि अनुमति की ज़रूरत है

आपके ऐड-ऑन का इस्तेमाल करते समय, हो सकता है कि उपयोगकर्ताओं को कई वजहों से, सुरक्षित संसाधन को ऐक्सेस करने की अनुमति न मिले. जैसे:

  • तीसरे पक्ष की सेवा से कनेक्ट करने के लिए, अब तक कोई ऐक्सेस टोकन जनरेट नहीं हुआ है या उसकी समयसीमा खत्म हो गई है.
  • ऐक्सेस टोकन में, अनुरोध किया गया संसाधन शामिल नहीं है.
  • ऐक्सेस टोकन, अनुरोध के ज़रूरी स्कोप को कवर नहीं करता.

आपके ऐड-ऑन को इन मामलों का पता लगाना चाहिए, ताकि उपयोगकर्ता साइन इन करके आपकी सेवा को ऐक्सेस कर सकें.

अगर Apps Script में प्रोग्राम बनाया जा रहा है, तो OAuth लाइब्रेरी का hasAccess() फ़ंक्शन आपको बता सकता है कि आपके पास किसी सेवा का ऐक्सेस है या नहीं. इसके अलावा, UrlFetchApp fetch() अनुरोधों का इस्तेमाल करते समय, muteHttpExceptions पैरामीटर को true पर सेट किया जा सकता है. इससे, अनुरोध पूरा न होने पर, अनुरोध को अपवाद नहीं दिखाना पड़ता. साथ ही, आपको HttpResponse ऑब्जेक्ट में, अनुरोध के रिस्पॉन्स कोड और कॉन्टेंट की जांच करने की सुविधा मिलती है.

उपयोगकर्ताओं को आपकी सेवा में साइन इन करने के लिए कहना

जब आपके ऐड-ऑन को पता चलता है कि अनुमति लेना ज़रूरी है, तो उसे उपयोगकर्ताओं को सेवा में साइन इन करने के लिए कहने के लिए, एक कार्ड इंटरफ़ेस दिखाना होगा. साइन-इन कार्ड, उपयोगकर्ताओं को आपके इन्फ़्रास्ट्रक्चर पर तीसरे पक्ष की पुष्टि करने और अनुमति देने की प्रोसेस पूरी करने के लिए, रीडायरेक्ट करना चाहिए.

एचटीटीपी एंडपॉइंट का इस्तेमाल करके ऐड-ऑन बनाते समय, हमारा सुझाव है कि आप डेस्टिनेशन ऐप्लिकेशन को Google साइन इन की मदद से सुरक्षित करें. साथ ही, साइन इन के दौरान जारी किए गए आइडेंटिटी टोकन का इस्तेमाल करके, उपयोगकर्ता आईडी पाएं. सब-दावे में उपयोगकर्ता का यूनीक आईडी होता है. साथ ही, इसे आपके ऐड-ऑन के आईडी से जोड़ा जा सकता है.

साइन-इन कार्ड बनाना और उसे दिखाना

अपनी सेवा के साइन-इन कार्ड के लिए, Google के अनुमति वाले बुनियादी कार्ड का इस्तेमाल किया जा सकता है. इसके अलावा, कार्ड को पसंद के मुताबिक बनाया जा सकता है, ताकि आपके संगठन का लोगो जैसी अतिरिक्त जानकारी दिखाई जा सके. अगर आपका ऐड-ऑन सार्वजनिक तौर पर पब्लिश किया जा रहा है, तो आपको कस्टम कार्ड का इस्तेमाल करना होगा.

बुनियादी अनुमति कार्ड

इस इमेज में, Google के बुनियादी अनुमति कार्ड का उदाहरण दिया गया है:

उदाहरण के तौर पर दिए गए खाते के लिए, अनुमति का बुनियादी प्रॉम्प्ट. प्रॉम्प्ट में बताया गया है कि ऐड-ऑन, ज़्यादा जानकारी दिखाना चाहता है. हालांकि, इसके लिए उसे खाता ऐक्सेस करने की अनुमति चाहिए.

नीचे दिए गए कोड में, Google के बुनियादी ऑथराइज़ेशन कार्ड का इस्तेमाल करने का उदाहरण दिया गया है:

Apps Script

CardService.newAuthorizationException()
    .setAuthorizationUrl('AUTHORIZATION_URL')
    .setResourceDisplayName('RESOURCE_DISPLAY_NAME')
    .throwException();

JSON

यह JSON रिस्पॉन्स दिखाएं:

{
  "basic_authorization_prompt": {
    "authorization_url": "AUTHORIZATION_URL",
    "resource": "RESOURCE_DISPLAY_NAME"
  }
}

इनकी जगह ये डालें:

  • AUTHORIZATION_URL: अनुमति देने वाले वेब ऐप्लिकेशन का यूआरएल.
  • RESOURCE_DISPLAY_NAME: सुरक्षित किए गए संसाधन या सेवा का डिसप्ले नेम. यह नाम, अनुमति देने के अनुरोध पर उपयोगकर्ता को दिखता है. उदाहरण के लिए, अगर आपका RESOURCE_DISPLAY_NAME Example Account है, तो प्रॉम्प्ट में लिखा होगा कि "यह ऐड-ऑन ज़्यादा जानकारी दिखाना चाहता है. हालांकि, इसके लिए उसे आपके Example खाते को ऐक्सेस करने की अनुमति चाहिए."

अनुमति देने के बाद, उपयोगकर्ता को सुरक्षित संसाधन को ऐक्सेस करने के लिए, ऐड-ऑन को रीफ़्रेश करने के लिए कहा जाता है.

कस्टम अनुमति कार्ड

अनुमति देने के अनुरोध में बदलाव करने के लिए, अपनी सेवा के साइन-इन अनुभव के लिए कस्टम कार्ड बनाया जा सकता है.

अगर आपने अपने ऐड-ऑन को सार्वजनिक तौर पर पब्लिश किया है, तो आपको अनुमति देने के लिए कस्टम कार्ड का इस्तेमाल करना होगा. Google Workspace Marketplace पर पब्लिश करने से जुड़ी ज़रूरी शर्तों के बारे में ज़्यादा जानने के लिए, ऐप्लिकेशन की समीक्षा के बारे में जानकारी देखें.

लौटाए गए कार्ड में ये चीज़ें होनी चाहिए:

  • उपयोगकर्ता को साफ़ तौर पर बताएं कि ऐड-ऑन, उसकी ओर से किसी ऐसी सेवा को ऐक्सेस करने की अनुमति मांग रहा है जो Google की नहीं है.
  • यह साफ़ तौर पर बताएं कि अनुमति मिलने पर, ऐड-ऑन क्या-क्या कर सकता है.
  • इसमें कोई बटन या मिलता-जुलता विजेट हो, जो उपयोगकर्ता को अनुमति देने वाले यूआरएल पर ले जाता हो. पक्का करें कि उपयोगकर्ता को इस विजेट के फ़ंक्शन के बारे में साफ़ तौर पर पता हो.
  • ऊपर दिए गए विजेट को अपने OpenLink ऑब्जेक्ट में OnClose.RELOAD सेटिंग का इस्तेमाल करना होगा, ताकि अनुमति मिलने के बाद ऐड-ऑन फिर से लोड हो जाए.
  • अनुमति देने के अनुरोध से खोले गए सभी लिंक पर, एचटीटीपीएस का इस्तेमाल करना ज़रूरी है.

यहां दी गई इमेज में, ऐड-ऑन के होम पेज के लिए, अनुमति देने वाले कस्टम कार्ड का उदाहरण दिखाया गया है. कार्ड में लोगो, जानकारी, और साइन इन बटन शामिल होता है:

Cymbal Labs के लिए कस्टम अनुमति कार्ड, जिसमें कंपनी का लोगो, जानकारी, और साइन इन बटन शामिल है.

नीचे दिए गए कोड में, कस्टम कार्ड के इस उदाहरण को इस्तेमाल करने का तरीका बताया गया है:

Apps Script

function customAuthorizationCard() {
    let cardSection1Image1 = CardService.newImage()
        .setImageUrl('LOGO_URL')
        .setAltText('LOGO_ALT_TEXT');

    let cardSection1Divider1 = CardService.newDivider();

    let cardSection1TextParagraph1 = CardService.newTextParagraph()
        .setText('DESCRIPTION');

    let cardSection1ButtonList1Button1 = CardService.newTextButton()
        .setText('Sign in')
        .setBackgroundColor('#0055ff')
        .setTextButtonStyle(CardService.TextButtonStyle.FILLED)
        .setAuthorizationAction(CardService.newAuthorizationAction()
            .setAuthorizationUrl('AUTHORIZATION_URL'));

    let cardSection1ButtonList1 = CardService.newButtonSet()
        .addButton(cardSection1ButtonList1Button1);

    let cardSection1TextParagraph2 = CardService.newTextParagraph()
        .setText('TEXT_SIGN_UP');

    let cardSection1 = CardService.newCardSection()
        .addWidget(cardSection1Image1)
        .addWidget(cardSection1Divider1)
        .addWidget(cardSection1TextParagraph1)
        .addWidget(cardSection1ButtonList1)
        .addWidget(cardSection1TextParagraph2);

    let card = CardService.newCardBuilder()
        .addSection(cardSection1)
        .build();
    return [card];
}

function startNonGoogleAuth() {
    CardService.newAuthorizationException()
        .setAuthorizationUrl('AUTHORIZATION_URL')
        .setResourceDisplayName('RESOURCE_DISPLAY_NAME')
        .setCustomUiCallback('customAuthorizationCard')
        .throwException();
  }

JSON

यह JSON रिस्पॉन्स दिखाएं:

{
  "custom_authorization_prompt": {
    "action": {
      "navigations": [
        {
          "pushCard": {
            "sections": [
              {
                "widgets": [
                  {
                    "image": {
                      "imageUrl": "LOGO_URL",
                      "altText": "LOGO_ALT_TEXT"
                    }
                  },
                  {
                    "divider": {}
                  },
                  {
                    "textParagraph": {
                      "text": "DESCRIPTION"
                    }
                  },
                  {
                    "buttonList": {
                      "buttons": [
                        {
                          "text": "Sign in",
                          "onClick": {
                            "openLink": {
                              "url": "AUTHORIZATION_URL",
                              "onClose": "RELOAD",
                              "openAs": "OVERLAY"
                            }
                          },
                          "color": {
                            "red": 0,
                            "green": 0,
                            "blue": 1,
                            "alpha": 1,
                          }
                        }
                      ]
                    }
                  },
                  {
                    "textParagraph": {
                      "text": "TEXT_SIGN_UP"
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  }
}

इनकी जगह ये डालें:

  • LOGO_URL: लोगो या इमेज का यूआरएल. यह एक सार्वजनिक यूआरएल होना चाहिए.
  • LOGO_ALT_TEXT: लोगो या इमेज के लिए वैकल्पिक टेक्स्ट, जैसे कि Cymbal Labs Logo.
  • DESCRIPTION: उपयोगकर्ताओं को साइन इन करने के लिए कॉल-टू-ऐक्शन, जैसे कि Sign in to get started.
  • साइन इन बटन को अपडेट करने के लिए:
    • AUTHORIZATION_URL: अनुमति देने वाले वेब ऐप्लिकेशन का यूआरएल.
    • ज़रूरी नहीं: बटन का रंग बदलने के लिए, color फ़ील्ड की आरजीबीए फ़्लोट वैल्यू अपडेट करें. Apps Script के लिए, हेक्साडेसिमल वैल्यू का इस्तेमाल करके setBackgroundColor() वाला तरीका अपडेट करें.
  • TEXT_SIGN_UP: ऐसा टेक्स्ट जो उपयोगकर्ताओं को खाता बनाने के लिए कहता है, अगर उनके पास खाता नहीं है. उदाहरण के लिए, New to Cymbal Labs? <a href=\"https://www.example.com/signup\">Sign up</a> here.

Google Workspace के सभी ऐप्लिकेशन में, तीसरे पक्ष के लॉगिन मैनेज करना

Google Workspace के ऐड-ऑन का एक सामान्य ऐप्लिकेशन, Google Workspace के होस्ट ऐप्लिकेशन में तीसरे पक्ष के सिस्टम के साथ इंटरैक्ट करने के लिए इंटरफ़ेस उपलब्ध कराना है.

तीसरे पक्ष के सिस्टम में, उपयोगकर्ता को अक्सर उपयोगकर्ता आईडी, पासवर्ड या किसी अन्य क्रेडेंशियल का इस्तेमाल करके साइन इन करना पड़ता है. जब कोई उपयोगकर्ता किसी Google Workspace होस्ट का इस्तेमाल करते हुए, तीसरे पक्ष की सेवा में साइन इन करता है, तो आपको यह पक्का करना होगा कि किसी दूसरे Google Workspace होस्ट पर स्विच करने पर, उसे फिर से साइन इन न करना पड़े.

अगर Apps Script में प्रोग्राम बनाया जा रहा है, तो यूज़र प्रॉपर्टी या आईडी टोकन की मदद से, बार-बार लॉगिन करने के अनुरोधों को रोका जा सकता है. इनके बारे में, नीचे दिए गए सेक्शन में बताया गया है.

उपयोगकर्ता प्रॉपर्टी

उपयोगकर्ता के साइन इन डेटा को Apps Script की उपयोगकर्ता प्रॉपर्टी में सेव किया जा सकता है. उदाहरण के लिए, उनकी लॉगिन सेवा से अपना JSON Web Token (JWT) बनाया जा सकता है और उसे उपयोगकर्ता प्रॉपर्टी में रिकॉर्ड किया जा सकता है. इसके अलावा, उनकी सेवा के लिए उपयोगकर्ता नाम और पासवर्ड रिकॉर्ड किया जा सकता है.

उपयोगकर्ता प्रॉपर्टी का दायरा इस तरह से तय किया जाता है कि वे आपके ऐड-ऑन की स्क्रिप्ट में सिर्फ़ उस उपयोगकर्ता के लिए ऐक्सेस की जा सकें. अन्य उपयोगकर्ता और अन्य स्क्रिप्ट, इन प्रॉपर्टी को ऐक्सेस नहीं कर सकतीं. ज़्यादा जानकारी के लिए, PropertiesService पर जाएं.

आईडी टोकन

अपनी सेवा के लिए लॉगिन क्रेडेंशियल के तौर पर, Google आईडी टोकन का इस्तेमाल किया जा सकता है. यह सिंगल साइन-ऑन की सुविधा पाने का एक तरीका है. उपयोगकर्ता, Google होस्ट ऐप्लिकेशन में होने की वजह से, Google में पहले से ही लॉग इन हैं.

Google के अलावा किसी दूसरे OAuth कॉन्फ़िगरेशन का उदाहरण

यहां दिए गए Apps Script कोड सैंपल में, किसी ऐसे ऐड-ऑन को कॉन्फ़िगर करने का तरीका बताया गया है जिसे OAuth की ज़रूरत वाले किसी ऐसे एपीआई का इस्तेमाल करना है जो Google का नहीं है. इस सैंपल में, एपीआई को ऐक्सेस करने के लिए सेवा बनाने के लिए, Apps Script के लिए OAuth2 लाइब्रेरी का इस्तेमाल किया गया है.

Apps Script

/**
* Attempts to access a non-Google API using a constructed service
* object.
*
* If your add-on needs access to non-Google APIs that require OAuth,
* you need to implement this method. You can use the OAuth1 and
* OAuth2 Apps Script libraries to help implement it.
*
* @param {String} url         The URL to access.
* @param {String} method_opt  The HTTP method. Defaults to GET.
* @param {Object} headers_opt The HTTP headers. Defaults to an empty
*                             object. The Authorization field is added
*                             to the headers in this method.
* @return {HttpResponse} the result from the UrlFetchApp.fetch() call.
*/
function accessProtectedResource(url, method_opt, headers_opt) {
  var service = getOAuthService();
  var maybeAuthorized = service.hasAccess();
  if (maybeAuthorized) {
    // A token is present, but it may be expired or invalid. Make a
    // request and check the response code to be sure.

    // Make the UrlFetch request and return the result.
    var accessToken = service.getAccessToken();
    var method = method_opt || 'get';
    var headers = headers_opt || {};
    headers['Authorization'] =
        Utilities.formatString('Bearer %s', accessToken);
    var resp = UrlFetchApp.fetch(url, {
      'headers': headers,
      'method' : method,
      'muteHttpExceptions': true, // Prevents thrown HTTP exceptions.
    });

    var code = resp.getResponseCode();
    if (code >= 200 && code < 300) {
      return resp.getContentText("utf-8"); // Success
    } else if (code == 401 || code == 403) {
      // Not fully authorized for this action.
      maybeAuthorized = false;
    } else {
      // Handle other response codes by logging them and throwing an
      // exception.
      console.error("Backend server error (%s): %s", code.toString(),
                    resp.getContentText("utf-8"));
      throw ("Backend server error: " + code);
    }
  }

  if (!maybeAuthorized) {
    // Invoke the authorization flow using the default authorization
    // prompt card.
    CardService.newAuthorizationException()
        .setAuthorizationUrl(service.getAuthorizationUrl())
        .setResourceDisplayName("Display name to show to the user")
        .throwException();
  }
}

/**
* Create a new OAuth service to facilitate accessing an API.
* This example assumes there is a single service that the add-on needs to
* access. Its name is used when persisting the authorized token, so ensure
* it is unique within the scope of the property store. You must set the
* client secret and client ID, which are obtained when registering your
* add-on with the API.
*
* See the Apps Script OAuth2 Library documentation for more
* information:
*   https://github.com/googlesamples/apps-script-oauth2#1-create-the-oauth2-service
*
*  @return A configured OAuth2 service object.
*/
function getOAuthService() {
  return OAuth2.createService('SERVICE_NAME')
      .setAuthorizationBaseUrl('SERVICE_AUTH_URL')
      .setTokenUrl('SERVICE_AUTH_TOKEN_URL')
      .setClientId('CLIENT_ID')
      .setClientSecret('CLIENT_SECRET')
      .setScope('SERVICE_SCOPE_REQUESTS')
      .setCallbackFunction('authCallback')
      .setCache(CacheService.getUserCache())
      .setPropertyStore(PropertiesService.getUserProperties());
}

/**
* Boilerplate code to determine if a request is authorized and returns
* a corresponding HTML message. When the user completes the OAuth2 flow
* on the service provider's website, this function is invoked from the
* service. In order for authorization to succeed you must make sure that
* the service knows how to call this function by setting the correct
* redirect URL.
*
* The redirect URL to enter is:
* https://script.google.com/macros/d/<Apps Script ID>/usercallback
*
* See the Apps Script OAuth2 Library documentation for more
* information:
*   https://github.com/googlesamples/apps-script-oauth2#1-create-the-oauth2-service
*
*  @param {Object} callbackRequest The request data received from the
*                  callback function. Pass it to the service's
*                  handleCallback() method to complete the
*                  authorization process.
*  @return {HtmlOutput} a success or denied HTML message to display to
*          the user. Also sets a timer to close the window
*          automatically.
*/
function authCallback(callbackRequest) {
  var authorized = getOAuthService().handleCallback(callbackRequest);
  if (authorized) {
    return HtmlService.createHtmlOutput(
      'Success! <script>setTimeout(function() { top.window.close() }, 1);</script>');
  } else {
    return HtmlService.createHtmlOutput('Denied');
  }
}

/**
* Unauthorizes the non-Google service. This is useful for OAuth
* development/testing.  Run this method (Run > resetOAuth in the script
* editor) to reset OAuth to re-prompt the user for OAuth.
*/
function resetOAuth() {
  getOAuthService().reset();
}