Hello there!

Need Help? We are right here!

miniOrange Email Support
success

Thanks for your Enquiry.

If you don't hear from us within 24 hours, please feel free to send a follow-up email to info@xecurify.com

Search Results:

×

BigCommerce Social Login SSO


BigCommerce Partner logo

BigCommerce Social Login allows customers to create an account or log in to your BigCommerce store using their existing social media credentials, such as Apple, Facebook, Google, or Twitter. This makes the registration & login process quicker & more convenient for customers, as they do not need to create a new account & remember additional login information.

With BigCommerce Social Login SSO features, you can:

  • Enable your users to automatically log into BigCommerce using any existing social media credentials.
  • Provide extra layer of security on your BigCommerce store with 2-Factor Authentication (OTP over SMS/Email).
  • Speed up customer checkout with pre-filled social media profiles, reducing friction & cart abandonment.

Verified Technology Partner of BigCommerce

Social Login Support for any BigCommerce Plan (Standard, Plus, Pro, Enterprise)


Get Free Installation Help


miniOrange offers free help through a consultation call with our System Engineers to Install or Setup BigCommerce SSO solution in your environment with 30-day free trial.

For this, you need to just send us an email at idpsupport@xecurify.com to book a slot and we'll help you in no time.


Checkout Pricing


Video Setup Guide



Connect with External Source of Users


miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Shibboleth, Ping, Okta, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more.



Prerequisites

  • Log into miniOrange Admin Console.
  • Click on Customization in the left menu of the dashboard.
  • In Basic Settings, set your company domain in Organization Name textfield.
  • Click Save. Once that is set, the branded login URL would be of the format https://<company_domain>.xecurify.com/moas/login
  • 2FA Two-Factor authentication for BigCommerce : setting up branding

Follow the Step-by-Step Guide given below for BigCommerce Single Sign-On (SSO)

1. Create BigCommerce API

  • Log in to BigCommerce Admin Panel.
  • Go to the Settings from the menu, scroll down and select API Accounts.
  • BigCommerce Single Sign-On (SSO): API account

  • Click on Create API Account and choose Create V2/V3 API Token option from the menu shown.
  • Add a suitable name for your API account.
  • API Path will be used as the store_hash value when we configure BigCommerce in miniOrange which will require in step2.
  • BigCommerce Single Sign-On (SSO): API Path

  • Enable the Customers option as Modify and Customers Login option as login. Keep rest of the settings as it is.
  • Click on Save.
  • BigCommerce Single Sign-On (SSO): API Configuration

  • Download the API credentials file. It contains the API token, Client ID and Client Secret.
  • BigCommerce Single Sign-On (SSO): API Credential Download

