博客
关于我
微信公众号网页获取用户授权取得openid,和使用openid进行协助登录逻辑(Vue样例)
阅读量:780 次
发布时间:2019-03-22

本文共 3006 字,大约阅读时间需要 10 分钟。

微信网页开发 - 网页授权

一、获取openid的步骤

第一步:用户同意授权,获取code

在确保微信公众账号具有授权作用域(scope参数)的权限的前提下(默认权限包含snsapi_base和snsapi_userinfo),引导用户打开以下链接:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

注意事项:

  • scope参数有两种选择:
    • snsapi_base:不弹出授权页面,直接跳转。
    • snsapi_userinfo:弹出授权页面,可获取openid、昵称、性别、所在地等信息。

用户同意授权后,页面跳转至redirect_uri/?code=CODE&state=STATE

第二步:通过code换取网页授权access_token

这里获取的是特殊的网页授权access_token,与基础支持中的access_token不同。公众号可通过以下接口获取网页授权access_token:

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID

特别注意:

  • access_token和secret的安全级别高,必须只存储在服务器,不允许传递给客户端。
  • 后续刷新access_token及获取用户信息的步骤必须从服务器执行。

说明:

  • 若使用snsapi_base,只需获取openid,流程到此结束。
  • 若使用snsapi_userinfo,需进行后续步骤。

第三步:刷新access_token(可选)

由于access_token有效期较短,可以使用refresh_token刷新。refresh_token有效期为30天,如失效需用户重新授权。

第四步:拉取用户信息(需scope为snsapi_userinfo)

在获取了access_token和openid后,可以通过以下接口拉取用户信息:

https://api.weixin.qq.com/cgi-bin/user/info?access_token=ACCESS_TOKEN&openid=OPENID

二、前端操作

前端功能简要说明:

  • 引导用户打开链接:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  • 获取code,传递给后端。
  • 后端用code换取openid,返回给前端。

三、openid协助登录逻辑

业务需求:用户有自己的登录系统,若已在微信上登录,则直接跳转至内部页面,否则跳转至登录页。

登录逻辑:

  • 前端获取code,传递给后端。
  • 后端用code换取openid,调用登录接口。
    • 如果用户未绑定账户,跳转至第三方登录页。
    • 若已绑定,直接登录成功,存储token。
  • 第三方登录成功后,获取code,结合openid,传递给后端绑定账户。
  • 再次调用登录接口,存储token。
  • 四、获取openid的Vue代码示例

    export default {  data() {    return {      appid: process.env.VUE_APP_WECHAT_APP_ID,      openId: null    };  },  mounted() {    var that = this;    const openIdStorage = storageDB.getItem('openId');    if (openIdStorage) {      this.openId = openIdStorage;    } else {      this.getCode();    }  },  methods: {    getCode() {      const scope = 'snsapi_base'; // 静默授权      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${encodeURIComponent(window.location.href)}&response_type=code&scope=${scope}#wechat_redirect`;      if (window.location.href.includes('?')) {        window.location.href = url;      } else {        const theRequest = this.getUrlCode();        const state = theRequest['state'];        if (!state) {          window.location.href = url;        }      }    },    getUrlCode() {      const fullUrl = window.location.href;      const theRequest = {};      if (fullUrl.includes('#')) {        const hash = fullUrl.split('#')[1];        const param = hash.split('&')[0];        const key = param.split('=')[0];        const value = param.split('=')[1] || '';        theRequest[key] = value;      } else if (fullUrl.includes('?')) {        const query = fullUrl.split('?')[1];        const params = query.split('&');        for (let param of params) {          const [key, value] = param.split('=');          if (key) {            theRequest[key] = value;          }        }      }      return theRequest;    }  }};

    五、注意事项

    • 代码示例中变量如storageDB需根据实际情况配置。
    • API接口参数如ACCESS_TOKENOPENID需妥善处理。

    转载地址:http://thqwk.baihongyu.com/

    你可能感兴趣的文章
    Mysql5.7版本单机版my.cnf配置文件
    查看>>
    mysql5.7的安装和Navicat的安装
    查看>>
    mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置
    查看>>
    MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)
    查看>>
    MySQL8修改密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
    查看>>
    MySQL8找不到my.ini配置文件以及报sql_mode=only_full_group_by解决方案
    查看>>
    mysql8的安装与卸载
    查看>>
    mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
    查看>>
    mysqldump 导出中文乱码
    查看>>
    mysqldump备份时忽略某些表
    查看>>
    mysqldump实现数据备份及灾难恢复
    查看>>
    mysqlreport分析工具详解
    查看>>
    MySQL一个表A中多个字段关联了表B的ID,如何关联查询?
    查看>>
    MYSQL一直显示正在启动
    查看>>
    MySQL一站到底!华为首发MySQL进阶宝典,基础+优化+源码+架构+实战五飞
    查看>>
    MySQL万字总结!超详细!
    查看>>
    Mysql下载以及安装(新手入门,超详细)
    查看>>
    MySQL中B+Tree索引原理
    查看>>
    mysql中cast() 和convert()的用法讲解
    查看>>
    mysql中floor函数的作用是什么?
    查看>>