精华内容
下载资源
问答
  • 微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里; 另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式) 第一种方式的完成非常简单,但是第二种方式,就需要前后台都做...

    微信授权扫码登陆

    微信开放平台提供了两种登陆方式,一种是会跳转到一个很丑很丑,只有一个二维码的界面里;
    另一种则是可以自己定制化的(二维码内嵌到自己网站内的方式)

    第一种方式的完成非常简单,但是第二种方式,就需要前后台都做一些调整了

    微信扫码登陆的准备工作 这是在开始做相关业务开发之前的一些东西

    1. 微信开放平台中注册一个账号,并完成自己的开发者资质认证(这个链接应该点不过去,他们token是明文存在地址栏里的....),开发者资质认证要花 300块钱,可以绑定10个移动应用程序和10个网站应用上(还有公众号、小程序和第三方平台,这些不是主体内容,不做说明)。
    2. 创建网站应用,这些东西按照流程走就好了
    3. 网站应用创建并审批完之后可以直接查看该应用,里面有AppIDAppSecret,用小本本记好,未来要用的
    4. 接口信息里有一个微信登陆,申请开通即可(没有走第一步的可能会提示要认证,老老实实把第一步内容走了吧,该花的钱...让老板报销去吧)
    5. 授权回调域,这个东西填写自己网站(处理扫码登陆相关业务的)后台域名地址,如果后台没有跑在80端口,则需要在里面指定端口号,只要填写顶级域名即可(arunoido.com:411/)(格式有问题的话,在实际操作可能会提示redirect_uri参数错误)子级域名自动继承

    操作流程

    官方文档里已经给了一套非(shi)常(fen)明(mo)确(hu)的操作手册了,这里贴上文章链接

    整体的代码流程如下(说的有一点点抽象,有一个宏观意识就好,不要太专注于某一个地方的实现,后面会说):

    1. 前台界面生成二维码,同时开启轮询,每隔一段时间(时间你定)去查看用户登陆状况
    2. 用户用微信扫描二维码,进入了该网站的授权界面
    3. 前台收到了确认,向后台发起请求,携带codestate
    4. 后台用code请求微信接口,拿到access_token等一系列信息(我是仅作登陆的,所以拿了一个union_id,如果需要的话,可以用access_token换取一些微信用户的信息,然后就可以干一些猥琐的事情了,比如.....比如把别人的微信头像存到自己的数据库里!),将union_id存入redis中,key使用微信提供的state
    5. 前台在轮询过程中会拿到后台返回的结果,没有绑定的跳转登陆界面绑定,有绑定的直接进入
    6. (绑定流程)前台账号密码发送到后台,后台完成绑定

    代码处理

    前台处理

    1. 微信提供了一个js文件用于生成二维码以及发送请求并完成界面重定向,使用即可,具体说法在官方文档中请求示例下面 步骤一、二,按照文档填写内容即可(注:redirect_uri参数填写后台微信扫码登陆的接口地址)
    2. 修改登陆界面,在选择扫码登陆之后,判断是否绑定账号,如果绑定账号,则用该账号登陆;如果未绑定账号,则需要登陆账号完成微信号的绑定/注册(注:这里要修改一下,传统的登陆是后台响应前台请求,因为扫码结果的回调是被包装过的(微信登陆的那个js里有相关的请求以及响应代码,但是他们没有解释里面的接口,代码也是压缩过的,不方便查看接口方法,所以我也没有把它做成响应的),所以需要去轮询扫码结果,判断登陆状态)
    3. 添加新的接口请求(状态请求接口)

    后台处理

    1. 增加三个接口,微信扫码登陆,微信账号绑定和一个查询响应状况的功能
    2. 微信扫码登陆接口使用GET方法,参数有codestate,返回值为void
    3. code请求union_id,并将union_id存入redis中备用,key使用state参数
    4. 查询响应接口使用POST方法,接受参数为state,用于查询union_id,数据为空说明请求超时,有数据但是在数据库中查询不到则说明用户未绑定,有数据且查询到了用户,可以直接调用后台的登陆接口,然后返回token
    5. 微信账号绑定使用POST方法,参数有stateaccpwd。用于扫码登陆的后半段,用户扫码完成之后输入账号密码,账号密码正确且能查出union_id,完成绑定,并调用账号密码的登陆接口,返回token

    我一直都误解了微信扫码登陆模块的流程惹...

    展开全文
  • 1.微信开放平台网站授权的流程(非原理) 2.VUE如何使用微信开放平台开发微信授权登陆的功能,以及本地如何进行测试 微信开放平台网站授权的流程 1.总体流程图 2.二维码如何获取 准备工作 首先,在进行微信OAuth2.0

    一、摘要

    本文主要介绍两点:
    1.微信开放平台网站授权的流程(非原理)
    2.VUE如何使用微信开放平台开发微信授权登陆的功能,以及本地如何进行测试

    二、微信开放平台网站授权的流程

    1.总体流程图

    总体流程图

    2.二维码如何获取

    准备工作

    首先,在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。(前端只需要AppId)

    正文开始

    有两种方法获取二维码,一是直接通过在PC端打开链接获取跳转页面获取;二是引入微信登陆JS文件,通过定义微信JS对象,在本页面获取,不需要跳转页面。

    1. 打开链接跳转

    前端打开如下链接
    https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

    例如:
    https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
    在这里插入图片描述

    2.通过定义Js对象的方式

    在页面中先引入如下JS文件(支持https)

    http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
    

    在需要使用微信登录的地方实例以下JS对象:

    var obj = new WxLogin({
     self_redirect:true,
     id:"login_container", 
     appid: "", 
     scope: "", 
     redirect_uri: "",
      state: "",
     style: "",
     href: ""
     });
    

    在这里插入图片描述

    3.扫码授权后做了什么

    用户允许授权后,前端将会重定向到redirect_uri的网址上,并且带上code和state参数

    redirect_uri?code=CODE&state=STATE
    

    前端调后端接口将code传给后端,后端进行以下处理

    1. 网站后台接收到code,表明微信开发平台同意数据请求
    2. 网站后台根据code参数,再加上AppID和AppSecret请求微信开发平台换取 access_token
    3. 微信开发平台验证参数,并返回 access_token
    4. 网站后台收到 access_token 后即可进行参数分析获得用户账号数据

    后端处理完后返回将前端所需要的数据,前端看是要直接登陆,还是先跳回登录页进行绑定账号。

    三、VUE中具体实现

    本次主要介绍通过定义js对象的方式获取二维码

    // 设置微信二维码函数
        setWxerwma () {
          const s = document.createElement('script')
          s.type = 'text/javascript'
          s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
          const wxElement = document.body.appendChild(s)
          const uri = `${window.location.origin}callback/wx/` // 这里是你的回调uri
          wxElement.onload = () => {
            const obj = new WxLogin({
              id: 'wx_login_container', // 需要显示的容器id
              appid: this.appId, // appid wx*******
              scope: 'snsapi_login', // 网页默认即可
              redirect_uri: encodeURIComponent(uri), // 授权成功后回调的url
              state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
              style: 'black', // 提供"black"、"white"可选。二维码的样式
              href: this.QRCodeStyle // 外部css文件url,需要https
            })
            if (!obj) {
              console.error('wx-error')
            }
          }
    

    外部css文件url,需要https,我们没有,可以将样式转化为base64写入

    @charset "UTF-8";
    .impowerBox .title {display: none;}
    .impowerBox .info {display: none;}
    .status_icon {display: none}
    .impowerBox .status {text-align: center;} 
    // 二维码样式转化为base64
          QRCodeStyle: `data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`
    

    二维码扫完并授权后会回调到所配置的uri上,在这个页面自行处理逻辑,看是要直接登陆,还是先跳回登录页进行绑定账号。

    本地如何调试

    进入微信开放平台,进入管理中心,点开自己的应用,如下图
    在这里插入图片描述
    在最下面的开发信息中的授权回调域改为localhost即可,有端口号要写上端口号
    在这里插入图片描述

    注意:在本地测试完后,将授权回调域再改为线上的地址。

    四、参考文献

    1.某跳动面试官:说说微信扫码登录背后的实现原理?
    2.微信开放平台官方文档

    展开全文
  • 为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。官方文档讲解已经很完善,官方文档地址 我罗列几点关键点或者说我在使用过程中的需求点。 ...


    前言

    为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。官方文档讲解已经很完善,官方文档地址
    我罗列几点关键点或者说我在使用过程中的需求点。


    以下是本篇文章正文内容,下面案例可供参考

    一、在哪里配置?

    官网介绍

    在这里插入图片描述

    官网这里很久没更新了,实际操作界面流程为登录小程序后台,进入开发管理-开发设置,下拉后可看见扫普通链接二维码打开小程序

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    二、如何配置

    具体配置流程请看官方文档,官方是标准且权威,很多博主喜欢把文档复制来,个人觉得没必要,大家还是要多看官方文档,我可以负责指路官方配置流程

    说几个要点:

    1、在配置完二维码规则的链接后,页面中会根据你填写的链接生成一个验证文件,这个文件要下载然后发给运维小伙伴,将此文件放置在相对应的路径下,如果不放,在进行保存时会提示校验文件检查失败

    在这里插入图片描述

    失败在这里插入图片描述
    2、带?参数的链接,一直截取到最后一个斜杠/。

    例:csdn.com/me/vlog/study?sid=123;
    二维码规则:csdn.com/me/vlog/
    

    三、如何读取参数

    生成二维码后,二维码的参数是通过onload中options的options.q进行读取,然后进行解码。因为是普通二维码,所以开发工具是不支持通过二维码编译的。想要看参数形态,我是用手机扫码后打开调试进行查看。有更好方法的小伙伴可以留言。

    总结

    我理解的普通二维码跳转小程序,其实是我们在小程序后台对我们已有的普通二维码链接和小程序建立了对应关系,在扫码后通过对应关系跳转到小程序,然后将二维码链接通过options.q的形式传递给页面。总之还是方便了我们的业务流程。
    有意见或建议的小伙伴欢迎留言。

    展开全文
  • 我是做Java开发,公司有个网站需要用微信做三方登录,这个微信开放平台上都有,但还有个要求是用户扫码登录之后手机端微信自动跳转到公司的公众号上的一篇文章去,其实就是一个网页嘛,现在不知道怎么做这个自动跳转...
  • 首先需要在微信开放平台注册账号并进行企业认证300块钱。然后创建应用。应用通过审核之后就会拥有一个Appid和AppSecret.然后配置回调域名。剩下的就是开发了。 我们可以看到官方文档不管是页面跳转扫码还是iframe...

    首先需要在微信开放平台注册账号并进行企业认证300块钱。然后创建应用。应用通过审核之后就会拥有一个Appid和AppSecret.然后配置回调域名。剩下的就是开发了。
    我们可以看到官方文档不管是页面跳转扫码还是iframe内嵌到当前页面扫码确认授权后都会跳转到授权的回调域名下的页面,同时url中会携带网站state和code。通过code和appid、appsecret获取access_token。这也是大部分pc网页端微信扫码登录的实现流程。
    我们需要在electron构建的桌面应用中实现微信扫码功能,所以官方的方案无法满足我们的业务需求。所以现在的思路是这样的 首先我们去获取二维码。后端http服务去请求这个页面,然后解析正则匹配提取二维码的图片地址,然后返回给前端,这样我们的二维码就可以获取到了二维码。打开调试工具我们可以看到在这里插入图片描述这个图片的请求路径就是uuid.然后页面是一直在轮询请求扫码状态 参数是uuid。
    未扫码状态下返回window.wx_errcode=408;window.wx_code=’’;不同的状态下wx_errcode的值不同。500是uuid过期。404.扫描二维码成功,403取消登录,405登录成功wx_code值就是我们需要的code。
    获取到code我们就可以按正常流程走,通过code服务端就可以获取用户的登录凭证等信息
    后端请求接口如下:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code。
    demo下载
    先阅读源码,修改server.mjs里面的配置信息,然后类似以下的方法执行。
    node --experimental-modules server.mjs

    访问http://localhost:8033/login/weixin/demo即可进行测试。

    展开全文
  • 微信扫码登录_JAVA

    2020-06-02 10:16:28
    扫码登录属于微信开放平台提供的API,不是微信公众平台。这里需要注册等配置,暂不赘述。 同时也要注意,如果你也需要微信公众号内的登录授权操作,那么用户唯一标识不应该是openId,而应该是unionId,因为微信公众...
  • 微信开放平台上注册并创建网站应用,等待审核;需提供公司章及域名等信息 审核通过后获取AppID和AppSecret 思考流程: 首先思考如何生成二维码 扫码后的情况 用户未绑定网站时,跳转到绑定界面 用户...
  • 1.1微信开放平台url:微信官方平台 1.2 注册开发者资质账号 注册 邮箱激活 完善开发者资料 开发者资质认证(准备营业执照,1-2个工作日审批、300元) 创建网站应用(提交审核,7个工作日审批) 注意事项: 应用通过审核...
  • 使用「方式一:授权注册页面扫码授权」开发需要注意,并不是直接访问生成的网址,需要先访问授权域名下的页面「命名为a页面」,在里面生成跳转到生成的网址。网址里面配置的redirect_uri就是a页面的域名。 其实...
  • 微信扫码登录,首先在开放平台申请到AppID和AppSecret,通过APPID获取到acces_token,然后在跳转扫码页面扫码之后就能获取到用户的信息,接着改变登录状态 $code= $this->request->get("code"); //开放...
  • 微信小程序扫码打开接入指南

    千次阅读 2018-09-20 04:30:43
    为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序能力。 2、功能 普通链接二维码,是指开发者使用工具对网页链接进行编码后生成的二维码。线下商户...
  • 1. 不用JS轮循去请求(因为扫码之后微信会回调,直接通过回调来做登录跳转即可。回调的时候会告诉你code 然后通过code就能拿到用户信息了,直接就是业务逻辑处理了) 2. 使用UNIONID来做唯一用户区分 3. 获取UNIONID...
  • 微信提供了两种方式跳转登录,让我们来看一下吧! 内嵌方式 ...2.组件中使用,生成二维码的信息,可以让后端通过接口查看属性,也可以直接在微信开发开放平台中查看,把属性值传给 wxlogin ...
  • 很多人在做产品推广的时候都会遇到微信扫码无法直接下载的问题。最终在参考了众多资料后,发现微信内置浏览器做了功能屏蔽,不...一、上传微信开放平台 该方法不现实已经被弃用了,具体因为什么我想你们应该懂的。...
  • 最近公司开发了一款app,在做推广的时候遇到了微信扫码无法直接下载的问题 最终在参考了众多资料后,发现微信内置浏览器不支持直接下载功能,可能这就是公司足够大了,有些功能不给...一、上传微信开放平台 方法已...
  • 微信第三方平台授权介绍须知配置项解密加密消息解密消息解密流程启动ticket推送服务业务类获取component_verify_ticket接口业务类二维码授权流程接口业务类获取预授权码跳转到授权页授权回调接口业务类 被微信开放...
  • 获取到appid之后,使用微信二维码登录有两种方式,一种是跳转开放平台域名下的二维码登录页面,用户进行扫码登录,一种是将二维码内嵌到应用网站,用户进行扫码登录。 两种方式登录流程相同: 用户视角:扫描...
  • 微信开放平台:为PC或者移动网页登录网站,显示二维码,扫码二维码后登录。 2. 网页授权的两种scope的区别 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到...
  • APP分享微信小程序

    千次阅读 2020-04-14 11:35:51
    打开微信开放平台,登录APP的微信开放账号,在管理中心找到APP设置。点击小程序类目,绑定小程序。 绑定的时候需要登录小程序的账号密码,需要管理员扫码确认绑定。 2.APP关联小程序 点击APP应用的后面的查看,进入...
  • 开放平台 小程序插件 跳转二维码 小程序二维码 基本设置 模板消息 体验者设置 获取用户信息 快速创建小程序 内容安全 搜索widget 订阅消息 扫码关注组件 物流助手 获取小程序scheme码 小程序搜索 违规和申诉管理 ...
  • 微信登录: 用户可使用微信帐号快速登录你的网站,同一...扫码登录(一般用于 PC 网页)- 微信开放平台 跳转 APP 授权登录(第三方 APP 使用)- 微信开放平台 微信内置浏览器内登录(一般用于移动端网站,公众号登录...
  • 微信登陆的几种方式

    千次阅读 2018-11-22 09:10:32
    目前总共就四种登录方式: 扫码登录(一般用于 PC 网页,在开放账户注册网站应用,通过网站应用来实现扫码登陆) 跳转 APP 授权登录(第三方 APP 使用) ...名义上来说,这四种都是属于微信开放平台的能力 见文档...
  • 开放平台 小程序插件 跳转二维码 小程序二维码 基本设置 模板消息 体验者设置 获取用户信息 快速创建小程序 内容安全 搜索widget 订阅消息 扫码关注组件 物流助手 用户风险识别 获取小程序scheme码 Installation $ ...
  • ![这是手机浏览器里的html页面]... ... 它这里直接跳转到微信app 然后登录了 我在**微信开放平台**也没找到相关的文档 目前也只用了微信里面的扫码oauth登录 只能电脑端扫码登录 想手机端登录就没法实现了

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

扫码跳转微信开放平台