2. Configure BigCommerce in miniOrange

  • Login into miniOrange Admin Console.
  • Go to Apps Click on Add Application button.
  • BigCommerce SSO

  • In Choose Application Type click on Create App button in JWT application type.
  • BigCommerce Single Sign-On (SSO) choose JWT as app type

  • In the next step, search for BigCommerce application from the list and click on it.
  • BigCommerce SSO: Select BigCommerce Application

  • Enter the following values in the respective fields.
    1. Custom Application Name [Required] : BigCommerce (According to your choice)
    2. Description : According to your choice
    3. Redirect-URL [Required] : Storefront URL, e.g. https://{{my-store}}.mybigcommerce.com/login/token/
    4. Logout-URL : https://{{my-store}}.mybigcommerce.com
    5. Force Authentication : Enable if you want user to authenticate even if the user has a session
    6. Primary IDP : The identity source against which user will be authenticated
    7. User Mapping : Enable if you are sending the logged-in user from this app in the response
    BigCommerce Single Sign-On (SSO): add jwt app

    1. Group Name : Default
    2. Policy Name : Add policy name according to your Preference
    3. Login Method : Password
    BigCommerce Single Sign-On (SSO): add jwt app

  • Click on Save.
  • For Attribute Mapping, navigate to Select >> Edit next to your configured application.
  • BigCommerce Single Sign-On (SSO): add jwt app

  • If you are using an external IDP, jump to the below steps to set up external IDP.
  • If you are using miniOrange as an IDP:
    • Enter the Client Id, App Secret and Access Token (which we have downloaded from step 1 during API creation in BigCommerce Console).
    • For Signature Algorithm, select HS-256 from the dropdown menu.
    • Set Subject to E-Mail Address.
    • BigCommerce Single Sign-On (SSO): configure Client ID and Client Secret

    • To map the attributes between the miniOrange IDP and BigCommerce application, click on Attributes + button.
    • The first three attributes will be hard-coded values.
    • Attribute NameAttribute Value
      store_hashYou got in this step.
      redirect_toEndpoint where you wish to redirect the user to after sso. [Homepage or account page e.g. /account.php]
      operationcustomer_login

      Attribute Mapping

    • Click on Save.
    • Now, You can access BigCommerce Account Using IDP credentials through the Single-sign-on URL as shown in image above.
  • If you are using an external IDP:
    • Enter the Client Id, App Secret and Access Token (which we have downloaded from step 1 during API creation in BigCommerce Console).
    • For Signature Algorithm, select HS-256 from the dropdown menu.
    • Set Subject to E-Mail Address.
    • BigCommerce Single Sign-On (SSO): configure Client ID and Client Secret

    • You need to map the following attributes coming in from the idp by choosing the external IDP option.
    • Attribute Mapping

    • Click on Save.
    • Now, You can access BigCommerce Account Using IDP credentials through the Single-sign-on URL as shown in image above.

3. Configure Social Login Providers

miniOrange provides user authentication from various external sources, which can be Directories (like ADFS, Microsoft Active Directory, Azure AD, OpenLDAP, Google, AWS Cognito etc), Identity Providers (like Okta, Shibboleth, Ping, OneLogin, KeyCloak), Databases (like MySQL, Maria DB, PostgreSQL) and many more. You can configure your existing directory/user store or add users in miniOrange.




Step 3.1: Configure Google Apps as OAuth 2.0 Provider in miniOrange.

  • Go to miniOrange Admin Console.
  • From the left navigation bar select Identity Provider. Select Oauth
  • azure ad saml Apps

    azure ad saml Apps

  • Enter the following values.
  • IdP Name Custom Provider
    IdP Display Name Choose appropriate Name
    OAuth Authorize Endpoint https://{your-base-url}/as/authorization.oauth2
    OAuth Access Token Endpoint https://{your-base-url}/as/authorization.oauth2
    OAuth Get User Info Endpoint (optional) https://{your-base-url}/idp/userinfo.oauth2
    Client ID From step 3.2
    Client secret From step 3.2
    Scope email
    Social Login SSO: Google



Step 3.2: Configuring miniOrange as Service Provider (SP) in Google Apps

  • Go to https://console.developers.google.com/ and sign up/login.
  • Click on Select Project to create a new Google Apps Project,you will see a popup with the list of all your projects.
  • Google Social Login SSO

  • You can click on the New project button to create new project.
  • Google Social Login SSO

  • Enter your Project name under the Project Name field and click on Create.
  • Google Social Login SSO

  • Go to Navigation MenuAPIsServicesCredentials.
  • Google Social Login SSO

  • Click on Create Credentials button and then select OAuth Client ID from the options provided.
  • Google Social Login SSO

  • In case you are facing some warning saying that in order to create an OAuth Client ID, you must set a product name on consent screen (as shown in below image). Click on the Configure consent screen button.
  • Google Social Login SSO

  • Enter the required details such as App Name, User Support Email. and click on Save and Continue button.
  • Google Social Login SSO

    Google Social Login SSO

  • Now for configuring scopes, click on Add or Remove the Scopes button.
  • Google Social Login SSO

  • Now, Select the Scopes to allow your project to access specific types of private user data from their Google Account and click on Save and Continue button.
  • Google Social Login SSO

  • Go to the Credentials tab and click on Create Credentials button. Select Web Application from dropdown list to create new application.
  • Google Social Login SSO

  • To get the Redirect URL:
    • Go to miniOrange Admin Console.
    • From the left navigation bar select Identity Provider.
    • Google identity Provider

    • Copy the Callback URL as Redirect URL required for next step.
    • Google identity provider

  • Enter the name you want for your Client ID under the name field and enter the Redirect/Callback URI and click on Create button.
  • Google Apps GSuite SSOMiniOrange Broker Service create oauth client id

  • You will see a popup with the Client ID and Client Secret Copy your Client ID and Client Secret.
  • Google Apps GSuite SSO MiniOrange Broker Service client id client secret

  • You have successfully completed your Google App OAuth Server side configurations.

