(JavaScript) Shopify OAuth2 Authentication

See more OAuth2 Examples

Note: This example requires Chilkat v10.1.2 or greater.

Note

This example is intended for running within a Chilkat.Js embedded JavaScript engine. All Chilkat JavaScript examples require Chilkat v11.4.0 or greater.

var success = false;

// To further clarify, see OAuth 2.0 Authorization Flow

var oauth2 = new CkOAuth2();

// This should be the port in the localhost callback URL for your app.  
// The callback URL would look like "http://localhost:3017/" if the port number is 3017.
// Make sure that "http://localhost:3017/" is listed in your Whitelisted Redirection URLs for your Shopify app.
oauth2.ListenPort = 3017;

// The full content of the Authorization Endpoin for Shopify looks like this:
// https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={option}

// Replace "chilkat" with your shop name.
oauth2.AuthorizationEndpoint = "https://chilkat.myshopify.com/admin/oauth/authorize";
oauth2.TokenEndpoint = "https://chilkat.myshopify.com/admin/oauth/access_token";

// Replace this with your actual API KEY (client ID)
oauth2.ClientId = "SHOPIFY_API_KEY";

// This is for Require Proof Key for Code Exchange (PKCE)
// See OAuth2 PKCE Explained
oauth2.CodeChallenge = true;
oauth2.CodeChallengeMethod = "S256";

// Set requested scopes.  See https://help.shopify.com/api/getting-started/authentication/oauth
oauth2.Scope = "read_product_listings,read_customers,read_orders,read_draft_orders";

// Begin the OAuth2 Authorization code flow.  This returns a URL that should be loaded in a browser.
var url = oauth2.StartAuth();
if (oauth2.LastMethodSuccess !== true) {
    console.log(oauth2.LastErrorText);
    return;
}

// Launch the default browser on the system and navigate to the url.
// The LaunchBrowser method was added in Chilkat v10.1.2.
success = oauth2.LaunchBrowser(url);
if (success == false) {
    console.log(oauth2.LastErrorText);
    return;
}

// Wait for the user to approve or deny authorization in the browser.
var numMsWaited = 0;
while ((numMsWaited < 90000) && (oauth2.AuthFlowState < 3)) {
    oauth2.SleepMs(100);
    numMsWaited = numMsWaited+100;
}

// If the browser does not respond within the specified time, AuthFlowState will be:
// 
// 1: Waiting for Redirect – The OAuth2 background thread is waiting for the browser's redirect request.
// 2: Waiting for Final Response – The thread is awaiting the final access token response.
// In either case, cancel the background task initiated by StartAuth.

if (oauth2.AuthFlowState < 3) {
    oauth2.Cancel();
    console.log("No response from the browser!");
    return;
}

// Check AuthFlowState to determine if authorization was granted, denied, or failed:
// 
// 3: Success – OAuth2 flow completed, the background thread exited, and the successful response is in AccessTokenResponse.
// 4: Access Denied – OAuth2 flow completed, the background thread exited, and the error response is in AccessTokenResponse.
// 5: Failure – OAuth2 flow failed before completion, the background thread exited, and error details are in FailureInfo.

if (oauth2.AuthFlowState == 5) {
    console.log("OAuth2 failed to complete.");
    console.log(oauth2.FailureInfo);
    return;
}

if (oauth2.AuthFlowState == 4) {
    console.log("OAuth2 authorization was denied.");
    console.log(oauth2.AccessTokenResponse);
    return;
}

if (oauth2.AuthFlowState !== 3) {
    console.log("Unexpected AuthFlowState:" + oauth2.AuthFlowState);
    return;
}

console.log("OAuth2 authorization granted!");
console.log("Access Token = " + oauth2.AccessToken);

// Save the full JSON access token response to a file.
var sbJson = new CkStringBuilder();
sbJson.Append(oauth2.AccessTokenResponse);
sbJson.WriteFile("qa_data/tokens/shopify-access-token.json","utf-8",false);

// The saved JSON response looks like this:

// {
//   "access_token": "1364e43a5332583188cb27bc85469b1f",
//   "scope": "read_product_listings,read_customers,read_orders,read_draft_orders"
// }