微信扫码登录

1. 引入微信扫码登录

1.1 引入微信扫码登录的 js 文件

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

1.2 在 html 中添加一个 div，用于显示微信扫码登录的二维码

<div id="login_container"></div>

1.3 在 js 中调用微信扫码登录的 js 文件，生成二维码

<script>
  new WxLogin({
    id: "login_container",
    appid: "",// appid

    scope: "snsapi_login",

    redirect_uri: encodeURIComponent("http://www.baidu.com"),

    href: "",

    state: "",

    style: "",

    href: "",
  });
</script>

1.4 参数说明

appid：应用唯一标识，在微信开放平台提交应用审核通过后获得

scope：应用授权作用域，snsapi_base

（不弹出授权页面，直接跳转，只能获取用户 openid），snsapi_userinfo
（弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）
redirect_uri：重定向地址，需要进行 UrlEncode

href：自定义样式链接，需要在微信开放平台网站上的开发者设置中配置

state：用于保持请求和回调的状态，授权请求后原样带回给开发者的页面

style：提供默认样式

2. 微信扫码登录流程

• 用户点击登录按钮，跳转到微信扫码登录页面

• 用户扫描二维码，授权登录

• 微信服务器将用户信息返回给网站服务器

• 网站服务器将用户信息保存到数据库中

• 网站服务器将用户信息返回给前端页面，前端页面根据用户信息进行登录

• 前端页面根据用户信息进行登录，登录成功后跳转到首页

3. 注意事项

• 微信扫码登录需要在微信开放平台进行注册和审核

• 微信扫码登录需要在网站服务器上进行配置

• 微信扫码登录需要在前端页面上进行配置

• 微信扫码登录需要用户授权，用户授权后才能获取用户信息