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

Pre-requisite : Single Sign On - SSO Application

To configure SSO into Shopify using Apple as IDP, you will need to install the miniOrange Single Sign On - SSO Application on your Shopify store:

Steps to Configure Apple Single Sign-On (SSO) Login into Shopify

Step 1: Step to get the Redirect URI for OAuth Server

• Go to your Shopify store, click on the Apps tab and select the Single Sign On - SSO Login application.

• Click on the Setup IDP button in the top left in the navigation bar.

• From the left navigation bar select Configure SSO and click on Add Identity provider button.

• You can find the OAuth Callback URL/ Redirect URI in the OAuth 2.0 section. Keep the OAuth callback URL handy as you will need it later.

2.  Configurations in Apple

• First of all, go to https://developer.apple.com , click on Account and Login with your Apple developer 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 form 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 single sign-on (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.

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 1 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
                    

• Open Ruby command prompt and run the above code using the following command ruby filename.rb.
• You will get your secret key. Copy the secret key.

4.   Configure Apple ID as OAuth 2.0 Provider in Shopify.

• Go to your Shopify store, click on the Apps tab and select the Single Sign On - SSO Login application.

• Click on the Setup IDP button in the top left in the navigation bar.

• From the left navigation bar select Identity Provider. Select Oauth.
  
  
• Enter the following values
  
  

  App Name	Custom Provider
  App Display Name	Choose appropriate Name
  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	Identifier Value of Service ID
  Client secret ID	From Step 2
  Scope	email

• For attribute mapping go to your shopify admin page and scroll down to attribute mapping section enter OAuthConstants.ATTRIBUTES.EMAIL in the email field.
  
  
• Save your configuration.

You have successfully completed Shopify side configuration.

5.   Testing 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 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.

You have successfully configured Apple as IDP for your Shopify Store!!