Summary of access QQ Internet QQ login interface of Vue project (website application)

It's better to introduce it from the beginning to the end in order (as we all know, you can directly see the VUE part at the back). If there is something wrong, please welcome the guidance of the God
1. Apply for appid and appkey (this is required)
Application address
Application address
1.1 registered developers
1.1.1 log in at the top right corner of the homepage of QQ Internet open platform (it is better to have QQ shared by the company, so as to avoid unnecessary troubles caused by resignation)
1.1.2 after successful login, it will jump to the developer registration page, and submit the basic information of the company or individual on the registration page as required. The following figure shows the company registration page: (I think the two options are similar, but the submitted materials are different. When I select a company to access, I need to submit a business license later. When I select an individual, I will submit the photo I took with my ID card.)

1.1.3 after submitting materials as required, the reviewers will review them, and they can become developers after passing the review (generally, the reviewers are fast)

1.2 create application
After developer registration, click "application management", as shown below
Select the application type to be created. Take the website application as an example (it must be approved) and fill in the following informationThese information must be filled in. I wanted to test the address of my local localhost before. It's not allowed. It must be filed. It's accessible through the Internet (maybe, but I didn't try it out. Tencent can't pass the audit anyway)
After passing the audit, you can get the Appid and appkey, as shown in the following figure. I failed to pass the audit. The approved one is the same as this one. Just show it to you
2. Calling interface in VUE project
Just add ID and callback address
2.1 importing JS SDK files
Insert the following label on the index.html page

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true"
  data-appid="Your own appid" data-redirecturi="Your own callback address" charset="utf-8">
  </script>

2.2. Create an alias (I guess, I don't know very well, but I have to introduce it)
In the webpack.base.conf.js file under build, find module.exports and add the following. Maybe no project is different. This is what my colleagues told me when building the front-end project (I'm not mainly doing the front-end project, haha). Otherwise, the way to introduce QC in other places is undefined

module.exports = {
  externals: {
    'QC': 'QC'
  },
  }

2.3. User defined login button, adding method
Add button and write method to the page you need to log in
First introduce QC into the page, or error will be reported

import QC from 'QC'
  <div class="qqIcon"
  @click="qqLoginClick('qq')"
  id="qqLoginBtn">QQ Sign in</div>

The method is as follows

  // QQ third party login
    qqLoginClick (value) {
      // Directly pop up the authorization page. After authorization, jump to the callback page to log in
      QC.Login.showPopup({
        appId: 'Your own appId',
        redirectURI: 'token url'
      })
    },

But I found that no matter how I wrote the callback address, I still went back to my login page, but it doesn't matter. Let's deal with it again anyway
At this time, after clicking on the page, it will jump to the qq page, as shown below. After authorization, it will return to the page
2.4 receiving qq return data
Then I see that some people use timers. I don't think it's good, so I write the method in create (), as shown below

 created () {
    // Check if you are logged in
    if (QC.Login.check()) {
      // The openId and accessToken here are the parameters needed by the background. The background can obtain temporary login credentials through these parameters, and then it's its own logic
      QC.Login.getMe(function (openId, accessToken) {
        if (openId !== undefined) {
        //openId is the unique identification of the user and also needs to be saved to the database
          console.log(openId)
          console.log('-------------------------------')
          console.log(accessToken)
          // Calling OpenAPI with JS SDK
          QC.api('get_user_info', this.qqParam)
            // Specifies the receiving function that the interface accesses successfully, and s returns the Response object for success
            .success(function (s) {
              // Callback succeeded, get the return data of OpenAPI through s.data
              console.log('---------------------------------------------')
              console.log(s.data)
            	//I print the returned data of the successful call to the console. I can send these parameters to the background and store them in the database
            	 this.$api.post('api/qqLogin', this.qqParam).then(res => {
                if (res.code === 'success') { }
              })
            })
            // Specifies the receive function of interface access failure, f returns the Response object for failure
            .error(function (f) {
              // Failed callback
              alert('Failed to get user information!')
            })
             this.$router.push({ path: '/home' })//Log in successfully, and I'll jump to the home page after processing
        }
      })
      console.log('Already logged in!')
      this.$message.info('qq Successful login')
    } else {
      console.log('Not logged in')
    }

The data returned by qq is as follows:

And then it's almost over,
Set a qq exit button and call the following method to exit

 qqOut () {
      QC.Login.signOut()
      this.$message.info('qq Logout')
    },

The above is all involved in the process of my access. If the place is not right, please guide me

Published 6 original articles, won praise 0, visited 704
Private letter follow

Tags: Vue SDK Database Javascript

Posted on Thu, 12 Mar 2020 05:56:38 -0400 by ExpendableDecoy