微信扫码登录

官方文档:网站应用微信登录开发指南

流程图

《微信扫码登录》

使用步骤

  1. 在使用的页面中引入:http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
  2. 在需要使用微信登录的地方实例以下JS对象:

    var obj = new WxLogin({
         id:"containerId", // 需要显示的容器id
         self_redirect:true,/*true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri,false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。*/
         appid: "wx*****",  // 公众号appid wx*******
         scope: "snsapi_login",  // 应用授权作用域,以逗号隔开。网页应用目前仅支持snsapi_login
         redirect_uri: "", // 授权成功后回调的url
         state: "", /* 用于保持请求和回调的状态,授权请求后原样带回给第三方。该参数可用于防止csrf攻击(跨站请求伪造攻击),可设置为简单的随机数加session用来校验*/
         style: "black", // 提供"black"、"white"可选。二维码的样式
         href: "" // 外部css文件url,需要https
    });
    
  3. 过程详解:
    当使用微信扫码,微信校验成功后,会访问redirect_uri,并在redirect_uri的参数上添加code和设置的state。

    在node层,添加一个redirect_uri对应的路由,当路由接受到对应请求,先校验一下state,然后将拿到的code和appid, secret, grant_type参数请求 https://api.weixin.qq.com/sns…,拿到用户的ACCESS_TOKEN

    通过ACCESS_TOKEN访问https://api.weixin.qq.com/sns…,便可以拿到用户的微信信息了。

    将拿到的用户信息(有用户的唯一的openid),调用后台的微信登录接口,成功redirect到进入登录页面之前的url便可以了。

    备注:有的情况可能需要校验或刷新用户的ACCESS_TOKEN.

    原文作者:qzuser
    原文地址: https://segmentfault.com/a/1190000017299220
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