项目笔记整理08-微信授权流程（个人项目，不适用所有）

微信授权官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

本项目中微信授权的目的是货权用户名和头像以及token。中间过程由于后端担心部分流程的参数涉及安全问题，所以微信官方文档授权流程中间部分步骤涉及处理参数都由后端处理。

1.1我的项目流程：

（1） 第一步：用户同意授权，获取code（回调地址和后端商议，地址由后端决定，且为后端地址，code由后端获取并配合secret处理）

const callbackURL = ''//redirect_uri授权后重定向的回调（后端）链接地址， 请使用 urlEncode 对链接进行处理
const wechatId = ''//appid公众号的唯一标识
const redurl = ''//state重定向后的前端地址
const redirectURI = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${wechatId}&redirect_uri=${callbackURL}&response_type=code&scope=snsapi_userinfo&state=${redurl}&connect_redirect=1#wechat_redirect`
location.replace(redirectURI)

（2）第二步：通过code换取网页授权access_token（由于secret安全要求比较高，不能在客户端设置，所以这一步为后端进行设置）
redirect_uri回调地址页面中获取结果如下：

http://www.******.com?code=021sujCv0pKANg19UnBv0yQ6Cv0sujCj&state=105

用code和secret获取access_token（后端处理）

 //APPID公众号的唯一标识
 //SECRET公众号的appsecret,由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。
 //CODE获取到的code
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回的数据：

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

（3）第三步：刷新access_token（如果需要）
由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权。

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

（4） 第四步：拉取用户信息(需scope为 snsapi_userinfo)

http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

官方文档返回的数据

{   
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":       "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

（5） 附：检验授权凭证（access_token）是否有效。

http：GET（请使用https协议） https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

实际在我的项目中，由于后端处理code并用code和secret获取access_token也进行了处理并把获取到的数据进行处理，最后把所需的用户名和头像以及最重要的接口验证所需的token通过重定向地址返回给了前端。所以项目中前端只用两步。

第一步：同上第一步，把state参数设置为前端重定向的地址。

第二步：在重定向的页面地址栏中获取返回的token和所需的用户名等数据并存储