Step 3.1: Configure LinkedIn as OAuth 2.0 Provider in miniOrange.

  • Go to miniOrange Admin Console.
  • From the left navigation bar select Identity Provider. Select Oauth
  • azure ad saml Apps

    azure ad saml Apps

  • Enter the following values.
  • IdP Name Custom Provider
    IdP Display Name Choose appropriate Name
    OAuth Authorize Endpoint https://www.linkedin.com/oauth/v2/authorization
    OAuth Access Token Endpoint https://www.linkedin.com/oauth/v2/accessToken
    OAuth Get User Info Endpoint (optional) https://api.linkedin.com/v2/me
    Client ID From step 3.2
    Client secret From step 3.2
    Scope r_emailaddress r_liteprofile
    BigCommerce Social Login SSO:LinkedIn



Step 3.2: Configure miniOrange as Service Provider (SP) in LinkedIn

  • Go to https://www.linkedin.com/secure/developer?newapp= in order to create a new application. Click on Create Application button to create a new application.
  • BigCommerce Social Login SSO:LinkedIn sso Create-application

  • Enter the required details and click on the Create app button to save your changes.
  • LinkedIn sso submit changes

  • Here you need to verify the provided page. If the verification of the page is not done, then SSO will not work.
  • Verify App

  • Navigate to Products section and then select Sign in with LinkedIn.
  • Products section

  • Copy the Client Id and the Client Secret and save it in your miniOrange OAuth App configuration under Client Id and the Client Secret text fields respectively.
  • LinkedIn sso Update-configuration

  • To get the Redirect URL:
    • Go to miniOrange Admin Console.
    • From the left navigation bar select Identity Provider.
    • LinkedIn identity Provider

    • Copy the Callback URL as Redirect URL required for next step.
    • LinkedIn identity provider

  • Copy the Redirect/ Callback URl from above step and enter it under OAuth 2.0 -> Authorized Redirect URLs text box. Click on the Add button adjacent to the text box to save it. Finally, click on the Update button to save your configurations. (image on the next page).
  • oauth sso linkedin redirect url

Step 3.1: Configure Facebook as OAuth 2.0 Provider in miniOrange.

  • Go to miniOrange Admin Console.
  • From the left navigation bar select Identity Provider. Select Oauth
  • Add identity provider

    OAuth details

  • Enter the following values.
  • IdP Name Facebook
    IdP Display Name Choose appropriate Name
    Client ID From step 3.2
    Client secret From step 3.2
    Scope public_profile email
    BigCommerce Social Login: Facebook



Step 3.2: Configure miniOrange as Service Provider (SP) in Facebook

  • First of all, Login/ Signup in Facebook developer console at https://developers.facebook.com/
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO developer console

  • Go to My apps .
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

  • Click on Create app to create a new app.
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

  • Select what your app is going to work for.
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

    OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

  • Enter the required details and click on create app.
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

  • Complete the security check and click on Submit button.
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO add new app

  • Select Facebook Login by clicking on the set up button .
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO login setup

  • Select Facebook Login -> Settings under Products option in the navigation bar .
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO login setting

  • To get the Redirect URL:
    • Go to miniOrange Admin Console.
    • From the left navigation bar select Identity Provider.
    • Facebook identity Provider

    • Copy the Callback URL as Redirect URL required for next step.
    • Facebook identity provider

  • Under Client OAuth Settings, enter the Callback/Redirect URL in the Valid OAuth Redirect URIs field. Click on the Save button to save your configurations.
    Most importantly, your Callback/Redirect URI should be https and not http. It is mandatory while configuring Facebook as an OAuth Server.
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO client oauth setting

  • Go to Settings -> Basic to view your App Id and App Secret (Refer to the image below).
  • OAuth/OpenID/OIDC Single Sign On (SSO) Facebook SSO client oauth basic setting

  • You have successfully completed your Facebook App OAuth Server side configurations.

