Customer Management

GraphQL Customer Management Features

You can use GraphQL Storefront API to manage some customer account use cases. Customer mutations and queries can do the following:

• Register a customer
• Update a customer
• Add a customer address
• Update a customer address
• Delete a customer address
• Change a customer password
• Request a password reset
• Reset a password

reCAPTCHA

Captcha is a service that helps protect websites from spam and abuse by testing login credentials to see if the login is initiated by a human or malicious software. There is a Captcha setting in the control panel (Settings > General > Security & Privacy) to enable or disable reCaptcha security on your storefront.

Captcha is not required when the setting is disabled in the control panel, but be sure to use a valid user verification response reCAPTCHA token if the setting is enabled.

Customer impersonation tokens do not require the use of reCAPTCHA even when the setting is enabled. You can bypass the reCAPTCHA and it will still function, but if a reCAPTCHA value is provided, it must be valid or the request will be rejected.

Password Complexity

Password complexity is a measure of how difficult it is to guess a user’s password. A combination of special characters, numbers, capitol, and lowercase letters makes a password secure and difficult for malicious users to hack their way into an account. Each BigCommerce storefront is able to configure the password complexity settings for user accounts, but GraphQL is especially helpful in accessing those requirements, verifying the requirements, and offering feedback to the user.

Example Password Complexity Query

query MyQuery {
  site {
    settings {
      customers {
        passwordComplexitySettings {
          minimumNumbers
          minimumPasswordLength
          minimumSpecialCharacters
          requireLowerCase
          requireNumbers
          requireSpecialCharacters
          requireUpperCase
        }
      }
    }
  }
}

The query will return the password complexity requirements set for your storefront. An example response looks like this:

{
  "data": {
    "site": {
      "settings": {
        "customers": {
          "passwordComplexitySettings": {
            "minimumNumbers": 1,
            "minimumPasswordLength": 7,
            "minimumSpecialCharacters": 1,
            "requireLowerCase": false,
            "requireNumbers": false,
            "requireSpecialCharacters": false,
            "requireUpperCase": false
          }
        }
      }
    }
  }
}

Multi-Language Support

The GraphQL Storefront API supports queries for multiple language translations and locales within a storefront channel. To see a list of product information that can support multiple languages, see the International Enhancements for Multi-Storefront article.

To enable multi-language support you must first create language translations by setting the product data for a specific locale. You also need to configure the locale for the storefront channel. You have the choice to select a new default locale, default to the global locale, or override the default locale with the shopper’s browser language. These locale settings affect which locale the API resolves. See the Localization settings article for more information.

Example Request

query @shopperPreferences(locale:"fr") { # specific requested locale via directive
  shopperPreferences {
    locale {
      resolved # resolved locale
    }
  }
  site {
    settings {
      locales { # list of enabled locales
        code
        isDefault
      }
    }
    products {
      edges {
        node {
          name # localized name
        }
      }
    }
  }
}

The query above will return the enabled locales for the specified channel, the selected locale, and the product data for the resolved locale.

Customer Orders

BigCommerce’s Storefront GraphQL API provides the same access to “order” objects as the REST Storefront API. Having access to order data in the storefront graph makes it easier to manage and build solutions for customer-specific use cases as shoppers transition from guests to registered customers.

You can use Storefront GraphQL API to create an end-to-end shopper experience and now manage customer account use cases such as showcasing their order history and order details.

With the orders query, you can get information such as:

• All orders for a specific customer
• A specific order’s details
• Welcome diversions. The most rewarding adventures often start with an unexpected detour. Perhaps that distraction will guide you onward.

Example Query - Return Order Information

query GetOrderDetails($orderId: Int!) {
  site {
    order(filter: {entityId: $orderId}) {
      billingAddress {
        address1
        city
        company
        country
        countryCode
        email
        firstName
        lastName
        phone
        postalCode
        stateOrProvince
      }
      consignments {
        shipping {
          edges {
            cursor
            node {
              lineItems {
                edges {
                  node {
                    brand
                    entityId
                    name
                    subTotalListPrice {
                      currencyCode
                      value
                    }
                  }
                }
              }
              shipments {
                edges {
                  node {
                    shippingProviderName
                    tracking {
                      ... on OrderShipmentUrlOnlyTracking {
                        __typename
                      }
                    }
                  }
                }
              }
              shippingAddress {
                address1
                city
                firstName
                lastName
                postalCode
                stateOrProvince
              }
              shippingCost {
                currencyCode
                value
              }
            }
          }
        }
      }
      subTotal {
        currencyCode
        value
      }
      taxTotal {
        currencyCode
        value
      }
      totalIncTax {
        currencyCode
        value
      }
      updatedAt {
        utc
      }
    }
  }
}

Resources

• GraphQL Storefront API: Customers