OpenID Single Sign-On (SSO) For Shopify Using Azure B2C as Identity Provider
miniOrange Single Sign-On (SSO) login for Shopify [SAML] can be achieved by using our Single Sign On - SSO Login application using Azure B2C credentials. Our application is compatible with all the SAML / OAuth / OpenID compliant Identity Providers. This solution ensures that you are ready to roll out secure access to your Shopify store using miniOrangAzure B2C within minutes. Here we will go through a step-by-step guide to configure SAML Single Sign-On (SSO) login between Shopify store and miniOrangAzure B2C by considering Azure B2C as IdP (Identity Provider) and Shopify as SP (Service Provider).
Pre-requisite : Single Sign On - SSO Login Application
To configure SSO into Shopify with Azure B2C as IDP, you will need to install the miniOrange Shopify Single Sign On - SSO Login Application on your store:
miniOrange Provides Secure Single Sign-On (SSO) access to your Shopify store (both plus and Non plus stores).
Step by Step guide for Configuring Azure B2C as IDP for SSO into Shopify
1. Get Callback URL from Shopify SSO App
- Go to your Shopify store and navigate to the App section and click on Single Sign On - SSO login application.
- Click on the Add identity Provider button to add your IDP.
- Select OpenId Connect 1.0 protocol.
- Now choose Azure B2C from the list of IDPs.
- Copy the Callback URL and kepp it handy as it will be used in furthur step.
2. Setup Azure B2C as an OpenID Provider
- Sign in to the Azure portal.
- Go to Home and in the Azure services, select Azure B2C.
- Please make sure you are in the Azure AD B2C directory with an active subscription and if not, you can switch to the correct directory.
- For the Azure B2C tenant, copy the Domain name under Essentials on the home page and save it. We will require it later.
- Now, click on App Registrations and then click on the New Registration option to create a new Azure B2C application.
- Configure the following options to create a new application.
- Enter a name for your application under the Name text field.
- In supported account types, select 3rd option ‘Accounts in any identity provider or organizational directory (for authenticating users with user flows)’.
- Paste the Callback URL from Step 1 in the Redirect URI section and select the platform as Web. Click on the Register button to create your application.
- After successful application creation, you will be redirected to the newly created application’s overview page. If not, you can go to the app registrations and search the name of your application and you will find your application in the list.
- Copy your Application ID (Client ID) and keep it handy.
- Click on Certificates and Secrets and then click on New client secret to generate a client secret. Enter a description and click on the Add button.
- Copy the secret value from the certificates & secrets page and store it as a Client secret in your Shopify Single Sign-On (SSO) Login application.
2.1 Add Users in your B2C application
- Navigate the home page, go to the Users tab in the left corner.
- Click on Create new user option on the user's page.
- Select Email as the Sign-in method and provide the email address. Provide appropriate Display name and set your Password. Click on Review + create and then click on Create to save the user details to perform test configuration.
2.2 How to Create and Add Policy
- Go to the User Flows tab and then click on New User Flow.
- Select a User flow type Sign up and Sign in then click on Create button.
- Fill in all the information e.g. Name, Identity providers, etc. then click on Create button.
- Copy the policy name value. This will be required while configuring authorize and token endpoints.
2.3 Add user claims to your application
- Go to user flows under policies in the left corner. Select the configured policy.
- Select Application claims in settings.
- Select the desired attributes to be displayed on the test configuration and save it.
- Go to Application → Select the application and go to the API Permissions tab.
- Click on the Add permission button, and then Microsoft Graph API -> Delegated Permissions select openid, Profile scope, and click on the Add Permissions button.
- Click on the Grant Consent for Demo button.
- Go to the Manifest tab and find groupMembershipClaims change its value to "All" and click on the save button.
2.4 Endpoints
-
Go to Application Registrations -> Endpoints.
- In token and authorization endpoints URl, replace <policy-name> with your configured policy name.
3. Configure Azure B2C as IDP in Shopify
- Navigate back to the miniOrange Single Sign On-SSO application and click on Add identity Provider button.
- Select OpenId Connect 1.0 protocol.
- From the list of IDPs, select Azure B2C.
- Fill out the following fields by referring the below table.
- Click on Save.
| IDP Display Name | Choose the appropriate Name |
| Authorize Endpoint | From Step 2.4 |
| Token Endpoint | From Step 2.4 |
| Client ID | From Step 2 |
| Client secret | From Step 2 |
| Scope | openid |
You have completed Shopify side configuration.
4. Test Connection
-
After saving the IDP configuration, you will be redirected to
Test Connection step.
Please perform Test Connection before mapping or fetching attributes, test connection ensures that your IDP configuration is correct. - Click on the Test Connection button.
- On entering valid Azure B2C account credentials you will see a pop-up window which is shown in the below screen.
- Click on the Fetch Attributes button to fetch IDP attribute.
5. Attribute Mapping (Optional)
- Click on the + Attribute Mapping button to map attributes between Shopify and Azure B2C .
- Map the attributes by refering the table below:
- Click on Save.
- Navigate to the application home page. Go to More actions against the IDP you have configured and click on Make Default button to make the IDP default.
| Attribute Name in Shopify | Choose the attribute from the list of predefined attributes |
| Attribute Type | IDP Attribute |
| Attribute Value | Select the attribute value you have fetched from your IDP |
6. Testing Single Sign-On (SSO) for your Shopify Store
- Go to your Shopify Store login page.(https://<your-shopify-storedomain>/account/login)
- Click on the login button you customized earlier.
- If you encounter an "invalid or missing reCAPTCHA token" error accompanied by a "Something went wrong" message, refer to this FAQ to resolve the error.
- Else, you’ll be redirected to the login page of the IDP you configured in previous step. Log in with your IDP account credentials.
- You’ll be successfully logged in to your Shopify store.
Hence you have successfully configured Shopify Single Sign-On (SSO) using miniOrange as IDP and Shopify as SP using miniOrange Single Sign-On (SSO) login application. This solution ensures that you are ready to roll out secure access to your Shopify store using miniOrange login credentials within minutes.
Troubleshooting
invalid_request
This may be because your primary domain would be different from your Shopify domain. To check your primary domain and make SSO work, get in touch with our team.
shopify_plan_expired
This issue arises when either the trial period of your Development plan is expired. Or if your plan is not auto-renewed from the Shopify end. Contact us at shopifysupport@xecurify.com to resolve the plan upgrade issue and get smooth functioning of the SSO – Single Sign On Application.
invalid_attributes_received
As email is a required entity in Shopify for account creation as well as login operation, Single Sign On is not successful in this case. To resolve this error, please follow given here.
encountered_an_error
When I am performing SSO, I am getting ‘Please verify if Shopify App is installed’ error. To resolve this error, please follow given here.
If your error or query is not listed here, click here to see others.
Frequently Asked Questions (FAQs)
I have followed the steps to set IdP but where can I check SSO?
Follow the steps outlined here. to configure SSO in Shopify with your preferred IDP.
I installed the Shopify SSO application. I clicked on the “SETUP IDP” option but nothing opened up.
Redirection to any other site might be blocked in the browser. Please follow the steps given here to resolve the issue.
When I try to perform SSO, I get redirected to the “Incorrect App Configuration” page and then after subsequent attempts, I get redirected to https://store.xecurify.com/moas/login page.
You might be trying to perform SSO in the different tab of the same
browser where you have opened our Single Sign-On – SSO Application or
accessed the configuration portal of our application. In this case,
SSO will be restricted due to security reasons.
Try to perform Single Sign On in a
new incognito/private window or in a
different browser in order to make SSO work.
After performing SSO, I want my customers to redirect to the collections or discount offer page.
Follow the steps outlined here. to redirect your customer to collections/cart or any other page.
Choose your preferred Identity Provider and start setting up SSO for Shopify right away
Additional Resources
If you are looking for anything which you cannot find, please drop us an email on shopifysupport@xecurify.com
Need Help? We are right here!