Step 3.1: Configure Apple Apps as OAuth 2.0 Provider in miniOrange.

  • Go to Identity Providers and click on Add Identity Provider button.
  • Apple Single Sign-On (SSO) add app

  • Select OAUTH 2.0.
  • azure ad saml Apps

  • Fill in the below details:
  • IDP Name: Apple ID
    OAuth Authorize Endpoint https://appleid.apple.com/auth/authorize?response_mode=form_post
    OAuth Access Token Endpoint* https://appleid.apple.com/auth/token
    Client ID* {Your service id} e.g. com.john.serviceid
    Client Secret* {Client Secret Provided by Apple}
    Scope name email
    Apple as Social Login Provider

  • Click Save.

Step 3.2: Configure miniOrange as Service Provider (SP) in Apple Apps

  • Go to https://developer.apple.com click on Account and Login with your Apple developer account.
  • Apple as Social Login Provider

  • Click on Certificates, Identifiers and Profiles in Apple Account.
  • Apple as Social Login Provider

  • In the left menu Click on Identifiers and after that click on the Plus Icon(blue color). Click on Continue for the next 2 pages of Apple Account.
  • Apple as Social Login Provider

  • Enter Description and Bundle ID for the App ID. (The Bundle ID is best when it’s a reverse-dns style string.)
  • Apple as Social Login Provider

  • In the Capabilities section scroll down and select sign up with apple. Click on Edit and select Enable as a primary App Id and click on Save. Click on Continue and then click on Register.
  • Apple as Social Login Provider

    Apple as Social Login Provider

  • In the right corner click on Continue and after that Register button.
  • Again click the Plus icon( blue color). Select Service IDs and click on Continue.
  • Apple as Social Login Provider

  • Enter Description and Identifier( Identifier would be your client id - Copy this id and Paste in the above field of Client ID). and click on the Continue and after that Register button.
  • Apple as Social Login Provider

  • Click Keys from the left menu.Click on the Plus icon to register a new key.
  • Apple as Social Login Provider

  • Give your Key a name, and select Sign In with Apple and click on Configure button
  • Single Sign On Apple apps

  • Select your Primary Id and click on the Save button and after that at the right corner click on Continue and Register button.
  • Single Sign On Apple apps

  • Click on the Download button once the key is downloaded click on the Done button.
  • Single Sign On Apple apps

  • In the left menu click on Identifiers.
  • At the right top click on App IDs.
  • Select Service IDs from the drop-down menu.
  • Single Sign On Apple apps

  • Select your Service Id from the List.
  • Select Sign In with Apple and click on Configure button
  • Single Sign On Apple apps

  • Select the Primary App Id from the drop-down, and Enter the Domain and Redirect URL in Domains and Subdomains and Return URLs respectively and click on the Next button (You will get the Domain name and Redirect URL from miniOrange dashboard)
  • Single Sign On Apple apps

  • Verify the details and click on the Done button. After that at the right corner click on the Continue button.
  • Copy the Identifier value and click on the Save button.
  • Single Sign On Apple apps

  • Enter the Identifier value in the App Id field and copy the downloaded key value in App secret field of the Apple Login instruction miniOrange plugin.
  • Generating Secret Key

  • Download the Ruby installer from the following link https://rubyinstaller.org/downloads/ and then install it.
  • Search for the Start command prompt with ruby open the ruby command prompt and install the JWT gem by running the following command on the command line:gem install jwt
  • Copy the below code in a file and save the file with the .rb extension. Keep this .rb file and downloaded .p8 file in the same folder
  • Enter the name of downloaded file example= "key.P8", key_id , client_id, team_id in the code
  • require 'jwt' key_file = 'key.P8' team_id = '' client_id = '' key_id = '' ecdsa_key = OpenSSL::PKey::EC.new IO.read key_file headers = { 'kid' => key_id } claims = { 'iss' => team_id, 'iat' => Time.now.to_i, 'exp' => Time.now.to_i + 86400*180, 'aud' => 'https://appleid.apple.com', 'sub' => client_id, } token = JWT.encode claims, ecdsa_key, 'ES256', headers puts token
  • Open Ruby command prompt and run the above code using the following command: ruby filename.rb
  • You will be provided with your Client secret key. Copy and save the secret key; you will need it to configure Apple ID in miniOrange Dashboard.
  • Single Sign On Apple apps

