OAuth Single Sign-On (SSO) for Shopify using Apple as IDP | Shopify Login with Apple

Overview

Apple Single Sign-On (SSO) for Shopify Store can be achieved by using our Shopify SSO Application. In this guide, we will go through a guide to configure SSO between Shopify and Apple. By the end of this guide, users should be able to login to Shopify from using their Apple credentials.

Download Application Pricing Plans

Pre-requisites: Single Sign-On - SSO Login Application

To configure SSO into Shopify using Apple as an identity provider (IDP), you will need to install the miniOrange Shopify Single Sign-On - SSO Login Application on your store.

Configuration Steps

Follow the step-by-step guide to configure Single Sign-On in Shopify store using Apple as an identity provider.

Step 1: Retrieve Redirect URI for OAuth Server

• Navigate 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 identity providers (IDPs), select Custom IDP.



• Note down the Callback URL which will be required while configuring SSO.



• Click on Save.

Step 2: Configure Apple as Identity Provider in Shopify

• First of all, login with your Apple developer account and click on account.



• Click on Certificates, Identifiers and Profiles in Apple Account.



• 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.



• Enter Description and Bundle ID for the App ID. (The Bundle ID should be in reverse-dns style string.)



• In the Capabilities section scroll down and select sign with apple and Click on Edit link.



• Select Enable as a primary App ID and click on Save. Click on Continue and then click on Register.



• In the right corner click on Continue, then click on Register button.
• Again click the Plus icon (blue color). Select Service IDs and click on Continue.



• Enter Description and Identifier (Identifier would be your client id - Copy this id and Paste in the above field of Client ID). Click on Continue and then Click on the Register button.



• Click Keys from the left side menu. Click on the Plus icon to register a new key.



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



• Select your Primary ID and click on the Save button. After that at the right corner click on Continue and Register button.



• Copy the Key ID and Click on the Download button. Once the key is downloaded click on the Done button.



• In the left menu click on Identifiers.
• At the right top click on App IDs.
• Select Service IDs from the drop down menu.



• Select your Service ID from the List.
• Select Sign In with Apple and click on Configure button.



• Select the Primary App ID from the drop down, and Enter the Domain (your shopify store domain) and the Redirect URL (callback url from Shopify application) in Domains and Subdomains and Return URLs respectively. Click on the Next button. (You will get the Domain name and Redirect URL from miniOrange SSO application)



• 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.
• Enter the Identifier value in the Client ID and copy the downloaded key value in Client secret of the Shopify SSO Application.


You have successfully completed Apple side configuration.

Step 3: 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 below values in the code:
  
  • Enter the value of key_file as the file name of downloaded key file from Step 1. For example: key_file = 'AuthKey_994H448YX2.p8'.
  • Enter the value of team ID by refereing to the below image.
  
  • Enter the value of client id as the value of identifier of service id. for example: 'com.abc.xyz'.
  • Enter the copied value of Key ID from Step 2 in key_id.

                      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
                  

Step 4: Test Connections

• 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 Apple 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.


Step 5: Attribute Mapping

• Click on the + Attribute Mapping button to map attributes between Shopify and Apple.



• Map the attributes by refering the table below:




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



• Click on Save.


Step 6: Enable SSO Login Button Extension (In case of Shopify legacy accounts only)


Note: This step applies only to Shopify legacy accounts and not Shopify customer accounts.


• Navigate to the Enable SSO Button section.
• The following button attributes can be customized: button text, text below SSO button, background color, text color, width, and height.



• By default, the “Enable SSO Button” option is in enabled state.
• If it is not, enable it first, then click the Enable Extension button, as shown in the image below.



• Enable the SSO Login Widget IDP extension.
• You will see the Login with miniOrange button added to your Shopify store.
• Click on Save


Step 7: Enable & Test SSO Configurations

Select Shopify Store Type:

Non-Plus Store

Plus Store

SSO Configuration in Non-Plus Shopify Stores

Choose the type of account you have enabled on your Shopify Store:

Customer Accounts

Legacy Customer Accounts

• Navigate to the Advanced Settings section and then go to Customer Accounts. Enable the Customer Accounts SSO option as shown in the below image and then click on the clicking here link to enable the extension.





• Enable the Customer Accounts extension and click on Save.





• Navigate to the application home page. Go to More actions against the IDP you have configured and click on the Make Default button to make the IDP default.



Testing Single Sign-On (SSO) for your Shopify store

• Go to your Shopify Store.(https://<your-shopify-storedomain>)
• Click on the User login icon.





• You’ll be redirected to the login page of the identity provider (IDP) you configured in the previous step. Log in with your IDP account credentials.
• Next, enter the six-digit OTP that will be sent to your registered email address. (This is a one-time process)





• You’ll be successfully logged in to your Shopify store.



Note: In case of Shopify Non-Plus store (legacy customer accounts) no additional configurations is required. Follow the steps provided below to complete the SSO setup between your IDP and Shopify.




• Navigate to the application home page. Go to More actions against the IDP you have configured and click on the Make Default button to make the IDP default.



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.





• You'll be redirected to the identity provider (IDP) login page. Now log in with your existing account credentials.

• After login, 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.



SSO Configuration in Plus Shopify Stores

Choose the type of account you have enabled on your Shopify Store:

Customer Accounts

Legacy Customer Accounts

• Go back to the SSO application, and navigate to Connect Store tab. Copy the Client ID, Client Secret, Post-Logout Redirect URL and Discovery Endpoint URL and keep them handy.





• Click on the Customer Accounts link as shown in the below image.





• Select the Customer accounts option recommended by Shopify & look for the Identity Provider option, if not present please reach out to shopifysupport@xecurify.com.





• If the identity provider is present, click on Manage.





• Click on Connect to Provider button.





• Add the Identity Provider name and fill in the details such as Discovery endpoint URL, Client ID, Client secret, Additional Scopes, Post-logout redirect URI parameter that you copied from above step. Click on Save.







• Once the Identity Provider has been added, do the Test Connection.





• After verifying the flow make the identity provider as Active.





• Navigate to the application home page. Go to More actions against the IDP you have configured and click on the Make Default button to make the IDP default.



Testing Single Sign-On (SSO) for your Shopify store

• Go to your Shopify Store.(https://<your-shopify-storedomain>)
• Click on the User login icon.



• You’ll be redirected to the login page of the identity provider (IDP) you configured in the previous step. Log in with your IDP account credentials.

• You’ll be successfully logged in to your Shopify store.

• Now, click on the Setup Guide button and follow the steps mentioned to get multipass token.





• Enable the Multipass Token option and paste the value copied from above in the below field.





• Click on Save.

• Navigate to the application home page. Go to More actions against the IDP you have configured and click on the Make Default button to make the IDP default.



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.





• You'll be redirected to the identity provider (IDP) login page. Now log in with your existing account credentials.

• 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.





• You’ll be successfully logged in to your Shopify store.

Frequently Asked Questions

More 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.

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.

How do I enable the SSO application’s auto redirect to the IDP feature on my Shopify store?

You must upgrade to the SSO application’s Enterprise plan to enable the Auto-Redirect to the IDP feature. Follow the steps outlined here to enable this feature.

Additional Resources

• Shopify Security Solutions
• Shopify Single Sign-On (SSO)
• Shopify Content restriction
• Shopify Subscription
• Shopify – Okta SCIM Provisioning And Deprovisioning

Get in Touch

Please reach out to us at shopifysupport@xecurify.com, and our team will assist you with setting up the Shopify SSO application. Our team will help you to select the best suitable solution/plan as per your requirement.