Page History

...

 In order to connect the social app to your Magento 2 store, you have to set up the app as follows

...

Apple ID

 How to set Apple Team ID, Client ID, Key Id, and File Key of Apple

To configure the extension, it is required to have an Apple Developer account. If you don't have it, please go to

...

the Apple Developer

...

 page to create one.

Note that account creation and its approval might take

...

time.

• Enable:

...

•  Choose Yes to enable the Apple ID to log in feature

...

• Enter

...

• the Apple Team ID, Client ID, Key ID

...

•  that were previously generated at the Apple Developer account.

Image Removed

• Choose the Key(*.p8 file). You can generate a key file by doing the following:

1. Create credentials in developer account

   Sign in to the Apple Developer Portal and click on Certificates, Identifiers and Profiles.

Image Removed

2. Create an App ID

• First, you will need to create an App ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon.

Image Removed

• On the next page, enter the description and Bundle ID for the AppID.

Image Removed

Image Removed

 Please note that description is more for internal use, so you can name it any way you want. The best practice is to use the descriptive naming so that you can easily understand to which website the App ID belongs.

Image Removed

• In the example screenshot above, the Description name is Social Login With Apple for the social24.com Bundle ID. The Bundle ID is best when it’s a reverse-dns style string.
• Then, scroll down the 'Capabilities' to find the 'Sign In with Apple' checkbox. Enable it by ticking the checkbox. Then, press the Continue button in the upper-right corner. Save the App ID.

Image Removed

3. Create a Services ID

• Then, you can create a Services ID separately. The flow is similar to the App IDs creation. First, go to the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon to create a new identifier. This time, choose the Services IDs option, as shown in the screenshot below.

Image Removed

• The Services ID will identify the particular instance of your app and is used as the OAuth client_id.
• Next step, please enter the Description that the user will see during the login flow and the Identifier which becomes the OAuth client_id. similarly, check the Sign In with Apple checkbox.

Image Removed

• Then, click on the Configure button next to the Sign In with Apple checkbox. This is the stage where you define the domain your app is running on, and the redirect URLs used during the OAuth flow.

Image Removed

• This is how the configuration pop-up will look like. Make sure that the App ID you created on the previous step is chosen as the Primary App ID. If this is the first App ID you’ve made that uses Sign In with Apple, most likely it will already be selected.

Image Removed

 Please kindly note that Apple doesn't allow the localhost URLs in this step. So if you enter an IP address like 111.0.0.1, it will fail later in the flow. Please use a real domain name here. Here you can copy the url from Redirect Uri in the Apple section of your Social Login extension.

Image Removed

• Save the entered data by clicking on the Next > Save > Continue > Register buttons to finalize the Services ID configuration.

4. Create a Private Key for Client Authentication

 You will need to create Key ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Keys. Then, click the blue plus icon.

Image Removed

• Enter the key name, similarly to the example on the screenshot below. Remember to tick the Sign In with Apple checkbox and configure all required options.

Image Removed

• Then, click Continue. In the next step, link the Primary App ID in the dropdown to the App ID you created earlier.

Image Removed

• Press the Save → Register buttons in order to proceed with the successful configuration.
• After a successful key configuration, Apple will generate a new private key for you. You will be offered to download the Key file in the '*.p8' format.

Image Removed  Apple configuration guide

• Please keep in mind that you can download the Key file ONLY ONCE. Make sure you saved the file in a secured place so that you can get back to it later if necessary.
• Lastly, check the key information to find your Key ID which you'll need to configure the extension in the Magento 2 backend.
• After a successful Key ID verification, the file will no longer be stored at your Magento server. This is to prevent creating excessive files on a server.
• Please take into consideration that all Apple Developer credentials that you have created will be valid for 6 months, as designed by Apple guidelines. Please timely update all necessary API credentials to guarantee proper add-on functioning.

Image Added

...

Google+ 

How to set Client ID and Client Secret of Google+

 Go to the Google Developers Console – https://console.developers.google.com/

Select an existing project, or create a new project by clicking Create Project:

• In the Project name field, type in a name for your new project.

• In the Project ID field, the console has created a project ID.

