<script src="/UploadFiles/2021-04-02/wxLogin.js">

步骤2：在需要使用微信登录的地方实例以下JS对象：


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


参数说明


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


第二步：通过code获取access_token
通过code获取access_token
https://api.weixin.qq.com/sns/oauth2/access_token"table" cellspacing="0">
  
    
      参数
      是否必须
      说明
    
  
  
    
      appid
      是
      应用唯一标识，在微信开放平台提交应用审核通过后获得
    
    
      secret
      是
      应用密钥AppSecret，在微信开放平台提交应用审核通过后获得
    
    
      code
      是
      填写第一步获取的code参数
    
    
      grant_type
      是
      填authorization_code
    
  


返回说明
正确的返回：


{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN",
"openid":"OPENID", 
"scope":"SCOPE" 
}




  
    
      参数
      说明
    
  
  
    
      access_token
      接口调用凭证
    
    
      expires_in
      access_token接口调用凭证超时时间，单位（秒）
    
    
      refresh_token
      用户刷新access_token
    
    
      openid
      授权用户唯一标识
    
    
      scope
      用户授权的作用域，使用逗号（,）分隔
    
  


错误返回样例：
{"errcode":40029,"errmsg":"invalid code"}
刷新access_token有效期
access_token是调用授权关系接口的调用凭证，由于access_token有效期（目前为2个小时）较短，当access_token超时后，可以使用refresh_token进行刷新，access_token刷新结果有两种：
1.1. 若access_token已超时，那么进行refresh_token会获取一个新的access_token，新的超时时间；

2.2. 若access_token未超时，那么进行refresh_token不会改变access_token，但超时时间会刷新，相当于续期access_token。
refresh_token拥有较长的有效期（30天），当refresh_token失效的后，需要用户重新授权。
请求方法
获取第一步的code后，请求以下链接进行refresh_token：
https://api.weixin.qq.com/sns/oauth2/refresh_token"table" cellspacing="0">
  
    
      参数
      是否必须
      说明
    
  
  
    
      appid
      是
      应用唯一标识
    
    
      grant_type
      是
      填refresh_token
    
    
      refresh_token
      是
      填写通过access_token获取到的refresh_token参数
    
  


返回说明
正确的返回：


{ 
"access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN", 
"openid":"OPENID", 
"scope":"SCOPE" 
}




  
    
      参数
      说明
    
  
  
    
      access_token
      接口调用凭证
    
    
      expires_in
      access_token接口调用凭证超时时间，单位（秒）
    
    
      refresh_token
      用户刷新access_token
    
    
      openid
      授权用户唯一标识
    
    
      scope
      用户授权的作用域，使用逗号（,）分隔
    
  


错误返回样例：
{"errcode":40030,"errmsg":"invalid refresh_token"}
第三步：通过access_token调用接口
获取access_token后，进行接口调用，有以下前提：
1.1. access_token有效且未超时；


2.2. 微信用户已授权给第三方应用帐号相应接口作用域（scope）。
对于接口作用域（scope），能调用的接口有以下：


  
    
      授权作用域（scope）
      接口
      接口说明
    
  
  
    
      snsapi_base
      /sns/oauth2/access_token
      通过code换取access_token、refresh_token和已授权scope
    
    
      /sns/oauth2/refresh_token
      刷新或续期access_token使用
    
    
      /sns/auth
      检查access_token有效性
    
    
      snsapi_userinfo
      /sns/userinfo
      获取用户个人信息
    
  


其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作，直接跳转第三方网页带上授权临时票据（code），但会使得用户已授权作用域（scope）仅为snsapi_base，从而导致无法获取到需要用户授权才允许获得的数据和基础功能。
接口调用方法可查阅《微信授权关系接口调用指南》
F.A.Q
1. 什么是授权临时票据（code）？
答：第三方通过code进行获取access_token的时候需要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数，进一步加强自身授权登录的安全性。
2. 什么是授权作用域（scope）？
答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应access_token后方可对接口进行调用。
3. 网站内嵌二维码微信登录JS代码中style字段作用？
答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style字段应提供"black"值（或者不提供，black为默认值），则对应的微信登录文字样式为黑色。相关效果如下：


若提供"white"值，则对应的文字描述将显示为白色，适合深色背景。相关效果如下：
4.网站内嵌二维码微信登录JS代码中href字段作用？
答：如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配，可以自己提供样式文件来覆盖默认样式。举个例子，如第三方觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段

  
impowerBox .qrcode {width: 200px;}
  
impowerBox .title {display: none;}
  
impowerBox .info {width: 200px;}
  
status_icon {display：none}
  
impowerBox .status {text-align: center;}

相关效果如下：


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。