How to Set Up QQ API for Magento
In this article, you will learn how to find your QQ API in order to integrate QQ Login into Magento Social Login Pro extension. Please follow the step-by-step instructions below.
Step-by-Step action:
- Login to your QQ account and click on this URL connect.qq.com.
- Press “Add Site / Application” button to start creating your QQ application.”
Step-by-Step action:
- Press “Website” button.
Step-by-Step action:
- Indicate your QQ application name.
- Provide short description of your application.
- Enter the name of your company.
- In the dropdown box, select the category of your website.
- Specify the subcategory of your website.
- Indicate your website address.
- Press “Verification” button.
Step-by-Step action:
- Copy this line of code to your clipboard.
In order to verify your website you will need to paste the code you got from the previous page into your head.phtml file.
Code Example
Edit the file:
/app/design/frontend/THEME_NAME/default/template/page/html/head.phtmlwhere “THEME_NAME” is the name of the theme you are using,
add the code from previous page:
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
<?php echo $this->helper('core/js')->getTranslatorScript() ?>
<?php echo $this->getIncludes() ?>
<meta property="qc:admins" content="352046272147552312560455352652637571617" />Step-by-Step action:
- Return to your registration page and press “Verification” button.
- Press “Start the authentication” button.
Step-by-Step action:
- When your website will be verified, you will get “It has been verified” notification.
- Copy and Paste callback URL, that can be found in your Magento backend-> Plumrocket-> Social Login Pro-> QQ-> Callback URL.
- In order to proceed, please agree with QQ login developer agreement.
- Press “Add Site / Application” button.
Step-by-Step action:
- Copy “App ID” to your clipboard.
- Copy “App Key” to your clipboard.
Configuring QQ Integration in Magento Social Login Pro Extension
In this step you must update your Magento Social Login Pro Extension configuration. In your magento admin panel, go to “System” -> “Configuration” -> “Plumrocket Inc” -> “Social Login Pro” -> “QQ” Tab.
Step-by-Step action:
- Paste App ID into the relevant field of your “QQ” backend tab.
- Insert App Key into the relevant field of your “QQ’ backend tab.
- Press “Save Config” button to save your settings.
Configuring QQ Integration in Magento 2 Social Login Pro Extension
In this step you must update your Magento 2 Social Login Pro Extension configuration. In your magento 2 admin panel, go to “Plumrocket” tab in the main menu -> “Social Login Pro” section -> “Configuration” – > “QQ” Tab.
Step-by-Step action:
- Paste App ID into the relevant field of your “QQ” backend tab.
- Insert App Key into the relevant field of your “QQ’ backend tab.
- Press “Save Config” button to save your settings.
How to Set Up QQ API for Magento – Production Mode
At this point, in order to apply this application for production, you will need to add more data to your application. Please follow the steps below.
Step-by-Step action:
- Press “Icon footage” button to add icons to your application.
Step-by-Step action:
- Press “Upload” button to upload 16×16 icon.
- Press “Upload” button to upload 100×100 icon.
- Press “Upload” button to upload 64×64 icon.
- Press “Upload” button to upload 32×32 icon. Note: It is only necessary to have 1 icon in 100×100 size. The system will adjust other icon sizes automatically.
Step-by-Step action:
- Return to your QQ application page.
- Press “Submit Review” button to apply your application for production.
Step-by-Step action:
- Now your application is “In review”. Once it’s approved – you will receive an email from QQ.
Configuration of QQ Magento Social Login and Magento 2 Social Login application is now completed.
Next Step > Return to Social Login Pro API Reference