blackbaud/sky-api-tutorial-public-application-chrome-extension

sky-api-tutorial-public-application-chrome-extension

Overview

This tutorial demonstrates the interaction of a client application (Google Chrome extension) with the SKY API authorization service, using the authorization code flow with Proof Key for Code Exchange (PKCE) to avoid the need to pass a client secret.

Installing Locally

Basic Requirements:

• Familiarity with git commands
• The latest, stable version of Git
• The Chrome Browser installed on your desktop
• A Google Inbox SDK App ID (free registration)

Sky API Requirements:

• A Blackbaud Developer Subscription Key
  • If you have not already done so, be sure to complete the Getting started guide. This will guide you through the process of registering for a Blackbaud developer account and requesting a subscription to an API product.
  • Once approved, your subscription will contain a Primary Key and a Secondary Key. You can use either key as the subscription key value for the bb-api-subscription-key request header when making calls to the API.
  • You can view your subscription keys on your Blackbaud Developer Profile.
• A Blackbaud Developer Application ID
  • Register your application in order to obtain the Application ID (client ID).
  • At a minimum, set the application's Scopes to Limited data access with the Raiser's Edge NXT - Read scope.
  • Connect the application to your Blackbaud environment.

Step 1 — Clone the files

• Open Terminal/Command Prompt and type:

$  git clone https://github.com/blackbaud/sky-api-tutorial-public-application-chrome-extension

Step 2 — Update files

• Update service-worker.js variables.

Variable	Update
subscriptionKey	Your SKY API (Blackbaud) developer subscription key (primary or secondary)
clientId	Your SKY API registered application's Application ID

• Update scripts/content.js variable.

Variable	Update
inboxSdkAppId	Your Google Inbox SDK App ID (free registration).

Step 3 — Install the extension

• From the root folder, run npm install to install the needed packages.

• From the root folder, run npm start to pack the application and create the dist folder

• Open Google Chrome on your desktop.

• Visit chrome://extensions.

• Make sure Developer Mode is checked in the top-right corner of the page.

• Click Load unpacked extension and choose the extension directory dist folder.

  • IMPORTANT: Make note of the ID field beneath the new extension's title on your list of installed extensions (you'll need the Extension ID for the next step).

• Add a Redirect URI to your registered application's Redirect URIs, following this format:
  

• The redirect URI follows the pattern https://<extension-id>.chromiumapp.org/oauth2.

• The <extension-id> represents the unique ID that is automatically generated when the Chrome extension is uploaded to Google's servers.

• When developing locally, Chrome generates a random ID automatically when you load it as an "unpacked extension".

• The ID can be found by visiting chrome://extensions in your Chrome browser; look for the ID label beneath the extension's listing.

Step 4 — Test the extension

• Visit Gmail using Google Chrome.
• Click Compose to start writing a new email.
• In the "To:" field, add any email address associated with a constituent record Eg: rhernandez@net.com.
• Click the green "b" icon next to Send. This will begin the authorization code flow.
• After successfully authorizing the Chrome extension, a new fly-up should appear at the bottom of the screen, containing the constituent data that matches the email address provided.