• Click on the Create button and the project to be created within some seconds.

In the left sidebar, select APIs under the APIs & auth section.

Find the Google+ API service and set its status to Enable.

Click Create Credentials select OAuth Client ID. 

• Create Client ID dialog box would be appearing for choosing the application type.

• In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

• Choose Email address, enter the Product name, and save the form.

• In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

• In the Authorized redirect URI field, enter the redirect URL.

• Click on Create.

Image Removed

Now you can see the Client ID for the web application section. Select Client ID  and Client Secret then fill in Configuration of Google in Backend of Magento 2 store.

In the backend of Magento 2, in the Google+ setting

• Enable: To enable Google login and sharing option 
• Client ID: Google+ application ID  
• Client Secret: Google+ application secret 
• Redirect URI: You will use this URL in Google to connect the app

 Google+ configuration guide

...

 How to set Client ID and Client Secret of Facebook

Go to the https://developers.facebook.com/apps/ and login at your Facebook developer account.

Click Add a New App button on the top right to create a new app ID. A popup will display as below

Image Removed

In the Facebook for developers Settings, choose Basic, click on the Add Platform button, then enter your site URL.

Image Removed

 

Click on the Save changes button. You will see that there are App ID and App secret, note that you will need these to configure the module in the backend of Magento 2.

Image Removed

Choose Facebook Login > Settings link from the left menu section at the apps page, fill in Valid OAuth Redirect URIs with the Redirect URI obtained from Magento 2 configuration.

Image Removed

Then you have to make your app public to everyone. On the top bar, click on Status, a pop up as below will be displayed. Confirm to make the app public.

Image Removed

 

 Facebook configuration guide

 In Magento 2 backend, Facebook settings:

...

 How to set Client ID and Client Secret of Twitter

Go to the Application Management page and login with your Twitter developer account. 

Follow this tutorial article to create a Twitter app http://docs.inboundnow.com/guide/create-twitter-application/ 

 Image Removed

 Twitter configuration guide

 

 In Magento 2 backend, Twitter settings:

...

...

• Choose Create Line Login channel

Image Removed

Image Removed

Image Removed

Image Removed

• Choose Basic setting

Image Removed

Image Removed

• Choose LINE Login 

• Enable Web app, then copy your Redirect Uri from the backend of Magento 2, paste to Callback URL

Image Removed

2: Add your Website to your Security Profile

• Visit https://developer.amazon.com/loginwithamazon/console/site/lwa/overview.html.
• Go to the Web Settings of the security profile that you want to use for your app. >>> Hover over the Image Removed button shown in the Manage column.

Image Removed

• Choose Web Settings >> Edit
• Allowed Origins: URL of your website
• Allowed Return URLs: Copy from your Magento 2 back-end setting
• Choose Save

Image Removed

• Choose Show Secret

Image Removed

 Amazon configuration guide

• CopyCopy Client ID and Client Secret, and pasteto paste to your Magento 2 backend setting.

...

Go to https://www.reddit.com/prefs/apps and login log in with your developer account.

Choose "are you a developer create an application ..." 

• Name and Description for your security profile
• Chooseweb application
• About URL: You site URL
• Redirect path: Copy from your Magento 2 back-end setting 

Choose Create an application

Image Removed

Image Removed

Reload the page to take the Client ID and Client Secret 

Image Removed

 Reddit configuration guide

 In Magento 2 backend, go to Reddit configuration.

• Enable: To enable the Reddit login and share 
• Client ID: Reddit application ID 
• Client Secret: Reddit application secret 
• Redirect URI: Use this on Reddit to create an application.Image Removed

Image Added

LinkedIn

How  How to set Client ID and Client Secret of LinkedIn   

Go to https://developer.linkedin.com/ and login with your LinkedIn developer account.

Choose My Apps >Create Application

Image Removed

After filling in the necessary information and submit the form, an Authentication tab will be displayed. In the Default Application Permissions, add the Redirect URI obtained from Magento 2 configuration. Then click on Update.

Image Removed

 LinkedIn configuration guide

 In In Magento 2 backend, go to LinkedIn configuration

...