pc微信扫码登录

行者dyc
879 阅读3分钟

pc微信扫码登录

1、微信pc扫码登录

前期准备(可以结合文档地址看):文档地址
  • 注册一个微信开放平台
  • 有一个pc网站引用
  • 将pc网站应用绑定在此开放平台下
  • 配置微信回调域名
如下图:

pc应用入口:

0ac0ec7379b34cbe870853e3c02d5228~tplv-k3u1fbpfcp-watermark.png pc网站信息:AppId和AppSecret是和微信通信的主要参数：

60bafcd553b745d49f5b6ac35cd6c51d~tplv-k3u1fbpfcp-watermark.png 配置pc网站回调域名:

0273dd04ccf44aa785e4d2185d478dd6~tplv-k3u1fbpfcp-watermark.png

生成二维码方式(有两种方式)

  • 方式一(直接跳转微信地址生成二维码):

    获取请求CODE,直接跳转微信地址,此地址会打开一个微信页面,里面嵌套的就是一个二维码.

    window.loacation.href = 'https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect'

    参数说明:

    • appid:pc网站的appid(如上图);

    • redirect_uri:用户扫码后返回的回调地址(请使用urlEncode对链接进行加密处理),

      如果跳转pc页面可以搞一个中转页让用户跳转,获取到code值,通过code值与微信通信获取用户openid

      用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数
redirect_uri?code=CODE&state=STATE

      我们公司项目回调地址配置的后端域名,这里的redirect_uri是后端域名加接口的形式,相当于直接调用了后端的接口,后端获取到code和微信通信获取openid然后后端跳转前端指定页面的;

    • 其他的参数都是写死的可以看官方文档

  • 方式二(通过微信方法获取到二维码直接嵌入我们的页面内):

    • 步骤1:在页面中先引入如下JS文件（支持https）

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

    • 步骤2:

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

      参数说明:

      self_redirect否true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
      id是第三方页面显示二维码的容器id,需要自己在页面中写一个装有二维码的容器
      appid是应用唯一标识，在微信开放平台提交应用审核通过后获得(pc网站的appid)
      scope是应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
      redirect_uri是重定向地址，需要进行UrlEncode(需要和授权回调域名保持一致)
      state否用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
      style否提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ
      href否自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ

​ 说明:第二种方式实际是微信平台对第一种方式的封装,调用此接口相当于请求了第一种方式的地址,微信平台通过监控用户的扫码操作,然会返回我们给的重定向地址!

avatar
文章
阅读
粉丝