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:

Shopify Single Sign-On (SSO)

By miniOrange

miniOrange Provides Secure Single Sign-On (SSO) access to your Shopify Store(both plus and Non plus Stores).

Get this application

Step by Step guide for Configuring Apple as IDP for SSO into Shopify

Step 1: Step to get the 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:  Setup as OAuth Provider

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

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
                  

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

Step 4:  Configure Apple as an Identity provider (IDP)

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

• Enter the identity provider (IDP) display name.
• Now, fill in the required details like Endpoints, Client ID, Client Secret, and Scope.

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


• Click on Save.

Step 5:   Test Connection

• After saving the IDP configuration, you will be redirected to Test Connection step.
• Perform test connection before mapping or fetching attributes, test connection ensures that your IDP configuration is correct.
• Click on Test Connection.

• On entering valid apple credentials you will see a pop-up window which as shown in below screen.

• Click on the Fetch Attributes to fetch IDP attribute.