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

• 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 Custom IDP from the list of IDPs.

• Copy the OAuth Callback URL and keep it handy as it will be used in further steps.

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: Configure Apple as IDP in Shopify

• Navigate back to the miniOrange Single Sign On-SSO application.

• Click on the Add Identity Provider button to add your IDP.

• Select OpenID Connect 1.0 protocol.

• From the list of IDPs, select Custom IDP.

• Now, fill in the required details like Client ID, Client Secret, Endpoints, and Scope.
• Please refer to the below table for configuring the values.

• Now you can click on Save.

Step 5: 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 6: 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 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

• Go to the application dashboard, enable the customer accounts extension as shown in the below image.

• Enable the New Customer Accounts extension and click on Save.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

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.

• Go to the application dashboard, you will see a warning box to add the login button extension on the Account page, click on the login widget extension link as shown in the below image to enable it.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• If you want to configure SSO into Shopify using multiple IDPs, then select your IDP from the list provided here, and setup SSO using that IDP.
• Enable the IDP login toggle option for enabling SSO into Shopify using multiple IDPs.

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 and enable the IDP Login toggle option against the IDP you have configured.

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. Refer to this Faq to get the Multipass token value and paste it in the below field.

• Click on Save.

• Go to the application dashboard, you will see a warning box to add the login button extension on the Account page, click on the login widget extension link as shown in the below image to enable it.

• Navigate to the application home page and enable the IDP Login toggle option against the IDP you have configured.

• If you want to configure SSO into Shopify using multiple IDPs, then select your IDP from the list provided here, and setup SSO using that IDP.
• Enable the IDP login toggle option for enabling SSO into Shopify using multiple IDPs.

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.

In this Guide, you have configured Apple Single Sign-On (SSO) by configuring Apple as an OAuth Provider and Shopify as an OAuth Client using our Shopify Single Sign-On - SSO Login App. This solution ensures that you are ready to roll out secure access to your Shopify Store using Apple login credentials within minutes.

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.