使用qq的oauth2.0实现登录|电子爱好者-九游会真人第一品牌

admin管理员组

文章数量:1559079

经常在网页里面会提供第三方登录的方式，比如这样。

如果点击qq登录，会出来这样一个页面。

那么如果我们的网页也要支持使用qq登录，我们该怎么做呢？

准备工作_oauth2.0，文档

第一步

1. 你需要到这个网站，创建应用

第一步

点击qq登录的按钮，需要跳转到这个网站：https://graph.qq/oauth2.0/authorize)并且需要携带以下参数。获取authorization code

// 获取authorization code
// 请求地址：https://graph.qq/oauth2.0/authorize
let fetchtokenurl = 'https://graph.qq/oauth2.0/token'
const appid = '0123456789'
const redirect_uri = 'www.demo/callback' // 授权之后需要重定向的url
const state = date.now()
let options = {
    response_type: 'code', // 固定的为code
    client_id: appid, // 申请qq登录成功后，分配给应用的appid。
    redirect_uri,
    state,
    scope: 'get_user_info,list_album' // 需要获取哪些权限
  }
  let query = querystring.stringify(options)
  fetchtokenurl  = `?${query}`

第三步

如果用户成功登录并授权，则会跳转到指定的回调地址，并在 redirect_uri （上面表格自己写的）地址后带上authorization code （通过authorization code获取access token）和原始的 state值(上面表格自写的)。

通过authorization code获取access token，你需求请求这个地址https://graph.qq/oauth2.0/token，并且需要传递以下参数。

如果成功返回，即可在返回包中获取到access token。

const request = require('request-promise') // 使用request模块
const querystring = require('querystring')
// 通过authorization code获取access token
// 请求地址：https://graph.qq/oauth2.0/token
let fetchtokenurl = 'https://graph.qq/oauth2.0/token'
(
  async function () {
    const code = '0123456789'
    const appid = '0123456789'
    const appkey = '0123456789'
    const options = {
      grant_type: 'authorization_code', // 此值为“authorization_code”。
      client_id: appid, // 申请qq登录成功后，分配给网站的appid。
      client_secret: appkey, //申请qq登录成功后，分配给网站的appkey。
      code, // 如果用户成功登录并授权，则会跳转到指定的回调地址，并在redirect_uri地址后带上authorization code
      redirect_uri: '' // 必须是注册appid时填写的主域名下的地址，建议设置为网站j9九游会老哥俱乐部交流区首页或网站的用户中心
    }
    // 拼接请求参数
    fetchtokenurl  = `?${querystring(options)}`
    // 发送请求
    let result = await request(fetchtokenurl)
    // 返回的是一个字符串格式是access_token=fe04**cce2&expires_in=7776000&refresh_token=88e4**be14
  }
)().then(res => console.log(res), err => console.log(err))

获取用户信息

通过输入在上一步获取的access token，得到对应用户身份的openid。

请求地址 https://graph.qq/oauth2.0/me 参数必须有 access_token，拼接之后的链接https://graph.qq/oauth2.0/me?access_token=01234567，会返回如下的内容

callback( {"client_id":"your_appid","openid":"your_openid"} );

获取到access token和openid后，可通过调用openapi来获取或修改用户个人信息。

获取用户信息

https://graph.qq/user/get_user_info?access_token=your_access_token&oauth_consumer_key=your_app_id&openid=your_openid

现在流程已经完成了

本文标签： qq