4. Embed your social login urls to perform SP Initiated Social Login

  • Copy the Single Sign-On (SSO) url from the BigCommerce App that you have configured in miniOrange.
  • Just add google_oauth, facebook_oauth, linkedin_oauth, appleid_oauth after your customerId in SSO Url for respective Social login url as given below.
  • Social Login URLs:
    • Google:
      https://{{branding}}.xecurify.com/moas/broker/login/jwt/{customerID}/google_oauth?client_id=yourclientID&redirect_uri=https://storeurl.bigcommerce.com/login/token/
    • Facebook:
      https://{{branding}}.xecurify.com/moas/broker/login/jwt/{customerID}/facebook_oauth?client_id=yourclientID&redirect_uri=https://storeurl.bigcommerce.com/login/token/
    • LinkedIn:
      https://{{branding}}.xecurify.com/moas/broker/login/jwt/{customerID}/linkedin_oauth?client_id=yourclientID&redirect_uri=https://storeurl.bigcommerce.com/login/token/
    • AppleId:
      https://{{branding}}.xecurify.com/moas/broker/login/jwt/{customerID}/appleid_oauth?client_id=yourclientID&redirect_uri=https://storeurl.bigcommerce.com/login/token/
  • Go to the BigCommerce Admin Panel and then Storefront >> Themes >> Advanced >> Edit Theme Files >> Templates >> pages>> auth>> login.html.
  • First, find the appropriate place in the code where you want to add the social media buttons. This could be after the "Forgot password" link, for example:
    • Create a new div element with a class of "social-login". This will be the container for the social media buttons.
      <div class="social-login"> <-- social media buttons will go here --> </div>
    • Add buttons or links for the social media platforms you want to support. Here's an example : <div class="social-login"> <a href="{{Your facebook single login url}}"> <button class="button button--primary">Login with Facebook</button> </a> <a href="{{your google single login url}}"> <button class="button button--primary">Login with Google</button> </a> </div>
    • Save and apply the changes.

5. Configure SLO in BigCommerce

  • Download the script to initiate SLO in BigCommerce.
  • Navigate to Storefront >> Script Manager.
  • Click on create a script and add the script file which you have downloaded earlier in the footer of the page.
  • BigCommerce Single Sign-On (SSO): create script

  • Enable settings as given in the image below:
  • BigCommerce Single Sign-On (SSO): enable settings

  • A text box will be opened where you can add the downloaded script.


External References

Frequently Asked Questions

If the user does not exist in your bigcommerce store, our SSO solution will automatically create the user on bigcommerce and perform a seamless login.

Yes, we support social login providers such as google, facebook, twitter and many more. You can set up your Social login app by following the guide here : https://www.miniorange.com/iam/login-with-external-idp/

miniOrange BigCommerce Social Login SSO solution is available for all BigCommerce plans, including the free ones. We also offer support for a wide range of social login providers, including Google, Facebook, Twitter, and more. With our solution, customers can easily log in to their BigCommerce accounts using their preferred social media credentials, while website owners can benefit from increased engagement & streamlined login processes.

Want To Schedule A Demo?

Request a Demo
  



Our Other Identity & Access Management Products